您的位置:首页 > Web前端 > JavaScript

js常用方法总结

2017-12-11 20:21 211 查看

解决ie浏览器下refer丢失

var url =  basePath+"?id="+id+"&type="+type;
//双感叹号才能将对象真正转换为对应的Boolean值,第一个感叹号是将其转化成Boolean类型的值,但是这一操作得到的是其取反以后的值,在进行一次取反运算才能得到其对应真正的布尔值
if (!!window.ActiveXObject || "ActiveXObject" in window){
// 用来解决ie浏览器下refer丢失
var targetWndName = "middleWin";
var wnd = window.open("", targetWndName);
var link = document.getElementById("thinkLink");
link.target = targetWndName;
link.href = url;
link.click();
}else{
window.open(url);
}


多级复选框联动

效果图:



vm:

#foreach($categoryGrand in ${categoryList})
#if($!{categoryGrand.canChoose}==0) #set($visibility = "hidden")
#else  #set($visibility = "visible")
#end
<div class="top">
<h4><label><input type="checkbox" name="n-checkbox" categoryType="first" class="category"
lev="$categoryGrand.lev" pid="$categoryGrand.parentCid" value="$categoryGrand.cid"  style= "visibility:$visibility;">$categoryGrand.cName</label></h4>
<span class="caret-box"><span class="caret"></span></span>
</div>
<div class="option">
#foreach($categoryParent in ${categoryGrand.childItemCategoryVos})
#if($!{categoryParent.canChoose}==0) #set($visibility = "hidden")
#else  #set($visibility = "visible")
#end
<dl>
<dt>
<span class="classify-line"></span>
<label><input type="checkbox" name="n-checkbox" categoryType="second" class="category"
lev="$categoryParent.lev" pid="$categoryParent.parentCid" value="$categoryParent.cid" style= "visibility:$visibility;">$categoryParent.cName</label>
</dt>
<dd>
#foreach($category in ${categoryParent.childItemCategoryVos})
<label>
#if($!{category.canChoose}==1) #set($visibility = "visible")
#else  #set($visibility = "hidden")
#end
<input type="checkbox" name="n-checkbox" categoryType="third" class="category"
lev="$category.lev" pid="$category.parentCid" value="$category.cid" style= "visibility:$visibility;" >
$category.cName
</label>
#end
</dd>
</dl>
#end
</div>
#end


js:

$("input[name=n-checkbox]").on('click', function (e) {  //:not(input[style='visibility:hidden;'])
//隐藏的按钮点击无效
if(typeof($(this).attr("style"))!="undefined" && -1!=$(this).attr("style").indexOf("hidden")){
$(this).attr("checked",false);
return false;
}
e.stopPropagation();
var categoryType = $(this).attr("categoryType");
//一级菜单
if (categoryType == "first") {
var son = $(this).parents(".top").next().find(".category[categoryType='second']");
judgeSonCheck($(this), son);
son.each(function () {
judgeSonCheck($(this), son.parents("dl").find("dd .category"));
});
}
//二级菜单
if (categoryType == "second") {
judgeSonCheck($(this), $(this).parents("dl").find("dd .category"));
judgeFatherCheck($(this), $(this).parents(".option").find("dt .category"), $(this).parents(".option").prev().find(".category"));
}
//三级菜单
if (categoryType == "third") {
var father = $(this).parents("dl").find("dt .category");
judgeFatherCheck($(this), $(this).parents("dd").find(".category"), $(this).parents("dl").find("dt .category"));
judgeFatherCheck(father.eq(0), father.eq(0).parents(".option").find("dt .category"), father.eq(0).parents(".option").prev().find(".category"));
}
});

function judgeFatherCheck(ele, sameLevelEle, fatherEle) {
var completelyChecked = 0;
var halfChecked = 0;
var allElement = 0;
sameLevelEle.each(function () {
//同级 未隐藏按钮可计入allElement
if(typeof($(this).attr("style"))=="undefined"|| -1==$(this).attr("style").indexOf("hidden")){
allElement++;
if ($(this).is(":checked")) {//被选中了
completelyChecked++;
} else {
//isAllChecked = false;
if ($(this)[0].indeterminate == true) {//子元素部分被选中了 相当于选中了
halfChecked++;
} else {
//没被选中
}
}
}
});
if (completelyChecked == allElement) {//全部被选中
fatherEle[0].indeterminate = false;
fatherEle.prop("checked", true);
} else {
if (completelyChecked > 0 || halfChecked > 0) {
fatherEle[0]![这里写图片描述](http://img.blog.csdn.net/20171211202009423?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ3JhbnQxNjc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast).indeterminate = true;
fatherEle.prop("checked", false);
} else {
fatherEle[0].indeterminate = false;
fatherEle.prop("checked", false);
}
}
}
function judgeSonCheck(ele, sonLevelEle) {
if (ele.is(":checked")) {//全选
sonLevelEle.each(function () {
//隐藏的按钮设置未选中
if(typeof($(this).attr("style"))!="undefined" && -1!=$(this).attr("style").indexOf("hidden")){
$(this).attr("checked",false);
// return false;
}else{
$(this)[0].indeterminate = false;
$(this).prop("checked", true);
}
});
} else {//全不选
sonLevelEle.each(function () {
//隐藏的按钮设置未选中
if(typeof($(this).attr("style"))!="undefined" && -1!=$(this).attr("style").indexOf("hidden")){
$(this).attr("checked",false);
// return false;
}else{
$(this)[0].indeterminate = false;
$(this).prop("checked", false);
}
});
}
}


输入框在输入中英文时长度限制不等

html:

<input type="text" name="periodName" class="z-input01 w136" maxlength="12" oninput="onInput.call(this,'12')" >


js:

function onInput(maxLength) {
if (getLength(this.value) > maxLength)
this.value = limitMaxLength(this.value, maxLength);
}
//中文字符替换为两个英文字符
function getLength(str) {
return str.replace(/[^ -~]/g, 'AA').length;
}

function limitMaxLength(str, maxLength) {
var result = [];
for (var i = 0; i < maxLength; i++) {
var char = str[i]
//每存入一个中文字符,则maxlength减1
if (/[^ -~]/.test(char))
maxLength--;
result.push(char);
}
return result.join('');
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: