文章标题

来源：互联网发布：广告阻拦软件编辑：程序博客网时间：2024/05/22 06:57

2.jQuery Mobile按钮

2.1在页面上创建按钮

在页面上创建按钮有三种方式：    -使用<button>元素    -使用<input>元素    -使用带有data-role="button"的<a>的元素1 使用 button 元素

<div data-role="main" class="ui-content">    <button class="ui-btn">这是一个按钮</button>  </div>

2 使用 input 元素

<div data-role="main" class="ui-content">    <input type="button" value="按钮">  </div>

3 使用带有data-role="button"的 a 的元素

<div data-role="main" class="ui-content">    <a href="#" class="ui-btn">按钮</a>  </div>

2.2通过按钮在两个页面之间进行切换

例2-2-1

<body><!--这是第一个页面pageone--><div data-role="page" id="pageone">  <div data-role="header">    <h1>这是页面的顶部工具栏</h1>  </div>  <div data-role="main" class="ui-content">    <p>这是页面的内容，点击下面的按钮跳转</p>    <!--接下来用第三种方法创建一个按钮-->    <a href="#pagetwo" class="ui-btn">跳转到第二个界面pagetwo</a>  </div>  <div data-role="footer">    <h1>这是页面底部工具栏</h1>  </div></div> <!--第二个页面pagetwo--><div data-role="page" id="pagetwo">  <div data-role="header">    <h1>这是第二个页面的顶部工具栏</h1>  </div>  <div data-role="main" class="ui-content">    <p>这是第二个页面的内容</p>    <!--接下来用第三种方法创建一个按钮-->    <a href="#pageone" data-role="button">点击返回页面pageone</a>  </div>  <div data-role="footer">    <h1>第二个页面的底部工具栏</h1>  </div></div> </body>

2.3按钮的大小

默认情况下，按钮会占满整个屏幕宽度，如果要创建一个和内容一样宽的按钮，或者要并排显示多个按钮，需要添加data-inline="true"。

例2-3-1

 <div data-role="main" class="ui-content">    <p>内联按钮 (一行显示三个):</p>    <a href="#pageone" class="ui-btn ui-btn-inline">第一个</a>    <a href="#pageone" class="ui-btn ui-btn-inline">第二个</a>    <a href="#pageone" class="ui-btn ui-btn-inline">第三个</a>  </div>

2.4按钮的摆放

jQuery Mobile提供一个简单的方法来摆放按钮把data-role="controlgroup"属性和data-type="horizontal|vertical"一起使用来规定是否水平或垂直组合按钮

例2-4-1

<div data-role="main" class="ui-content">    <!--下面是三个水平摆放的按钮-->    <div data-role="controlgroup" data-type="horizontal">      <p>水平组合按钮:</p>      <a href="#" class="ui-btn">按钮 1</a>      <a href="#" class="ui-btn">按钮 2</a>      <a href="#" class="ui-btn">按钮 3</a>    </div><br>    <!--下面是三个垂直摆放的按钮-->    <div data-role="controlgroup" data-type="vertical">      <p>垂直组合按钮 (默认):</p>      <a href="#" class="ui-btn">按钮 1</a>      <a href="#" class="ui-btn">按钮 2</a>      <a href="#" class="ui-btn">按钮 3</a>    </div>  </div>

2.5后退按钮

创建后退按钮，使用data-rel="back"属性

例2-5-1

<div data-role="main" class="ui-content">    <a href="#" class="ui-btn" data-rel="back">返回</a>  </div>

2.6更多按钮样式

类描述 ui-btn-b 修改按钮颜色为黑色，字体为白色(默认为灰色背景，黑色字体)。 ui-corner-all 为按钮添加圆角 ui-mini 制作小按钮 ui-shadow 为按钮添加阴影

如果你需要使用更多的样式，每个样式类使用空格隔开，如： class=”ui-btn ui-btn-inline ui-btn-corner-all ui-shadow”。默认情况下 input 按钮有圆角及阴影效果。 a 和 button 元素没有。

2.7jQuery Mobile提供的按钮图标

2.7.1添加图标到按钮

使用ui-icon类将图标添加到按钮上，并可以使用指定类来设置按钮位置。

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>

这里写图片描述

0 0