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

jQuery

时间:2015-01-07 16:45:30      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:

今天闲暇时间把自己以前写的一个文本框默认提示函数改成了一个小插件。下面是代码

1、引入jQuery库

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

 

2、HTML测试文本框

<input type="text" value="请输入地址" />

 

3、调用方式

<script>
$(function(){
    $("input").textboxHint({
        focc : "#f00",
        txt : "请输入"
    });
});
</script>

 

4、文本框插件

技术分享
<script>
/***
 * Copyright (c) 2015 http://www.cnblogs.com/cymmint/
 * Ver: textboxHint() 0.1
 * Date: 2015-01-07
 * Author: cymmint
 * Function: 文本框默认值提示文件设置
 */
(function($){
    $.fn.textboxHint = function(opts){
        var defaults = {
            txt  : "",
            defc : "#999",
            focc : "#333"
        }
        
        var opts = $.extend(defaults, opts);
        
        return this.each(function(){
            var self = $(this),
                txt  = opts.txt != "" ? opts.txt : self.val();

            self.val(txt).css("color", opts.defc);
            self.on("focus", function(){
                if(self.val() == "" || self.val() == txt) {
                    self.val("");
                }
                self.css("color", opts.focc);
            });
            self.on("blur", function(){
                if(self.val() == "" || self.val() == txt) {
                    self.val(txt).css("color", opts.defc);
                }
            });
        });
    }
})(jQuery);
</script>
展开插件

jQuery

标签:

原文地址:http://www.cnblogs.com/cymmint/p/4208700.html

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