jquery扩展

文字输入限制

 

所需的js文件：

jquery.js

 

$.fn.showLimit = function(length, target, locale) {
        var obj = $(this);
        var textLength = obj.val().length;
        if (locale == "cn" || locale == "CN") {
                var temp_str = obj.val().match(/[^\x00-\xff]/ig);
                textLength = obj.val().length
                                + (temp_str == null ? 0 : temp_str.length);
        }
        if (length >= textLength) {
                $(target).html("您还可以输入" + parseInt((length - textLength) / 2) + "个字。");
        } else {
                $(target).html(
                                "<font color=\"red\">超出" + Math.ceil((textLength - length) / 2)
                                                + "个字符!</font>");
        }
}

 

用法：

<input name="name" id="t1">

<span id="ss"></span>

 

$("#t1").showLimit(50,"#ss","cn");

字段过长，影响展示效果，需截取开头一段，后尾加省略号。

所需的js文件：

jquery.js

$.fn.shortcut = function(length) {
        var obj = $(this);
        obj.each(function() {
                var text = $(this).html();
                $(this).attr('title', text);
                if (text.length > length) {
                        text = text.substring(0, length) + "...";
                        $(this).html(text);
                }
        });
}

• 使用方法：
• $(".texts").shutcut(4);  表示所有class为"texts"，文本长度大于4的，截取前4个字，后面"…"号补齐，同时hover事件可看到完整文本提示。

全选效果

所需的js文件：

jquery.js

/* 全选 */
function checkAll(obj) {
        if ($(obj).attr("checked") == true) {
                $(obj).closest("table").find("input:checkbox").each(function() {
                        $(this).attr("checked", true);
                });
        } else {
                $(obj).closest("table").find("input:checkbox").each(function() {
                        $(this).attr("checked", false);
                });
        }
}

用法：

<input type="checkbox" onclick="checkAll(this);"/>全选

默认值效果：

所需的js文件：

jquery.js

获得、失去焦点时处理默认值：

$.fn.showDefault = function(text) {
        var obj = $(this);
        obj.val(text);
        obj.focusout(function() {
                if (0 == $.trim($(obj).val()).length) {
                        $(obj).val(text);
                }
        });
        obj.focusin(function() {
                if ($.trim($(obj).val()) == text) {
                        $(obj).val("");
                }
        });
}

用法：

var text = "";

$("#c1").showDefault(text);