//全选 CheckBoxAll: function (option) { var defOption = { nameAll: "cbAll", //全选项Name nameChild: "cb" //子项Name }; $.extend(defOption, option); $("input[type='checkbox'][name='" + defOption.nameAll + "']").on("click", function () { var isChecked = $(this).is(":checked"); $("input[type='checkbox'][name='" + defOption.nameChild + "']").prop("checked", isChecked); }); }
//全选 effect.CheckBoxAll({ nameAll: "cbAll", //全选项Name nameChild: "cb" //子项Name });
. tab切换插件：
//tab切换 TabPanel: function (option) { var defOption = { tabShowId: "tabShowId", //tab需要显示在div的Id data: [ { title: "tab1", content: "王小一", url: "" }, { title: "tab2", content: "", url: "http://121.42.208.152/" }, { title: "tab3", content: "王小二", url: "" }, { title: "tab4", content: "王小三", url: "" } ], isMouseMove: false, //是否鼠标移动切换 tabParentId: "divTab", //tab按钮父级的id tabContentId: "divTabContent" //内容区域父级Id }; $.extend(defOption, option); //构造html样式 var tHtml = []; var pHtml = []; $.each(defOption.data, function (i, item) { if (item.title.length > 0) { var labFirst = (i == 0 ? "class=\"checkLabel\"" : ""); var panelFirst = (i == 0 ? "" : "hide"); tHtml.push('<label data-panel-val="' + i + '" ' + labFirst + '>' + item.title + '</label>'); if (item.content.length > 0) { var content = item.content; pHtml.push('<div data-panel-item="' + i + '">' + content + '</div>'); } else if (item.url.length > 0) { pHtml.push('<div data-panel-item="' + i + '">'); pHtml.push(' <iframe src="' + item.url + '" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0">'); pHtml.push('</div>'); } else { pHtml.push('<div data-panel-item="' + i + '"></div>'); } } }); if (tHtml.length <= 0) { return; } var tabHtml = []; tabHtml.push('<div>'); tabHtml.push(tHtml.join('')); tabHtml.push('</div>'); tabHtml.push('<div>'); tabHtml.push(pHtml.join('')); tabHtml.push('</div>'); $("#" + defOption.tabShowId).html(tabHtml.join('')); var tabParnetObj = $("#" + defOption.tabParentId); var tabContentObj = $("#" + defOption.tabContentId); tabParnetObj.find("label[data-panel-val]").on(defOption.isMouseMove ? "mouseover" : "click", function () { //对应值 var panelVal = $(this).attr("data-panel-val"); //tab按钮 tabParnetObj.find("label[data-panel-val]").removeClass("checkLabel"); $(this).addClass("checkLabel"); //必须div承载内容 tabContentObj.find("div[data-panel-item]").addClass("hide"); //全部隐藏 tabContentObj.find("div[data-panel-item='" + panelVal + "']").removeClass("hide"); //选中展示 }); }
tab点击切换
//tab点击切换 effect.TabPanel({ tabShowId: "divShowTab01", data: [ { title: "tab1", content: "最近的工作能力大大提升，<br/>得到赏识，<br/>可是太注重事业和赚钱了，<br/>导致让身体透支，<br/>需要多注意健康，<br/>一日三餐要准时才好。", url: "" }, { title: "tab2", content: "今日身边的女性友人会是你的贵人，多跟她们接触会得到一些好消息。<br/>另外财运旺盛，只要能抓紧契机，积极行动便能进账丰厚。", url: "" }, { title: "tab3", content: '很压抑。。。。<img alt="128x128" src="https://121.42.208.152:8080/XS.Web/ImgContentFolder/thunbnail/20161212141115292726.jpg" data-holder-rendered="true">', url: "" }, { title: "tab4", content: "", url: "http://121.42.208.152/" } ] });
tab鼠标移动切换
使用代码：
//tab滑动切换 effect.TabPanel({ tabShowId: "divShowTab02", data: [ { title: "tab1", content: "1<br />11<br />111<br />1111<br />11111<br />", url: "" }, { title: "tab2", content: "2<br />22<br />222<br />2222<br />22222<br />", url: "" }, { title: "tab3", content: "3<br />33<br />333<br />3333<br />33333<br />", url: "" } ], tabParentId: "divTab01", //tab按钮父级的id tabContentId: "divTabContent01", //内容区域父级Id isMouseMove: true });
. 文本输入搜索
//文本输入搜索 TxtSearch: function (option) { var defOption = { name: "txtSearch", //搜索框Name size: 5, //显示条数 data: [ { text: "我爱您啊", value: "1" }, { text: "我爱祖国", value: "2" }, { text: "我爱家人", value: "3" }, { text: "我喜欢美女", value: "4" }, { text: "我爱钱", value: "5" }, { text: "我是神牛步行3", value: "6" } ], showDivId: "div_TxtSearch" //展示内容的divId }; $.extend(defOption, option); $("input[name='" + defOption.name + "']").on("keyup", function () { var txtObj = $(this); var divSearchObj = txtObj.next("div[id='div_TxtSearch']"); if (divSearchObj) { divSearchObj.remove(); } var txtVal = $(this).val(); if (txtVal.length <= 0) { return; } var dataHtml = []; var nSize = 0; $.each(defOption.data, function (i, item) { if (item.text.indexOf(txtVal) >= 0) { dataHtml.push('<li data-val="' + item.value + '">' + item.text + '</li>'); nSize++; if (nSize >= defOption.size) { return false; } } }); if (dataHtml.length <= 0) { return; } var w = txtObj.css("width"); var txtHtml = []; txtHtml.push('<div>'); txtHtml.push(' <ul>'); txtHtml.push(dataHtml.join('')); txtHtml.push(' </ul>'); txtHtml.push('</div>'); $(this).after(txtHtml.join('')); //重新获取对象 divSearchObj = txtObj.next("div[id='div_TxtSearch']"); //选中项事件 var liObj = $("div[id='" + defOption.showDivId + "']").find("ul li"); //鼠标移上去 liObj.on("mouseover", function () { $(this).css("background-color", "#efecec"); }); liObj.on("mouseout", function () { $(this).css("background-color", "#fff"); }); //选中 liObj.on("click", function () { var liVal = $(this).attr("data-val"); var liText = $(this).html(); txtObj.val(liText); }); }); //绑定焦点事件 $("input[name='" + defOption.name + "']").on("focus", function () { $("div[id='" + defOption.showDivId + "']").show(); }); //失去焦点 $(document).on("click", function (e) { var txtObj = $("input[name='" + defOption.name + "']"); var divSearchObj = txtObj.next("div[id='div_TxtSearch']"); var tH = txtObj.prop("outerHTML"); var eH = $(e.target).prop("outerHTML"); if (tH == eH) { divSearchObj.show(); } else { divSearchObj.hide(); } }); }
