首页 > 代码库 > 基于Jquery的插件

基于Jquery的插件

2024-07-29 10:07:54   213人阅读

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/style.css" />    <script src="http://www.mamicode.com/OSS/jquery-1.11.1.js"></script>    <script src="http://www.mamicode.com/plugin/emailfield.js"></script>    <script src="http://www.mamicode.com/plugin/emailPlugin.js"></script>    <script type="text/javascript">        $(function() {            $(".email").emailPlugin({                ‘height‘: ‘40px‘,                ‘width‘: ‘400px‘,                ‘watermark‘: ‘To:‘            });        })    </script></head><body>    <div class="email">    </div></body></html>

 

 1 /** 2  * Created by Administrator on 14-10-26. 3  */ 4 /** 5  * Created by Administrator on 14-10-25. 6  */ 7 ;(function($, window, document,undefined) { 8     var Emailfield = function(ele, opt){ 9         this._element = ele,10 11             this.defaults ={12                 ‘height‘:‘30px‘,13                 ‘width‘:‘200px‘,14                 ‘bkcolor‘:‘#FF9900‘,15                 ‘watermark‘:‘xx‘16             },17 18             this.options = $.extend({}, this.defaults, opt);19     }20 21     Emailfield.prototype.init = function(){22         Emailfield._setStyle(this._element, this.options);23         //Emailfield._createInput(this._element, this.options);24 25         //return this.$element.css(‘height‘, ‘50px‘);26         //alert("init");27     };28 29     Emailfield.prototype._setWaterMark = function (){30         alert("_setWaterMark");31     };32 33     Emailfield._setStyle = function(ele,opt){34         ele.css("height", opt.height);35         ele.css("width", opt.width);36         ele.css("background-color", opt.bkcolor);37         ele.one("click",function(){38             Emailfield._createInput(this, opt);39         });40         //ele.addClass("emailinit");41         //this.prototype._setWaterMark();42     };43 44     Emailfield._createInput = function(ele, opt){45         var input = $("<input type =‘text‘>");46         var h = opt.height-2;47         input.css("height", opt.height-2);48         input.css("width", opt.width-20);49         input.appendTo(ele);50     };51 52     $.fn.emailPlugin = function(options){53         // chain jQuery functions54         var e = new Emailfield(this,options);55         return e.init();56     };57 58 })(jQuery);

 

基于Jquery的插件


联系
我们