VPF::динамическое меню - Форум программистов

implements

Дата 2.8.2011, 13:00 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 210
Регистрация: 20.7.2010

Репутация: нет
Всего: нет

есть меню так выглядит пример

Код


  <div id="myslidemenu" class="jqueryslidemenu">
    <ul>
      <li><a href="#">Folder 2</a>
        <ul>
          <li><a href="#">Sub Item 2.1</a></li>
          <li><a href="#">Folder 2.1</a>
            <ul>
              <li><a href="#">Sub Item 2.1.1</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>

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

на всякий случай приведу js код

Код


var arrowimages={down:['downarrowclass', '../images/down.gif', 23], right:['rightarrowclass', '../images/right.gif']}

var jqueryslidemenu={

animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds

buildmenu:function(menuid, arrowsvar){
    jQuery(document).ready(function($){
        var $mainmenu=$("#"+menuid+">ul")
        var $headers=$mainmenu.find("ul").parent()
        $headers.each(function(i){
            var $curobj=$(this)
            var $subul=$(this).find('ul:eq(0)')
            this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
            this.istopheader=$curobj.parents("ul").length==1? true : false
            $subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
            $curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
                '<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
                +'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
                + '" style="border:0;" />'
            )
            $curobj.hover(
                function(e){
                    var $targetul=$(this).children("ul:eq(0)")
                    this._offsets={left:$(this).offset().left, top:$(this).offset().top}
                    var menuleft=this.istopheader? 0 : this._dimensions.w
                    menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
                    $targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
                },
                function(e){
                    var $targetul=$(this).children("ul:eq(0)")
                    $targetul.slideUp(jqueryslidemenu.animateduration.out)
                }
            ) //end hover
        }) //end $headers.each()
        $mainmenu.find("ul").css({display:'none', visibility:'visible'})
    }) //end document.ready
}
}

//build menu with ID="myslidemenu" on page:
jqueryslidemenu.buildmenu("myslidemenu", arrowimages)

Это сообщение отредактировал(а) implements - 2.8.2011, 13:30

mark2011

Дата 2.8.2011, 15:01 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 174
Регистрация: 28.6.2011

Репутация: нет
Всего: 2

Это дерево, добавление итемов осуществляется при помощи рекурсивной функции.

implements

Дата 3.8.2011, 05:44 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 210
Регистрация: 20.7.2010

Репутация: нет
Всего: нет

Цитата(mark2011 @ 2.8.2011, 15:01)

Это дерево, добавление итемов осуществляется при помощи рекурсивной функции.

Могли бы Вы привести более менее подробный пример. Может в сети есть пример? находил кучу, но только статическое меню, когда известно сколько подпунктов удет

mcTep

Дата 5.8.2011, 10:14 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 203
Регистрация: 25.2.2009

Репутация: 3
Всего: 6

http://www.linkexchanger.su/2008/49.html

http://www.google.ru/#q=jquery+tree+ajax

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »