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

jquery改变CSS样式

2016-09-09 10:51 387 查看
近期由于项目的需要,需要对项目中的所有查看页面进行优化,使其更加美观,提高用户满意度。

/**
* 查看页面设置为查看样式
* 文本框、下拉列表替换为纯文字
* 单选按钮和复选框设置为disabled
*/
PrpObj.makeFormViewType = function(){
var maxW = 0;
$(".form_label").each(function(idx){
var w = ($(this).text().length)*20;
maxW = maxW < w ? w : maxW;
});
/**$(".form_label").css("background-color","#FFFFFF");

$(".form_label").css({
"background-image":"url('')",
width:maxW
});

$("tr").each(function(){
var fl = $(this).find(".form_label :first").eq(0);
var html = "<span style='text-align:right;'>"+fl.html()+"</span>";
fl.html(html);
});
**/
$('input,textarea').each(function(){
var input = $(this);
var type = input.attr("type");

if(type=="hidden") return;

if(type=="radio" || type=="checkbox"){
input.prop("disabled",true);
return;
}
input.before(input.val()).remove();
});

$('select').each(function(){
var input = $(this);
input.before(input.find("option:selected").text());
input.remove();
});

$('.form_label').each(function(){
var form_label = $(this);
//求tr下面多少个td
var len = $(this).parent().children('td').size();
if(len==4){
form_label.next("td").css({"text-align":"left","width":"35%"});
}
form_label.css({"text-align":"center","width":"15%"});
form_label.next("td").css({"text-align":"left","padding-left":"8px"});
});

$(".form_label").removeAttr("class").css({"text-align":"center","width":"15%"});

$(".form_table TD").css('height','30px');
$(".form_table TR").css('height','30px');
$(".form_table").css({'width':"1050px",'text-align':"center",'margin-left':"5%",'margin-top':"5px"});
$(".demo-info").css({'width':"1050px",'text-align':"left",'margin-left':"5%"});

$("#tab").addClass("prp-tabs");
$(".prp-tabs").css({'width':"1050px",'margin-left':"5%",'border-left':"1px solid #AEC2CD",'border-right':"1px solid #AEC2CD",'border-top':"1px solid #AEC2CD"});
$(".datagrid-header TD").css({'border-right':"1px solid #AEC2CD",'border-bottom':"1px solid #AEC2CD",'border-top':"1px solid #AEC2CD"});
$(".datagrid-body TD").css({'border-right':"1px solid #AEC2CD",'border-bottom':"1px solid #AEC2CD"});
$(".datagrid-toolbar").removeAttr("class");

}

效果图如下:

  
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  css jquery