జెక్కీ మొబైల్ బటన్

టచ్ కొన్నిమారు సౌకర్యం పెట్టుకొని నిర్మించబడిన మొబైల్ అప్లికేషన్లు.

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" లక్షణాన్ని ఉపయోగించండి (అంకురపు హెరఫై విలువను తప్పించుతుంది):

实例

<a href="#" data-role="button" data-rel="back">తిరిగి వెళ్ళు</a>

స్వయంగా ప్రయత్నించండి

బటన్లకు మరింత ఉపయోగించబడే data-* లక్షణం

లక్షణం 值 描述 实例
data-corners true | false 规定按钮是否有圆角。 测试
data-mini true | false 规定是否是小型按钮。 测试
data-shadow true | false 规定按钮是否有阴影。 测试

如需有关 jQuery Mobile data-* 属性的完整信息，请访问我们的 jQuery Mobile Data 属性参考手册。

下一节演示如何为按钮添加图标。