2010-11-04 19 views
6

मैं एक पृष्ठ में एकाधिक UI विषय का उपयोग कर रहा हूं। मैं एक css स्कोप के साथ एक कस्टम थीम बनाते हैं, #scope कहें। मैं दायरे में डेटपिकर फ़ील्ड का उपयोग करता हूं, #scope input#datepicker कहता है। datepicker फ़ील्ड को ui विषय से css शैलियों नहीं मिलती है। मुझे लगता है कि ऐसा इसलिए है क्योंकि यह #scope के बाहर गतिशील रूप से बनाया गया है, मैं इसे कैसे बदल सकता हूं, और इसे स्कॉप्ड से शैलियों को कैसे प्राप्त कर सकता हूं।सीएसएस स्कोप से jquery datepicker

उत्तर

4

मैंने कोड में एक रैपर div जोड़ने के साथ इस समस्या को हल किया।

$(document).ready(function(){ 
    $("#ui-datepicker-div").wrap('<div class="ui-layout-center" />'); 
}); 
+0

बस "यूई-लेआउट-सेंटर" को स्पष्ट करने के लिए आपका कस्टम सीएसएस वर्ग है, है ना? मैं व्यक्तिगत रूप से उसी यूई-उपसर्ग का उपयोग करने से बचने की कोशिश करता हूं जैसा कि शेष jQuery UI में उपयोग किया जाता है ताकि भविष्य के संस्करणों में संभावित नाम टकराव से बच सकें। –

0

मुझे एक ही समस्या है, सामान्य रूप से परिभाषित शैली की जांच करें जैसे span, यह ui शैलियों के साथ ओवरलैप हो सकता है।

2

@bkilinc, आप सही हैं। डेटपिकर कैलेंडर को आपके कस्टम स्कोप के बाहर, document.body में जोड़ा गया है।

http://bugs.jqueryui.com/ticket/4591 http://bugs.jqueryui.com/ticket/4306

निम्नलिखित की तरह एक संरचना में, कैलेंडर कंटेनर के दायरे से बाहर है।

<style type="text/css"> 
    .calendarContainer .ui-datepicker { 
     /* rule intended to affect only .calendarContainer */ 
    } 
</style> 
... 
<body> 
    <div class="calendarContainer"><input name="date"/></div> 
    <div class="ui-datepicker"> (generated calendar)</div> 
</body>