Блог

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

Содержимое загружается в следующую панель через ajax по щелчку пользователя, а затем переходит к ней. Было бы возможно, хотя вместо того, чтобы иметь серию панелей, уже созданных ie. #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 для загрузки содержимого в панели,

Есть идеи?

Великолепно

Учитывая вашу разметку, вы могли бы сделать это следующим образом:

 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, все зависит от того, по какой ссылке вы нажали.

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