jquery ui_jQuery UI Button和Buttonset小部件

最新推荐文章于 2024-03-17 18:01:57 发布

cunchi4221

最新推荐文章于 2024-03-17 18:01:57 发布

阅读量549

点赞数

文章标签： javascript java js html jquery ViewUI

原文链接：https://www.journaldev.com/9136/jquery-ui-button-and-buttonset-widget

版权

jquery ui

jQuery UI provides two widgets called Button and Buttonset Widget for creating themeable buttons. We can use these widgets to enhance the look and feel of standard form elements like buttons, inputs, anchors etc. These widgets use the jQuery UI CSS framework to enhance its look and feel.

jQuery UI提供了两个名为Button和Buttonset Widget的小部件，用于创建主题化按钮。我们可以使用这些小部件来增强标准表单元素（如按钮，输入，锚点等）的外观。这些小部件使用jQuery UI CSS框架来增强其外观。

按钮和按钮集 (Button and Buttonset)

We can also convert radio buttons and check boxes to themeable buttons using Button widget. The Buttonset widget can be used to group related buttons in to a set, like grouping radio buttons. We can access Buttonset and Button widgets using buttonset() and button() methods respectively. Since these widgets are combined into a single file, we You can use all of the methods in the button widget with Buttonset .

我们还可以使用Button小部件将单选按钮和复选框转换为主题按钮。 Buttonset小部件可用于将相关按钮分组为一组，例如将单选按钮分组。我们可以分别使用buttonset()和button()方法访问Buttonset和Button小部件。由于这些小部件被合并到一个文件中，因此您可以将Button部件中的所有方法与Buttonset一起使用。

内容 (Contents)

按钮小部件选项 (Button Widget Options)

In this section, we will discuss about different options available to customize the jQueryUI Button widget.

在本节中，我们将讨论可用于自定义jQueryUI Button小部件的不同选项。

Options	Usage	Description
disabled	$( “.selector” ).button({,disabled: true});	Disables the buttons it it is set to true.
icons	$( “.selector” ).button({icons: { primary: “ui-icon-gear”, secondary: “ui-icon-triangle-1-s” }});	Specifies how icons are displayed, with or without text. By default, the primary icon is displayed on the left of the text and the secondary is displayed on its right.
label	$( “.selector” ).button({label: “custom label”});	Text displayed in the button.
text	$( “.selector” ).button({text: false});	Boolean value. Determines whether the text should display or not. the icons options should be enabled if its value is set to false.

选件	用法	描述
残障人士	$（“ .selector”）.button（{，disabled：true}）;	禁用设置为true的按钮。
图标	$（“ .selector”）.button（{icons：{primary：“ ui-icon-gear”，secondary：“ ui-icon-triangle-1-s”}}）;;	指定如何显示带有或不带有文本的图标。默认情况下，主图标显示在文本的左侧，辅助图标显示在文本的右侧。
标签	$（“ .selector”）.button（{label：“自定义标签”}）;	按钮中显示的文字。
文本	$（“ .selector”）.button（{text：false}）;	布尔值。确定是否显示文本。如果其值设置为false，则应启用图标选项。

The above table briefly describes all the available options in the jQueryUI Button widget.

上表简要描述了jQueryUI Button小部件中的所有可用选项。

按钮小部件方法 (Button Widget Methods)

In this section, we will look into the jQueryUI Button widget methods and its syntax. These methods are very useful when you deal with the Button and Buttonset widgets.

在本节中，我们将研究jQueryUI Button小部件方法及其语法。在处理Button和Buttonset小部件时，这些方法非常有用。

Methods	Usage	Description
destroy	$( “.selector” ).button( “destroy” );	Removes the functionality completely.
disable	$( “.selector” ).button( “disable” );	Disables the functionality
enable	$( “.selector” ).button( “enable” );	Enables the functionality.
option	$( “.selector” ).button( “option”, “disabled” )	Gets the current value associated with the specified optionName.
refresh	$( “.selector” ).button( “refresh” );	Refresh the visual state.
widget	$( “.selector” ).button( “widget” );	Returns a jQuery object containing the button widget.

