jQuery Mobile学习笔记（二）：按钮

其他 2021-03-20 09:50:54 阅读次数: 0

本篇文章继续测试jQuery Mobile页面中最常用的控制项：按钮，它实际上是表单元素的一种，但因为它不只用在表单中，因此独立出来做测试。在jQuery Mobile中按钮分为两类：
超连结按钮：将一个元素套上data-role =“ button”属性所建立的按钮
表单按钮：以button元素与type =“ button” /“ reset” /“ submit”的输入元素所建立之按钮
表单按钮适合用在表单中，操作换页应该使用具有data-role =“ button”属性的超连结按钮，因为超连结本质上具有重导向功能，不需要的程式码即可达成换页效果，而表单元素按钮则需要用的JavaScript程式处理点击等事件。

本系列之前的文章参考：

＃ jQuery Mobile的学习笔记（一）：配置环境与页面结构

一。标题列与注脚列上的按钮：

jQuery Mobile页面中的标题，内容（内容区），与页脚（注脚列）放置按钮，比较特别的是，放在标题列与注脚列的超连结一个元素会自动转成按钮， 不需要数据角色= “按钮”属性设定，放在内容内容区的超连结则一定要有此属性设定才会成为按钮。

标题列的按钮位置只能放在标题的左边或右边，可用class =“ ui-btn-right”与class =“ ui-btn-left”指定放置的位置，若未指定则置于左边，例如：

测试1： 标题列与注脚列的超连结按钮

<！DOCTYPE html>
<html>
  <
    <title> </ title>
    <meta charset =“ utf-8”>
    <meta http-equiv =“ cache-control” content =“ no-cache”>
    <meta name =“ viewport” content =“ width = device- width，initial-scale = 1“>
    <script src =” https://code.jquery.com/jquery-1.11.1.min.js“> </ script>
    <script src =” https：// code。 jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js“> </ script>
    <link href =” https://code.jquery.com/mobile/1.4.5/jquery。 mobile-1.4.5.min.css“ rel =” stylesheet“>
  </ head>
  <body>
    <！-第一页页面->
    <section data-role =” page“>
      <header data-role = ”header“>
        <a href="#page2">第二页</a>
        <h1>按钮测试</ h1>
        <a href="#page3"  class="ui-btn-right">第三页< / a>
      </ header>
      <article data-role =“ content”>
        <p>这是第一页</ p>
      </ article>
      <footer data-role =“ footer”>
        <a href="#page2">第二页</a>
        <h3>页尾</ h3>
        <a href="#page3"  class="ui-btn-right">第三页</a>
      </ footer>
    </ section>
    <！ -第二页页面->
    <section data-role =“ page” id =“ page2”>
      <header data-role =“ header” data-add-back-btn =“ true” data-back-btn- text =“返回”>
        <h1>第二页</ h1>
      </ header>
      <article data-role =“ content”>
        <p>这是第二页</ p>
      </ article>
      <footer data-role =“ footer”>
        <h3>页尾</ h3>
      </ footer>
    </ section>
    <！-第三页页面->
    <section data-role =“ page” id =“ page3”>
      <header data-role =“ header” data-add-back-btn =“ true” data-back-btn-text =“返回”>
        <h1>第三页</ h1>
      </ header>
      <article data-role =“ content”>
        <p>这是第二页</ p>
      </文章>
      <页脚数据角色= “页脚”>
        <H3>页尾</ H3>
      </页脚>
    </节>
  </ BODY>
</ HTML>

此例含有三个页面，在第页首的标题列与注脚列中各有两个超连结，分别放在标题与注脚的左右两侧，注意，这些标题列与注脚列中的超连结甚至没加上data-role =“button“属性也会被自动转成按钮，结果如下：
在这里插入图片描述
可见标题列与注脚列对于超连结按钮的摆放位置方式不同，的区块链元素）; 而注脚列则不同，如果文字是用区块链元素替换，则文字会跳列放置，即按钮与注脚文字会分开为不同列。

二。内容区的按钮：

内容区可放置任何一种按钮元素，如以下示例所示：

