<!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);