一个简单Widget实例开发

移动开发
Widget实例开发是本文要介绍的内容,主要是来了解并学习Widget实例开发,本文内容不多,主要是以代码来实现内容的详解,来看详文。

Widget实例开发是本文要介绍的内容,主要是来了解并学习Widget实例开发,本文内容不多,主要是以代码来实现内容的详解,来看详文。
 
这里是一个简单的widget,在代码里也写了注释。

代码

  1. //此widget是将textbox进行修饰一下的。自身没有css,采用的是jquery ui css framework的样式  
  2. (function($){  
  3. //ui默认采用jquery的ui前缀,后面的是widget名称  
  4.     $.widget("ui.textboxdecorator", {  
  5. //此widget中没有options  
  6.         options:{  
  7.         },  
  8.         _init: function(){  
  9.             //验证是否是需要装饰的元素  
  10.               
  11.             if (!(this.element.attr("tagName").toLowerCase() === "input" || this.element.attr("tagName").toLowerCase() === "textarea")) {  
  12.                 return;  
  13.             }  
  14.             if (!(this.element.attr("type").toLowerCase() === "text" || this.element.attr("type").toLowerCase() === "password")) {  
  15.                 if (this.element.attr("tagName").toLowerCase() === "input")   
  16.                     return;  
  17.             }  
  18. //this.element也就是调用此widget的元素  
  19.             var e = this.element;  
  20. //ui-widget widget基本的样式,ui-state-default。默认状态的样式;ui- corner-all 圆角(基于css3,ie下不起作用)  
  21.             this.element.addClass("ui-widget ui-state-default ui-corner-all");  
  22.             //添加hover效果和active效果  
  23.                         this.element.mouseover(function(){  
  24.                 e.addClass("ui-state-hover");  
  25.             }).mouseout(function(){  
  26.                 e.removeClass("ui-state-hover");  
  27.             }).mousedown(function(){  
  28.                 e.addClass("ui-state-active");  
  29.             }).mouseup(function(){  
  30.                 e.removeClass("ui-state-active");  
  31.             });  
  32.         },  
  33. //销毁时,移除widget增加的样式  
  34.         destroy:function(){  
  35.             this.element.removeClass("ui-widget ui-state-default ui-corner-all ui-state-hover ui-state-active");  
  36.         }          
  37.     })  
  38. })(jQuery) 

在使用该widget的时候,需要引用jquery,jquery.ui.core.js,jquery.ui.widget.js文件,css文件需要jquery.ui.core.css和jquery.ui.theme.css两个文件

在调用的时候采用$("***"). textboxdecorator();来调用此widget

小结:一个简单Widget实例开发的内容介绍完了,希望通过Widget实例开发内容的学习能对你有所帮助!

责任编辑:zhaolei 来源: 博客园
相关推荐

2011-09-07 17:54:40

Android Wid开发

2011-09-08 13:11:07

Android Wid实例

2011-09-08 10:46:12

Widget

2010-07-26 14:25:06

Widget开发

2010-07-26 14:44:47

Widget开发

2021-03-29 13:00:50

代码替换开发

2009-09-01 16:14:06

C#窗口抖动

2009-07-15 13:41:00

JDBC实例

2011-05-27 16:57:13

Android widget

2011-09-07 11:15:25

2022-06-13 06:33:04

浏览器浏览器插件

2019-09-23 09:11:02

Python文本编辑器操作系统

2011-09-07 14:01:41

Android Wid实例

2011-09-09 13:23:17

Widget

2012-04-20 11:07:12

Titanium

2011-03-24 09:34:41

SPRING

2011-07-06 18:31:21

Xcode 4 iPhone 模拟器

2011-07-06 18:10:20

Xcode 4 iPhone

2011-02-28 13:04:27

RelativeLayAndroid Wid

2011-09-07 13:42:36

Android Wid实例
点赞
收藏

51CTO技术栈公众号