jQuery UI按钮

jQuery UI按钮

通过jQuery UI框架,让我们学习如何使用jQuery UI button()方法来设计可主题的直观按钮,以及管理与之相关的选项、动作、事件和鼠标运动。这些按钮在网页设计项目中是非常有用的,在这些项目中,用户界面被期望是高度互动的。
语法:

$(selector, context).button(options)

参数options负责按钮的设计或外观,以及它的行为。
如果有一个以上的选项需要提供,那么你可以用逗号来分隔它们,如下所示。

$(selector, context).button ({option1: value1, 
       option2: value2, option3: value3...})

button()方法也可以处理按钮上的动作,如下所示。

 $(selector, context).button ("action", [parameters]);
  • jQuery UI库的链接。
<link rel=’stylesheet’
href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js”>
</script>
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js”> </script>

或者

<link rel=’stylesheet’   
href=”https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css”>   
<script src=”https://code.jquery.com/jquery-1.10.2.js”> </script>   
<script src=”https://code.jquery.com/ui/1.10.4/jquery-ui.js”> </script>   

例子1:下面的例子演示了创建基本按钮。

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
    <title>jQueryUI Button</title>
  
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js">
    </script>
  
    <script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js">
    </script>
  
    <link href=
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css"
        rel="stylesheet" type="text/css" />
          
    <style>
        .height {
            height: 10px;
        }
    </style>
  
    <script>
        (function () {
            ("#buttonId, #submitId, #anchorId").button();
        });
    </script>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <b>jQueryUI | Button </b>
    <div class="height"> </div><br>
    <div class="buttons-div">
        <button id="buttonId">Button element</button>
        <input id="submitId" type="submit" value="Submit button">
        <a id="anchorId" href="">Anchor</a>
    </div>
  
</body>
  
</html>

上述示例程序的脚本部分也可以写成如下形式

<script>
    (function () {
        ("#buttonId, #submitId, #anchorId")
            .button().click(function (event) {
                event.preventDefault();
            });
    });
</script>

输出:

jQuery UI按钮

例子2:按钮的视觉分组是通过jQuery UI buttonset()方法来处理的。

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
  
    <title>jQueryUI | Checkboxradio buttons</title>
  
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js">
    </script>
  
    <script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js">
    </script>
  
    <link href=
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css"
        rel="stylesheet type=" text/css" />
  
    <script>
        (function () {
            ("input").checkboxradio();
            $("#buttonsetId").buttonset();
        });
    </script>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <b>jQueryUI | Checkboxradio buttons </b>
  
    <h2>Radio buttons Group</h2>
    <div id="buttonsetId">
        <fieldset style="width:300px">
            <legend>Select a Location: </legend>
            <label for="radioId1">Delhi</label>
            <input type="radio" name="radioId1" id="radioId1">
            <label for="radioId2">Pune</label>
            <input type="radio" name="radioId2" id="radioId2">
            <label for="radioId3">Hyderabad</label>
            <input type="radio" name="radioId3" id="radioId3">
        </fieldset>
    </div>
</body>
  
</html>

输出:

jQuery UI按钮

例子3:下面的例子演示了不同类型的jQuery UI按钮的使用。

<!DOCTYPE html>
<html>
  
<head>
    <title>jQueryUI Button types</title>
  
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js">
    </script>
  
    <script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js">
    </script>
  
    <link href=
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css"
        rel="stylesheet" type="text/css" />
  
    <style>
        .height {
            height: 10px;
        }
    </style>
  
    <script>
        (function () {
            ('.btnClass').click(function (event) {
                event.preventDefault();
                $(this).button();
            });
        });
    </script>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <b>jQueryUI | Button types</b>
    <div class="height"></div><br>
    <input class="btnClass" type="submit" value="Submit button">
    <input class="btnClass" type="reset" value="Reset button">
    <div class="height"></div><br />
    <input class="btnClass" type="button" value="Input button">
    <button class="btnClass">Simple button </button>
    <div class="height"></div><br />
    <a class="btnClass" href="#">Anchor button</a>
    <input class="btnClass" type="checkbox" id="checkboxID">
    <label for="checkboxID">Toggle button</label><br>
</body>
  
</html>

输出:

  • 点击按钮之前:
    jQuery UI按钮

  • 点击按钮后:
    jQuery UI按钮

$(selector, context).button (options)方法:
例子4:下面的例子演示了jQuery UI button()方法的使用,其中有texticons选项。其他选项也被处理,例如通过iconPosition选项设置图标位置为”开始”或”结束”。在按钮上可以设置一个或两个图标。主要的图标被设置在左边,次要的图标被设置在右边,如下图所示。jQuery UI button()库中有很多选项,程序员可以根据项目要求选择或定制其他选项。

