Функция выбора JQuery для слайда и возможного создания

Question

Я построил систему меню, которая скользит, как панели iOS.

Содержимое загружается в следующую панель через ajax по щелчку пользователя, а затем скользит к нему.Было бы возможно, хотя бы вместо того, чтобы иметь уже созданную серию панелей, т.е.# panel1 # panel2 # panel3 и т. д. Чтобы создать этот эффект без такой необходимости.

Таким образом, если пользователь нажимает на ссылку, запускается ajax, атрибут hash или rel определяет, какой сценарий запускается, а затемпосле этого создается целая панель и перемещается к.

Вот некоторый код.

<div id="side">
<div class="panelcontainer">

<div id="sidepanel1" class="sidewrapper">


<div class="panelhead"></div>Blah <a href="#" onClick="slide(this); return false;">Blah</a>

</div>

</div>


<div class="panelcontainer" style="display:none;">

<div id="sidepanel2" class="sidewrapper">


<div class="panelhead"></div>Blah blah

</div>

</div>
</div>

Следовательно, идея состоит в том, что sidepanel2 фактически не существует, но создается на загрузке ajax сразу послеsidepanel1.

Это может быть глупо сложный способ сделать это.Если у кого-то есть идея получше, я весь в ушах.Фундаментальная функция - навигационная система, такая как iOS, использующая ajax для загрузки контента в панели,

Есть идеи?

Изумительно

Answer 1

Уважая вашу разметку, вы можете сделать это так:

function slide(link){
   //Make the ajax call to get the content, could be anyway you want
   $.ajax({
      ...
      success: function(body){
          createPanelBody(body);
      }
   });
   //This function creates the panelBody div (if it doesn't exist) and fills it with content
   function createPanelBody(body){
       $panelBody = $(link).siblings(".panelBody");
       if($panelBody.size() == 0){ //If panelBody doesn't exist..              
          $panelBody = $('<div class="panelBody" />');  //We create it dynamically
          $panelBody.appendTo($(link).parent());  //And make it a sibling of panelHead
       }
       $panelBody.html(body); //Fill the div with the requested content
       //$panelBody.slideDown(); //Uncomment this line if you want to slide the panel
   }  

}

Как видите, мы динамически создаем div с классом "panelBody" (если он еще не существует) и заполняем его содержимым ajax, все в зависимости от того, по какой ссылке вы щелкнули.

Я надеюсь, что хорошо понял, что вам нужно. Приветствия