Verwenden Sie jQuery, um Schaltflächen und Symbole zu Schaltflächen auf mobilen Seiten hinzuzufügen_jquery

Schaltfläche „data-role=button“ erstellen
Fügen Sie das Attribut data-role="button" zu HTML-Elementen hinzu. jQuery Moble erweitert dieses Element zu einem Schaltflächenstil. Das Jquery Mobile-Framework enthält eine Reihe von Symbolen, die für die am häufigsten verwendeten mobilen Anwendungen erforderlich sind. Um die Downloadgröße zu reduzieren, enthält Jquery Mobile weiße Symbol-Sprite-Bilder und fügt nach dem Symbol automatisch einen durchsichtigen schwarzen Kreis hinzu, um sicherzustellen, dass Bilder klar angezeigt werden auf jeder Hintergrundfarbe.

Style-Link-Schaltfläche

Im Hauptinhaltsblock einer Webseite können Sie jeden Ankerlink für eine Schaltfläche formatieren, indem Sie das Attribut data-role="button" hinzufügen. Das Framework erweitert Link-Schaltflächen um Markup- und Klassenverknüpfungsmethoden. Zum Beispiel dieses Tag:

<a href="index.html" data-role="button">Link button</a>

HINWEIS: Stile wie Schaltflächenlinks sind identisch mit der visuellen Auswahl des echten Formulars unter der Schaltfläche, es gibt jedoch einige wichtige Unterschiede. Basierend auf der Link-Schaltfläche handelt es sich bei der Schaltfläche um ein Plug-In, das nicht nur das grundlegende Schaltflächen-Tag-Plug-In verwendet, um den Stil der Schaltfläche zu generieren, sodass die Methoden der Formularschaltfläche (Aktivieren, Deaktivieren, Aktualisieren) nicht unterstützt werden. Wenn Sie eine linkbasierte Schaltfläche (oder ein Element) deaktivieren müssen, ist es möglich, mithilfe von Javascript eine Benutzeroberfläche mit Behinderungsgrad auf die behinderte Person selbst anzuwenden, um den gleichen Effekt zu erzielen.

Mini-Version data-mini="true"

Für eine kompaktere Version, die in Symbolleisten und auf engstem Raum nützlich ist, fügen Sie der Schaltfläche das Attribut data-mini="true" hinzu, um eine Mini-Version zu erstellen.

<a href="index.html" data-role="button" data-mini="true">Link button</a>

Fügen Sie ein Symbol zum Schaltflächendatensymbol hinzu
Das jQuery Mobile-Framework enthält einen ausgewählten Satz von Symbolen, die mobile Anwendungen normalerweise benötigen. Um die Downloadgröße zu minimieren, enthält jQuery Mobile ein einzelnes weißes Symbol-Sprite und fügt automatisch einen durchscheinenden schwarzen Kreis hinter dem Symbol hinzu, um sicherzustellen, dass es einen guten Kontrast zu jeder Hintergrundfarbe bildet.

Ein Symbol kann zu einer Schaltfläche hinzugefügt werden, indem dem Anker eine Symboleigenschaft hinzugefügt wird, die die anzuzeigenden Symboldaten angibt. Zum Beispiel das folgende Tag:

<a href="index.html" data-role="button" data-icon="delete">Delete</a>

Mini-Version fügt data-mini="true"-Attribut hinzu

Symbolstilliste

jQuery Mobile verfügt über viele kleine Schaltflächensymbole, wie unten gezeigt:

Linker Pfeil: data-icon="arrow-l"
Rechtspfeil: data-icon="arrow-r"
Aufwärtspfeil: data-icon="arrow-u"
Abwärtspfeil: data-icon="arrow-d"
Löschen: data-icon="delete"
Hinzufügen: data-icon="Plus"
Reduzieren: data-icon="minus"
Überprüfen: data-icon="Check"
Ausrüstung: data-icon="gear"
Weiterleiten: data-icon="Weiterleiten"
Zurück: data-icon="Zurück"
Raster: data-icon="Grid"
Pentagramm: data-icon="Star"
Warnung: data-icon="Alert"
Informationen: data-icon="info"
Startseite: data-icon="home"
Suche: data-icon="Suchen"

Symbolpositionierungsdaten-iconpos

Standardmäßig werden alle Symbole links vom Schaltflächentext der Schaltfläche platziert. Diese Standardeinstellung kann überschrieben werden, indem das data-iconpos-Attribut verwendet wird, um den Text oben, unten, rechts und links des Symbols festzulegen. Markieren Sie beispielsweise:

<font color=#0000ff><a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a>

Text auf Bildern ausblenden data-iconpos="notext"

Sie können auch eine Symbolschaltfläche erstellen und data-iconpos="notext" festlegen. Das Button-Plugin verbirgt den Text auf dem Bildschirm, verwendet ihn jedoch als kontextbezogenes Link-Titelattribut, um Screenreadern und Geräten die Möglichkeit zu geben, Tooltips zu unterstützen. Zum Beispiel data-iconpos="right", data-iconpos="notext":

<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>

迷你和内联

迷你和内联属性可以被添加到产生更紧凑的按钮

自定义图标 data-icon="自定义值"

使用自定义图标，需要指定 data-icon 值。Jquery Mobile的button插件会将生成一个CSS类，它的前缀是ui-icon- ，后面的是data-icon值。假如：有一个按钮 data-icon 属性的值为 myapp-email，即 data-icon=“ myapp-email”。那么生产的CSS类是：ui-icon-myapp-email。

然后你可以在你的样式表写一个CSS规则来定义 ui-icon-myapp-email。然后在css中指定这个类的背景图片地址。为了保持与其他图标的视觉上的一致性，请创建一个白色18x18像素的PNG-8图标，并且保存为Alpha透明度。

.ui-icon-myapp-email {
 background-image: url( "app-icon-email.png" );
}

这将创建标准分辨率的图标，但许多设备都有非常高的分辨率的显示器，就像iPhone 4的视网膜显示器。添加一个高清图标，创建一个图标，36X36像素（18像素大小完全相同的两倍），并添加第二个规则使用WebKit分钟装置像素比例：2。媒体查询到目标的规则只有以高分辨率显示器。指定背景图片高清图标文件和设置背景像素大小18x18将安装36个像素图标到同一个18像素的空间。传媒查询块可以用多个图标规则：

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
 .ui-icon-myapp-email {
  background-image: url( "app-icon-email-highres.png" );
  background-size: 18px 18px;
 }
 ...more HD icon rules go here...
}