<!DOCTYPE html>
<html>
  
<head>
    <title>jQueryUI | Setting icons, text options</title>
  
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
  
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js">
    </script>
  
    <script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js">
    </script>
  
    <link href=
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css"
        rel="stylesheet" type="text/css" />
  
    <script>
        (function () {
            ("#iconBtnId").button({
                iconPosition: "end",
  
                // text shown on the button
                label: "Label given by coder",          
                icons: {
                    primary: "ui-icon-locked"
                },
  
                text: true // text to be shown or not
            });
            $("#buttonId").button({
                icons: {
                    primary: "ui-icon-gear",
                    secondary: "ui-icon-triangle-1-s"
                }
            });
        });
    </script>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <b>jQueryUI | Setting icons, text options </b>
  
    <h2>Other functionalities of jQuery UI buttons</h2>
    <button id="iconBtnId">
        Button with icon
    </button>
    <button id="buttonId">
        Button with two icons
    </button>
</body>
  
</html>

输出:

jQuery UI按钮

例子5: jQuery UI button()提供了许多方法和选项,可以用来控制主题小部件。程序员可以根据需要使用其中任何一个。这个例子只演示了其中的一些作为指导。
下面的代码演示了由按钮触发的点击和变化事件,以及像图标、销毁和禁用等选项的使用。 jQuery UI button()方法也支持事件管理的实现。它还支持jQuery UI按钮的启用和禁用状态。

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
  
    <title>jQueryUI | Actions on Buttons </title>
  
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js">
    </script>
  
    <script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js">
    </script>
  
    <link href=
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css"
        rel="stylesheet" type="text/css" />
  
    <style>
        .height {
            height: 10px;
        }
    </style>
  
    <script>
        (function () {
            ('#destroyedBtnId').button().click(function (e) {
  
                /* This option removes and returns
                   the element to its original state */
                ('#destroyedBtnId').button("destroy");
                e.preventDefault();
            })
            ("#destroyedBtnId").button({
  
                // It is set to true, so that the
                // text is visible
                text: true,
                icons: {
                    primary: "ui-icon-seek-start"
                }
            });
            ("#disabledBtnId").button({
                icons: {
                    primary: "ui-icon-seek-prev"
                }
            });
  
            // It disables the themeable button
            ("#disabledBtnId").button('disable');
  
            ("#btnToPlay").button({
                text: true,
                icons: {
                    primary: "ui-icon-play"
                }
            });
  
            // 'change' event management
            ('#checkboxId').change(function (e) {
                ('#btnToEnable').button(
  
                    // Handles status of the button
                    // through 'enable' or 'disable'           
                    (':checked').length == 1 ? "enable" : "disable"
                )
            });
            $("#btnToEnable").button();
        });
    </script>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <b>jQueryUI | Actions on Buttons </b>
    <div class="height"> </div><br>
    <div class="buttons-div">
        <button id="destroyedBtnId">This button is destroyed</button>
        <button id="disabledBtnId">This button is disabled</button>
        <button id="btnToPlay">Play this button </button>
        <div class="height"> </div><br>
        <div>Click here: <input type=checkbox id="checkboxId" /></div>
        <button id="btnToEnable">Enable/Disable effect </button>
    </div>
</body>
  
</html>

输出:

  • 在点击按钮之前。
    jQuery UI按钮

  • 点击按钮后。
    jQuery UI按钮

例子6:当一个按钮被创建时,事件被触发,如以下代码实现。

<!DOCTYPE html>
<html>
  
<head>
    <title>jQueryUI | Create event </title>
  
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js">
    </script>
  
    <script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js">
    </script>
  
    <link href=
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css"
        rel="stylesheet" type="text/css" />
  
    <style>
        .height {
            height: 10px;
        }
    </style>
  
    <script>
  
        // When the button is created, event is triggered
        (function () {
            ("#btnCreateId").button({
                    create: function (event) {
                        $(event.target).click(function (event) {
                            event.preventDefault();
                            alert("Create event button was pressed!");
                        })
                    }
            });
        });
    </script>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <b>jQueryUI | Create event </b><br />
    <div class="height"></div>
    <button id="btnCreateId">Create event</button>
</body>
  
</html>

输出:

  • 在点击按钮之前。
    jQuery UI按钮

  • 点击按钮后。
    jQuery UI按钮

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程