Heim > Artikel > Web-Frontend > Xiaoqiangs Weg zur mobilen HTML5-Entwicklung (44) – Schaltflächen in JqueryMobile

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

黄舟Original: 2017-02-15 13:21:241286Durchsuche

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>

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>

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>

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"/>

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>

6. Benutzerdefinierte Symbolschaltfläche

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

Hinweis: Attributbenennungsregeln „.ui-icon“ – 0980cfa4f0b94ba7062bda91814d9abd, 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;
}

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>

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>

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>

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;
		});

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

Stellungnahme：

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

Vorheriger Artikel：Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (43) – JqueryMobile-Header, Symbolleiste und Tab-LeistennavigationNächster Artikel：Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (43) – JqueryMobile-Header, Symbolleiste und Tab-Leistennavigation

In Verbindung stehende Artikel

Mehr sehen