方法	用法	描述
破坏	$（“ .selector”）.button（“销毁”）;	完全删除功能。
禁用	$（“ .selector”）.button（“禁用”）;	禁用功能
使能	$（“ .selector”）.button（“启用”）;	启用功能。
选项	$（“ .selector”）.button（“ option”，“ disabled”）	获取与指定的optionName关联的当前值。
刷新	$（“ .selector”）.button（“刷新”）;	刷新视觉状态。
小部件	$（“ .selector”）.button（“ widget”）;	返回包含按钮小部件的jQuery对象。

The above table briefly describes all the available methods in the jQueryUI Button widget.

上表简要描述了jQueryUI Button小部件中的所有可用方法。

按钮小部件事件 (Button Widget Events)

There is only one event associated with the button widget in jQuery UI, the create event.

jQuery UI中只有一个与按钮小部件关联的事件，即create事件。

Event	Usage	Description
create( event, ui )	$( “.selector” ).button({,create: function( event, ui ) {}});	Event is triggered when the button is created.

事件	用法	描述
create（event，ui）	$（“ .selector”）.button（{，create：function（event，ui）{}}）;	创建按钮时触发事件。

实际中的按钮小部件 (Button Widget in Action)

In this section, we will go through some of the methods and options available in Button and Buttonset widget

在本节中，我们将介绍Button和Buttonset小部件中可用的一些方法和选项。

简单按钮示例 (Simple Button Example)

The following example demonstrates the default functionality of button(). In the following example, you will see how to create themeable buttons for simple button element and anchor element.

下面的示例演示button()的默认功能。在下面的示例中，您将看到如何为简单的按钮元素和锚元素创建主题按钮。

simplebutton.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>jQuery UI Button</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <script>
        $(function() {
            $("a, button")
                .button()
                .click(function(event) {
                    event.preventDefault();
                });
        });
    </script>

</head>

<body>
    <button>Simple button</button>
    <a href="#">Simple Anchor</a>
</body>

</html>

You will see the following output on your browser.

您将在浏览器中看到以下输出。

演示地址

简单按钮集示例 (Simple Buttonset Example)

The following example demonstrates the usage of buttonset().

以下示例演示了buttonset()的用法。

simpleButtonset.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>jQuery UI ButtonSet</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/south-street/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
        $(function() {
            $("#radio").buttonset();
        });
    </script>
</head>

<body>

<form>

<div id="radio">
            <input type="radio" id="rad1" name="radio">
            <label for="rad1">Cricket</label>
            <input type="radio" id="rad3" name="radio" checked="checked">
            <label for="rad3">KickBoxing</label>
            <input type="radio" id="rad2" name="radio">
            <label for="rad2">Football</label>
        </div>

    </form>

</body>

</html>

You will see the following output on your browser.

您将在浏览器中看到以下输出。

演示地址

使用`icons`和`next`选项 (Using `icons` and `next` options)

The following example demonstrates the usage of icons and text options available in button widget.

以下示例演示了按钮小部件中可用的icons和text选项的用法。

buttonIcons.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>jQuery UI Button - Icons</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/south-street/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
        $(function() {
            $("button:first").button({
                icons: {
                    primary: "ui-icon-locked"
                },
                text: false
            }).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>First button</button>
    <button>Second button</button>
    <button>Third Button</button>
</body>

</html>

You will see the following output on your browser.

您将在浏览器中看到以下输出。

演示地址

The first and third button is displayed without text since we set the value of
因为我们将 text option to false. The text选项的值设置为false，所以第一个和第三个按钮显示为无文本。 primary icon is displayed on the left and primary图标显示在左侧， secondary on the right. secondary图标显示在右侧。

That’s all for now. I hope you will try all the methods and options available in Button and Buttonset widget. We will discuss about more widgets and jQuery features in the coming posts.

目前为止就这样了。我希望您能尝试Button和Buttonset小部件中可用的所有方法和选项。在接下来的文章中，我们将讨论更多的小部件和jQuery功能。

翻译自: https://www.journaldev.com/9136/jquery-ui-button-and-buttonset-widget

jquery ui

cunchi4221

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery ui_jQuery UI Button和Buttonset小部件

jquery uijQuery UI provides two widgets called Button and Buttonset Widget for creating themeable buttons. We can use these widgets to enhance the look and feel of standard form elements like buttons,...
复制链接

扫一扫