jQuery पुन: प्रयोज्य हैंडल जेड-इंडेक्स

Question

मैंने देखा कि jQuery UI के आकार बदलने योग्य हैंडल पृष्ठ के सभी अन्य तत्वों के शीर्ष पर हैं। मैंने क्रोम के डेवलपर टूल का उपयोग करके जांच की और देखा कि उन्हें स्वचालित रूप से 1001 का जेड-इंडेक्स दिया गया है। क्या इसे अक्षम करने का कोई तरीका है और बस उन्हें एक ही जेड-इंडेक्स को आकार बदलने योग्य तत्व के रूप में दें? धन्यवाद।

Answer 1

z-index सीएसएस के साथ सेट है, जावास्क्रिप्ट नहीं। आपको इस मामले में जिम्मेदार सीएसएस को संपादित करने की आवश्यकता होगी:

.ui-resizable-handle { 
    position: absolute; 
    font-size: 0.1px; 
    z-index: 99999; 
    display: block; 
} 

या, व्यवहार को ओवरराइड करने के लिए अपने नियम को परिभाषित करें। अधिक जानकारी के लिए यह पृष्ठ देखें: http://www.mail-archive.com/jquery-ui@googlegroups.com/msg09524.html

Answer 2

मेरे लिए सबसे अच्छा काम करता है, !important के बिना कारण ओवरराइट हो जाता है।

.ui-resizable-handle { z-index: auto !important; } 

Answer 3

हमारे लिए यह jQuery-UI वस्तुओं के लिए डिफ़ॉल्ट सेटिंग्स को ओवरराइड करने का सबसे सुविधाजनक और कम से कम हैकी तरीका था। आप अपने किसी भी घटक के साथ "आकार बदलने योग्य" घटक को प्रतिस्थापित कर सकते हैं। बस यह सुनिश्चित करें कि यह jQuery लोड होने के बाद चलाया गया है लेकिन आपके $ (तत्व) .resziable() कॉल से पहले।

$ .extend ($। Ui.resizable.prototype.options, { zIndex: 2147483647 });

Answer 4

इसके बजाय रखना है! अपने सीएसएस में महत्वपूर्ण जेड-इंडेक्स नियम, आप केवल इस विकल्प को आकार बदलने योग्य प्रोटोटाइप से हटा सकते हैं, और फिर सभी हैंडल को आपके सीएसएस में जेड-इंडेक्स परिभाषित किया जाएगा। आमतौर पर आपको एक को परिभाषित करने की भी आवश्यकता नहीं होती है।

// delete the zIndex property from resizable's options 
// only have to do this once, before instantiating any resizables 

delete $.ui.resizable.prototype.options.zIndex;