[jQuery]#3 My jQuery Tips & Utility

分享一些 jQuery 的小技巧, 功能...


分享一些jQuery的小技巧, 功能...

功能说明:切换 GridView 表格标题内容原为“全选”改为“全不选”, 反之,“全不选”改为“全选”,
                   并触发相关核取方块的选取值, 选择全部控项名称例如 grdSelect 之核取方块为全选或全不选。
使用方法:在载入时执行 toggleSelect("全选", "全不选", "grdSelect", { 'color': 'blue' });
                   在载入页面时, 字段标题为“全选”的所有字段都会变成蓝色字, 当点一下“全选”字段标题,
                   会将所有控项为 grdSelect 的核取方块改为全选, 字段标题, 会变成“全不选”。
范例:[jQuery]#4 如何切换GridView标题文字及核取方块状态
/* 函数:切换 GridView 表格标题内容为“全选/全不选”
* 参数:
*       selectall         全选文字
*       selectnone    全不选文字
*       targetname   核取方块控件名称
*       cssprops       设定标题CSS模式, ex: { 'color': 'blue' }
*
* Create: 2009-10-19   Alice
*/
function toggleSelect(selectall, selectnone, targetname, cssprops) {
   $("th:contains('" + selectall + "')")
       .css((!cssprops||cssprops==null) ? [] : cssprops)
       .bind("click", function() {
           var th = $(this);
           if (th.html() == selectall) {
               $("input[name*='" + targetname + "']").attr("checked", true);
               th.html(selectnone);
           } else {
               $("input[name*='" + targetname + "']").attr("checked", false);
               th.html(selectall);
           }
       });
}
功能说明:为按钮绑定查询提示功能。
使用工具:highlight: JavaScript text higlighting jQuery plugin
使用方法: 在载入时执行 $("#btnSearch").bindHighlight("#txtSearch", '#GridView1', '#btnClear', {});
范例: [jQuery]#5 Highlight - 来为网页增加醒目提示的功能吧!
        
/* 函数:绑定提示功能
 * 参数:
 *       txtsearch    搜寻文字项
 *       targetsearch 搜寻目标
 *       clearsearch  清空搜寻
 *       callback     链程序
 *          
 * Create: 2009/06/12   Alice
 *         2009/09/14   Alice   新增链程序
 */
$.fn.bindHighlight = function(txtsearch, targetsearch, clearsearch, callback) {
    // this 为按钮或图示
    $(clearsearch).bind("click", function(event) {
        $(txtsearch).val("");
        $(targetsearch).removeHighlight();
        event.preventDefault();
    })

    return $(this).bind("click", function(event) {
        $(targetsearch).removeHighlight();
        $.each($(txtsearch).val().split(" "), function(idx, val) {
            $(targetsearch).highlight(val, idx);
        });
        event.preventDefault();
        if ($.isFunction(callback)) { callback(); }
    }).end();
};
        
jQuery.fn.highlight = function(pat, idx) {
    function innerHighlight(node, pat, idx) {
        var skip = 0;
        if (node.nodeType == 3) {
            var pos = node.data.toUpperCase().indexOf(pat);
            if (pos >= 0) {
                var spannode = document.createElement('span');
                spannode.className = 'highlight';
                //if (idx>0) spannode.className += " Search"+idx;
                spannode.className += " Search" + idx;
                var middlebit = node.splitText(pos);
                var endbit = middlebit.splitText(pat.length);
                var middleclone = middlebit.cloneNode(true);
                spannode.appendChild(middleclone);
                middlebit.parentNode.replaceChild(spannode, middlebit);
                skip = 1;
            }
        }
        else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
            for (var i = 0; i < node.childNodes.length; ++i) {
                i += innerHighlight(node.childNodes[i], pat, idx);
            }
        }
        return skip;
    }
    return this.each(function() {
        if (pat.length>0) {
            innerHighlight(this, pat.toUpperCase(), idx);
        }
    });
};
在触发某些控项时, 显示载入中图示, 执行someURL查询, 之后丢回 callback 函数去处理。
使用方法:在触发时执行 ajaxLoad("#btnGo,#btnSearch", someURL, someFunction);
/* 函数:AJAX Load
* 参数:
*       target      目标对象
*       url            网址
*       callback 链程序
*
* Create: 2009-09-11   Alice
*/
function ajaxLoad(target, url, callback) {
   try {
       $(target).each(function() {
           var img = new Image();
           img.src = "loading.gif";
       }).load(url, null, callback);
   } catch (err) {
       alert("ajaxLoad Error: " + err.description);
   }
}
功能说明:执行AJAX对话框。
使用工具:jQuery UI Dialog
使用方法:在触发时执行 ajaxJSON(DialogObject, postbackurl, postbackparam, someFunction);
范例:[jQuery]#6 AJAX Dialog - 即时对话框

