مسج موضوع وأسلوب الحوار
-
22-08-2019 - |
سؤال
كيف يمكنني تغيير لون خلفية شريط العنوان مسج الحوار ؟
لقد بحثت في رولر ولكن لا يبدو أن العمل بالنسبة لي.
شكرا
المحلول
وأفعل بهذه الطريقة (إضافة "للخطأ واجهة المستخدم للدولة" نمط الرأس):
<script type="text/javascript">
$(function () {
$("#msg").dialog({
open: function () {
$(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").addClass("ui-state-error");
}
});
});
</script>
نصائح أخرى
يمكنك تغييره عن طريق تعديل واجهة المستخدم-الحوار-شريط العنوان فئة CSS, ولكن أنا نوصي بشدة لك استخدام رولر أداة.
انظر أيضا:
وهناك الطبقات المرتبطة بكل عنصر في مربع الحوار.
استخدم الحرائق لتفقد العناصر واستخدام CSS أسلوب لهم. على سبيل المثال، شريط العنوان لديه الدرجة "واجهة المستخدم-الحوار-شريط العناوين".
و(هذا يفترض أن كنت تستخدم واجهة المستخدم الحوار مسج)
استخدم خاصية dialogClass
. يمكنك تطبيق على كل ما المغلق في الحوار مسج.
أدناه نحن تنسيق رأس والمحتوى الكتل.
<head>
<style>
.main-dialog-class .ui-widget-header{background: url("/Images/your-background.png") repeat-x scroll 34px 42px #a4cf50;font-size:16px;border:0;text-transform:uppercase}
.main-dialog-class .ui-widget-content{background-image:none;background-color:#fff}
</style>
<script>
$('#jq_dialog').dialog({
title: 'Detalhes do produto',
modal: true,
resizable: false,
width: 500,
maxHeight: 400,
closeText: 'fechar',
draggable: true,
show: 'fade',
hide: 'fade',
dialogClass: 'main-dialog-class'
});
</script>
</head>
<body>
<div id="jq_dialog">Hello StackOverflow!</div>
</body>
والمثال السابق يعمل بشكل جيد ولكن فقط مع اللون الأحمر للموضوع الخطأ.
وهنا حل بسيط فقط مع تغيير صورة رأس في المغلق:
والمغلق:
.ui-widget-header-custom{
background: #f6a828 url(../images/ui-bg_flat_95_0a43ac_40x100.png) 50% 50% repeat-x;
}
وجافا سكريبت:
$('#my_dialog').dialog({
open: function(event, ui){
$(this).parents(".ui-dialog:first").find(".ui-widget-header")
.removeClass("ui-widget-header").addClass("ui-widget-header-custom");
}
});
لاحظ انه على النقيض من المثال السابق، أزلت:
removeClass("ui-widget-header")
وبدلا من مجرد إضافة الطبقة على:
find(".ui-dialog-titlebar")
ويجب ملاحظة أن هذا المثال يعمل مع رأس الحوار دون حلقاتها.
وأحيانا لا يمكنك تحرير الملف المغلق. لذلك يمكنك محاولة هذا:
dialog = $('<div/>').dialog({
title: 'Dialog with css for title bar',
open: function() {
$(this).parents(".ui-dialog:first").find('.ui-dialog-titlebar').css('background-color','#275D9E');
}
});