jQuery UI
  • [jQuery UI]jQuery UI 教程
  • [jQuery UI]jQuery UI 简介
  • [jQuery UI]jQuery UI 下载
  • [jQuery UI]jQuery UI 使用
  • [jQuery UI]jQuery UI 定制
  • [jQuery UI]jQuery UI 工作原理
  • [jQuery UI]jQuery UI 主题
  • [jQuery UI]jQuery UI ThemeRoller
  • [jQuery UI]jQuery UI CSS 框架 API
  • [jQuery UI]jQuery UI 设计主题
  • [jQuery UI]jQuery UI 部件库(Widget Factory)
  • [jQuery UI]jQuery UI 通过部件库(Widget Factory)扩展小部件
  • [jQuery UI]jQuery UI 小部件(Widget)方法调用
  • [jQuery UI]jQuery UI 为什么使用部件库(Widget Factory)
  • [jQuery UI]jQuery UI 如何使用部件库(Widget Factory)
  • [jQuery UI]jQuery UI 1.10 API 文档
  • [jQuery UI]jQuery UI API 类别 - 特效(Effects)
  • [jQuery UI]jQuery UI API类别 - 特效核心Effects Core
  • [jQuery UI]jQuery UI API 类别 - 交互Interactions
  • [jQuery UI]jQuery UI API 类别 - 方法重载Method Overrides
  • [jQuery UI]jQuery UI API 类别 - 方法Methods
  • [jQuery UI]jQuery UI API 类别 - 选择器Selectors
  • [jQuery UI]jQuery UI API 类别 - 主题Theming
  • [jQuery UI]jQuery UI API 类别 - UI 核心UI Core
  • [jQuery UI]jQuery UI API 类别 - 实用工具Utilities
  • [jQuery UI]jQuery UI API 类别 - 小部件Widgets
  • [jQuery UI]jQuery UI 实例
  • [jQuery UI]jQuery UI 实例 - 拖动Draggable
  • [jQuery UI]jQuery UI 实例 - 放置Droppable
  • [jQuery UI]jQuery UI 实例 - 缩放Resizable
  • [jQuery UI]jQuery UI 实例 - 选择Selectable
  • [jQuery UI]jQuery UI 实例 - 排序Sortable
  • [jQuery UI]jQuery UI 实例 - 折叠面板Accordion
  • [jQuery UI]jQuery UI 实例 - 自动完成Autocomplete
  • [jQuery UI]jQuery UI 实例 - 按钮Button
  • [jQuery UI]jQuery UI 实例 - 日期选择器Datepicker
  • [jQuery UI]jQuery UI 实例 - 对话框Dialog
  • [jQuery UI]jQuery UI 实例 - 菜单Menu
  • [jQuery UI]jQuery UI 实例 - 进度条Progressbar
  • [jQuery UI]jQuery UI 实例 - 滑块Slider
  • [jQuery UI]jQuery UI 实例 - 旋转器Spinner
  • [jQuery UI]jQuery UI 实例 - 标签页Tabs
  • [jQuery UI]jQuery UI 实例 - 工具提示框Tooltip
  • [jQuery UI]jQuery UI 实例 - 特效Effect
  • [jQuery UI]jQuery UI 实例 - 显示Show
  • [jQuery UI]jQuery UI 实例 - 隐藏Hide
  • [jQuery UI]jQuery UI 实例 - 切换Toggle
  • [jQuery UI]jQuery UI 实例 - 添加Class-Add Class
  • [jQuery UI]jQuery UI 实例 - 移除 Class-Remove Class
  • [jQuery UI]jQuery UI 实例 - 切换Class-Toggle Class
  • [jQuery UI]jQuery UI 实例 - 转换Class-Switch Class
  • [jQuery UI]jQuery UI 实例 - 颜色动画Color Animation
  • [jQuery UI]jQuery UI 实例 - 定位Position
  • [jQuery UI]jQuery UI 实例 - 部件库Widget Factory
  • 直达腾讯云服务器
    腾讯云服务器,数据库,短信等热销产品限量秒杀;新购爆款3折起;
    腾讯云数据库MySQL入门机型仅12元/月
    腾讯云云服务器新购特惠,最低2折起,1核1G3年仅794.73元,即0.73元/日。
    腾讯云国际顶级CA机构SSL证书8.8折,云解析买一年最高送半年!
    腾讯云为数百万企业和开发者提供安全、稳定的云服务器、云数据库、CDN等云服务
    腾讯云服务器安全可靠高性能,多种配置供您选择
    腾讯云数据库性能卓越稳定可靠,为您解决数据库运维难题
    阿里云服务器入口
    180天免费用腾讯云服务器马上领取
    您当前位置:狗鱼MySQL教程 >> javaScript >> jQuery UI >> jQuery UI 实例 - 按钮Button
    jQuery UI 实例 - 按钮(Button)
    更新日期: 2017年07月21日 来源: 本站原创 作者: 佚名 阅读:
    上一篇jQuery UI 实例 - 自动完成Autocomplete 下一篇:jQuery UI 实例 - 日期选择器Datepicker

    jQuery UI 实例 - 按钮(Button)

    用带有适当的悬停(hover)和激活(active)的样式的可主题化按钮来加强标准表单元素(比如按钮、输入框、锚)的功能。

    如需了解更多有关 button 部件的细节,请查看 API 文档 按钮部件(Button Widget)。

    默认功能

    可用于按钮的标记实例:一个 button 元素,一个类型为 submit 的 input 元素和一个锚。

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jquery ui 按钮(Button) - 默认功能</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
      <script>
      $(function() {
        $( "input[type=submit], a, button" )
          .button()
          .click(function( event ) {
            event.preventDefault();
          });
      });
      </script>
    </head>
    <body>
     
    <button>一个 button 元素</button>
     
    <input type="submit" value="一个提交按钮">
     
    <a href="#">一个锚</a>
     
     
    </body>
    </html>
    

    查看演示

    复选框

    通过 button 部件把复选框显示为切换按钮样式。与复选框相关的 label 元素作为按钮文本。

    本实例通过在一个公共的容器上调用 .buttonset(),演示了三个显示为按钮样式的复选框。

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI 按钮(Button) - 复选框</title>
      <link rel="stylesheet" 
    href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
      <script>
      $(function() {
        $( "#check" ).button();
        $( "#format" ).buttonset();
      });
      </script>
      <style>
      #format { margin-top: 2em; }
      </style>
    </head>
    <body>
     
    <input type="checkbox" id="check"><label for="check">切换</label>
     
    <div id="format">
      <input type="checkbox" id="check1"><label for="check1">B</label>
      <input type="checkbox" id="check2"><label for="check2">I</label>
      <input type="checkbox" id="check3"><label for="check3">U</label>
    </div>
     
     
    </body>
    </html>
    

    查看演示

    图标

    一些带有文本和图标的各种组合的按钮

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI 按钮(Button) - 图标</title>
      <link rel="stylesheet"
     href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
      <script>
      $(function() {
        $( "button:first" ).button({
          icons: {
            primary: "ui-icon-locked"
          },
          text: false
        }).next().button({
          icons: {
            primary: "ui-icon-locked"
          }
        }).next().button({
          icons: {
            primary: "ui-icon-gear",
            secondary: "ui-icon-triangle-1-s"
          }
        }).next().button({
          icons: {
            primary: "ui-icon-gear",
            secondary: "ui-icon-triangle-1-s"
          },
          text: false
        });
      });
      </script>
    </head>
    <body>
     
    <button>只带有图标的按钮</button>
    <button>图标在左侧的按钮</button>
    <button>带有两个图标的按钮</button>
    <button>带有两个图标且不带文本的按钮</button>
     
     
    </body>
    </html>
    

    查看演示

    单选

    三个单选按钮转变为一套按钮。

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI 按钮(Button) - 单选</title>
      <link rel="stylesheet" 
    href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
      <script>
      $(function() {
        $( "#radio" ).buttonset();
      });
      </script>
    </head>
    <body>
     
    <form>
      <div id="radio">
        <input type="radio" id="radio1" name="radio"><label for="radio1">选择 1</label>
        <input type="radio" id="radio2" name="radio"
     checked="checked"><label for="radio2">选择 2</label>
        <input type="radio" id="radio3" name="radio"><label for="radio3">选择 3</label>
      </div>
    </form>
     
     
    </body>
    </html>
    

    查看演示

    分割按钮

     

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI 按钮(Button) - 分割按钮</title>
      <link rel="stylesheet"
     href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
      <style>
        .ui-menu { position: absolute; width: 100px; }
      </style>
      <script>
      $(function() {
        $( "#rerun" )
          .button()
          .click(function() {
            alert( "Running the last action" );
          })
          .next()
            .button({
              text: false,
              icons: {
                primary: "ui-icon-triangle-1-s"
              }
            })
            .click(function() {
              var menu = $( this ).parent().next().show().position({
                my: "left top",
                at: "left bottom",
                of: this
              });
              $( document ).one( "click", function() {
                menu.hide();
              });
              return false;
            })
            .parent()
              .buttonset()
              .next()
                .hide()
                .menu();
      });
      </script>
    </head>
    <body>
     
    <div>
      <div>
        <button id="rerun">运行最后的动作</button>
        <button id="select">选择一个动作</button>
      </div>
      <ul>
        <li><a href="#">打开...</a></li>
        <li><a href="#">保存</a></li>
        <li><a href="#">删除</a></li>
      </ul>
    </div>
     
     
    </body>
    </html>
    

    查看演示

    工具栏

    一个多媒体播放器的工具栏。请看基础的标记:
    一些 button 元素,Shuffle 按钮是一个类型为 checkbox 的 input,Repeat 选项是三个类型为 radio 的 input。

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI 按钮(Button) - 工具栏</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
      <style>
      #toolbar {
        padding: 4px;
        display: inline-block;
      }
      /* support: IE7 */
      *+html #toolbar {
        display: inline;
      }
      </style>
      <script>
      $(function() {
        $( "#beginning" ).button({
          text: false,
          icons: {
            primary: "ui-icon-seek-start"
          }
        });
        $( "#rewind" ).button({
          text: false,
          icons: {
            primary: "ui-icon-seek-prev"
          }
        });
        $( "#play" ).button({
          text: false,
          icons: {
            primary: "ui-icon-play"
          }
        })
        .click(function() {
          var options;
          if ( $( this ).text() === "play" ) {
            options = {
              label: "pause",
              icons: {
                primary: "ui-icon-pause"
              }
            };
          } else {
            options = {
              label: "play",
              icons: {
                primary: "ui-icon-play"
              }
            };
          }
          $( this ).button( "option", options );
        });
        $( "#stop" ).button({
          text: false,
          icons: {
            primary: "ui-icon-stop"
          }
        })
        .click(function() {
          $( "#play" ).button( "option", {
            label: "play",
            icons: {
              primary: "ui-icon-play"
            }
          });
        });
        $( "#forward" ).button({
          text: false,
          icons: {
            primary: "ui-icon-seek-next"
          }
        });
        $( "#end" ).button({
          text: false,
          icons: {
            primary: "ui-icon-seek-end"
          }
        });
        $( "#shuffle" ).button();
        $( "#repeat" ).buttonset();
      });
      </script>
    </head>
    <body>
     
    <div id="toolbar" class="ui-widget-header ui-corner-all">
      <button id="beginning">开头</button>
      <button id="rewind">快退</button>
      <button id="play">播放</button>
      <button id="stop">停止</button>
      <button id="forward">快进</button>
      <button id="end">结尾</button>
     
      <input type="checkbox" id="shuffle"><label for="shuffle">Shuffle</label>
     
      <span id="repeat">
        <input type="radio" id="repeat0" name="repeat" checked="checked"><label for="repeat0">No Repeat</label>
        <input type="radio" id="repeat1" name="repeat"><label for="repeat1">Once</label>
        <input type="radio" id="repeatall" name="repeat"><label for="repeatall">All</label>
      </span>
    </div>
     
     
    </body>
    </html>
    

    查看演示

     

    感觉本站内容不错,读后有收获?

    我要小额赞助,鼓励提供更好的内容教程

    上一篇jQuery UI 实例 - 自动完成Autocomplete 下一篇:jQuery UI 实例 - 日期选择器Datepicker
    Copyright 2013-2017 Powered by 狗鱼MySQL教程,All Rights Reserved.
    广州相如计算机科技有限有限公司 版权所有 粤ICP备08130661号-4
    售前咨询:020-38667011 手机:13711588918