jquerymobile: हैडर

Question

में ड्रॉपडाउन मेनू मैं एक JQM webapp बनाने रहा हूँ और शीर्षक के लटकती मेनू जोड़ने के लिए निम्नलिखित प्रभाव

---------------------------------- 
[Menu1] Page Title  [Menu2]  
---------------------------------- 

JQM के लिए लटकती विजेट का कोई भी उदाहरण प्राप्त करने की आवश्यकता?

Answer 1

यहाँ कोड मैं इस के लिए लिखा था के साथ एक jsFiddle है।

Answer 2

jQuery मोबाइल के अंतर्निहित चयन मेनू के आधार पर नमूना के लिए यह jsFiddle देखें। मुझे अतीत में ऐसा कुछ करना पड़ा ... यह बिल्कुल सही है और संभवतः सभी उपकरणों पर सही ढंग से प्रस्तुत नहीं होगा, लेकिन यह मेरे मामले में ठीक काम करता है।

Answer 3

jQuery मोबाइल 1.2 डॉक्स बल्कि एक चयन की तुलना में एक बटन से एक मेनू बनाने के लिए पॉपअप विजेट का उपयोग करने का एक उदाहरण देता हूँ:

http://jquerymobile.com/branches/popup-widget/docs/pages/popup/index.html

<a href="#popupMenu" data-rel="popup" data-role="button" data-inline="true" data-transition="fade">Menu</a> 

<div data-role="popup" id="popupMenu" data-overlay-theme="b"> 
    <ul data-role="listview" data-inset="true" style="width:180px;" data-theme="b"> 
     <li><a data-rel="popup" href="#popupMenuLevel1">Add</a></li> 
     <li><a data-rel="popup" href="#popupMenuLevel1">Edit</a></li> 
     <li><a data-rel="popup" href="#popupMenuLevel1">Manage</a></li> 
     <li><a data-rel="popup" href="#popupMenuLevel1">Delete</a></li> 
    </ul> 
</div> 

<div data-role="popup" id="popupMenuLevel1" data-overlay-theme="b"> 
    <ul data-role="listview" data-inset="true" style="width:180px;" data-theme="b"> 
    <li><a data-rel="popup" href="#popupMenuLevel2">Remove</a></li> 
    <li><a data-rel="popup" href="#popupMenuLevel2">Undo</a></li> 
    <li><a data-rel="popup" href="#popupMenuLevel2">Splice</a></li> 
    <li><a data-rel="popup" href="#popupMenuLevel2">Reticulate</a></li> 
    </ul> 
</div> 

<div data-role="popup" id="popupMenuLevel2" data-overlay-theme="b"> 
    <ul data-role="listview" data-inset="true" style="width:180px;" data-theme="b"> 
     <li><a href="index.html">Basics</a></li> 
     <li><a href="options.html">Options</a></li> 
     <li><a href="methods.html">Methods</a></li> 
     <li><a href="events.html">Events</a></li> 
    </ul> 
</div> 

Answer 4

JQuery मोबाइल 1.3 में इस समस्या के लिए नमूना बनाया गया है।

http://view.jquerymobile.com/1.3.0/docs/widgets/popup/

<a href="#popupMenu" data-rel="popup" data-role="button" data-inline="true" data-transition="slidedown" data-icon="gear" data-theme="e">Actions...</a> 
<div data-role="popup" id="popupMenu" data-theme="d"> 
    <ul data-role="listview" data-inset="true" style="min-width:210px;" data-theme="d"> 
     <li data-role="divider" data-theme="e">Choose an action</li> 
     <li><a href="#">View details</a></li> 
     <li><a href="#">Edit</a></li> 
     <li><a href="#">Disable</a></li> 
     <li><a href="#">Delete</a></li> 
    </ul> 
</div> 

Answer 5

आप हेडर बार में उदाहरण के लिए 5 बटन और फिर ड्रॉपडाउन लेन-देन के साथ नेविगेशन बार बटन में से हर एक पॉपअप मेनू के लिए सेट के साथ नेविगेशन बार ग्रिड मेनू स्थापित करना चाहिए।