jQuery ui टैब प्रमुख शैली परिवर्तन

Question

मैं jQuery यूआई टैब का उपयोग कर रहा हूँ और मैं एक व्यावसायिक उस पर स्टाइल बदलने की जरूरत है। मुझे पृष्ठभूमि छवि, सीमाओं, लगभग सब कुछ rempve करने की जरूरत है। मुझे इसे कम से कम देखने की ज़रूरत है, और ऐसा नहीं है कि यह स्वयं निहित है।

ऐसा करने का सबसे अच्छा तरीका क्या है? मुझे कैलेंडर विजेट के लिए डिफ़ॉल्ट UI स्टाइल का उपयोग करने की आवश्यकता है, हालांकि, एक ही पृष्ठ पर है। मैंने बहुत सारे शोध किए हैं और हर कोई विषय-रोलर को इंगित करता है। हालांकि, मैं सिर्फ रंग और सीमा त्रिज्या को बदलना नहीं चाहता हूं। मुझे बकवास हटाना होगा। थीम-रोलर बस रंगों की तरह चीजें बदलता प्रतीत होता है (असली दुनिया के लिए वास्तव में उपयोगी नहीं)। मैं उसी पृष्ठ पर अन्य यूआई विगेट्स की शैलियों को बदले बिना टैब के लिए सीएसएस को कैसे अनुकूलित करूं (मैं कैलेंडर को इसके रूप में रहना चाहता हूं)?

तो यह और भी लायक मेरी टैब के लिए jQuery UI का उपयोग है?

Answer 1

आपको किथ वुड के विस्तृत ब्लॉग पोस्ट को स्टाइलिंग JQuery UI टैब पर देखना चाहिए।

अपने विशिष्ट प्रश्न

मैं पृष्ठभूमि छवि, बॉर्डर, लगभग सब कुछ rempve की जरूरत का जवाब। मैं इसे कम से कम

इस खंड "Remove most of the formatting" कीथ लकड़ी की पोस्ट की है देखने की जरूरत है।

इसके अलावा, 10 और शैली परिवर्तन हैं, वांछित प्रभाव प्राप्त करने के लिए आवश्यक सीएसएस के साथ पूरा करें।

JQuery UI Tabs Styling - Keith Wood Blog Post

Answer 2

यह सीएसएस के साथ काफी सरल होना चाहिए। आपके तत्वों पर आईडी और कक्षाएं हैं और आप उन्हें सीएसएस के साथ छू सकते हैं। थिमेरोलर बस एक त्वरित चीज है।

तो मुझे याद है, आप भी टैब js समायोजित करने और लाइनों है कि छवियों को जोड़ (यदि यह एक ही प्लगइन है) या बस अपने पसंद के हिसाब से कुल मिलाकर उस लाइन को हटाने के समायोजित कर सकते हैं।

Answer 3

मैं अपने ही सरल टैब कार्यक्षमता लिखने के लिए जब, मैंने महसूस किया कि मैं जोड़ने/टैब्स के हटाने के इस तरह लोड हो रहा है AJAX सामग्री और गतिशील के रूप में अपनी अंतर्निहित सुविधाओं, के सबसे जरूरत नहीं थी चुना है। अगर मुझे उन विशेषताओं की ज़रूरत है, तो उन्हें स्वयं लागू करना आसान होगा। मुझे jQuery UI टैब को कुचलने के लिए क्या धक्का दिया गया है कि मुझे अपने डीओएम तत्वों को अलग-अलग ढांचा बनाना पड़ा। मुझे कम से कम देखने के लिए अपने टैब को स्टाइल करने की भी आवश्यकता थी, और मैंने सोचा कि स्क्रैच से इमारत बहुत दूर करने की कोशिश करने से कम प्रयास होगी।

जिस सुविधा को मैं सबसे ज्यादा याद करता हूं वह यह है कि यूआरएल यूआई टैब स्वचालित रूप से यूआरएल में # द्वारा इंगित टैब का चयन करता है (मुझे पता है कि मैं इसे कॉपी कर सकता हूं - अभी तक इसे प्राप्त नहीं हुआ है)।

---

अद्यतन: लेकिन, हाँ, अगर आप इसके साथ चिपके रहे हैं, आप सीएसएस किसी भी आईडी का उपयोग ओवरराइड कर सकते हैं आप:

#my-tabs .ui-state-default { 
    background-image: none; /* remove default bg image */ 
} 

और इतने पर ..

Answer 4

प्रयास करें अपने सीएसएस में निम्नलिखित मानते हैं कि आपकी कक्षा ओवरराइडिंग सीएसएस के लिए .mytabs है। आपको

.mytabs li { 
     background : white !important; 
     border-top: 0 !important; 
     border-left: 0 !important; 
     border-right: 0 !important; 

    } 
    .mytabs li.ui-state-active { 
     background : white !important; 
     border-top: 0 !important; 
     border-left: 0 !important; 
     border-right: 0 !important; 
     margin: 0; 


    } 

.mytabs li a 
    { 
     color:   Black !important; 
     font-size:  1.4em !important; 
     font-weight: bolder; 
     padding:  4px 1.5ex 3px !important; 
    } 

Answer 5

कुछ सीएसएस के साथ यह आसान है कि आप आसानी से jQuery UI के साथ दिए गए मानक सीएसएस को ओवरराइड कर सकते हैं। आपको आवश्यकता नहीं हो सकती है! महत्वपूर्ण है कि आपका संशोधित सीएसएस jQuery यूआई सीएसएस के बाद प्रकट होता है।

तुम भी निकाल सकते हैं/लोड पर jQuery के साथ प्रत्येक तत्व के लिए कक्षाएं जोड़ने के लिए, लेकिन यह है कि एक सा अनावश्यक लगता है।

Answer 6

मुझे आश्चर्य है अगर! महत्वपूर्ण विशेषताएँ पहली जगह में डिफ़ॉल्ट jQuery ui टेम्पलेट्स में होना चाहिए। उदाहरण के लिए, यदि आप शीर्ष के बजाय बाएं या दाएं तरफ वाले टैब को बदलते हैं, तो 'सीमा-तल' में कोई महत्वपूर्ण नहीं होना चाहिए, क्योंकि यह आमतौर पर अधिलेखित होता है।

Answer 7

लगभग यहाँ सब कुछ कवर किया जाता है, लेकिन मैं चारों ओर देख रहा था और चीजें आप वास्तव में, एक भी वर्ग के साथ काफी आसानी से की जरूरत नहीं है, जबकि उसके बाद शेष गुण संपादन टॉस करने के लिए एक रास्ता मिल गया।

*[class*="ui-"] { 
    border-radius:0; 
    background-image: none; 
    . 
    . 
    . 
} 

इस तरह आप "ui-" से शुरू होने वाली प्रत्येक कक्षा का चयन करते हैं और जो भी आप jQuery UI से निकालना चाहते हैं उसे हटा दें।

Answer 8

#my-tabs * { 
    background-image: transparent; 
}