zoukankan      html  css  js  c++  java
  • 一个简单的widget

    这里是一个简单的widget,在代码里也写了注释。

    代码
    //此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。

  • 相关阅读:
    用JS实现汉字转拼音
    jQuery Validate验证框架详解
    移动前端自适应适配布局解决方案和比较
    js获取当前日期时间“yyyy-MM-dd HH:MM:SS”
    jQuery cookie
    dataTable 从服务器获取数据源的两种表现形式
    dataTable 参数说明
    如何在HTML网页中显示HTML标签内容?
    java中构造函数前用public修饰与没有任何修饰符相比,有什么区别?
    面向对象设计
  • 原文地址:https://www.cnblogs.com/dail/p/1767816.html
Copyright © 2011-2022 走看看