/* 函数:执行AJAX对话框
* 参数:
*       dialogobj       对话框对象
*       ajaxurl         执行网址
*       ajaxdata        执行数据
*       successhandler  执行成功处理函数 (dialogobj, jsonrslt), 回传JSON结果
*         
* Create: 2009/10/20   Alice
*/
function ajaxJSONDialog(dialogobj, ajaxurl, ajaxdata, successhandler) {
   event.returnValue = false;
   $.ajax({
       type: "POST", url: ajaxurl, data: ajaxdata, cache: false, async: false,
       beforeSend: function(XMLHttpRequest) {
           ajaxDialogLoad(dialogobj, true);
       },
       success: function(data, textStatus) {
           try {
               ajaxDialogLoad(dialogobj, false);
               successhandler(dialogobj, eval(data));
           } catch (err) {
               ajaxDialogLoad(dialogobj, false, "查询发生错误", err.description, true);
           }
       },
       error: function(XMLHttpRequest, textStatus, errorThrown) {
           if (textStatus == "timeout")
               ajaxDialogLoad(dialogobj, false, "查询发生错误", "查询逾时!", true);
           else
               ajaxDialogLoad(dialogobj, false, "查询发生错误", "[" + textStatus + "] " + errorThrown, true);
       }
   });    // end of .ajax
}

function ajaxDialogLoad(dialogobj, isload, title, content, iscontent, buttons) {
   try {
       var p = $("body");
       if (isload) {
           p.css("overflow", "hidden");
           $("

               + "left: -" + p.css("margin-left") + "; top: -" + p.css("margin-top") + "; width:"
               + (p.width() + 100) + "px;height:" + (p.height() + 400) + "px;">
")
               .prependTo(p).css({ 'filter': 'alpha(opacity=50)', '-moz-opacity': 0.5, 'opacity': 0.5 });
           if (!iscontent) {
               title = "载入中..."; content = "
";
           }
           dialogobj.attr("isloading", true)
                   .html(content).dialog('destroy')
                   .dialog({ autoOpen: true, modal: true, title: title, zIndex: 3999
                       , beforeclose: function(event, ui) {
                           $("#ajaxDialogLoading").remove(); p.css("overflow", "auto");
                           }
                       , buttons: (!buttons || buttons == null) ? [] : buttons
                     });
       } else {
           dialogobj.attr("isloading", false).dialog("close");
           if (iscontent) {
               dialogobj.html(content).dialog('destroy')
                   .dialog({ autoOpen: true, modal: true, title: title,
                       buttons: { "确定": function() { $(this).dialog("close"); } }
                   }); // end of dialog
           }
       }
   } catch (err) {
       alert("显示对话框发生错误: " + err.description);
   }
}
功能说明:自动完成
使用工具:jQuery Autocomplete Plugin
使用方法: 在载入时执行 $("#txtProductName").autocomplete('<%=GetJQueryURL("自动完成命令字符串")%>');
范例: [jQuery]#7 来为网页加个自动完成的功能吧