जब आप एक डेटा भूमिका बनाने के jQuery में एक साइडबार मोबाइल

Question

आम तौर पर, बनाना = "पेज" तत्व jQuery मोबाइल के साथ, यह पूरे अवलोकन क्षेत्र में ले जाता है। इस कारण से, मुझे समझ में नहीं आता कि साइडबार कैसे बनाएं। मैं निम्नलिखित अनुकरण करने के लिए चाहते हैं, लेकिन स्रोत देखें ज्यादा मदद नहीं करता है:

http://jquerymobile.com/demos/1.0b1/docs/lists/index.html

सूचना है कि जब आप सूची में किसी आइटम पर क्लिक करें, यह एक साइडबार में बदल जाता है और मुख्य में एक और सूची से पता चलता सामग्री क्षेत्र। इसके अतिरिक्त, यदि प्रदर्शन पर्याप्त रूप से संकुचित हो जाता है तो यह केवल मुख्य सामग्री क्षेत्र प्रदर्शित करता है। क्या jQuery मोबाइल में कोई विशेष सुविधा है जो इसकी अनुमति देती है, या इसके पीछे अपारदर्शी जावास्क्रिप्ट और सीएसएस की बड़ी मात्रा है?

Answer 1

बीटा स्प्लिट देखें वाक्य रचना आप "साइडबार" इस ​​तरह नियंत्रित कर सकते हैं भर में देख रहे हैं:

<div data-role="page" id="jqm-home" class="type-home"> 
    <div data-role="content"> 
     <div class="content-secondary"> 
      This would be the sidebar/split view on a tablet, 
      would show up stacked on a mobile device 
     </div><!-- end content-secondary -->  

     <div class="content-primary"> 
      This is the main content. 

      If Tablet device this would be to the right of the above content, 
      if mobile this would be below the above content. 

     </div><!-- end content-primary --> 
    </div><!-- end content --> 
</div><!-- end page --> 

डॉक्स: http://jquerymobile.com/demos/1.0b1/docs/_assets/css/jqm-docs.css

: http://jquerymobile.com/demos/1.0b1/

प्रासंगिक सीएसएस (सही स्रोत देखने के लिए क्लिक करें) एक सभ्य ALA लेख मीडिया क्वेरी के बारे में बात (क्या वे ऐसा करने के लिए प्रयोग किया जाता है): http://www.alistapart.com/articles/responsive-web-design/

Answer 2

आपको इस कोड को जावास्क्रिप्ट फ़ाइल में जोड़ने की आवश्यकता है:

function setPositions(){ 
    var winwidth = $(window).width() 

    if(winwidth >= 750){ 
     $('.content-secondary').css({'float':'left','width':'35%'}); 
     $('.content-primary').css({'margin-left':'36%'}); 
    } 
    else{ 
     $('.content-secondary').css({'float':'none','width':'100%'}); 
     $('.content-primary').css({'margin-left':'0px'}); 
    } 
} 


$(function(){ 
    setDefaultTransition(); 
    $(window).bind("throttledresize", setPositions); 
});