jquery改变自己button的名字 jquery修改按钮名称

转载

半夜未央好 2024-02-19 19:23:13

文章标签 jquery改变自己button的名字 jquery javascript html5 html 文章分类 jQuery 前端开发

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

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

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“属性也会被自动转成按钮，结果如下：

jquery改变自己button的名字 jquery修改按钮名称_jquery

可见标题列与注脚列对于超连结按钮的摆放位置方式不同，的区块链元素）; 而注脚列则不同，如果文字是用区块链元素替换，则文字会跳列放置，即按钮与注脚文字会分开为不同列。

二。内容区的按钮：

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

测试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页面中，网页元素是动态加载页面中，按钮事件的处理不能使用 $jquery改变自己button的名字 jquery修改按钮名称_html5_02$ （document）.on（），否则不会有作用（因为元素可能在另一个页面堆叠中）。

结果如下：

jquery改变自己button的名字 jquery修改按钮名称_jquery改变自己button的名字_03

点击任一按钮会跳出与下图类似之办法，按确定会消失：

jquery改变自己button的名字 jquery修改按钮名称_html_04

通常，如果只是要操作换页（加载其他页面）通常会使用超连结按钮，但在表单中插入使用按钮，则输入，重置，提交等表单按钮

三。添加按钮图标：

按钮上也可以利用data-icon属性来添加图标以增加介面亲和性，可用的图标如下表：

![data-icon属性值说明

jquery改变自己button的名字 jquery修改按钮名称_jquery改变自己button的名字_05

例如：

测试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个按钮图示分为七个页面呈现，结果如下：

jquery改变自己button的名字 jquery修改按钮名称_jquery_06

jquery改变自己button的名字 jquery修改按钮名称_javascript_07

如果要节省页面空间，可在超连结按钮上添加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”属性，按钮尺寸都缩小了了，结果如下：

jquery改变自己button的名字 jquery修改按钮名称_html_08

按钮图示摆放的位置可用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>

结果如下：

jquery改变自己button的名字 jquery修改按钮名称_html5_09

四。与内容同宽的按钮：

不管是连结按钮还是表单按钮，其宽度尺寸都会替换整列（即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>

结果如下：

jquery改变自己button的名字 jquery修改按钮名称_jquery改变自己button的名字_10

可见按钮的宽度都缩小至内容大小，不再重复整列。

五。控制类别按钮：

在制作导览列时需要将一群按钮组合在一起，这时就需要用一个具有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>

结果如下：

jquery改变自己button的名字 jquery修改按钮名称_javascript_11

如果要让群集内部的按钮水平分布，则补充其div元素需要添加data-type =“ horizontal”属性：

<div  data-role =“ controlgroup” data-type =“ horizontal” >
  <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 =“ horizontal” >
<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>

结果如下：

jquery改变自己button的名字 jquery修改按钮名称_jquery_12

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

有时按钮需要被关闭（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>

此例中四个关闭按钮的方式都分别套用到超连结按钮与表单按钮上：

jquery改变自己button的名字 jquery修改按钮名称_javascript_13

可见“搜寻”与“首页”这两个按钮仍然是开启可按状态，前者表示超连结按钮无法用呼叫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>

网页刚开启时全部按钮预设为关闭，按“全部开启”与“全部关闭”结果如下：

jquery改变自己button的名字 jquery修改按钮名称_javascript_14