开发手册 欢迎您!
软件开发者资料库

JqueryUI - 按钮

JqueryUI按钮 - 从基本到高级概念的简单简单步骤学习JqueryUI,包括概述,环境设置,交互,可拖动,可放置,可调整大小,可选,可排序,小部件,手风琴,自动完成,按钮,Datepicker,对话框,菜单, Progressbar,Slider,Spinner,Tabs,Tooltip,Effects,Add Class,Color Animation,Effect,Hide,Remove Class,Show,Switch Class,Toggle,Toggle Class,Utilities,Position,Widget Factory

jQueryUI提供了button()方法,用于将HTML元素(如按钮,输入和锚点)转换为可主题的按钮,并自动管理鼠标移动,所有这些都由jQuery UI透明地管理.

为了对单选按钮进行分组,Button还提供了一个名为 Buttonset 的附加小部件.通过选择容器元素(包含单选按钮)并调用 .buttonset()来使用 Buttonset .

语法

button()方法可用于两种形式 :

  • $(selector, context).button (options)方法

  • $(selector, context).button (options)方法


$ (selector, context).button (options) 方法

按钮(选项)方法声明应将HTML元素视为按钮. options 参数是一个指定按钮行为和外观的对象.

语法

$(selector, context).button (options);


您可以使用Javascript对象一次提供一个或多个选项.如果要提供多个选项,则使用逗号分隔它们,如下所示;

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


下表列出了可与此方法一起使用的不同选项 :

Sr.No.选项&描述
1disabled

此选项取消激活该按钮设为 true .默认情况下,其值为 false .

选项 - 已停用

此选项取消激活按钮设置为 true .默认情况下,其值为 false .

语法

  $(".selector").button({disabled:true});
2icons

此选项指定在按钮中显示一个或两个图标:左侧是主图标,右侧是次要图标.主要图标由对象的 primary 属性标识, secondary 图标由secondary属性标识.默认情况下,其值为 primary:null,secondary:null .

选项 - 图标

此选项指定在按钮中显示一个或两个图标:左侧是主图标,右侧是次要图标.主要图标由对象的 primary 属性标识, secondary 图标由secondary属性标识.默认情况下,其值为 primary:null,secondary:null .

语法

  $(".selector").button({icons:{primary:"ui-icon-gear",secondary:"ui-icon-triangle-1-s"}}) ;
3label

此选项指定要在覆盖自然标签的按钮上显示的文本.如果省略,则显示元素的自然标签.在单选按钮和复选框的情况下,自然标签是< label>与控件关联的元素.默认情况下,其值为 null .

选项 - 标签

此选项指定要覆盖自然标签的按钮上显示的文本.如果省略,则显示元素的自然标签.在单选按钮和复选框的情况下,自然标签是< label>与控件关联的元素.默认情况下,其值为 null .

语法

  $(".selector").button({label:"custom label"});
4text

此选项指定是否在按钮上显示文本.如果指定为 false ,则仅当(并且仅当)icons选项指定至少一个图标时,才会禁止文本.默认情况下,其值为 true .

选项 - 文字

此选项指定是否在按钮上显示文本.如果指定为 false ,则仅当(并且仅当)icons选项指定至少一个图标时,才会禁止文本.默认情况下,其值为 true .

语法

  $(".selector").button({text:false});

默认功能

以下示例演示了按钮小部件功能的简单示例,不将参数传递给按钮()方法.

               jQuery UI Buttons functionality                                             A button element            An anchor            Toggle      

                        Left                  Middle                  Right      
   


让我们将上述代码保存在HTML文件 buttonexample.htm 中,并在支持javascript的标准浏览器中打开它,你应该看到以下输出.现在,您可以使用结果

此示例演示了可用于按钮的标记:按钮元素,提交类型的输入和锚点.

使用图标,文本和禁用

以下示例演示了JqueryUI的按钮功能中两个选项图标,文本和禁用的用法.

               jQuery UI Buttons functionality                                                      Button with icon only                     Button Disabled                     Button with two icons         

让我们将上述代码保存在HTML文件buttonexample.htm中,并在支持javascript的标准浏览器中打开它,您应该看到以下输出. 现在,你可以玩结果

