jquery自定义插件， 奇怪的bug解决思路
日期：2014-05-16 浏览次数：20443 次
jquery自定义插件， 奇怪的bug
- JScript code
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
jQuery.fn.extend({
//=====================================================================
//插件名称: foldList
//功能说明: 折叠表格单元格中的li标签
//输入参数: colIdx: int 类型, 从0开始, 需要折叠的list所在的列的索引
// showRowsNum: int类型, 折叠后显示行数(无此参数默认为显示3行);
// spanGlobalFoldId: string类型, 其它地方控制折叠的元素id(无参数则无, 有此参数但找不到则在表格第一行对应列创建此元素);
// startIsFold: boolean类型, 最开始是否折叠(无此参数默认为折叠)
"foldList": function (colIdx, showRowsNum, spanGlobalFoldId, startIsFold) {
var $tab = this;
if (typeof (showRowsNum) == "undefined") {
showRowsNum = 1;
}
if (typeof (startIsFold) == "undefined") {
startIsFold = true;
}
//清空原来的附加元素
$tab.find("div.foldList").remove();
var foldHtml = "<div class='foldList' style='width:100%;text-align:center;border-top:1 solid gray;' fold='0' ><img border='0' alt='-'></div>";
$tab.find("tr").each(function () {
//得到每一行的 指定列
var $td = $(this).find("td:eq(" + colIdx + ")");
var list = $td.find("li");
if ($td.length == 0 || list.length <= showRowsNum) {
return true;
}
var $listParent = list.parent();
$td.append(foldHtml);
$td.find("div.foldList").click(function () {
var fold = $(this).attr("fold");
$listParent.find("li:gt(" + (showRowsNum - 1) + ")").toggle(fold == "1");
$(this).attr("fold", fold == "1" ? "0" : "1");
if ($(this).attr("fold") == "0") {
$(this).find("img").attr("alt", "-");
} else {
$(this).find("img").attr("alt", "+");
}
});
});
//如果有其它地方需要全局控制
var spanGlobalHtml = "<span id='" + spanGlobalFoldId + "' fold='0' style='float:right;' ><img border='0' alt='-' ></span>";
if (typeof (spanGlobalFoldId) != "undefined") {
if ($("#" + spanGlobalFoldId).length == 0) {
$tab.find("tr:first").children(":eq(" + colIdx + ")").append(spanGlobalHtml);
}
$("#" + spanGlobalFoldId).click(function () {
debugger;
var fold = $(this).attr("fold");
$tab.find("div.foldList[fold='" + fold + "']").each(function () {
$(this).click();
});
$(this).attr("fold", fold == "1" ? "0" : "1");
if ($(this).attr("fold") == "0") {
$(this).find("img").attr("alt", "-");
} else {
$(this).find("img").attr("alt", "+");
}
});
}
if (startIsFold) {
$("#" + spanGlobalFoldId).click();
}
return this;
}
});
})(jQuery);
//------------------- 调用 ---------------------
$(function () {
//页面加载， 还是可以用的
$("#tableList").foldList(1, 1, "spanGlobalFold&
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