测试2： 使用不同元素制作按钮

<！DOCTYPE html>
<html>
  <head>
    <title> </ title >
    <meta charset =“ utf-8”>
    <meta http-equiv =“ cache-control” content =“ no-cache”>
    <meta name =“ viewport” content =“ width = device-width，initial-scale = 1“>
    <script src =” https://code.jquery.com/jquery-1.11.1.min.js“> </ script>
    <script src =” https://code.jquery.com/mobile/ 1.4.5 / jquery.mobile-1.4.5.min.js“> </ script>
    <link href =” https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5。分钟



      <header data-role =“ header”>
        <h1>按钮测试</ h1>
      </ header>
      <article data-role =“ content”>
        <a href =“＃”  data-role =“ button”  id =“ a_btn“>超连结按钮</a>
        <button id =” button_btn“>按钮按钮</ button>
        <input id =” input_btn“ type =” button“ value =” Input按钮“>
        <input id =” reset_btn“ type =“ reset” value =“重置按钮”>
        <input id =“ submit_btn” type =“ submit” value =“ Submit按钮”>
      </ article>
      <footer data-role =“ footer”>
        <h3>页尾</ h3>
      </ footer>
    </ section>
    <script>
      $（function（）{
    
    
        $（document）.on（“ click”，“ #a_btn”，function（e）{
    
    
          e.preventDefault（）;
          alert（“你按了” + $（this）.html（））;
          }）;
        $（document）.on（“ click”，“ #button_btn”，function（e）{
    
    
          e.preventDefault（）;
          alert（“你按了” + $（this）.html（））;
          }）;
        $（document）.on（“ click”，“ #input_btn”，function（e）{
    
    
          e.preventDefault（）;
          alert（“你按了” + $（this）.val（））;
          }）;
        $（document）.on（“ click”，“ #reset_btn”，function（e）{
    
    
          e.preventDefault（）;
          alert（“你按了” + $（this）.val（））;
          }）;
        $（document）.on（“ click”，“ #submit_btn”

          alert（“你按了” + $（this）.val（））;
          }）;
        }）;
    </ script>
  </ body>
</ html>

此例在内容区域放置了五个按钮，注意，其中的超连结按钮必须指定data-role =“ button”属性才会转换成按钮外观，否则仍然是超连结。通常，因为在jQuery Mobile页面中，网页元素是动态加载页面中，按钮事件的处理不能使用 （ d o c u m e n t ） . r e a d y （ ） ， 必 须 改 用 （document）.ready（），必须改用 （document）.ready（），必须改用（document）.on（），否则不会有作用（因为元素可能在另一个页面堆叠中）。
结果如下：
在这里插入图片描述
点击任一按钮会跳出与下图类似之办法，按确定会消失：
在这里插入图片描述
通常，如果只是要操作换页（加载其他页面）通常会使用超连结按钮，但在表单中插入使用按钮，则输入，重置，提交等表单按钮

三。添加按钮图标：

