Масив и проверка с Javascript..

kulov · 17 Юли 2010

Здравейте, имам нужда от помощ, тоест ще правя така, че всяко едно меню в сайта ми да може да се затваря и минимизира, тей като менютата ще са около 8, кода ще стане безмислено дълъг, ако за всяко меню пиша един и същ код, само променям имената, та идеята ми е следната, да речем ще се направи един масив, с всички имена на менюта, които могат да се затварят и съответно минимизират, и ще задам на id-то на картинката, която ще служи за затваряне, същото име, каквото ще задам на дива, който може да се затваря/минимизира, и вече една проверка, ако нали избраното име на бутона, съществува в този масив, затваря/минимизира избраният див, ако ли не грешка .. Ако не сте ме разбрали ще дам малък пример с php ..

Код:

<?php
$array=array("left-menu1", "left-menu2", "right-menu1"); //Vsi4ki menuta
$post="left-menu1"; //Tuk 6te e stoinosta na butona, toest imeto na diva..

if (in_array($post, $array))
{
//Funkciq za zatvarqne/minimizirane
}
else
{
//Gre6ka (Toest tova koeto e izbrano za zatvarqne/minimizirane ne su6testvuva
}
?>

thinklinux · 17 Юли 2010

Може и да не съм те разбрал, но няма ли да ти е по-лесно ако на менютата, които искаш да имат тази опция на бутона за минимизиране не дадеш един клас и после към всички елементи на този клас да прекачиш функция, която да крие/показва дъщерния елемент. Не знам дали ме разбра ако има нещо питай

P.S.

" и ще задам на id-то на картинката, която ще служи за затваряне, същото име, каквото ще задам на дива"

id-тата на елементите трябва да са уникални ако го правиш така.

kulov · 17 Юли 2010

thinklinux каза:
Може и да не съм те разбрал, но няма ли да ти е по-лесно ако на менютата, които искаш да имат тази опция на бутона за минимизиране не дадеш един клас и после към всички елементи на този клас да прекачиш функция, която да крие/показва дъщерния елемент. Не знам дали ме разбра ако има нещо питай

P.S.

" и ще задам на id-то на картинката, която ще служи за затваряне, същото име, каквото ще задам на дива"

id-тата на елементите трябва да са уникални ако го правиш така.

Дай примерен код.. Js то ми куца ..

kulov · 17 Юли 2010

Хайде.. няма ли кой да помогне ? Скалъпих тук едно кодче, но не работи..

Код:

    var button=new Array(3);
	
	button[0]="leftmenu1-close";
	//button[1]="leftmenu1-minimize";
	
	button[1]="leftmenu2-close";
	//button[3]="leftmenu2-minimize";
	
	button[2]="leftmenu3-close";
	//button[5]="leftmenu3-minimize";
	
	for (var i=0; i<=button.count(); i++)
	{
		var close=button[i].split("-");
		
	$("#"+button[i]).click(function()
	{
		$("#"+close[0]).hide();
	});
	 
	}

F1r3Fl3x · 17 Юли 2010

Код:

var button=[]; // Не е нужно да се пише new Array() :)
button[0]="leftmenu1-close";
button[1]="leftmenu2-close";
button[2]="leftmenu3-close";
var length = button.length; // Оптимизация на кода. По начина, както го беше направил ти, елементите в масива button се брояха при всяко завъртане на цикъла. Така се броят само веднъж :)
for (var i=0;  i<length;  i++) {  
     $( "#" + button[i] ).click(function(){
         $( "#" + button[i].split( "-" )[0] ).hide();
     });
}

kulov · 18 Юли 2010

F1r3Fl3x каза:

Код:

var button=[]; // Не е нужно да се пише new Array() :)
button[0]="leftmenu1-close";
button[1]="leftmenu2-close";
button[2]="leftmenu3-close";
var length = button.length; // Оптимизация на кода. По начина, както го беше направил ти, елементите в масива button се брояха при всяко завъртане на цикъла. Така се броят само веднъж :)
for (var i=0;  i<length;  i++) {  
     $( "#" + button[i] ).click(function(){
         $( "#" + button[i].split( "-" )[0] ).hide();
     });
}

Същата работа.. не се затваря..

F1r3Fl3x · 18 Юли 2010

Амии тоз ицелия код, който ти дадох направи ли го да тръгва след като зареди DOM-а на страницата ?

Код:

$(document).ready(function(){
// тук сложи кода
});

kulov · 18 Юли 2010

Да, то това не е единственият код от js то на страницата .. не е от това ..

Едит : Най-странното е, че като алертна резултата в button извежда undefined :idea:

fenixpz · 18 Юли 2010

Не знам да ли съм те разбрал точно, но ето нагледен пример, който може да ти помогне:

Код:

$(function() {
			$('.menu .close').click(function() {
				$(this).parent().hide(200);
			});
		});

body:

Код:

<div class="menu">menu1 <span class="close">close</span></div>
	<div class="menu">menu2 <span class="close">close</span></div>
	<div class="menu">menu3 <span class="close">close</span></div>

Зададено е при кликване на close да се затваря съответния елемент съдържащ кликнатия span. В твоя случай може да е див с картинка и т.н.

kulov · 18 Юли 2010

Хм, нещо не ми се получава, ето кода ми

Код:

<script type="text/javascript">
$(function()
{
	$("#row1").sortable({
			connectWith: '.connectedSortable',
			placeholder: 'ui-state-highlight'
		}).disableSelection();

$('.menu .close').click(function() {
            $(this).parent().hide(200);
}); 
});
</script>

Така това ми е Js Кода, а ето го и html кода, няма да го давам целия, защото повечето неща не са нужни..

