基于Jquery的插件
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script src="./OSS/jquery-1.11.1.js"></script> <script src="./plugin/emailfield.js"></script> <script src="./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 functions 54 var e = new Emailfield(this,options); 55 return e.init(); 56 }; 57 58 })(jQuery);