css - सीएसएस चयनकर्ताओं में कोलन ":" के साथ जेएसएफ जेनरेट एचटीएमएल तत्व आईडी का उपयोग कैसे करें?




jsf css-selectors (2)

मैं जेएसएफ का उपयोग कर एक साधारण जावा ईई परियोजना के साथ काम कर रहा हूं।

<h:form id="phoneForm">
    <h:dataTable id="phoneTable">

    </h:dataTable>
</h:form>

मैंने #phoneTable { ... } माध्यम से सीएसएस सेट करने का प्रयास किया, हालांकि यह काम नहीं करता है। क्लाइंट साइड में एचटीएमएल स्रोत का निरीक्षण करने पर, ऐसा लगता है कि जेएसएफ द्वारा जेनरेट की गई HTML तालिका id="phoneForm:phoneTable" रूप में एक क्लाइंट आईडी प्राप्त id="phoneForm:phoneTable" । मैं #phoneForm:phoneTable { ... } माध्यम से सीएसएस लागू नहीं कर सकता #phoneForm:phoneTable { ... } , क्योंकि कोलन एक छद्म चयनकर्ता की शुरुआत को इंगित करता है और एक त्रुटि का कारण बनता है।

मैं सीएसएस चयनकर्ताओं में वैसे भी इसका उपयोग कैसे कर सकता हूं?


: सीएसएस पहचानकर्ताओं में एक विशेष चरित्र है, यह एक छद्म वर्ग चयनकर्ता की शुरुआत का प्रतिनिधित्व करता है जैसे :hover :first-child , आदि। आपको इसे बचाना होगा।

#phoneForm\:phoneTable {
    background: pink;
}

यह केवल आईई 6/7 में काम नहीं करता है। यदि आप उन उपयोगकर्ताओं का भी समर्थन करना चाहते हैं, तो इसके बजाय \3A उपयोग करें (पीछे पीछे की जगह के साथ!)

#phoneForm\3A phoneTable {
    background: pink;
}

सभी ब्राउज़रों में ऊपर काम करता है।

इसे हल करने के कई अन्य तरीके हैं:

  1. इसे इसके बजाय एक सादे HTML तत्व और शैली में लपेटें।

    <h:form id="phoneForm">
        <div id="phoneField">
            <h:dataTable id="phoneTable">
    

    साथ में

    #phoneField table {
        background: pink;
    }
    
  2. id बजाय class प्रयोग करें। उदाहरण के लिए

    <h:dataTable id="phoneTable" styleClass="pink">
    

    साथ में

    .pink {
        background: pink;
    }
    

    या

    table.pink {
        background: pink;
    }
    

    अतिरिक्त लाभ यह है कि इससे अधिक अव्यवस्था स्वतंत्रता की अनुमति मिलती है। जब आप किसी अन्य तत्व पर समान गुणों का पुन: उपयोग करना चाहते हैं तो चयनकर्ताओं और / या प्रतिलिपि गुणों को जोड़ने की आवश्यकता के बिना सीएसएस कई तत्वों पर पुन: प्रयोज्य है।

  3. चूंकि जेएसएफ 2.x केवल: UINamingContainer में निम्नलिखित संदर्भ param द्वारा जेएसएफ डिफ़ॉल्ट UINamingContainer विभाजक को बदलें। उदाहरण के लिए

    <context-param>
        <param-name>javax.faces.SEPARATOR_CHAR</param-name>
        <param-value>-</param-value>
    </context-param>
    

    ताकि विभाजक चरित्र बन जाए - इसके बजाए:।

    #phoneForm-phoneTable {
        background: pink;
    }
    

    नुकसान यह है कि आपको यह सुनिश्चित करने की ज़रूरत है कि आप इस चरित्र का उपयोग ids में कहीं भी नहीं करें और यह एक बहुत ही भंगुर दृष्टिकोण है।

  4. चूंकि जेएसएफ 1.2 केवल: फॉर्म id प्रीपेडिंग को अक्षम करें।

    <h:form prependId="false">
        <h:dataTable id="phoneTable">
    

    ताकि आप इसका उपयोग कर सकें

    #phoneTable {
        background: pink;
    }
    

    नुकसान यह है कि <f:ajax> इसे नहीं ढूंढ पाएगा और इसे खराब अभ्यास माना जाता है: preendId = "false" breaks के साथ UIForm <f: AJAX रेंडर> । यह विशेषता अन्य सभी UINamingContainer घटकों में मौजूद नहीं है, इसलिए आपको अभी भी उन्हें सही तरीके से (# 1 और / या # 2 ऊपर) से निपटना होगा।

आपके विशिष्ट मामले में, मुझे लगता है कि इसे # 2 में वर्णित सीएसएस वर्ग में बदलना सबसे उपयुक्त समाधान है। एक "फोन टेबल" अर्थात् वेबसाइट-व्यापी अद्वितीय तत्व का प्रतिनिधित्व नहीं करता है। वास्तविक वेबसाइट-व्यापी अद्वितीय तत्व जैसे हेडर, मेनू, सामग्री, पाद लेख इत्यादि आमतौर पर जेएसएफ रूपों या अन्य जेएसएफ नामकरण कंटेनरों में लिपटे नहीं होते हैं, इसलिए उनकी आईडी को वैसे भी उपसर्ग नहीं किया जाएगा।

यह भी देखें:


<h:form prependId="false">

यदि आप इसका उपयोग कर रहे हैं तो काम नहीं करता है

<h:commandButton>
tag




clientid