一个简单的widget
来源:互联网 发布:数据库审计方案 编辑:程序博客网 时间:2024/05/21 10:44
这里是一个简单的widget,在代码里也写了注释。
代码
<!--
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
-->//此widget是将textbox进行修饰一下的。自身没有css,采用的是jquery ui css framework的样式
(function($){
//ui默认采用jquery的ui前缀,后面的是widget名称
$.widget("ui.textboxdecorator", {
//此widget中没有options
options:{
},
_init: function(){
//验证是否是需要装饰的元素
if (!(this.element.attr("tagName").toLowerCase() === "input" || this.element.attr("tagName").toLowerCase() === "textarea")) {
return;
}
if (!(this.element.attr("type").toLowerCase() === "text" || this.element.attr("type").toLowerCase() === "password")) {
if (this.element.attr("tagName").toLowerCase() === "input")
return;
}
//this.element也就是调用此widget的元素
var e = this.element;
//ui-widget widget基本的样式,ui-state-default。默认状态的样式;ui- corner-all 圆角(基于css3,ie下不起作用)
this.element.addClass("ui-widget ui-state-default ui-corner-all");
//添加hover效果和active效果
this.element.mouseover(function(){
e.addClass("ui-state-hover");
}).mouseout(function(){
e.removeClass("ui-state-hover");
}).mousedown(function(){
e.addClass("ui-state-active");
}).mouseup(function(){
e.removeClass("ui-state-active");
});
},
//销毁时,移除widget增加的样式
destroy:function(){
this.element.removeClass("ui-widget ui-state-default ui-corner-all ui-state-hover ui-state-active");
}
})
})(jQuery)
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
-->//此widget是将textbox进行修饰一下的。自身没有css,采用的是jquery ui css framework的样式
(function($){
//ui默认采用jquery的ui前缀,后面的是widget名称
$.widget("ui.textboxdecorator", {
//此widget中没有options
options:{
},
_init: function(){
//验证是否是需要装饰的元素
if (!(this.element.attr("tagName").toLowerCase() === "input" || this.element.attr("tagName").toLowerCase() === "textarea")) {
return;
}
if (!(this.element.attr("type").toLowerCase() === "text" || this.element.attr("type").toLowerCase() === "password")) {
if (this.element.attr("tagName").toLowerCase() === "input")
return;
}
//this.element也就是调用此widget的元素
var e = this.element;
//ui-widget widget基本的样式,ui-state-default。默认状态的样式;ui- corner-all 圆角(基于css3,ie下不起作用)
this.element.addClass("ui-widget ui-state-default ui-corner-all");
//添加hover效果和active效果
this.element.mouseover(function(){
e.addClass("ui-state-hover");
}).mouseout(function(){
e.removeClass("ui-state-hover");
}).mousedown(function(){
e.addClass("ui-state-active");
}).mouseup(function(){
e.removeClass("ui-state-active");
});
},
//销毁时,移除widget增加的样式
destroy:function(){
this.element.removeClass("ui-widget ui-state-default ui-corner-all ui-state-hover ui-state-active");
}
})
})(jQuery)
在使用该widget的时候,需要引用jquery,jquery.ui.core.js,jquery.ui.widget.js文件,css文件需要jquery.ui.core.css和jquery.ui.theme.css两个文件
在调用的时候采用$("***"). textboxdecorator();来调用此widget。
- 一个简单的widget
- 一个切换的Widget
- 简单闹铃widget的制作
- 简单闹铃widget的制作
- Widget的简单使用详解
- Widget的简单使用介绍
- 一个叫做Widget的类
- 使用Adobe AIR写的一个简单的 定时/延迟 关机的小Widget
- Ophone/OMS编程:编写JIL Widget的一个最简单的例子:hello world。
- [Qt]一个简单的Qt Widget多线程处理图像的例子
- Android 系列 6.32创建一个简单的应用程序小部件widget
- 初识Qt,创建简单的widget!
- Yii小物件widget的简单操作
- 简单的widget日历小插件
- [php] Thinkphp Widget的简单使用
- [Yii2 Widget]sortinput的简单使用
- Android 开发之简单的Widget
- iOS中widget的简单使用。
- POJ-1947 简单的树型DP,但要考虑完全
- C++ sdk 创建桌面快捷方式
- Box2D 内存管理 - 小型对象分配器(SOA)的实现
- 在WinCE下,应用程序直接读/写/擦除flash设备的方法
- web.xml加载顺序
- 一个简单的widget
- 虚拟内存内存碎片
- Devexpress 的等待窗体
- java压缩与解压缩文件(利用apache的ant.jar)
- javascript的一些小常识(待续)
- the panel encountered a problem while loading,"OFIID:GNOME_NotificationAreaApplet"
- DEV C++ VC6.0 Visual Studio 显示行号
- ShellExecute与ShellExecuteEx的用法
- IP电话系统语音抖动问题的分析