码迷,mamicode.com
首页 > 编程语言 > 详细

javascript表单行为效果展示

时间:2016-12-23 19:19:33      阅读:249      评论:0      收藏:0      [点我收藏+]

标签:事件冒泡   image   doc   类型   ide   ima   enter   attr   return   

效果如下

  技术分享技术分享

技术分享技术分享

技术分享技术分享

 

以上效果是在点击下一步的时候触发的效果显示

代码如下

////加工厂
$(function() {
$("#planttwo").click(function () {

var memberId = $.cookie(‘Himall-User‘);
if (memberId) {
var l = [getCount(),
getJg(),
getFalse(‘input[name="type0"]‘, ‘span.ed0‘),
getFalse(‘input[name="type1"]‘, ‘span.ed1‘),
getFalse(‘input[name="type3"]‘, ‘span.ed3‘),
getFalse(‘input[name="type5"]‘, ‘span.ed5‘)];

if (getJg() && getCount() && getFalse(‘input[name="type0"]‘, ‘span.ed0‘) && getFalse(‘input[name="type1"]‘, ‘span.ed1‘) && getFalse(‘input[name="type3"]‘, ‘span.ed3‘) && getFalse(‘input[name="type5"]‘, ‘span.ed5‘)) {
var categoryId = $("#CategoryIds").val();
var categoryName = $("#CategoryName").val();
var fabric = $("#FabricCategory").val();
var minPrice = $("#MinPrice").val();
var maxPrice = $("#MaxPrice").val();
var processTypes = $("#ProcessTypes").val();
var processTypeInt = 1;
if (processTypes == "清加工") {
processTypeInt = 2;
}
var quantity = $("#Quantity").val();
var deliveryDate = $("#years").val();
var IsUrgent = 0;
if ($("#IsUrgent").is(‘:checked‘)) {
IsUrgent = 1;
}

location.href = "/Home/PlantTwo?categoryId=" + categoryId + "&categoryName=" + categoryName + "&fabric=" + fabric + "&minPrice=" + minPrice + "&maxPrice=" + maxPrice + "&processTypes=" + processTypes + "&quantity=" + quantity + "&deliveryDate=" + deliveryDate + "&IsUrgent=" + IsUrgent + "&processTypeInt=" + processTypeInt + "";
}
}
else {
location.href = "/Login?returnUrl=%2FHome/Plant";
}

});

var move = $(‘div#chebox2>.c3right>span‘)
var hide = $(‘div#chebox2>.Fs‘)
move.hover(function () { hide.show() }, function () {
hide.hide()
});


});


function getCount() {
//数量
var a1 = $(‘.t4 .combobox1‘);
var span1 = $(‘span.ed4‘)
if (a1.val() == ‘‘) {

span1.html(‘不能为空‘).css({ ‘color‘: ‘red‘ });
return false;


} else if (isNaN(a1.val())) {
span1.html(‘不能为空‘).css({ ‘color‘: ‘red‘ });

a1.val(‘‘)
return false;

} else if (a1.val() < 1) {
span1.html(‘不能为空‘).css({ ‘color‘: ‘red‘ });
return false;

}else if(!(/(^[1-9]\d*$)/.test(a1.val()))){
span1.html(‘不能为空‘).css({ ‘color‘: ‘red‘ });
return false;

}
else if (a1.val() > 0) {
span1.html(‘‘);
} else {;
span1.html(‘‘);
}
return true;

}

function getJg() {
//价格区间
var a1 = $(‘.combobox1:eq(0)‘)
var b1 = $(‘.combobox1:eq(1)‘)
var span = $(‘span.ed2‘)
if (a1.val() == ‘‘ || b1.val() == ‘‘) {

span.html(‘不能为空‘).css({ ‘color‘: ‘red‘ });
return false;
}
else if (isNaN(a1.val()) || isNaN(b1.val())) {
span.html(‘不能为空‘).css({ ‘color‘: ‘red‘ });
a1.val(‘‘);
b1.val(‘‘);
return false;
}
else if (a1.val() < 1 || b1.val() < 1) {
span.html(‘不能为空‘).css({ ‘color‘: ‘red‘ });
return false;

}
else if (a1.val() < b1.val()) {
span.html(‘‘)

}
else if (a1.val() > b1.val()) {
span.html(‘不能为空‘).css({ ‘color‘: ‘red‘ });
return false;
}
else if (a1.val() == b1.val()) {
span.html(‘不能为空‘).css({ ‘color‘: ‘red‘ });
return false;
}
else {
span.html(‘‘);

}
return true;

}



//其他情况下未选择或者未输入的数据时
function getFalse(a, b) {
var a = $(a)
var b = $(b)
var t = true
if (a.val() != ‘‘) {
b.html(‘‘);
return true;
} else {
b.html(‘不能为空‘).css({ ‘color‘: ‘red‘ })
return false;
}

}

//$(function () {
// var move = $(‘div#chebox2>.c3right>span‘)
// var hide = $(‘div#chebox2>.Fs‘)
// move.hover(function () { hide.show() }, function () {
// hide.hide()
// })

// })





function getEvent(e) {
//事件冒泡
var event = e || window.event;
event.stopPropagation();
}
function getHide(s) {
//隐藏对应的标记
s.hide();
}

$(function () {
var itemcommbox = $(‘.Pdemand>form>#type div.t1 input[name="type1"]‘)
var itemcomm = $(‘.itemcommbox‘)
itemcommbox.click(function (e) {

getEvent(e);
itemcomm.show();

});

var itemcommU = $(‘.itemcommbox>.itemS>li‘);
itemcommU.on(‘click‘, function () {
var index = $(this).html();
itemcommbox.val(index);
itemcomm.hide();
});
$(document).click(function () {

// getHide($(‘.itemcommbox‘))
getHide($(‘.item_C‘))
});



});

//加工类型
$(function () {
var itemcommbox = $(‘.Pdemand>form>#type div.t21 input[name="type3"]‘)
var itemcomm = $(‘.iterF‘)
itemcommbox.click(function (e) {

getEvent(e)
itemcomm.show();
itemcomm.each(function () {
$(this).height(this.scrollHeight)
});

});

var itemcommU = $(‘.iterF>.itemS>li‘);
itemcommU.on(‘click‘, function () {
var index = $(this).html();
itemcommbox.val(index);
itemcomm.hide();
});
$(document).click(function () {

// getHide($(‘.itemcommbox‘))
getHide($(‘.iterF‘))
});




});



$(function () {
var box = $(‘.Pdemand>form>#type div.t0 input[name="type0"]‘)
box.click(function (e) {
getEvent(e);
var cetegoryT = $(‘#cetegoryT‘)
cetegoryT.show();
var catsub = $(‘.cat-sub‘)
cetegoryT.mouseenter(function () {

catsub.show();
});
catsub.mouseleave(function () {
// catsub.hide();
});

});
$(document).click(function () {

// getHide($(‘.itemcommbox‘))
getHide($(‘.cT‘))
});



});


/*选中之后,给父input*/
/*下拉选择*/
$(function () {
var box = $(‘.Pdemand>form>#type div.t0 input[name="type0"]‘)//总父名称
var cetegoryT = $(‘div.cT-Name‘)//父名称
var childpage = $(‘.childpage dl>dt>a‘)//子名称
cetegoryT.hover(function () {
var index = $(this).html();
childpage.click(function (e) {
var child = $(this).html();
var astring = index + ‘>‘ + child;
$("#CategoryIds").val($(this).attr("data-value-id"));
box.val(astring)
$(‘.cT‘).hide();
e.stopPropagation();
return false;
})

});
});

$(function () {
var cetegoryT = $(‘#cetegoryT>ul>li‘);
var childpage = $(‘.childpage‘);
cetegoryT.hover(function () {
$(this).addClass(‘scurrent‘).siblings().removeClass(‘scurrent‘)
var index = $(this).index();
childpage.hide();
$(‘.childpage:eq(‘ + index + ‘)‘).show();

});
});

 

javascript表单行为效果展示

标签:事件冒泡   image   doc   类型   ide   ima   enter   attr   return   

原文地址:http://www.cnblogs.com/mhxy13867806343/p/6215781.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!