مشكلة في مربع حوار jquery عند استخدام themeroller css
https://stackoverflow.com/questions/45600
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
ال العروض التوضيحية بالنسبة لمربع حوار jquery ui، يستخدم الجميع السمة "flora".كنت أرغب في الحصول على سمة مخصصة، لذلك استخدمت بكرة السمات لإنشاء ملف CSS.عندما استخدمته، بدا أن كل شيء يعمل بشكل جيد، ولكن اكتشفت لاحقًا أنني لا أستطيع التحكم في أي عنصر إدخال موجود في مربع الحوار (أي، لا يمكنني الكتابة في حقل نص، ولا يمكنني تحديد مربعات الاختيار).كشف المزيد من التحقيقات أن هذا يحدث إذا قمت بتعيين سمة الحوار "مشروط" على "صحيح".هذا لا يحدث عندما أستخدم موضوع النباتات.
هنا هو ملف js:
topMenu = {
init: function(){
$("#my_button").bind("click", function(){
$("#SERVICE03_DLG").dialog("open");
$("#something").focus();
});
$("#SERVICE03_DLG").dialog({
autoOpen: false,
modal: true,
resizable: false,
title: "my title",
overlay: {
opacity: 0.5,
background: "black"
},
buttons: {
"OK": function() {
alert("hi!");
},
"cancel": function() {
$(this).dialog("close");
}
},
close: function(){
$("#something").val("");
}
});
}
}
$(document).ready(topMenu.init);
إليك ملف HTML الذي يستخدم سمة النباتات:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>sample</title>
<script src="jquery-1.2.6.min.js" language="JavaScript"></script>
<link rel="stylesheet" href="flora/flora.all.css" type="text/css">
<script src="jquery-ui-personalized-1.5.2.min.js" language="JavaScript"></script>
<script src="TopMenu.js" language="JavaScript"></script>
</head>
<body>
<input type="button" value="click me!" id="my_button">
<div id="SERVICE03_DLG" class="flora">please enter something<br><br>
<label for="something">somthing:</label> <input name="something" id="something" type="text" maxlength="20" size="24">
</div>
</body>
</html>
إليك ملف HTML الذي يستخدم سمة الأسطوانة التي تم تنزيلها:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>sample</title>
<script src="jquery-1.2.6.min.js" language="JavaScript"></script>
<link rel="stylesheet" href="jquery-ui-themeroller.css" type="text/css">
<script src="jquery-ui-personalized-1.5.2.min.js" language="JavaScript"></script>
<script src="TopMenu.js" language="JavaScript"></script>
</head>
<body>
<input type="button" value="click me!" id="my_button">
<div id="SERVICE03_DLG" class="ui-dialog">please enter something<br><br>
<label for="something">somthing:</label> <input name="something" id="something" type="text" maxlength="20" size="24">
</div>
</body>
</html>
كما ترون، يختلف ملف CSS المشار إليه وأسماء الفئات فقط.هل لدى أي شخص فكرة عما يمكن أن يكون خطأ؟
@ ديفيد:لقد جربته، ويبدو أنه لا يعمل (لا على FF أو IE).لقد حاولت المضمنة CSS:
style="z-index:5000"
ولقد حاولت أيضًا الرجوع إلى ملف CSS خارجي:
#SERVICE03_DLG{z-index:5000;}
لكن أيا من هذه الأمور لا تعمل.هل أفتقد شيئًا فيما اقترحته؟
يحرر:
حل عن طريق brostbeef!
نظرًا لأنني كنت أستخدم النباتات في الأصل، فقد افترضت خطأً أنه يجب علي تحديد سمة فئة.تبين أن هذا صحيح فقط عندما تستخدم سمة النباتات فعليًا (كما هو الحال في العينات).إذا كنت تستخدم السمة المخصصة، فإن تحديد سمة فئة يؤدي إلى هذا السلوك الغريب.
المحلول
أعتقد أن السبب هو أن الفصول الدراسية لديك مختلفة.
<div id="SERVICE03_DLG" class="flora"> (النباتية)
<div id="SERVICE03_DLG" class="ui-dialog"> (مخصص)
حتى مع السمة النباتية، ستظل تستخدم فئة ui-dialog لتعريفها كمربع حوار.
لقد قمت بإجراء الوسائط من قبل ولم أقم بتحديد فئة في العلامة مطلقًا.يجب أن تعتني jQueryUI بذلك نيابةً عنك.
حاول التخلص من سمة الفئة أو استخدام فئة "ui-dialog".
نصائح أخرى
بعد اللعب بهذا في Firebug، إذا قمت بإضافة سمة z-index أكبر من 1004 إلى div الافتراضي الخاص بك، معرف "SERVICE03_DLG"، فسوف يعمل.سأعطيه مبلغًا مرتفعًا للغاية، مثل 5000، فقط للتأكد.
لست متأكدًا مما هو موجود في themeroller CSS والذي يسبب هذا.من المحتمل أنهم قاموا بتغيير أو إهمال سمة الموضع لقسم الهدف الذي يتحول إلى مربع حوار.
لقد حاولت تنفيذ سمة الأسطوانة باستخدام مربع حوار وعلامات تبويب واتضح ذلك لا يعمل themeroller CSS مع jQuery الرسمي!خاصة بالنسبة لمربعات الحوار وعلامات التبويب، فقد قاموا بتعديل فئات العناصر من فئات jquery الرسمية.انظر هنا:http://filamentgroup.com/lab/introducing_themeroller_design_download_custom_themes_for_jquery_ui/
تعليق المستخدم:
3) يبدو أن السمة التي تم إنشاؤها قمت بتنزيلها غير مكتملة - عندما أحاول استخدامها في علامات التبويب (التي تعمل مع موضوع النباتات ، لا يتم تصميم رمز متطابق مع مثال الوثائق) كعلامات تبويب
بعد أن ركضت إلى 3 ، اعتقدت أنني عالق وأضطر إلى العودة باستخدام "النباتات" ... لقد اكتشفت منذ ذلك الحين قراءة الكود المصدري لملف "العرض التوضيحي" الذي قمت بضبط HTML الخاص بي وأعطي العناصر <li> أنا باستخدام علامات التبويب بلدي فئة "ui-tabs-nav-item" ثم ستعمل.
وبالتالي فإن الموضوع الذي تم إنشاؤه بواسطة Themeroller غير مكتمل للأسف.إذا كانت الأشياء غير مكتملة ، فإن ذلك يجعلني أتساءل ما هو غير مكتمل.كان الأمر محبطًا إلى حد ما.:(
متبوعًا بتعليق مطوري الأسطوانة:
3) سنلقي نظرة على ذلك.أنت محق في أن هذه الفئات يجب إضافة المكون الإضافي.في الوقت الحالي ، ربما لن يؤذي الكثير لإضافته إلى علاماتك حتى تتمكن من استخدام موضوعات Themeroller.سوف نتحقق من ذلك، بالرغم من ذلك.أعتقد أن محدداتنا يمكن أن يستندوا إلى محدد الوالدين واجهة المستخدم بدلاً من ذلك ، لكنني أعتقد أننا نحاول عدم استخدام العناصر في محدداتنا.فكر في قائمة المهام
يا رجل، هذا أمر جيد.لقد حاولت القيام بمجموعة من الأشياء في هاتين الصفحتين.هل حاولت ترك CSS تمامًا وتجربة كلتا الصفحتين بعد ذلك؟لقد استخدمت Firebug لإزالة CSS من الرأس في كلتا الصفحتين، ولا يزال الإدخال يعمل على إحداهما وليس على الأخرى - لكنني أميل إلى الاعتقاد بأن Firebug لا يزيل CSS تمامًا من العرض، وأنت ستحصل على نتائج مختلفة إذا قمت بإزالتها بالفعل من الكود.
لقد وجدت أيضًا أنه يمكنك لصق النص في مربع النص باستخدام الماوس - فهو لن يقبل إدخال لوحة المفاتيح.لا يبدو أن هناك أي معالج للأحداث من شأنه أن يتداخل مع هذا.
