JQuery ui的旋转器（Spinner）

Spinner可以获取输入框的是否禁用状态。
使用spinner.spinner("option","disabled") 不可用则返回true.
设置是否禁用。

spinner.spinner("enable");// 可用
spinner.spinner("disable");// 不可用

获取spinner元素
调用无参spinner()即可。
页面渲染发现生成的节点信息如下：

生成了带ui-spinner的class，以及ui-widget ui-widget-content ui-corner-all的span元素。
并且input标签也带上了ui-spinner-input样式。附带两个上下选择按钮。

spinner的销毁，使用spinner("destroy");调用之后变成了普通输入框。

值的获取，使用spinner("value");方法。

赋值采用spinner("value",num);方法

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Jquery ui 旋转器（spinner）</title><link rel="stylesheet" type="text/css" href="jquery-ui.css"><script type="text/javascript" src="external/jquery/jquery.js"></script><script type="text/javascript" src="jquery-ui.js"></script>
</head>
<body><p><label for="spinner">选择一个值：</label><input id="spinner" name="value"></p><p><button id="disable">切换禁用/启用</button><button id="destroy">切换部件</button></p><p><button id="getvalue">获取值</button><button id="setvalue">设置值为 5</button></p><script type="text/javascript">$(function(){var spinner = $("#spinner").spinner();$("#disable").click(function(){if(spinner.spinner("option","disabled")){spinner.spinner("enable");}else{spinner.spinner("disable");}});$("#destroy").click(function(){if(spinner.data("ui-spinner")){spinner.spinner("destroy");}else{spinner.spinner();}});$("#getvalue").click(function(){alert(spinner.spinner("value"));});$("#setvalue").click(function(){spinner.spinner("value",5);});$("button").button();// 设置按钮样式});</script>
</body>
</html>

页面效果如下：

JQuery ui的旋转器（Spinner）相关推荐

w3cschool教程之jQuery UI 教程概述
w3cschool教程之jQuery UI 教程概述链接地址: http://www.w3cschool.cc/jqueryui/jqueryui-tutorial.html w3cschool教程 ...
学习 jQuery UI
jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互.动画.特效和可更换主题的可视控件.我们可以直接用它来构建具有很好交互性的web应用程序 ...
JQUERY插件学习之jQuery UI
jQuery UI:http://jqueryui.com/ jQuery UI介绍: jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互 ...
jQuery UI基础学习笔记
1.jQuery UI下载与使用在jQuery里有第一部分 1.jQuery UI介绍认识jQuery UI 1.jQuery UI: 是以jQuery为基础的JavaScript网页用户 ...
jQuery插件 -- jQuery UI插件
jQuery UI 主要分为3个部分: 交互.微件和效果库交互:这里都是一些与鼠标交互相关的内容.包括拖动(Draggable).置放(Doppable).缩放(Resizable).选择(Sele ...
jQuery UI vs Kendo UI jQuery Mobile vs Kendo UI Mobile
jQuery UI vs Kendo UI http://jqueryuivskendoui.com/#introduction jQuery Mobile vs Kendo UI Mobile ht ...
jQuery Tools：Web开发必备的 jQuery UI 库
基本介绍 jQuery Tools 是基于 jQuery 开发的网站界面库,包含网站最常用的Tabs(选项卡).Tooltip(信息提示).Overlay(遮罩.弹窗).Scrollable(滚动控制 ...
使用Asp.net MVC, Jquery, Jquery UI构建基于Ajax的RIA应用.(更新Demo下载)
前天初学Asp.net MVC,发现有些东西用Web Form来做的确会比较方便. 但Asp.net MVC也有它的优点. 它如果跟Jquery和Jquery UI结合起来做基于Ajax的应用实在是太 ...
《jQuery UI 开发指南》——1.3　什么是CSS主题
本节书摘来自异步社区<jQuery UI开发指南>一书中的第1章,第1.3节,作者:[美]Eric Sarrion 译者:罗晴明 ,包勇明更多章节内容可以访问云栖社区"异步社区& ...

JQuery ui的旋转器（Spinner）

JQuery ui的旋转器（Spinner）相关推荐

最新文章

热门文章