Код:

 <div class="menu">  <div id="leftmenu1" class="connectedSortable"> 
           <div class="left-menu1-top"> 
               <div class="left-menu1-top-info">
                   <a href="#">Меню с връзки</a>
                   <img src="images/menu1/icons/close.png" alt="" style="margin:9px 0 0 0;" class="close"/>
                   <img src="images/menu1/icons/minimize.png" alt="" id="leftmenu1-minimize"/>
                   </div>
          </div> 
           <div class="clear"></div>
          <div class="left-menu1-center">
          
          </div> 
          <div class="clear"></div>
          <div class="left-menu1-bottom"></div>
        </div> </div>
        

        
        <div class="menu"> <div id="leftmenu2" class="connectedSortable"> 
           <div class="left-menu2-top">  
               <div class="left-menu2-top-info">
                   <a href="#">Меню с връзки</a>
                   <img src="images/menu1/icons/close.png" alt="" style="margin:9px 0 0 0;" class="close"/>
                   <img src="images/menu1/icons/minimize.png" alt="" id="leftmenu2-minimize"/>
                   </div>
          </div> 
           <div class="clear"></div>
          <div class="left-menu2-center">
          
          </div> 
          <div class="clear"></div>
          <div class="left-menu2-bottom"></div>
        </div> </div>

fenixpz · 18 Юли 2010

Проблемът е там, че не си сложил .close. А за да се затвори цялото меню трябва потребителят да кликне на .close(което може да е картинка, както ти си избереш). И не слагай .close в др. дивове, а направо в .menu.
<div class="menu"><div class="top"></div>... <div class="close"></div></div>

kulov · 18 Юли 2010

Забележи, че съм задал class="close" на картинката, така нестава, пробвах сега да сложа картинката в <div class="close">kartinka</div> но пак нищо ..

fenixpz · 18 Юли 2010

Да, но трябва класът close да не е разположен в др. елементи, защото в js-то е зададено прекият родител т.е. <div class="menu">...<div class="close"></div></div> да се затваря, ако напишеш
<div class="menu"><div class="top"><div class="close"></div></div>...</div> ще се затваря .top вместо цялото меню.
Дано си ме разбрал :wink:

kulov · 18 Юли 2010

Да, разбрах те, но в случая не мога да редактирам кода по този начин.. няма ли начин да се укаже пълен път до родителя на класа или нещо от сорта, тей като класа close се намира в няколко под дива ..

fenixpz · 18 Юли 2010

Ами много просто: пишеш .parent(), толкова пъти колкото е разположен в друг див. Пример:

Код:

$('.menu .close').click(function() {
				$(this).parent().parent().hide(200);
		 });

body:

Код:

<div class="menu">menu1 <span class="top">top <span class="close">close</span></span></div>

Надявам се да се получи

kulov · 18 Юли 2010

Добре, стана, но по този начин как ще стане за минимизиране ? Js кода в момента е този :

Код:

<script type="text/javascript">
$(function()
{
	$("#row1").sortable({
			connectWith: '.connectedSortable',
			placeholder: 'ui-state-highlight'
		}).disableSelection();

$('.connectedSortable .close').click(function() {
            $(this).parent().parent().parent().hide(200);
}); 

});
</script>

Тук проблема с минимизирането е следният, това, което ще трябва да се затвори, е в по-долен див, от иконата за минимизиране ето html кода ..

<div id="leftmenu1" class="connectedSortable">
<div class="left-menu1-top">
<div class="left-menu1-top-info">
<a href="#">Меню с връзки</a>
<div class="close"><img src="images/menu1/icons/close.png" alt="" style="margin:9px 0 0 0;" /></div>
<div class="minimize"><img src="images/menu1/icons/minimize.png" alt=""/></div>
</div>
</div>
<div class="clear"></div>
<div class="left-menu1-center">

</div>
<div class="clear"></div>
<div class="left-menu1-bottom"></div>
</div>

fenixpz · 18 Юли 2010

jQuery:

Код:

$(function() {
			$('.menu .min').click(function() {
				$(this).nextAll('.cont').hide(1000);
			});
		});

body:

Код:

<div class="menu">
		<div class="min">Minimize</div>	
		
		<div class="cont">Content to be minimized</div>
		
		<div>another content</div>
	</div>

:idea:

kulov · 18 Юли 2010

Нещо не става ?

Код:

$('.connectedSortable .minimize').click(function() {
	        $(this).nextAll('.left-menu1-center').toggle();
	        $(this).nextAll('.left-menu1-bottom').toggle();
});

Това е кода

fenixpz · 18 Юли 2010

Ами не става, защото са в различни дивове.Пример:
body:

Код:

<div class="menu">
		<div><div class="min">Minimize</div></div>
		
		<div>another content</div>
		
		<div class="cont">Content to be minimized</div>
		
		
	</div>

Тук ако напишем $('.menu .min').click(function() {
$(this).nextAll('.cont').hide(1000);
});
няма да стане нищо. Това е подобно на директориите в компютъра ти.
Но, ако напишем:

Код:

$(function() {
			$('.menu .min').click(function() {
				$(this).parent().nextAll('.cont').hide(1000);
			});
		});

Ще се получи. В твоя случай, ако не се лъжа, трябва да използваш два пъти .parent().

kulov · 18 Юли 2010

Добре, тей като аз ще минимизирам различни дивове, с различни имена, как ще стане ? Нали на всяко меню си има картинка за минимизиране, и това, което ще се минимизира се казва така

.left-menu1-center и там където е 1-цата е номера на менюто... за момента са 3

Масив и проверка с Javascript..

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered