基于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);

posted on 2014-10-26 22:14 alicewang999 阅读(160) 评论(0) 收藏举报