Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (44) – Schaltflächen in JqueryMobile-H5-Tutorial-php.cn

Heim

Web-Frontend

H5-Tutorial

Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (44) – Schaltflächen in JqueryMobile

黄舟

Feb 15, 2017 pm 01:21 PM

1. Link-Button

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head> 
<body>
<p data-role="page" id="page1" data-fullscreen="true">
    <p data-role="content">
    	<a href="#" data-role="button">链接按钮</a>
    </p>
</p>
</body>
</html>

Nach dem Login kopieren

2. Formular-Button

<p data-role="page" id="page1" data-fullscreen="true">
    <p data-role="content">
    	<a href="#" data-role="button">链接按钮</a>
        <form>
        	<input type="button" value="表单按钮"/>
            <button type="submit">提交按钮</button>
            <input type="submit" value="提交按钮"/>
            <input type="reset" value="重置按钮"/>
        </form>
    </p>
</p>

Nach dem Login kopieren

3. Grafische Schaltflächen

            图像按钮1:
            <input type="image" src="jquery-mobile/images/icon.png" data-role="none"/>
            图像按钮2：
            <a href="#"><img src="jquery-mobile/images/icon.png"></a>

Nach dem Login kopieren

4 Tasten

            <input type="button" value="带图标的按钮" data-icon="delete"/>
   	    <input type="button"  data-icon="delete" data-iconpos="notext"/>
   	    <input type="button"  data-icon="alert" data-iconpos="notext"/>
            <input type="button"  data-icon="arrow-d" data-iconpos="notext"/>
            <input type="button"  data-icon="arrow-l" data-iconpos="notext"/>
            <input type="button"  data-icon="arrow-r" data-iconpos="notext"/>
            <input type="button"  data-icon="arrow-u" data-iconpos="notext"/>
            <input type="button"  data-icon="back" data-iconpos="notext"/>
            <input type="button"  data-icon="check" data-iconpos="notext"/>
            <input type="button"  data-icon="custom" data-iconpos="notext"/>
            <input type="button"  data-icon="forward" data-iconpos="notext"/>
            <input type="button"  data-icon="gear" data-iconpos="notext"/>
            <input type="button"  data-icon="grid" data-iconpos="notext"/>
            <input type="button"  data-icon="home" data-iconpos="notext"/>
            <input type="button"  data-icon="info" data-iconpos="notext"/>
            <input type="button"  data-icon="minus" data-iconpos="notext"/>
            <input type="button"  data-icon="plus" data-iconpos="notext"/>
            <input type="button"  data-icon="refresh" data-iconpos="notext"/>
            <input type="button"  data-icon="search" data-iconpos="notext"/>
            <input type="button"  data-icon="star" data-iconpos="notext"/>

Nach dem Login kopieren

5. Tastenpositionierung

            <a href="#" data-role="button" data-icon="arrow-u" data-iconpos="top">top</a>
            <a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left">left</a>
            <a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
            <a href="#" data-role="button" data-icon="arrow-d" data-iconpos="bottom">bottom</a>

Nach dem Login kopieren

6. Benutzerdefinierte Symbolschaltfläche

<a href="#" data-role="button" data-icon="custom_icon">自定义图标</a>

Nach dem Login kopieren

Hinweis: Attributbenennungsregeln „.ui-icon“ – , wie das obige .ui-icon-custom_icon

.ui-icon-custom_icon{
	background:url(jquery-mobile/images/icon.png) 50% 50% no-repeat;
	background-size:14px 14px;
}

Nach dem Login kopieren

7. Gruppenschaltflächen

        <p data-role="controlgroup" data-type="horizontal" align="center" class="segment-control">
            <a href="#" data-role="button" class="ui-control-active">菜单一</a>
            <a href="#" data-role="button" class="ui-control-inactive">菜单二</a>
            <a href="#" data-role="button" class="ui-control-inactive">菜单三</a>
        </p>

Nach dem Login kopieren

8. Themenschaltflächen

            <a href="#" data-role="button" data-theme="a">A</a>
            <a href="#" data-role="button" data-theme="b">B</a>
            <a href="#" data-role="button" data-theme="c">C</a>
            <a href="#" data-role="button" data-theme="d">D</a>
            <a href="#" data-role="button" data-theme="e">E</a>
            <a href="#" data-role="button" data-theme="f">F</a>

Nach dem Login kopieren

9. Dynamische Schaltflächen

Es gibt auch eine JSON-Methode

<script type="text/javascript">
	$(&#39;<a href="#" data-role="button" data-icon="star" id="b1">动态按钮</a>&#39;).appendTo("#content").button();
	$(&#39;<a href="#" data-role="button" data-icon="delete" id="b2">动态按钮</a>&#39;).insertAfter("#b1").button();
</script>

Nach dem Login kopieren

Beide der beiden oben genannten Methoden verwenden die Schaltfläche () Plug-in hat das Schaltflächen-Plug-in die folgenden Optionen:

	$(&#39;<a href="#">动态按钮</a>&#39;).insertAfter("#a1").button({
			&#39;icon&#39;:&#39;home&#39;,
			&#39;inline&#39;:true,
			&#39;shadow&#39;:true,
			&#39;theme&#39;:&#39;b&#39;
		});

Nach dem Login kopieren

Ecken

boolean

Symbol

Zeichenfolge

iconpos

string

iconshadow

boolean

initSelector

css selector string

inline

boolean

shadow

booleanButton-Plug-in verfügt über die folgenden zwei Methoden:

$("#button1").button("enable") ;

$( "#button2").button("disable");

Der gesamte Code lautet wie folgt:

Das Obige ist Xiaoqiang Der Weg zur mobilen HTML5-Entwicklung (44) – der Inhalt der Schaltflächen in JqueryMobile Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).

 



jQuery Mobile Web 应用程序




 


    

    	链接按钮
        

        	
            
            
            
            图像按钮1:
            <input type="image" src="jquery-mobile/images/icon.png" data-role="none"/>
            图像按钮2：
            <a href="#"><img src="jquery-mobile/images/icon.png"></a>
			
            
   			
   			
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            <a href="#" data-role="button" data-icon="arrow-u" data-iconpos="top">top</a>
            <a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left">left</a>
            <a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
            <a href="#" data-role="button" data-icon="arrow-d" data-iconpos="bottom">bottom</a>
            
            <a href="#" data-role="button" data-icon="custom_icon">自定义图标</a>
            
            A
            B
            C
            D
            E
            F

Nach dem Login kopieren

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

2 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Wie man alles in Myrise freischaltet

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7467

CakePHP-Tutorial

1376

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

Related knowledge

Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

HTML-Rand links Sep 04, 2024 pm 04:48 PM

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.

See all articles