编写一个简单的widget
这里是一个简单的widget,在代码里也写了注释。
(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。
转载于:https://www.cnblogs.com/zpc870921/archive/2012/08/29/2661721.html
编写一个简单的widget相关推荐
- 使用Android Studio编写一个简单的音乐盒
文章目录 一.知识要点 二.xml代码 activity_main.xml 三.java代码 MainActivity.java MusicService.java 四.运行界面展示 五. 源码Git ...
- 编写一个简单的生日快乐APP
编写一个简单的生日快乐APP 一.关闭之前的helloworld程序 点击file,然后close project,就完成关闭了. 二.创建一个新的happybirthday程序 三.下面开始整个AP ...
- 使用Flutter编写一个简单的天气查询App
使用Flutter编写一个简单的天气查询App Flutter项目目录分析 入口函数 home:主页面 编写天气应用 网络请求 数据解析 布局编写 Flutter里基础的Widget 上 中 下 Fl ...
- 编写一个最简单的.php,学习猿地- 说明 如果我们要编写一个简单的PHP脚本,需要学习哪些...
说明 如果我们要编写一个简单的 PHP 脚本,需要学习哪些基础知识呢? PHP 基础 PHP 脚本可放置于文档中的任何位置. 标准 的 PHP 脚本以 <?php 开头,以 ?> 结尾: ...
- java编写存钱_用Java编写一个简单的存款
package desposit.money; public class DespositMoney { public static void main(String[] args) { Custom ...
- python脚本编写_如何用Python包编写一个简单的脚本,表达你对父母的爱?
全文共2800字,预计学习时长6分钟 在繁忙的工作生活中,我们经常忘记给所爱的人发WhatsApp.本教程将使用Python包Twilio编写一个简单的Python脚本来发送WhatsApp消息.我们 ...
- 用java编写一个简单计算器
java 采用java编写一个简单计算器,使用awt和swing 代码如下: import java.awt.Color; import java.awt.Font; import java.awt. ...
- 用 Go 编写一个简单的 WebSocket 推送服务
用 Go 编写一个简单的 WebSocket 推送服务 本文中代码可以在 github.com/alfred-zhon- 获取. 背景 最近拿到需求要在网页上展示报警信息.以往报警信息都是通过短信,微 ...
- ros如何编译python文件_Python为ROS编写一个简单的发布者和订阅者
Python为ROS编写一个简单的发布者和订阅者 1.创建工作空间 1.1建立文件夹hello_rospy,再在该目录下建立子目录src,并创建工作空间 mkdir -p ~/hello_rospy/ ...
- Java制作一个盒子程序_编写一个简单的Java程序,模拟计算器的功能。
提问:编写一个简单的Java程序,模拟计算器的功能. 网友回答: 程序参考: import java.awt.*; import java.awt.event.ActionEvent; import ...
最新文章
- 皮一皮:原来骑骆驼要求这么高。。
- [转]ubuntu linux下DNS重启后丢失(不是Network-manager造成的情况)
- 中国呼叫中心产业五大关键技术
- 1000道Python题库系列分享19(81道填空判断题)
- python常用包有哪些品牌_python 常用包总结
- 面试题思考:try 代码块中含 return 语句时,代码执行顺序
- 准考证打印系统关闭怎么办_2021国家公务员考试准考证打印系统关闭了怎么办...
- 使用Python Tkinter开发GPGGA的坐标转换工具
- cad批量打印快捷键_CAD高效批量打印成PDF
- c++语言编程软件视频教程下载,C++编程开发全套视频教程下载
- python问卷星微信登录_使用Python自动填写问卷星(pyppeteer反爬虫版)
- 有哪些有用的人际交往小常识?
- 因為 because、since 、as、for、because of、owing to、due to
- 计算机一级降序和升序,按时间降序排序
- iis php 500 内部服务器错误,服务器_iis的http 500内部服务器错误的解决,iis的http 500内部服务器错误是 - phpStudy...
- AcWing 1017 怪盗基德的滑翔翼
- 零基础入门学习Python(21):魔法方法(1)构造和析构
- 【Android学习日记】
- 关于IOS的Autolayout特性的理解以及使用
- 国际多币种移动平台:换汇+支付(Wise/Revolut)
热门文章
- 图片hover且设置transform其父级border-radius失效
- Consider defining a bean of type ‘com.bsj.system.service.RedisService‘ in your configuration.
- mybatis中查询时间段内的数据(当只有一个时间字段时)
- WinForm后台任务(定时任务)传递消息给主窗体并更新主窗体文本框内容
- 使用自定义函数替代Linux rm命令
- Servlet--ListenerFilter
- linux操作命令 mongo_MongoDB常用操作命令整理
- Python基础知识笔记(二)
- (day 37 - 动态规划)剑指 Offer 46. 把数字翻译成字符串
- 变量名可以是python的关键字_python – 如何使用关键字作为变量名?