码迷,mamicode.com
首页 > Web开发 > 详细

基于Jquery的插件

时间:2014-10-26 22:51:27      阅读:268      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   io   os   ar   java   sp   div   

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

 

基于Jquery的插件

标签:style   blog   color   io   os   ar   java   sp   div   

原文地址:http://www.cnblogs.com/alicewang999/p/4052908.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!