Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: помогите разобраться с селекторами

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (2): [1] 2 »   

> Без описания
Поиск в теме | Версия для печати
3d_killer
Отправлено: 02 Сентября, 2011 - 16:02:21
Post Id



Участник


Покинул форум
Сообщений всего: 1916
Дата рег-ции: Апр. 2011  
Откуда: Ростов-на-Дону


Помог: 21 раз(а)
CODE (htmlphp):
скопировать код в буфер обмена
  1. $(this).find('span').click(function()
  2.                         {
  3.                                 if ($(this).hasClass('show'))
  4.                                         {
  5.                                         $(this).removeClass('show').addClass('hide');
  6.                                         $(this).next().next('ul').slideUp(400);
  7.                                         }
  8.                                 else
  9.                                         {
  10.                                         $(this).removeClass('hide').addClass('show');
  11.                                         $(this).next().next('ul').slideDown(400);      
  12.                                         }
  13.                         }

есть такой обработчик при нажатии скрывает часть меню и открывает, но есть вложенные элементы в списке которые то же имеют свойство открываться закрываться, мне нужно чтобы при сворачивании элемента верхнего уровня сворачивались и вложенные элементы как ни пробовал не работает
сам список для примера:
CODE (html):
скопировать код в буфер обмена
  1. <ul class="tree">
  2. <li><div class="first"></div><a href="">1</a></li>
  3. <li><span class='show'></span><a href="">2</a>
  4.         <ul>
  5.         <li><a href="">2.1</a></li>
  6.         <li class="last"><span class='show'></span><a href="">2.2</a>
  7.                 <ul>
  8.                         <li><a href="">2.2.1</a></li>
  9.                         <li><a href="">2.2.2</a></li>
  10.                         <li><a href="">2.2.3</a></li>
  11.                         <li><a href="">2.2.4</a></li>
  12.                 </ul>
  13.         </li>
  14.     </ul>
  15. </li>
  16. <li class="last"><a href="">3</a></li>
  17. </ul>


вот мне нужно чтобы при нажатии на 2 свернулся и 2.2 то же.
 
My status
 Top
LEONeso
Отправлено: 02 Сентября, 2011 - 19:01:26
Post Id



Посетитель


Покинул форум
Сообщений всего: 499
Дата рег-ции: Янв. 2010  
Откуда: Россия, Москва


Помог: 1 раз(а)
В коде написано:
CODE (javascript):
скопировать код в буфер обмена
  1. $(this).find('span').click(function()

jQuery(этот объект). в нем ищи элемент ('span'). при событии клик (запусти анонимную функцию()

CODE (javascript):
скопировать код в буфер обмена
  1. if ($(this).hasClass('show'))

условие: если (jQuery(этот объект).имеет класс('show')) ... выполняй

CODE (javascript):
скопировать код в буфер обмена
  1. $(this).removeClass('show').addClass('hide');
  2. $(this).next().next('ul').slideUp(400);

jQuery(этот объект).удалить класс('show').добавить класс('hide');
jQuery(этот объект).след объект().след объект('ul').свернуть элемент(скорость 400 миллисекунды);

CODE (javascript):
скопировать код в буфер обмена
  1.    else
  2.                                         {
  3.                                         $(this).removeClass('hide').addClass('show');
  4.                                         $(this).next().next('ul').slideDown(400);

иначе
jQuery(этот объект).удалить класс('hide').добавить класс('show');
jQuery(этот объект).след объект().след объект('ul').развернуть элемент(скорость 400 миллисекунды);

Совет: Используй справочник "Карту функций"


-----
Для некоторых лучший способ написать что-нибудь осмысленное - это сесть _опой на клавиатуру.
 
 Top
DeepVarvar Супермодератор
Отправлено: 02 Сентября, 2011 - 20:05:01
Post Id



Активный участник


Покинул форум
Сообщений всего: 10377
Дата рег-ции: Дек. 2008  
Откуда: Альфа Центавра


Помог: 353 раз(а)
3d_killer пишет:
свойство открываться закрываться


CODE (javascript):
скопировать код в буфер обмена
  1. $(function(){
  2.         $("#tree ul ul").hide();
  3.         $("#tree ul li a").click(function(){
  4.                 $(this).parent().find("ul").eq(0).toggle();
  5.                 return false;
  6.                 });
  7.         });

CODE (html):
скопировать код в буфер обмена
  1. <div id="tree">
  2.   <ul>
  3.     <li>
  4.       <a href="#">111</a>
  5.       <ul>
  6.         <li><a href="#">222</a></li>
  7.       </ul>
  8.     </li>
  9.   </ul>
  10. </div>

Любая вложенность и без асяких ваших классов-хренасов...

(Отредактировано автором: 02 Сентября, 2011 - 20:06:10)

 
 Top
LEONeso
Отправлено: 02 Сентября, 2011 - 22:12:53
Post Id



Посетитель


Покинул форум
Сообщений всего: 499
Дата рег-ции: Янв. 2010  
Откуда: Россия, Москва


Помог: 1 раз(а)
DeepVarvar, хороший пример, но в любом деле нужен опыт, все учатся на ошибках, некоторые на своих =) та лан... большинство... ну ладно-ладно ... все.


-----
Для некоторых лучший способ написать что-нибудь осмысленное - это сесть _опой на клавиатуру.
 
 Top
DeepVarvar Супермодератор
Отправлено: 02 Сентября, 2011 - 22:45:09
Post Id



Активный участник


Покинул форум
Сообщений всего: 10377
Дата рег-ции: Дек. 2008  
Откуда: Альфа Центавра


Помог: 353 раз(а)
LEONeso точно - ВСЕ учатся ТОЛЬКО на своих ошибках... И это странно...
 
 Top
3d_killer
Отправлено: 05 Сентября, 2011 - 07:00:54
Post Id



Участник


Покинул форум
Сообщений всего: 1916
Дата рег-ции: Апр. 2011  
Откуда: Ростов-на-Дону


Помог: 21 раз(а)
Спасибо большое, разобралсо!
 
My status
 Top
3d_killer
Отправлено: 05 Сентября, 2011 - 09:33:02
Post Id



Участник


Покинул форум
Сообщений всего: 1916
Дата рег-ции: Апр. 2011  
Откуда: Ростов-на-Дону


Помог: 21 раз(а)
Меню сделал но как сделать сохранение состояния с помощью кукисов или где почитать как ставить индексы и потом проверять?
 
My status
 Top
DeepVarvar Супермодератор
Отправлено: 05 Сентября, 2011 - 10:27:33
Post Id



Активный участник


Покинул форум
Сообщений всего: 10377
Дата рег-ции: Дек. 2008  
Откуда: Альфа Центавра


Помог: 353 раз(а)
Да, в куки пишите, и читайте с помощью того же jquery...
 
 Top
3d_killer
Отправлено: 05 Сентября, 2011 - 10:42:09
Post Id



Участник


Покинул форум
Сообщений всего: 1916
Дата рег-ции: Апр. 2011  
Откуда: Ростов-на-Дону


Помог: 21 раз(а)
а примерчика не найдется?
 
My status
 Top
DeepVarvar Супермодератор
Отправлено: 05 Сентября, 2011 - 10:48:15
Post Id



Активный участник


Покинул форум
Сообщений всего: 10377
Дата рег-ции: Дек. 2008  
Откуда: Альфа Центавра


Помог: 353 раз(а)
Пример увеличения текста на странице:
CODE (javascript):
скопировать код в буфер обмена
  1. $(function() {
  2.   var flSize = $.cookie("flsize");
  3.   if (flSize != "") {
  4.     $("#myPtext").attr("style","font-size: " + flSize + "px");
  5.     $("#mysize option:nth-child(" + (flSize - 11) + ")").attr("selected", "selected");
  6.     }
  7.   });
  8.  
  9. $(function() {
  10.   $("#mysize").change(function() {
  11.     var newSize = $(this + "option:selected").val();
  12.     $("#myPtext").attr("style","font-size: " + newSize + "px");
  13.     var options = { path: '/', expires: 100 };
  14.     $.cookie("flsize", newSize, options);
  15.     return false;
  16.     });
  17.   });


Приблуда в аттаче Вправо
Скачать файл: jquery.cookie.js
Скачан раз: 80
 
 Top
3d_killer
Отправлено: 05 Сентября, 2011 - 11:37:25
Post Id



Участник


Покинул форум
Сообщений всего: 1916
Дата рег-ции: Апр. 2011  
Откуда: Ростов-на-Дону


Помог: 21 раз(а)
CODE (htmlphp):
скопировать код в буфер обмена
  1. $('#menu').each(function(i)
  2.         {
  3.                 if ($.cookie('submenuMark-' + i)) {  // If index of submenu is marked in cookies:
  4.                         $(this).prev('ul').show().removeClass('show').addClass('hide'); // Show it (add apropriate classes)
  5.                 }else {
  6.                         $(this).prev('ul').hide().removeClass('hide').addClass('show'); // Hide it
  7.                 }


CODE (htmlphp):
скопировать код в буфер обмена
  1. {       var this_i = $('#menu span').index($(this).next());
  2.                                 if ($(this).hasClass('show'))
  3.                                 //если текущий элемент имеет класс show то
  4.                                         {
  5.                                         $(this).removeClass('show').addClass('hide');
  6.                                         //этому элементу добавляем класс hide и удаляем класс show
  7.                                         $(this).next().next('ul').slideUp(400);
  8.                                         $(this).next().next('ul').find('span').removeClass('show').addClass('hide').next().next('ul').slideUp(400);
  9.                                         cookieDel(this_i);
  10.                                         //текущий элемент выбираем следующий тег и следующий ul раскрываем
  11.                                         }
  12.                                 else
  13.                                         {
  14.                                         //если не имеет класса show то 
  15.                                         $(this).removeClass('hide').addClass('show');
  16.                                         //то удаляем класс hide и добавляем класс show
  17.                                         $(this).next().next('ul').slideDown(400);      
  18.                                         //и открываем подчиненный элемент ul со скоростью 0,4 секунды
  19.                                         cookieSet(this_i);
  20.                                         }


CODE (htmlphp):
скопировать код в буфер обмена
  1. function cookieSet(index) {
  2.         $.cookie('submenuMark-' + index, 'opened', {expires: null, path: '/'}); // Set mark to cookie (submenu is shown):
  3. }
  4. function cookieDel(index) {
  5.         $.cookie('submenuMark-' + index, null, {expires: null, path: '/'}); // Delete mark from cookie (submenu is hidden):
  6. }


тут пример без индекса вот сделал что то подобное но почемуто не пашет
 
My status
 Top
3d_killer
Отправлено: 05 Сентября, 2011 - 15:50:39
Post Id



Участник


Покинул форум
Сообщений всего: 1916
Дата рег-ции: Апр. 2011  
Откуда: Ростов-на-Дону


Помог: 21 раз(а)
может кто подскажет как эти индексы проставить что открыто что закрыто и как их потом запросить чтобы открыть или закрыть определенные вкладки?
 
My status
 Top
LEONeso
Отправлено: 05 Сентября, 2011 - 19:40:25
Post Id



Посетитель


Покинул форум
Сообщений всего: 499
Дата рег-ции: Янв. 2010  
Откуда: Россия, Москва


Помог: 1 раз(а)
3d_killer, давайте так, вы нам:
1. html пример
2. ваш JavaScript (под пример)
3. что не работает
4. как должно работать


Потом уже можно будет всё это чудо скопировать и посмотреть, а так жевать сухой код, результата трудно добиться.

(Отредактировано автором: 05 Сентября, 2011 - 19:42:04)



-----
Для некоторых лучший способ написать что-нибудь осмысленное - это сесть _опой на клавиатуру.
 
 Top
3d_killer
Отправлено: 06 Сентября, 2011 - 13:24:53
Post Id



Участник


Покинул форум
Сообщений всего: 1916
Дата рег-ции: Апр. 2011  
Откуда: Ростов-на-Дону


Помог: 21 раз(а)
полный код:
CODE (htmlphp):
скопировать код в буфер обмена
  1. <script type="text/javascript">
  2. $(document).ready(function()
  3. {
  4.         $('#menu').each(function(i)
  5.         {
  6.                 if ($.cookie('submenuMark-' + i))
  7.                         {
  8.                                 $(this).find('span').removeClass('hide').addClass('show');
  9.                         }
  10.                 else
  11.                         {
  12.                                 $(this).find('span').removeClass('show').addClass('hide');
  13.                         }
  14.                        
  15.                 var tree=$(this);
  16.                 tree.addClass('tree').children('li:first').prepend('<div class="first"></div>');
  17.                 tree.children('li:last').addClass('last');
  18.                 tree.find('ul').each(function()
  19.                                 {
  20.                                 $(this).children('li:last').addClass('last');
  21.                                 });
  22.                 tree.find('li:has(ul)').children('a').before('<span class="show"></span>');
  23.                 tree.find('span').removeClass('show').addClass('hide').next().next('ul').hide();
  24.                 tree.find('span').click(function()
  25.                         {
  26.                                 var this_i = $('ul#menu').index($(this).next());
  27.                                 if ($(this).hasClass('show'))
  28.                                         {
  29.                                         $(this).removeClass('show').addClass('hide');
  30.                                         $(this).next().next('ul').slideUp(400);
  31.         $(this).next().next('ul').find('span').removeClass('show').addClass('hide').next().next('ul').slideUp(400);
  32.                                         cookieSet(this_i);
  33.                                         }
  34.                                 else
  35.                                         {
  36.                                         $(this).removeClass('hide').addClass('show');
  37.                                         $(this).next().next('ul').slideDown(400);
  38.                                         cookieDel(this_i);                                     
  39.                                         }
  40.                         }
  41.                 )
  42.         });
  43. });
  44. function cookieSet(index) {
  45.  $.cookie('submenuMark-' + index, 'opened', {expires: null, path: '/'});
  46. }
  47. function cookieDel(index) {
  48.  $.cookie('submenuMark-' + index, null, {expires: null, path: '/'});
  49. }
  50. </script>


большая часть кода идет это внешний вид вобщем, пытаюсь добавить кукисы вроде как проставляются но самая верхняя обработка условие не работает что открыть что закрыть, с jquery.cookies не работал и поэтому не пойму принцип (вроде как элементы ul должны пронумероваться и записываться в кукисы но как с этим точно работать так инфы и не нашел).
(Добавление)
а забыл:

CODE (htmlphp):
скопировать код в буфер обмена
  1. <ul id="menu">
  2. <li><a href="">1</a></li>
  3. <li><span class='show'></span><a href="">2</a>
  4.         <ul>
  5.         <li><a href="">2.1</a></li>
  6.         <li class="last"><span class='show'></span><a href="">2.2</a>
  7.                 <ul>
  8.                 <li><a href="">2.2.1</a></li>
  9.                 <li><a href="">2.2.2</a></li>
  10.                 <li><a href="">2.2.3</a></li>
  11.                 <li><a href="">2.2.4</a></li>
  12.                 </ul>
  13.         </li>
  14.     </ul>
  15. </li>
  16. <li><a href="">3</a></li>
  17. </ul>

(Добавление)
и css
CODE (htmlphp):
скопировать код в буфер обмена
  1. <style type="text/css">
  2. .tree ul{
  3.                         margin:-2px 0 0 0px; padding:0px;
  4.                 }
  5. .tree li{
  6.                         list-style:none;
  7.                         margin-left:0px;
  8.                         background: url("img/line.gif") no-repeat scroll 0 11px transparent;
  9.                 border-left: 1px dotted #838383;
  10.                 list-style: none outside none;
  11.                         padding-left: 18px;
  12.                 }
  13. .tree li li{
  14.                         list-style:none;
  15.                         margin-left:8px;
  16.                 }
  17. .tree a {
  18.         font-family:Verdana, Geneva, sans-serif;
  19.         font-size:14;
  20.         color:#333333;
  21.                         text-decoration:none;
  22.                         background:url("img/folder.png") no-repeat;
  23.                         padding-left:20px;
  24.                 }
  25. .tree .show{
  26.          background: url("img/minus.png") no-repeat scroll left 4px transparent;
  27.    border: 0 none;
  28.    display: block;
  29.    float: left;
  30.    height: 16px;
  31.    margin-left: -26px;
  32.    padding: 0;
  33.    width: 16px;
  34.         }
  35. .tree .hide{
  36.          background: url("img/plus.png") no-repeat scroll left 4px transparent;
  37.    border: 0 none;
  38.    display: block;
  39.    float: left;
  40.    height: 16px;
  41.    margin-left: -26px;
  42.    padding: 0;
  43.    width: 16px;
  44.         }      
  45. .tree .last{
  46.             background: url("img/line_last.gif") no-repeat scroll 0 top transparent;
  47.    border: medium none;
  48.    padding-left: 19px;}
  49. .tree .first {
  50.    background-color: #FFFFFF;
  51.    float: left;
  52.    height: 10px;
  53.    margin-left: -20px;
  54.    width: 2px;
  55. }
  56.        
  57. </style>

(Отредактировано автором: 06 Сентября, 2011 - 13:28:00)

 
My status
 Top
LEONeso
Отправлено: 06 Сентября, 2011 - 17:06:58
Post Id



Посетитель


Покинул форум
Сообщений всего: 499
Дата рег-ции: Янв. 2010  
Откуда: Россия, Москва


Помог: 1 раз(а)
3d_killer, Cookie в jQuery - это плагин, если его не подключить, то как будет работать скрипт? плюс пример DeepVarvar шустрого древовидного меню с помощью jQuery достойно внимания т.к. оно работает и красиво выглядит.

зы: официальные примеры.

(Отредактировано автором: 06 Сентября, 2011 - 17:20:14)



-----
Для некоторых лучший способ написать что-нибудь осмысленное - это сесть _опой на клавиатуру.
 
 Top
Поиск в теме | Версия для печати
Страниц (2): [1] 2 »
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« JavaScript & VBScript »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB