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

मोबाइल अनुप्रयोग टैच ऑपरेशन की सुविधा पर बनाए गए हैं。

jQuery Mobile में बटन बनाना

jQuery Mobile में बटन तीन तरीकों से बनाए जा सकते हैं:

  • <button> एलीमेंट का उपयोग करना
  • <input> एलीमेंट का उपयोग करना
  • data-role="button" का उपयोग करते हुए <a> एलीमेंट

<button>

<button>बटन</button>

खुद आयात करें

<input>

<input type="button" value="बटन">

खुद आयात करें

<a>

<a href="#" data-role="button">बटन</a>

खुद आयात करें

सूचना:jQuery Mobile में बटन को स्वचालित रूप से स्टाइल दिया जाता है, जो उनकी गतिशील और उपयोगीता को बढ़ाता है। हम आपको सिफारिश करते हैं कि आप पृष्ठों के बीच लिंक करने के लिए data-role="button" के <a> एलीमेंट का उपयोग करें, और <input> या <button> एलीमेंट का उपयोग फॉर्म सबमिट के लिए करें。

नेविगेशन बटन

अगर आप पृष्ठ को बटन के माध्यम से लिंक करना चाहते हैं, तो data-role="button" के <a> एलीमेंट का उपयोग करें:

वर्णन

<a href="#pagetwo" data-role="button">दूसरे पृष्ठ पर जाएँ</a>

खुद आयात करें

इंलाइन बटन

मूलभूत रूप से, बटन पूरे स्क्रीन की चौड़ाई को ले लेते हैं। अगर आपको बटन को उसके सामग्री के अनुसार अनुकूलित करना है, या अगर आप दो या अधिक बटन को एक साथ दिखाना चाहते हैं, तो data-inline="true" जोड़ें:

वर्णन

<a href="#pagetwo" data-role="button" data-inline="true">दूसरे पृष्ठ पर जाएँ</a>

खुद आयात करें

समूह बटन

jQuery Mobile बटन को समूहबद्ध करने के लिए एक सरल तरीका प्रदान करता है。

data-role="controlgroup" गुण को data-type="horizontal|vertical" के साथ साथ उपयोग करें, ताकि बटन को आड़ा या ऊर्ध्व रूप से समूह बनाया जा सके:

वर्णन

<div data-role="controlgroup" data-type="horizontal">
  <a href="#anylink" data-role="button">बटन 1</a>
  <a href="#anylink" data-role="button">बटन 2</a>
  <a href="#anylink" data-role="button">बटन 3</a>
</div>

खुद आयात करें

सूचना:मूलभूत रूप से, समग्र बटन ऊर्ध्व-समूह बनाते हैं, जो एक-दूसरे से बाहरी किनारा और खाली जगह नहीं रखते। और केवल पहला और अंतिम बटन को गोलाकार किया जाता है, जिससे समग्र बनाए गए बटन का बहुत ही सुंदर आकार बनता है。

वापस जाने वाला बटन

वापस जाने वाले बटन को बनाने के लिए, data-rel="back" गुण का उपयोग करें (अंक के href मान को नज़रअंदाज़ कर देगा):

वर्णन

<a href="#" data-role="button" data-rel="back">वापस जाएँ</a>

खुद आयात करें

अधिकतर बटन के लिए data-* गुण का उपयोग करें

गुण मूल्य मूल्य वर्णन
इंस्टांस सही | गलत बटन को गोलाकार करता है परीक्षण
data-mini सही | गलत सूक्ष्म बटन है या नहीं परीक्षण
data-shadow सही | गलत बटन को शैडो देने का प्रतिबिंब करता है परीक्षण

जक्वरी मोबाइल data-* एट्रिब्यूट के बारे में पूरी जानकारी के लिए हमारे जक्वरी मोबाइल डेटा एट्रिब्यूट रेफरेंस मैनुअल。

बटन को आयकॉन जोड़ने के लिए कैसे निर्देश दिया जाता है का परिचय देता है。