Maison >interface Web >Tutoriel H5 >Le chemin de Xiaoqiang vers le développement mobile HTML5 (44) – Boutons dans JqueryMobile

Le chemin de Xiaoqiang vers le développement mobile HTML5 (44) – Boutons dans JqueryMobile

黄舟original: 2017-02-15 13:21:241326parcourir

1. Bouton Lien

<!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>

<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. Boutons graphiques

            图像按钮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. Boutons

            <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. Positionnement des boutons

            <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. Bouton d'icône personnalisé

Remarque : règles de dénomination des attributs ".ui-icon" - 0980cfa4f0b94ba7062bda91814d9abd, comme le .ui-icon-custom_icon

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

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

ci-dessus 7. Boutons de groupe

        <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. Boutons thématiques

9. Boutons dynamiques

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

Il existe également une méthode json

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

Les deux méthodes ci-dessus utilisent le bouton() plug-in , le plug-in bouton a les options suivantes :

	$(&#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;
		});

coins

booléen

icône chaîne

iconpos chaîne

iconshadow booléen

initSelector chaîne de sélection CSS

en ligne booléen Le plug-in

shadow boolean

button a les deux méthodes suivantes : $("#button1").button("enable") ;

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

L'ensemble du code est le suivant :

Ce qui précède est Xiaoqiang La route vers le développement mobile HTML5 (44) - le contenu des boutons dans JqueryMobile Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn)

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Route de développement mobile HTML5 de Xiaoqiang (43) - Navigation dans l'en-tête, la barre d'outils et la barre d'onglets JqueryMobileArticle suivant：Route de développement mobile HTML5 de Xiaoqiang (43) - Navigation dans l'en-tête, la barre d'outils et la barre d'onglets JqueryMobile

Articles Liés

Voir plus