जक्वेरी मोबाइल टूलबार

जक्वेरी मोबाइल टूलबार

टूलबार एलेमेंट आमतौर पर पृष्ठशीर्ष और पृष्ठफुट में रखे जाते हैं - "देखा हुआ" नेविगेशन को अंतर्भूत करने के लिए:

शीर्ष बार

पृष्ठशीर्ष आमतौर पर पृष्ठशीर्ष शीर्षक/LOGO या एक से दो बटन (आमतौर पर होमपेज, विकल्प या खोज बटन) शामिल करता है。

आप पृष्ठशीर्ष में बाईं ओर और/या दायाँ ओर बटन जोड़ सकते हैं。

नीचे दिए गए कोड, पृष्ठशीर्ष शीर्षक टेक्स्ट के बाईं ओर एक बटन जोड़ेगा और दायाँ ओर एक बटन जोड़ेगा:

उदाहरण

<div data-role="header">
  <a href="#" data-role="button">होमपेज</a>
  <h1>मेरे होमपेज को स्वागत करें</h1>
  <a href="#" data-role="button">खोज</a>
</div>

खुद एक प्रयास कीजिए

नीचे दिए गए कोड, पृष्ठशीर्ष शीर्षक के बाईं ओर एक बटन जोड़ेगा:

<div data-role="header">
  <a href="#" data-role="button">होमपेज</a>
  <h1>मेरे होमपेज को स्वागत करें</h1>
</div>

फिर भी, अगर आप <h1> एलेमेंट के बाद बटन लिंक लगाते हैं, तो यह टेक्स्ट के दायाँ ओर दिखाई नहीं देता।पृष्ठशीर्ष शीर्षक के दायाँ ओर बटन जोड़ने के लिए, क्लास नाम "ui-btn-right" निर्दिष्ट करें:

उदाहरण

<div data-role="header">
  <h1>मेरे होमपेज को स्वागत करें</h1>
  <a href="#" data-role="button" class="ui-btn-right"> खोज
</div>

खुद एक प्रयास कीजिए

सूचना:पृष्ठशीर्ष में एक या दो बटन शामिल किए जा सकते हैं, लेकिन पृष्ठफुट में कोई प्रतिबंध नहीं है。

पृष्ठशीर्ष बार

पृष्ठफुट की तुलना में, पृष्ठशीर्ष अधिक लचीला है - यह अधिक उपयोगी और विविध है, इसलिए इसमें जो अधिकार बटन शामिल करने की जरूरत है:

उदाहरण

<div data-role="footer">
  <a href="#" data-role="button">Sina Weibo पर प्रसारित करें</a>
  <a href="#" data-role="button">Tencent Weibo पर प्रसारित करें</a>
  <a href="#" data-role="button">QQ स्पेस पर प्रसारित करें</a>
</div>

खुद एक प्रयास कीजिए

टिप्पणी:पृष्ठभूमि और पाद का शैली अलग है (यह कुछ आंतरिक पैडिंग और खाली जगह को हटा देता है, और बटन नहीं मध्यस्थ स्थानांकित होते हैं)। यदि आप इस समस्या को ठीक करना चाहते हैं, तो पाद में "ui-btn" वर्ग नाम निर्धारित करें:

उदाहरण

<div data-role="footer" class="ui-btn">

खुद एक प्रयास कीजिए

आप पृष्ठ के पाद में बटन को अनुक्रमित या अड़ाव रूप में सहयोग कर सकते हैं:

उदाहरण

<div data-role="footer" class="ui-btn">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-icon="plus">Sina Weibo पर प्रसारित करें</a>
    <a href="#" data-role="button" data-icon="plus">Tencent Weibo पर प्रसारित करें</a>
    <a href="#" data-role="button" data-icon="plus">QQ स्पेस पर प्रसारित करें</a>
  </div>
</div>

खुद एक प्रयास कीजिए

पृष्ठभूमि और पाद को स्थानांकित करना

पृष्ठभूमि और पाद को स्थानांकित करने के तीन तरीके हैं:

  • इनलाइन - मूलभूत। पृष्ठभूमि और पाद पृष्ठ के साथ लाइन में होंगे。
  • स्थिर - पृष्ठ और पाद पृष्ठ के शीर्ष और नीचे बने रहेंगे。
  • फुलस्क्रीन - fixed के समान; पृष्ठ और पाद पृष्ठ के शीर्ष और नीचे बने रहेंगे, लेकिन उसके ऊपर भी। यह थोड़ा दृश्यमान भी है

पृष्ठभूमि और पाद को स्थानांकित करने के लिए data-position अटीब्यूट का उपयोग करें:

इनलाइन स्थानांकन (मूलभूत)

<div data-role="header" data-position="inline"</div>
<div data-role="footer" data-position="inline"</div>

खुद एक प्रयास कीजिए

स्थिर स्थानांकन

<div data-role="header" data-position="fixed"</div>
<div data-role="footer" data-position="fixed"</div>

खुद एक प्रयास कीजिए

यदि आप फुलस्क्रीन स्थानांकन को सक्षम करना चाहते हैं, तो data-position="fixed" का उपयोग करें और इस एलीमेंट को data-fullscreen अटीब्यूट जोड़ें:

फुलस्क्रीन स्थानांकन

<div data-role="header" data-position="fixed" data-fullscreen="true"</div>
<div data-role="footer" data-position="fixed"> data-fullscreen="true"</div>

खुद एक प्रयास कीजिए

सूचना:फुलस्क्रीन के लिए फोटो, इमेज और वीडियो के लिए बहुत अच्छा है。

सूचना:fixed और fullscreen स्थानांतरण के लिए, स्क्रीन टच से हेडर और फुटर छुपाया और दिखाया जाएगा。