按钮上也可以利用data-icon属性来添加图标以增加介面亲和性，可用的图标如下表：
![data-icon属性值 说明
行动 动作警报 注意箭头l 左箭头箭头D 下箭头箭头dl 下左箭头箭头博士 下右箭头箭头r 右箭头箭头u 上箭头绿箭侠 上左箭头绿箭侠 上右箭头声音的 音讯背部 后退吧台 横杠子弹头 子弹日历 日历相机 照相机克拉 向下克拉 向左克拉 向右克拉 向下查看 挑选时钟 时钟云 云端评论 评论删除 删除编辑 编辑眼睛 眼睛禁止的 禁止向前 前进齿轮 齿轮（常用于设定）网格 网格心 爱心家 首页![信息 讯息地点 定位锁 上锁邮件 邮件导航 导览电话 电话减 减号加 加号力量 电源回收 回收刷新 重新整理搜索 搜寻店铺 购物星星 星号标签 标签用户 使用者视频 音讯

例如：

测试3： 在按钮上添加图示

<！DOCTYPE html>
<html>
  <头>
    <title> </ title>
    <meta charset =“ utf-8”>
    <meta http-equiv =“ cache-control” content =“ no-cache”>
    <meta name =“ viewport” content =“ width = device-width，initial-scale = 1”>
    <script src =“ https://code.jquery.com/jquery-1.11.1.min.js”> </ script>
    <script src =“ https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”> </ script>
    <link href =“ https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” rel =“ stylesheet”>
  </ head>
  <身体>
    <section data-role =“ page” id =“ page1”>
      <header data-role =“ header”>
        <a href="#page2">第二页</a>
        <h1>按钮图标测试（1）</ h1>
      </ header>
      <article data-role =“ content”>
        <a href="#" data-role="button" data-icon="action">动作</a>
        <a href="#" data-role="button" data-icon="alert">注意</a>
        <a href="#" data-role="button" data-icon="arrow-l">左箭头</a>
        <a href="#" data-role="button" data-icon="arrow-d">下箭头</a>        
        <a href="#" data-role="button" data-icon="arrow-dl">下左箭头</a>
        <a href="#" data-role="button" data-icon="arrow-dr">下右箭头</a>
        <a href="#" data-role="button" data-icon="arrow-r">右箭头</a>
      </ article>
      <footer data-role =“ footer”>
        <h3>页尾</ h3>
      </ footer>
    </ section>
    <！-第二页页面->
    <section data-role =“ page” id =“ page2”>
      <header data-role =“ header”>
        <a href="#page1">上一页</a>
        <h1>按钮图标测试（2）</ h1>
	      <a href="#page3">下一页</a>
      </ header>
      <article data-role =“ content”>
        <a href="#" data-role="button" data-icon="arrow-u">上箭头</a>
        <a href="#" data-role="button" data-icon="arrow-ul">上左箭头</a>
        <a href="#" data-role="button" data-icon="arrow-ur">上右箭头</a>
        <a href="#" data-role="button" data-icon="audio">音讯</a>
        <a href="#" data-role="button" data-icon="back">返回</a>
        <a href="#" data-role="button" data-icon="bars">横杠</a>
        <a href="#" data-role="button" data-icon="bullets">子弹</a>
      </ article>
      <footer data-role =“ footer”>
        <h3>页尾</ h3>
      </ footer>
    </ section>
    <！-第三页页面->
    <section data-role =“ page” id =“ page3”>
      <header data-role =“ header”>
        <a href="#page2">上一页</a>
        <h1>按钮图标测试（3）</ h1>
	      <a href="#page4">下一页</a>
      </ header>
      <article data-role =“ content”>
        <a href="#" data-role="button" data-icon="calendar">日历</a>
        <a href="#" data-role="button" data-icon="camera">照相机</a>
        <a href="#" data-role="button" data-icon="carat-d">向下</a>
        <a href="#" data-role="button" data-icon="carat-l">向左</a>
        <a href="#" data-role="button" data-icon="carat-r">向右</a>
        <a href="#" data-role="button" data-icon="carat-u">向上</a>
        <a href="#" data-role="button" data-icon="check">选取</a>
      </ article>
      <footer data-role =“ footer”>
        <h3>页尾</ h3>
      </ footer>
    </ section>
    <！-第四页页面->
    <section data-role =“ page” id =“ page4”>
      <header data-role =“ header”>
        <a href="#page3">上一页</a>
        <h1>按钮图标测试（4）</ h1>
	      <a href="#page5">下一页</a>
      </ header>
      <article data-role =“ content”>
        <a href="#" data-role="button" data-icon="clock">时钟</a>
        <a href="#" data-role="button" data-icon="cloud">云端</a>
        <a href="#" data-role="button" data-icon="comment">评论</a>
        <a href="#" data-role="button" data-icon="delete">删除</a>
        <a href="#" data-role="button" data-icon="edit">编辑</a>
        <a href="#" data-role="button" data-icon="eye">眼睛</a>
        <a href="#" data-role="button" data-icon="forbidden">禁止</a>
      </ article>
      <footer data-role =“ footer”>
        <h3>页尾</ h3>
      </ footer>
    </ section>
    <！-第五页页面->
    <section data-role =“ page” id =“ page5”>
      <header data-role =“ header”>
        <a href="#page4">上一页</a>
        <h1>按钮图标测试（5）</ h1>
	      <a href="#page6">下一页</a>
      </ header>
      <article data-role =“ content”>
        <a href="#" data-role="button" data-icon="forward">前进</a>
        <a href="#" data-role="button" data-icon="gear">齿轮</a>
        <a href="#" data-role="button" data-icon="grid">网格</a>
        <a href="#" data-role="button" data-icon="heart">爱心</a>
        <a href="#" data-role="button" data-icon="home">首页</a>
        <a href="#" data-role="button" data-icon="info">消息</a>
        <a href="#" data-role="button" data-icon="location">定位</a>
      </ article>
      <footer data-role =“ footer”>
        <h3>页尾</ h3>
      </ footer>
    </ section>
    <！-第六页页面->
    <section data-role =“ page” id =“ page6”>
      <header data-role =“ header”>
        <a href="#page5">上一页</a>
        <h1>按钮图标测试（6）</ h1>
	      <a href="#page7">下一页</a>
      </ header>
      <article data-role =“ content”>
        <a href="#" data-role="button" data-icon="lock">上锁</a>
        <a href="#" data-role="button" data-icon="mail">邮件</a>
        <a href="#" data-role="button" data-icon="navigation">导览</a>
        <a href="#" data-role="button" data-icon="phone">电话</a>
        <a href="#" data-role="button" data-icon="minus">减号</a>
        <a href="#" data-role="button" data-icon="plus">加号</a>
        <a href="#" data-role="button" data-icon="power">电源</a>
      </ article>
      <footer data-role =“ footer”>
        <h3>页尾</ h3>
      </ footer>
    </ section>
    <！-第七页页面->
    <section data-role =“ page” id =“ page7”>
      <header data-role =“ header”>
        <a href="#page6">上一页</a>
        <h1>按钮图标测试（7）</ h1>
	      <a href="#page1">第一页</a>
      </ header>
      <article data-role =“ content”>
        <a href="#" data-role="button" data-icon="recycle">回收</a>
        <a href="#" data-role="button" data-icon="refresh">重新整理</a>
        <a href="#" data-role="button" data-icon="search">搜寻</a>
        <a href="#" data-role="button" data-icon="shop">购物</a>
        <a href="#" data-role="button" data-icon="star">星号</a>
        <a href="#" data-role="button" data-icon="tag">标签</a>
        <a href="#" data-role="button" data-icon="user">使用者</a>
        <a href="#" data-role="button" data-icon="video">视讯</a>
      </ article>
      <footer data-role =“ footer”>
        <h3>页尾</ h3>
      </ footer>
    </ section>
  </ body>
</ html>

此例将50个按钮图示分为七个页面呈现，结果如下：
在这里插入图片描述
在这里插入图片描述
如果要节省页面空间，可在超连结按钮上添加data-mini =“ true”属性来缩小按钮尺寸，例如：

测试4： 缩小版的按钮

<！DOCTYPE html>
<html>
  <head >
    <title> </ title>
    <meta charset =“ utf-8”>
    <meta http-equiv =“ cache-control” content =“ no-cache”>
    <meta name =“ viewport” content =“ width = device -width，initial-scale = 1“>
    <script src =” https://code.jquery.com/jquery-1.11.1.min.js“> </ script>
    <script src =” https：// code .jquery.com / mobile / 1.4.5 / jquery.mobile-1.4.5.min.js“> </ script>
    <link href =” https://code.jquery.com/mobile/1.4.5/jquery .mobile-1.4.5。min.css“ rel =” stylesheet“>
  </ head>
  <body>
    <！-第一页页面->
    <section data-role =“ page” id =“ page1”>
      <header data-role =“ header”>
        <a href="#page2">第二页</a>
        <h1>按钮测试（1）< / h1>
      </ header>
      <article data-role =“ content”>
        <a href="#" data-role="button" data-icon="alert" data-mini="true">注意</ a >
        <a href="#" data-role="button" data-icon="arrow-l" data-mini="true">左箭头</a>
        <a href =“＃” data-role =“按钮” data-icon =“ arrow-r” data-mini =“ true”>右箭头</a>
        <a href =“＃” data-role =“ button”data-icon =“ arrow-u” data-mini =“ true”>上箭头</a>
        <a href =“＃” data-role =“ button” data-icon =“ arrow-d” data-mini = “ true”>下箭头</a>
        <a href="#" data-role="button" data-icon="back" data-mini="true">下箭头</a>
        <a href="#" data-role="button" data-icon="check" data-mini="true">选取</a>
        <a href =“＃” data-role =“ button”数据- icon =“ delete” data-mini =“ true”>删除</a>
        <a href="#" data-role="button" data-icon="forward" data-mini="true">前进</ a>
      </ article>
      <footer data-role =“ footer”>
        <h3>页尾</ h3>
      </ footer>
    </ section>
    <！-第二页页面->
    <section data-role = “ page” id =“ page2”>
      <header data-role =“ header”>
        <a href =“＃page1“>第一页</a>
        <h1>按钮测试（2）</ h1>
      </ header>
      <article data-role =” content“>
        <a href =”＃“ data-role =” button “ data-icon =” gear“ data-mini =” true“>齿轮</a>
        <a href="#" data-role="button" data-icon="grid" data-mini="true">格子</a>
        <a href =“＃” data-role =“ button” data-icon =“ home” data-mini =“ true”>首页</a>
        <a href =“＃” data-role =“ button” data-icon =“ info” data-mini =“ true“>消息</a>
        <a href="#" data-role="button" data-icon="minus" data-mini="true">减号</a>
        <a href =”＃“ data-role =“ button” data-icon =“ plus” data-mini =“ true”>加号</a>
        <a href =“＃” data-role =“ button” data-icon =“刷新” data -mini =“true“>重新整理</a>
        <a href="#" data-role="button" data-icon="search" data-mini="true">搜寻</a>
        <a href =”＃“ data-role =“ button” data-icon =“ star” data-mini =“ true”>星号</a>
      </ article>
      <footer data-role =“ footer”>
        <h3>页尾</ h3>
      </ footer>
    </ section>
  </ body>
</ html>

此例中的每个超级链接按钮都添加了data-mini =“ true”属性，按钮尺寸都缩小了了，结果如下：
在这里插入图片描述
按钮图示摆放的位置可用data-iconpos属性来指定，除位置外还能取消文字：
left：文字的左方（预设）
right：文字的右方
top：文字的上方
bottom：文字的下方
notext：取消文字，只显示图示
例如：

测试5： 指定按钮图示位置

<！DOCTYPE html>
<html>
  <head>
    <title> </ title>
    <meta charset =“ utf-8”>
    <meta http-equiv =“ cache-control“ content =” no-cache“>
    <元名称=” viewport“ content =” width = device-width，initial-scale = 1“>
    <script src =” https://code.jquery.com/ jquery-1.11.1.min.js“> </ script>
    <script src =” https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js“> < / script>
    <link href =“ https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” rel =“ stylesheet”>
  </ head>
  <body>
    <！-第一页页面->
    <section data-role =“ page” id =“ page1”>
      <header data-role =“ header”>
        <h1>按钮测试</ h1>
      </ header>
      <article data-role =“ content”>
        <a href =“＃” data-role =“ button”数据图标=“ alert” data-iconpos =“ left” >注意</a>
        <a href="#" data-role="button" data-icon="gear" data-iconpos="right">齿轮</ a >
        <a href="#" data-role="button" data-icon="grid" data-iconpos="top">格子</A>
        <A HREF = “＃”的数据角色= “按钮”的数据-icon =“ home” data-iconpos =“ bottom”>首页</a>
        <a href="#" data-role="button" data-icon="info" data-iconpos="notext">消息</a>
      </ art >>
      <footer data-role = “页脚”>
        <h3>页尾</ h3>
      </ footer>
    </ section>
  </ body>
</ html>

结果如下：
在这里插入图片描述

四。与内容同宽的按钮：

不管是连结按钮还是表单按钮，其宽度尺寸都会替换整列（即display：block区块样式），有时会在量测页面上放置空间配置不需要这么宽的按钮，可以添加data-inline =“ true”属性将按钮宽度缩小到刚好容纳图示与文字内容即可，一连串这样的按钮分布在一起会以流水式依序排在后面，例如：

测试6： 与内容同宽的按钮

<！DOCTYPE html>
<html>
  <head>
    <title> </ title>
    <meta charset =“ utf-8”>
    <meta http-equiv =“ cache-control” content =“ no-cache”>
    <meta name =“ viewport” content =“ width = device-width，initial-scale = 1”>
    <script src =“ https://code.jquery.com/jquery-1.11.1.min.js”> < / script>
    <script src =“ https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5。
    <link href =“ https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” rel =“ stylesheet”>
  </ head>
  <body>
    <！-第一页页面->
    <section data-role =“ page” id =“ page1”>
      <header data-role =“ header”>
        <h1>按钮测试</ h1>
      </ header>
      <article data-role =“ content”>
        <a href="#" data-role="button" data-icon="alert" data-inline="true">注意</a>
        <a href =“＃” data-role = “按钮” data-icon =“ gear” data-inline =“ true”>齿轮</a>
        <a href =“＃“ data-role =” button“ data-icon =” grid“ data-inline =” true“>格子</a>
        <a href =”＃“ data-role =” button“ data-icon =” home“ data-inline =“ true”>首页</a>
        <a href="#" data-role="button" data-icon="info" data-inline="true">消息</a>
        <a href =“＃” data-role =“ button” data- icon =“ search” data-inline =“ true”>搜寻</a>
        <a href="#" data-role="button" data-icon="delete" data-inline="true">删除</ a>
        <a href="#" data-role="button" data-icon="forward" data-inline="true">前进</a>
        <a href =“＃” data-role =“ button” data-icon =“ back” data-inline =“ true”>后退</a>
      </ article>
      <footer data-role =“ footer”>
        <h3>页尾</ h3>
      </ footer>
    </ section>
  </ body>
</ html>

结果如下：
在这里插入图片描述
可见按钮的宽度都缩小至内容大小，不再重复整列。

五。控制类别按钮：

在制作导览列时需要将一群按钮组合在一起，这时就需要用一个具有data-role =“ controlgroup”的div元素将这些按钮放置起来：

<div data-role =“ controlgroup “ >
  <a href="#" data-role="button"> Python </a>
  <a href="#" data-role="button"> Swift </a>
  <a href =”＃“数据-role =“ button”> Java </a>
</ div>

预设这些按钮会垂直排列黏在一起，例如：

测试7： 垂直垂直排列的按钮组

<！DOCTYPE html>
<html>
  <head>
    <title> </ title>
    <meta charset =“ utf-8”>
    <meta http-equiv =“ cache-control” content =“

    <script src =“ https://code.jquery.com/jquery-1.11.1.min.js”> </ script>
    <script src =“ https://code.jquery.com/mobile/1.4.5 /jquery.mobile-1.4.5.min.js“> </ script>
    <link href =” https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css “ rel =” stylesheet“>
  </ head>
  <body>
    <！-第一页页面->
    <section data-role =” page“ id =” page1“>
      <header data-role =” header“>
        <h1>按钮测试</ h1>
      </ header>
      <article data-role =“ content”>
       <div data-role =“ controlgroup” >
          <a href =“＃” data-role =“ button”> Python </a>
          <a href="#" data-role="button"> Swift </a>
          <a href="#" data-role="button"> Java </a>
        </ div>
      </ art >>
      <footer data-role =“ footer”>
        <h3>页尾</ h3>
      </ footer >
    </ section>
  </ body>
</ html>

结果如下：
在这里插入图片描述
如果要让群集内部的按钮水平分布，则补充其div元素需要添加data-type =“ horizo​​ntal”属性：

<div  data-role =“ controlgroup” data-type =“ horizo​​ntal” >
  <a href =“ ＃“ data-role =” button“> Python </a>
  <a href="#" data-role="button">快速</a>
  <a href="#" data-role="button"> Java </a>
</ div>

例如：

测试8： 水平划分的按钮分组

<！DOCTYPE html>
<html>
  <head>
    <title> </ title>
    <meta charset =“ utf- 8“>
    <meta http-equiv =” cache-control“ content =” no-cache“>
    <meta name =“ viewport” content =“ width = device-width，initial-scale = 1”>
    <script src =“ https://code.jquery.com/jquery-1.11.1.min.js”> </ script>
    <script src =“ https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”> </ script>
    <link href =“ https：//code.jquery .com / mobile / 1.4.5 / jquery.mobile-1.4.5.min.css“ rel =” stylesheet“>
  </ head>
  <body>
    <！-第一页页面->
    <section data-role =“ page” id =“ page1”>
      <header data-role =“ header”>
        <h1>按钮测试</ h1>
      </ header>
      <article data-role =“ content”>
       <div data-role =“           对照组” data-type =“ horizo​​ntal” >
<a href="#" data-role="button"> Python </a>
          <a href="#" data-role="button">快速</a>
          <a href="#" data-role="button"> Java </a>
        </ div>
      </ article>
      <footer data-role =“ footer”>
        <h3>页尾</ h3>
      </ footer>
    </ section>
  </ body>
</ html>

结果如下：
在这里插入图片描述

六。按钮的启用与关闭控制：

有时按钮需要被关闭（disabled）禁止用户操作（例如未登录），方法有四：
套用class“ = ui-disabled”样式类别
呼叫addClass（“ ui-disabled”）方法
呼叫attr（“ disabled”，true）方法（只有表单按钮有效）
添加disable或disabled =“ true”属性（只有表单按钮有效）
例如：

测试9： 启用（enable）与关闭（disable）按钮（1）

<！DOCTYPE html>
<html>
  <head>
    <title> </ title>
    <meta charset =“ utf-8” >
    <meta http-equiv =“ cache-control” content =“ no-cache”>
    <meta name =“ viewport” content =“ width = device-width，initial-scale = 1”>
    <script src =“ https： //code.jquery.com/jquery-1.11.1.min.js“> </ script>
    <script src =” https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4。 5.min.js“> </ script>
    <link href =” https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css“ rel =”stylesheet“>
  </ head>
  <body>
    <！-第一页页面->
    <section data-role =“ page” id =“ page1”>
      <header data-role =“ header”>
        <h1>按钮测试</ h1>
      </ header>
      <article data-role =“ content”>
        <！ -套用class =“ ui-disabled”->
        <a href="#" data-role="button" data-icon="alert" class="ui-disabled">注意</a>
        <button data -icon =“ check” class =“ ui-disabled” >选取</ button>
        <！-呼叫addClass（“ ui-disabled”）->
        <a href =“＃” data-role =“ button” data -icon =“ grid” id =“ grid”>格子</a>
        <button data-icon =“ star” id =“ star”>星号</ button>
        <！-呼叫attr（“ disabled”，true）：仅表单按钮有效->
        <a href="#" data-role="button" data-icon="search" id="search">搜寻</a>
        <button data-icon =“ gear” id =“ gear”>设置</按钮>
        < -套用禁用属性：仅表单按钮有效- >
        <a href="#" data-role="button" data-icon="home"禁用>首页</A>
        <钮数据图标=“信息”已禁用>消息</ button>
      </ article>
      <footer data-role =“ footer”>
        <h3>页尾</ h3>
      </ footer>
    </ section>
    <script>
      $（document）。 on（“ pageinit”，“＃page1“，function（e）{
    
    
        $（”＃grid“）。addClass（” ui-disabled“） ;
        $（”＃star“）。addClass（” ui-disabled“） ;
        $（“＃search”）。attr（“ disabled”，true） ; //无效
        $（“＃gear”）。attr（“ disabled”，true） ;
        }）;
    </ script>
  </ body>
</ html>

此例中四个关闭按钮的方式都分别套用到超连结按钮与表单按钮上：
在这里插入图片描述
可见“搜寻”与“首页”这两个按钮仍然是开启可按状态，前者表示超连结按钮无法用呼叫attr（“ disabled”，true）方法来关闭; 而上方表示超连结按钮无法用disable属性来关闭。
下面的范例则是添加两个按钮用来测试按钮的关闭与启用：

测试10： 启用（启用）与关闭（禁用）按钮（2）

<！DOCTYPE html>
<html>
  <head>
    <title> </ title>
    <meta charset =“ utf-8”>
    <meta http-equiv =“ cache-control” content =“ no-cache”>
    <meta name =“ viewport” content =“ width = device- width，initial-scale = 1“>
    <script src =” https://code.jquery.com/jquery-1.11.1.min.js“> </ script>
    <script src =” https：// code。 jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js“> </ script>
    <link href =” https://code.jquery.com/mobile/1.4.5/jquery。移动1.4.5.min。css“ rel =” stylesheet“>
  </ head>
  <body>
    <！-第一页页面->
    <section data-role =“ page” id =“ page1”>
      <header data-role =“ header”>
        <h1>按钮测试</ h1>
      </ header>
      <article data-role =“ content”>
        <！ -套用class =“ ui-disabled”->
        <a href="#" data-role="button" data-icon="alert" class="ui-disabled" id="alert">注意</ a>
        <button data-icon =“ check” class =“ ui-disabled” id =“ check”>拾取</ button>
        <！-呼叫addClass（“ ui-disabled”）->
        <a href =“ ＃“ data-role =” button“ data-icon =” grid“ id =” grid“>格子</a>
        <button data-icon =“ star” id =“ star”>星号</ button>
        <！-呼叫attr（“ disabled”，true）：仅表单按钮有效->
        <button data-icon =“ gear” id =“ gear”>设置</ button>
        <！-套用Disabled属性：仅表单按钮有效->
        <button data-icon =“ info” Disabled id =“ info”>消息</ button>
        <！-关闭与启用按钮->
        <button id =“ enable”>全部启用</ button>
        <button id =“ disable”>全部关闭</ button>
      </ article>
      <footer data-role =“ footer”>
        <h3>页尾</ h3>
      </ footer>
    </ section>
    <script>
      $（document）.on（“ pageinit”，“＃page1”，function（e）{
    
    
        $（“＃grid”）。addClass（“ ui-disabled”）;
        $（“ #star“）。addClass（” ui-disabled“）;
        $（”#gear“）。attr（” disabled“，true）;
        $（”＃enable“）。on（” click“，function（e）{
    
    
          $（”＃alert“）。removeClass（” ui-disabled“）;
          $（“＃check”）。removeClass（“ ui-disabled”）;
          $（“＃grid”）。removeClass（“ ui-disabled”）;
          $（“＃star”）。removeClass（“ ui-disabled”）;
          $（“＃gear”）。attr（“ disabled”，false）;
          $（“＃info”）。attr（“ disabled”，false）;
          }）;
        $（“＃disable”）。on（“ click”，function（e）{
    
    
          $（“＃alert”）。addClass（“ ui-disabled”）;
          $（“＃check”）。addClass（“ ui-disabled “）;
          $（”＃grid“）。addClass（” ui-disabled“）;
          $（”＃star“）。addClass（” ui-disabled“）;
          $（”＃gear“）。attr（“ disabled”，true）;
          $（“＃info”）。attr（“ disabled”，true）;
          }）;
        }）;
    </ script>
  </ body>
</ html>

网页刚开启时全部按钮预设为关闭，按“全部开启”与“全部关闭”结果如下：
在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/wlcs_6305/article/details/114582370
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
返回指定时间格式
fopen函数中的mode参数
Java 单例模式探讨
Flex remoteobject工作原理探讨
寻找mplayer的便捷安装方法
30天了解30种技术系列---(26)MySQL自动化运维工具Inception
关于Jboss/Tomcat/Jetty的JNDI定义123
程序减肥，strip，eu-strip 及其符号表
AsyncTask、View.post(Runnable)、ViewTreeObserver三种方式总结frame animation自动启动
Json和Bean的互相转换
每日归档
更多
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022