cpt日期下拉样式失效

我在日期组件的初始化后加样式代码失效了

setTimeout(function() { //下拉框内的颜色  $('.fr-combo-list-item').css({         'background': '#1c4896',         'border': '1px solid #1c4896',         'color': 'white'     });     // 设置 .fr-combo-list-item.fr-combo-selected 的样式     $('.fr-combo-list-item.fr-combo-selected').css({         'background': '#3771d8',         'color': 'white',         'border': '1px solid #3771d8 !important'     });     // 设置 .fr-combo-list 的样式     $('.fr-combo-list').css({         'background': '#1c4896',         'border': '1px solid #1c4896',         'border-radius': '3px',         '-webkit-box-shadow': 'none'     });     // 设置 .fr-datepicker thead tr.mainhead td 的样式     $('.fr-datepicker thead tr.mainhead td').css({         'background-color': '#1c4896',         'border': '1px solid #1c4896'     });     // 设置 .fr-datepicker table 的样式     $('.fr-datepicker table').css({         'background-color': '#1c4896',         'border': '1px solid #1c4896'     });     // 设置 .fr-datepicker tfoot tr.optbtns td.btn 的样式     $('.fr-datepicker tfoot tr.optbtns td.btn').css({         'background-color': '#1c4896',         'border': '1px solid #1c4896'     });     // 设置 .fr-datepicker table td.wn 的样式     $('.fr-datepicker table td.wn').css({         'background': '#1c4896',         'border': '1px solid #1c4896'     });     // 设置 .fr-datepicker 的样式     $('.fr-datepicker').css({         'color': '#F4F5F5',         '-webkit-box-shadow': 'none'     });     // 设置 .fr-datepicker td.oday 的样式     $('.fr-datepicker td.oday').css('color', '#5D749D');     // 设置 .fr-datepicker tbody td.hover 的样式     $('.fr-datepicker tbody td.hover').css({         'background': 'transparent url(/webroot/decision/view/form?op=resource&resource=/com/fr/web/images/ext/cell-click.png) repeat-x 100% 100%',         'border': '1px solid #007bff'     });     // 设置 .fr-datepicker table td.weekend 的样式     $('.fr-datepicker table td.weekend').css('color', '#d14949');     // 设置 .fr-datepicker table.dt 的样式     $('.fr-datepicker table.dt').css('border', '#1c4896');     // 设置 .fr-datepicker thead tr.mainhead td.hover 的样式     $('.fr-datepicker thead tr.mainhead td.hover').css({         'background-color': '#4679e1',         'border': '#4679e1'     });     // 设置 .fr-datepicker tbody td.today 的样式     $('.fr-datepicker tbody td.today').css('color', '#ffc400');     // 设置 .fr-checkbox-control 的样式     $('.fr-checkbox-control').css({         'background': '#1c4896 none repeat scroll 0 0',         'border': '1px solid #1c4896'     });     // 设置 .x-text 的样式     $('.x-text').css('color', '#eee');     // 设置 .fr-tageditor-tag 的样式     $('.fr-tageditor-tag').css({         'background-color': '#1c4896',         'color': '#eee',         'border': '1px solid #1c4896'     });     // 设置 .fr-trigger-text 的样式     $('.fr-trigger-text').css('background-color', '#1c4896');     // 设置 #fr-tageditor-tag-select 的样式     $('#fr-tageditor-tag-select').css('background-color', '#007bff'); }, 500)

FineReport lyyyy 发布于 2024-10-12 16:00
1min目标场景问卷 立即参与
回答问题
悬赏:3 F币 + 添加悬赏
提示:增加悬赏、完善问题、追问等操作,可使您的问题被置顶,并向所有关注者发送通知
共2回答
最佳回答
0
lyyyyLv3见习互助
发布于2024-10-14 10:33(编辑于 2024-10-14 10:38)

setTimeout(function() { //debugger //日期空间静态样式 $('.fr-trigger-btn-up').css('background', '#034596'); //这个是日期框右边的那个颜色 $('.fr-trigger-btn-up').css('border-radius', '3px'); //这个是日期框右边的圆角 $('.fr-trigger-text.fr-border-box').css('border-radius', '3px'); //日期框的圆角 $('.fr-trigger-text.fr-border-box').css('border', '1px solid #ffffff'); //日期框的线和颜色 $('.fr-trigger-texteditor').css('color', '#ffffff'); //日期框里面字体的颜色 $('.fr-trigger-texteditor').css('color', '#ffffff'); //字体 $('.fr-trigger-texteditor').css('background-color', '#034596'); //日期框的圆角:; //日期控件按钮点击下拉后样式 //.fr-btn-text-icon .fr-btn-icon-small-left .fr-btn-text $('.fr-trigger-btn-up').on('click', function() { $(".bi-v.list-view-outer.bi-card.list-view-shadow").css({ "background": "linear-gradient(180deg,rgba(0,145,255,0.049)0%,rgba(0,26,56,0.098)100%)", "color": "white", "font-size": '12px', "text-align": "center" }); //下拉列表背景,字体颜色大小 //下拉框内的颜色 $('.fr-combo-list-item').css({ 'background': '#1c4896', 'border': '1px solid #1c4896', 'color': 'white' }); // 设置 .fr-combo-list-item.fr-combo-selected 的样式 $('.fr-combo-list-item.fr-combo-selected').css({ 'background': '#3771d8', 'color': 'white', 'border': '1px solid #3771d8 !important' }); // 设置 .fr-combo-list 的样式 $('.fr-combo-list').css({ 'background': '#1c4896', 'border': '1px solid #1c4896', 'border-radius': '3px', '-webkit-box-shadow': 'none' }); // 设置 .fr-datepicker thead tr.mainhead td 的样式 $('.fr-datepicker thead tr.mainhead td').css({ 'background-color': '#1c4896', 'border': '1px solid #1c4896' }); // 设置 .fr-datepicker table 的样式 $('.fr-datepicker table').css({ 'background-color': '#1c4896', 'border': '1px solid #1c4896' }); //debugger; // 设置 .fr-datepicker tfoot tr.optbtns td.btn 的样式 $('.fr-datepicker tfoot tr.optbtns td.btn').css({ 'background-color': '#1c4896', 'border': '1px solid #1c4896' }); // 设置 .fr-datepicker table td.wn 的样式 $('.fr-datepicker table td.wn').css({ 'background': '#1c4896', 'border': '1px solid #1c4896' }); // 设置 .fr-datepicker 的样式 $('.fr-datepicker').css({ 'color': '#F4F5F5', '-webkit-box-shadow': 'none' }); // 设置 .fr-datepicker td.oday 的样式 $('.fr-datepicker td.oday').css('color', '#5D749D'); // 设置 .fr-datepicker tbody td.hover 的样式 $('.fr-datepicker tbody td.hover').css({ 'background': 'transparent url(/webroot/decision/view/form?op=resource&resource=/com/fr/web/images/ext/cell-click.png) repeat-x 100% 100%', 'border': '1px solid #007bff' }); // 设置 .fr-datepicker table td.weekend 的样式 $('.fr-datepicker table td.weekend').css('color', '#d14949'); // 设置 .fr-datepicker table.dt 的样式 $('.fr-datepicker table.dt').css('border', '#1c4896'); // 设置 .fr-datepicker thead tr.mainhead td.hover 的样式 $('.fr-datepicker thead tr.mainhead td.hover').css({ 'background-color': '#4679e1', 'border': '#4679e1' }); // 设置 .fr-datepicker tbody td.today 的样式 $('.fr-datepicker tbody td.today').css('color', '#ffc400'); // 设置 .fr-checkbox-control 的样式 $('.fr-checkbox-control').css({ 'background': '#1c4896 none repeat scroll 0 0', 'border': '1px solid #1c4896' }); // 设置 .x-text 的样式 $('.x-text').css('color', '#eee'); // 设置 .fr-tageditor-tag 的样式 $('.fr-tageditor-tag').css({ 'background-color': '#1c4896', 'color': '#eee', 'border': '1px solid #1c4896' }); // 设置 .fr-trigger-text 的样式 $('.fr-trigger-text').css('background-color', '#1c4896'); // 设置 #fr-tageditor-tag-select 的样式 $('#fr-tageditor-tag-select').css('background-color', '#007bff'); $(".bi-v.list-view-outer.bi-card.list-view-shadow").css({ "background": "linear-gradient(180deg,rgba(0,145,255,0.049)0%,rgba(0,26,56,0.098)100%)", "color": "red", "font-size": '12px', "text-align": "center" }); //下拉列表背景,字体颜色大小 }); }, 100)

给下拉列表加样式,得在按钮后加点击事件才行。 这里在参数面板para的点击事件后加也行。

最佳回答
0
snrtuemcLv8专家互助
发布于2024-10-12 16:18(编辑于 2024-10-12 16:20)

cpt的话,试试

日期控件样式

setTimeout(function() {

$('.fr-trigger-btn-up').css('background', '#2E8377');//这个是日期框右边的那个颜色

$('.fr-trigger-btn-up').css('border-radius', '3px');//这个是日期框右边的圆角

$('.fr-trigger-text.fr-border-box').css('border-radius', '3px');//日期框的圆角

$('.fr-trigger-text.fr-border-box').css('border', '1px solid #74e164');//日期框的线和颜色

$('.fr-trigger-texteditor').css('color', '#E91E63'); //日期框里面字体的颜色

$('.fr-trigger-texteditor').css('color', '#673AB7');

}, 500)

=======

新版本样式试试

添加初始化后事件

setTimeout(function() { 

$(".bi-card").css({"background":"transparent"});//日历背景

$(".bi-border").css({'border':'none'});//边框

$(".bi-text").css({"color":"#fff"} );//文本颜色

$(".bi-card").css({"color":"#fff"});//日历颜色

},100)

日期控件下拉表颜色(body或者para的点击事件)

setTimeout(function() {

$(".bi-v.list-view-outer.bi-card.list-view-shadow").css({"background":"linear-gradient(180deg,rgba(0,145,255,0.049)0%,rgba(0,26,56,0.098)100%)","color":"white","font-size":'12px',"text-align":"center"});//下拉列表背景,字体颜色大小

}, 10)

  • lyyyy lyyyy(提问者) 不行 初始化后不行,打了断点检查了一下 发现可能是下拉列表还没出来就已经在改样式了。给按钮加点击事件解决了
    2024-10-14 10:32 
  • 1关注人数
  • 118浏览人数
  • 最后回答于:2024-10-14 10:38
    请选择关闭问题的原因
    确定 取消
    返回顶部