Kifungu cha jQuery Mobile

Programu za mobile zinapokea kuzingatia uharibifu wa matumizi ya mabomu ya tuki

Kumekadiri vituo vya jQuery Mobile

Vituo vya jQuery Mobile vinapatikana kwa tatu tukio kwa sababu:

  • Tumia elementi ya <button>
  • Tumia elementi ya <input>
  • Tumia elementi ya <a> kwa data-role="button"

<button>

<button>mbili</button>

亲自试一试

<input>

<input type="button" value="Badi">

亲自试一试

<a>

<a href="#" data-role="button">Badi</a>

亲自试一试

提示:jQuery Mobile 中的按钮会自动获得样式,这增强了他们在移动设备上的交互性和可用性。我们推荐您使用 data-role="button" 的 <a> 元素来创建页面之间的链接,而 <input> 或 <button> 元素用于表单提交。

导航按钮

如需通过按钮来链接页面,请使用 data-role="button" 的 <a> 元素:

Mfano

<a href="#pagetwo" data-role="button">Nenda picha ya pili</a>

亲自试一试

行内按钮

默认情况下,按钮会占据屏幕的全部宽度。如果您需要按钮适应其内容,或者如果您需要两个或多个按钮并排显示,请添加 data-inline="true":

Mfano

<a href="#pagetwo" data-role="button" data-inline="true">Nenda picha ya pili</a>

亲自试一试

组合按钮

jQuery Mobile 提供了对按钮进行组合的简单方法。

请将 data-role="controlgroup" 属性与 data-type="horizontal|vertical" 一同使用,以规定水平或垂直地组合按钮:

Mfano

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

亲自试一试

提示:默认情况下,组合按钮是垂直分组的,彼此间没有外边距和空白。并且只有第一个和最后一个按钮拥有圆角,在组合后就创造出了漂亮的外观。

后退按钮

如需创建后退按钮,请使用 data-rel="back" 属性(会忽略锚的 href 值):

Mfano

<a href="#" data-role="button" data-rel="back">Arifu</a>

亲自试一试

更多用于按钮的 data-* 属性

属性 Inaeleza Inaeleza Mfano
data-corners true | false Inaeleza kama kifungu ina msaada wa mabaki. Test
data-mini true | false Inaeleza kama kifungu ni kifungu kidogo. Test
data-shadow true | false Inaeleza kama kifungu ina matokeo wa shabiki. Test

Kuhusu taarifa zisizopotea za data-* wa jQuery Mobile, tafadhali nia taarifa yetu. Mwongozo wa Data wa jQuery Mobile.

Kuandaa ikoni kwa kifungu.