在这里,您可以看到一个只有图标的按钮,一个带有两个图标的按钮和一个禁用按钮.


$ (selector, context).button ("action", params) 方法

按钮("action",params)方法可以对按钮执行操作,例如禁用按钮. 该动作在第一个参数中被指定为一个字符串(例如,"禁用"以禁用按钮). 请查看下表中可以传递的操作.

Syntax

$(selector, context).button ("action", params);

下表列出了可以与此方法一起使用的不同操作

Sr.No.Action & Description
1destroy

此操作完全删除元素的按钮功能. 元素返回到pre-init状态. 此方法不接受任何参数.

Action - destroy

此操作完全删除元素的按钮功能. 元素返回到pre-init状态. 此方法不接受任何参数.

Syntax

$( ".selector" ).button("destroy");
2disable

此操作会禁用元素的按钮功能. 此方法不接受任何参数.

Action - disable

此操作会禁用元素的按钮功能. 此方法不接受任何参数.

Syntax

$( ".selector" ).button("disable");
3enable

此操作启用元素的按钮功能. 此方法不接受任何参数.

Action - enable

此操作启用元素的按钮功能. 此方法不接受任何参数.

Syntax

$( ".selector" ).button("enable");
4option( optionName )

此操作检索optionName中指定的选项的值. 其中optionName是一个String.

Action - option( optionName )

此操作检索optionName中指定的选项的值. 其中optionName是一个String.

Syntax

var isDisabled = $( ".selector" ).button( "option", "disabled" );
5option

此操作检索包含表示当前按钮选项哈希的键/值对的对象.

Action - option

此操作检索包含表示当前按钮选项哈希的键/值对的对象.

Syntax

$( ".selector" ).button("option");
6option( optionName, value )

此操作设置与指定的optionName关联的按钮选项的值.

Action - option( optionName, value )

此操作设置与指定的optionName关联的按钮选项的值. 其中optionName是要设置的选项的名称,value是要为该选项设置的值.

Syntax

$( ".selector" ).button( "option", "disabled", true );
7option( options )

此操作为按钮设置一个或多个选项. 其中options是要设置的选项 - 值对的映射.

Action - option( options )

此操作为按钮设置一个或多个选项. 其中options是要设置的选项 - 值对的映射.

Syntax

$( ".selector" ).button( "option", { disabled: true } );
8refresh

此操作刷新按钮的显示. 当程序处理按钮并且显示器不一定对应于内部状态时,这很有用. 此方法不接受任何参数.

Action - refresh

此操作刷新按钮的显示. 当程序处理按钮并且显示器不一定对应于内部状态时,这很有用. 此方法不接受任何参数.

Syntax

$( ".selector" ).button("refresh");
9widget

此操作返回包含button元素的jQuery对象. 此方法不接受任何参数.

Action - widget

此操作返回包含button元素的jQuery对象. 此方法不接受任何参数.

Syntax

$( ".selector" ).button("widget");

Example

现在让我们看一个使用上表中的操作的示例. 以下示例演示了destroy()和disable()方法的用法.

               jQuery UI Buttons functionality                                                      I'm destroyed                        I'm disabled                     play         

让我们将上面的代码保存在HTML文件buttonexample.htm中并在支持javascript的标准浏览器中打开它,你应该看到以下输出

按钮上的事件管理

除了我们在前面几节中看到的按钮(选项)方法之外,JqueryUI还提供了事件方法为特定事件触发.这些事件方法列在下面 :

Sr.No.事件方法&描述
1create(event,ui)

创建按钮时会触发此事件.其中事件的类型为事件,而 ui 的类型为 Object .

事件 - 创建(事件,ui)

创建按钮元素时会触发此事件.其中事件的类型为事件,而 ui 的类型为 Object .

语法

  $(".selector").button({ create:function (event,ui){} });

示例

以下示例演示按钮窗口小部件功能的事件方法用法.此示例演示了事件创建的使用.

               jQuery UI Buttons functionality                                                                  A button element            

   


让我们将上述代码保存在HTML文件 buttonexample.htm 中,并在支持javascript的标准浏览器中打开它,你还必须看到以下输出 :