एक पृष्ठ पर jQuery एकाधिक विषयों

यह मुझे NUTS चला रहा है! मैंने यहां पोस्ट का पालन किया है जो सिर्फ काम नहीं कर रहा है: http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/एक पृष्ठ पर jQuery एकाधिक विषयों

मेरे पास आधार विषय है, उदाहरण के लिए यह jQuery UI गैलरी से चिकनाई थीम है। तब मेरे पास एक 'लाल' थीम है जो मूल रूप से लाल रंग को रंग देती है। Here is the theme I created।

तो मैं अपनी थीम डाउनलोड करने के लिए जाता हूं। उन्नत सेटिंग्स चुनें, 'लाल' और मेरे थीम फ़ोल्डर का नाम 'लाल' और डाउनलोड करने के लिए दायरा सेट करें। सबसे पहले मैं पूरी तरह से 100% निश्चित नहीं हूं कि मैं अपने प्रोजेक्ट में किस फ़ोल्डर को कॉपी करना चाहता हूं, यह 'विकास-बंडल \ थीम' फ़ोल्डर है (जिसमें मेरा लाल फ़ोल्डर है) या '\ css \ red' फ़ोल्डर?

मैंने दोनों की कोशिश की है। उपरोक्त पोस्ट का सुझाव है कि अगर मैं अपने थीम फ़ोल्डर को कॉपी करता हूं और सीएसएस में अपनी थीम से लिंक करता हूं तो यह काम करेगा जब मैं एक रैपर div या तत्व में 'लाल' की श्रेणी जोड़ता हूं। तो मैं अपनी फ़ाइल में तो जैसे विषयों लिंक करने के बाद:

<link type="text/css" href="themes/base/jquery.ui.all.css" rel="stylesheet" /> 
<link type="text/css" href="themes/red/jquery.ui.all.css" rel="stylesheet" />

आधार विषय भार और सब Honkey doorey काम करता है लेकिन लाल विषय नहीं है।

<input type="submit" id="btn" value="A submit button" class="red" />

मैं भी कोशिश की है:

<div class="red"> 
    <input type="submit" id="btn" value="A submit button" /> 
</div>

न तो काम मैं एक बटन तो जैसे स्टाइल मिल गया है। जब मैं 'थीम/बेस/jquery.ui.all.css' सीएसएस फ़ाइल लिंक को हटा देता हूं तो बटन को स्टाइल नहीं किया जाता है। पागल! मैं अपने बालों को खींच रहा हूँ। मुझसे कहां गलती हो रही है? निश्चित रूप से उन्हें सिर्फ थीम फ़ोल्डर को डाउनलोड करने और ui.all फ़ाइल को संदर्भित करने के लिए पर्याप्त आसान बनाना चाहिए।

स्रोत

2010-06-01 lloydphillips

मैंने कोशिश नहीं की है, लेकिन मुझे पता है कि jQuery छोटी चीजों को तोड़ सकता है। क्या आपने '.red' को दायरे के रूप में रखा था और न केवल 'लाल'? साथ ही, 'विषयों/लाल/jquery.ui.all.css" के बजाय 'थीम/लाल/ui.all.css "' आज़माएं। – Skoder

मैंने पोस्ट करने से पहले कल .red की कोशिश की और इससे मदद नहीं मिली (मुझे सीएसएस फ़ाइल को जाना और संपादित करना था जिसे थीरोलर ने इसे सभी को बदलने के लिए बनाया था)। मैं एक पल में फ़ाइल नाम में परिवर्तन का प्रयास करूंगा और आपको बता दूंगा। – lloydphillips

स्कोडर्स सही।

आपको JQuery नोटेशन में तत्व आईडी, कक्षा या टैगनाम का उपयोग करना होगा।

एक वर्ग के लिए: .class
एक आईडी के लिए: #ID
टैगनाम के लिए: तालिका

आप सबसे अच्छा वर्ग रास्ता चुन लिया है, क्योंकि यह सिर्फ नहीं है दूसरों की तुलना में अधिक उत्तम दर्जे का लेकिन अधिक उपयोग करने योग्य (इसे एकाधिक ऑब्जेक्ट्स पर इस्तेमाल किया जा सकता है) और आप divs या table जैसे किसी भी लेआउट तत्व को गड़बड़ नहीं करते हैं। आखिरकार, सीएसएस स्कोप बस प्रत्येक सीएसएस परिभाषा के लिए प्रदत्त मान जोड़ता है। यानी

.ui-icon { ... }

हो जाता है

.scope .ui-icon { ... }

संपादित करें: सुनिश्चित करें कि आप सही स्टाइलशीट शामिल करें, मैं पूरी निम्नलिखित कोड के साथ काम कर बात

<html> 
    <head> 
     <title>JQuery UI Theme Scope</title> 
     <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
     <script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script> 
     <link type="text/css" href="css/red/jquery-ui-1.8.1.custom.css" rel="stylesheet" /> 
     <link type="text/css" href="css/default/jquery-ui-1.8.1.default.css" rel="stylesheet" /> 
    </head> 
    <body> 
     <input type="submit" class="ui-state-default ui-corner-all" value="Submit" /> 
     <div class="red"> 
      <input type="submit" class="ui-state-default ui-corner-all" value="Submit" /> 
     </div> 
    </body> 
</html>

स्टाइलशीट से लिंक नहीं है गया "विकास-बंडल" निर्देशिका में, इसके बजाय "css" निर्देशिका में से एक का उपयोग करें।

स्रोत

2010-06-01 20:28:08

मैं कक्षा का उपयोग कर रहा हूँ। समस्या यह है कि मुझे क्लास नाम सेट करके आधार विषय लोड करने और ओवरराइड करने के लिए लाल दायरा नहीं मिल सकता है। – lloydphillips

मेरे संपादन पर एक नज़र डालें। –

मैं लाल चिह्न के लिए एक नया सीएसएस वर्ग को शामिल किया है:

Icons 
---------------------------------- 


/* states and images */ 

.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } 
.ui-iconRed { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }

और यहाँ भी बदल:

/* states and images */ 

.ui-icon { width: 16px; height: 16px; background-image:url(images/ui-icons_469bdd_256x240.png); } 

.ui-iconRed { width: 16px; height: 16px; background-image:url(images/ui-icons_470bdd_256x240.png); }

मैं लाल और नीले रंग छवियों के साथ एक फ़ोल्डर है। जब मैं एक लाल छवि लेना चाहता हूं तो मैं सिर्फ वर्ग आइकन रेड का संदर्भ देता हूं, इस तरह:

<img class="ui-iconRed ui-icon-bullet" title="Vendido" style="float: left;" /> 

//if want a blue just put the normal icon like this: 

<img class="ui-icon ui-icon-bullet" title="Não vendido" style="float: left;" />

स्रोत

2011-11-14 20:00:39

उत्तर

संबंधित मुद्दे