jQuery Mobile 按钮

一、jQuery Mobile 中创建按钮

  1、jQuery Mobile 中的按钮可通过三种方法创建:

    使用 <button> 元素

    使用 <input> 元素

    使用 data-role="button" 的 <a> 元素

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>jQuery Mobile基本页面结构</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css"/>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>

<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>

</head>

<body>

   <div data-role="page">

           <div data-role="header" data-position="fixed" data-fullscreen="true">

            <h1>头部</h1>

        </div>

        

        <div data-role="content">

              <!--<button>按钮</button>-->

            <!--<input type="button" value="按钮"/>-->

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

        </div>

        

        <div data-role="footer">

            <h1>页脚</h1>

        </div>

    

   </div>

</body>

</html>

  jQuery Mobile 中的按钮会自动获得样式,这增强了他们在移动设备上的交互性和可用性。

  我们推荐您使用 data-role="button" 的 <a> 元素来创建页面之间的链接,而 <input> 或 <button> 元素用于表单提交。

 

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

<div data-role="page" id="pageone">

           <div data-role="header">

            <h1>头部</h1>

        </div>

        

        <div data-role="content">

            <a href="#pagetwo" data-role="button">跳转到第二页面</a>

        </div>

        

        <div data-role="footer">

            <h1>页脚</h1>

        </div>

   </div>

   

    <div data-role="page" id="pagetwo">

           <div data-role="header">

              <h1>头部</h1>

          </div>

        

        <div data-role="content">

            <a href="#pageone" data-role="button">跳转到第一页面</a>

        </div>

        

        <div data-role="footer">

            <h1>页脚</h1>

        </div>

   </div>

 

 

3、行内按钮

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

<div data-role="page" id="pageone">

           <div data-role="header">

            <h1>头部</h1>

        </div>

        

        <div data-role="content">

            <p>fdsafsadf</p>

            <a href="#pagetwo" data-role="button" data-inline="true">跳转到第二页面</a>

        </div>

        

        <div data-role="footer">

            <h1>页脚</h1>

        </div>

   </div>

   

    <div data-role="page" id="pagetwo">

           <div data-role="header">

            <h1>头部</h1>

        </div>

        

        <div data-role="content">

            <p>fsdgsdfgsdfgdsfgsdfgsdf</p>

            <a href="#pageone" data-role="button" data-inline="true">跳转到第一页面</a>

            <a href="#pageone" data-role="button" data-inline="true">跳转到第一页面</a>

            <a href="#pageone" data-role="button" data-inline="true">跳转到第一页面</a>

        </div>

        

        <div data-role="footer">

            <h1>页脚</h1>

        </div>

   </div>

 

 

4、组合按钮

  jQuery Mobile 提供了对按钮进行组合的简单方法。请将 data-role="controlgroup" 属性与 data-type="horizontal|vertical" 一同使用,以规定水平或垂直地组合按钮:

<div data-role="page" id="pageone">

      <div data-role="header">

              <h1>分组按钮</h1>

      </div>

    

      <div data-role="content">

        <div data-role="controlgroup" data-type="horizontal">

            <p>水平分组:</p>

            <a href="#" data-role="button">按钮 1</a>

            <a href="#" data-role="button">按钮 2</a>

            <a href="#" data-role="button">按钮 3</a>

        </div><br>

        

        <div data-role="controlgroup" data-type="vertical">

            <p>垂直分组(默认):</p>

            <a href="#" data-role="button">按钮 1</a>

            <a href="#" data-role="button">按钮 2</a>

            <a href="#" data-role="button">按钮 3</a>

        </div>

      </div>

    

      <div data-role="footer">

              <h1>页脚文本</h1>

      </div>

</div> 

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

 

 

5、后退按钮

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

<div data-role="page" id="pageone">

          <div data-role="header">

              <h1>后退按钮实例</h1>

          </div>



          <div data-role="content">

              <a href="#pagetwo" data-role="button">转到页面二</a>

          </div>



          <div data-role="footer">

              <h1>页脚文本</h1>

          </div>

   </div> 



   <div data-role="page" id="pagetwo">

          <div data-role="header">

              <h1>后退按钮实例</h1>

          </div>



          <div data-role="content">

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

          </div>



          <div data-role="footer">

              <h1>页脚文本</h1>

         </div>

    </div> 

 

 

更多用于按钮的 data-* 属性:访问 jQuery Mobile Data 属性参考手册

 

 

你可能感兴趣的:(JQuery Mobile)