cssHooks - बहुत सीएसएस संपत्तियों का विस्तार करें

इस लेख में, मैं jQuery.cssHooks ऑब्जेक्ट के बारे में बात करूंगा, जो डिफ़ॉल्ट रूप से jQuery में निहित है। इस ऑब्जेक्ट का विस्तार आपको .css () विधि में निर्धारित नए गुणों या मूल्यों को जोड़ने की अनुमति देता है, जो प्रारंभ में कुछ ब्राउज़रों द्वारा समर्थित नहीं हैं। शायद कई सीएसएस हुक के लिए खबर नहीं है, लेकिन मेरे लिए यह एक छोटी सी खोज थी।
उन लोगों के लिए जो आगे पढ़ने के लिए बहुत आलसी हैं, मैं मुख्य विचार देता हूं। मान लीजिए कि आप jQuery में chuck-norris CSS संपत्ति जोड़ना चाहते हैं:

$.cssHooks.chuckNorris = { get: function(elem) { //    elem,  value return value; }, set: function(elem, value) { //    elem,  value } } $(el).css('chuck-norris', Infinity); // $(el).css({'chuck-norris': Infinity}); alert($(el).css('chuck-norris')); //Infinity 

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

इस विधि में दो कमियां हैं।

सबसे पहले, ग्रेडिएंट ऑटो की चौड़ाई वाले ब्लॉकों के लिए काम नहीं करते हैं, इसके लिए आपको एक हैक का उपयोग करना होगा:

 $('div').width('100%'); 

दूसरे, फ़िल्टर पृष्ठभूमि छवियों पर कार्य करते हैं। गधे के पुराने संस्करणों में अपेक्षित (पहली तस्वीर) के बजाय, आपको यह (दूसरी तस्वीर) मिलती है।


सबसे पहले, हमें एक फ़ंक्शन (parseColor) की आवश्यकता है, जो विभिन्न स्वरूपों में रंग को पार्स करेगा और वस्तु {r, g, b, a} को लौटाएगा। निम्नलिखित विकल्पों पर विचार किया जाता है:

• जब एक खाली स्ट्रिंग या ट्रांसपेरेंट इनपुट पर आता है
• #Aarrggbb प्रारूप स्ट्रिंग (IE में ग्रेडिएंट के लिए)
• # आरजीबीबी प्रारूप स्ट्रिंग
• # आरजीबी प्रारूप स्ट्रिंग
• प्रारूप स्ट्रिंग आरजीबी [ए] (आर, जी, बी [, ए])

इस पार्सर का कोड (जो आकार के कारण जगह से बाहर होगा) और, वास्तव में, विचार आंशिक रूप से यहाँ से पारस्परिक है ।

दूसरा चरण कलर क्लास बनाना है, जो एक html नोड प्राप्त करता है और इसमें कई फ़ंक्शन शामिल होते हैं जिनकी भविष्य में आवश्यकता होगी।

 var Color = function(el){ //     : //   IE8-,      ,     var ieDetect = (function(){ var ua = navigator.userAgent; var result = {} result.isOldIe = ~ua.indexOf('MSIE 6') || ~ua.indexOf('MSIE 7') || ~ua.indexOf('MSIE 8'); result.hasGradient = result.isOldIe && ~el.style.filter.toLowerCase().indexOf('gradient'); result.isGradientEnabled = result.hasGradient && !!el.filters.item("DXImageTransform.Microsoft.gradient").enabled; return result; })(); //          var colorToHex = function (objColor) { var hex = {}; for (var i in objColor) { hex[i] = objColor[i]; if (i==='a') { hex.a = Math.round(hex.a*255); } hex[i] = hex[i].toString(16); // '0',        hex[i] = hex[i].length == 2 ? hex[i] : '0' + hex[i]; } return hex; } //  {r,g,b,a}      var colorToString = function(objColor, format) { var hexColor = colorToHex(objColor); switch(format) { case 'rgb': return 'rgb(' + objColor.r + ',' + objColor.g + ',' + objColor.b + ')'; case 'rgba': return 'rgba(' + objColor.r + ',' + objColor.g + ',' + objColor.b +',' + objColor.a + ')'; case '#6': return '#' + hexColor.r + hexColor.g + hexColor.b; case '#8': return '#' + hexColor.a + hexColor.r + hexColor.g + hexColor.b; } } //      var convertColor = function(color, format) { var colorObj = parseColor(color); return colorToString(colorObj, format) } //  getComputedStyle    //  ,  if (!window.getComputedStyle) { window.getComputedStyle = function(el, pseudo) { this.el = el; this.getPropertyValue = function(prop) { var re = /(\-([az]){1})/g; if (re.test(prop)) { prop = prop.replace(re, function () { return arguments[2].toUpperCase(); }); } return el.currentStyle[prop] ? el.currentStyle[prop] : null; } return this; } } ... 

अब चलो स्वयं रंग मूल्य निर्धारित करने के लिए आगे बढ़ते हैं। मुझे उम्मीद है कि पाठक को इसके घोंसले के बावजूद कोड को समझने में बहुत कठिनाई नहीं होगी।

 this.setBackgroundColor = function(color) { var newColor, newColorObj = parseColor(color); if(ieDetect.isOldIe) { //  IE if(newColorObj.a < 1) { //     el.style.backgroundColor = 'transparent'; newColor = colorToString(newColorObj, '#8'); if(ieDetect.hasGradient) { //     el.filters.item("DXImageTransform.Microsoft.gradient").enabled = true; el.filters.item("DXImageTransform.Microsoft.gradient").startColorstr = newColor; el.filters.item("DXImageTransform.Microsoft.gradient").endColorstr = newColor; } else { //     el.style.filter += "progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr=" + newColor + ", endColorstr=" + newColor + ")"; } } else { //     newColor = colorToString(newColorObj, '#6'); if(ieDetect.hasGradient) { //     el.filters.item("DXImageTransform.Microsoft.gradient").enabled = false; el.style.backgroundColor = newColor; } else { //     el.style.backgroundColor = newColor; } } } else { //   IE if(newColorObj.a < 1) { //     newColor = colorToString(newColorObj, 'rgba'); el.style.backgroundColor = newColor; } else { //     newColor = colorToString(newColorObj, '#6'); el.style.backgroundColor = newColor; } } } 

रंग मान प्राप्त करने के लिए कोड का अगला भाग जिम्मेदार है। यहां बहुत आसान है।

 this.getBackgroundColor = function() { var color; if(ieDetect.isGradientEnabled) { //  IE    color = el.filters.item("DXImageTransform.Microsoft.gradient").startColorstr; return convertColor(color, 'rgba'); } else { //  : http://snipplr.com/view/13523/getcomputedstyle-for-ie/ //      $(el).css('background-color'); //    ,     color = el.style.BackgroundColor || window.getComputedStyle(el,null).getPropertyValue('background-color'); return color; } } 

अब मुख्य भाग। बैकग्राउंडरॉकर हुक जोड़ें।

 $.cssHooks.backgroundColor = { get: function(elem) { var color = new Color(elem); return color.getBackgroundColor(); }, set: function( elem, value ) { var color = new Color(elem); color.setBackgroundColor(value); } } 

एक पृष्ठभूमि जोड़ें हुक

 $.cssHooks.backgroundAlpha = { get: function(elem) { var color = new Color(elem); var colorStr = color.getBackgroundColor(); var colorObj = parseColor(colorStr); return colorObj.a; }, set: function(elem, value) { var color = new Color(elem); var colorStr = color.getBackgroundColor(); var colorObj = parseColor(colorStr); //    ,  jQuery  'px';  colorObj.a = String(value).replace('px', ''); color.setBackgroundColor('rgba('+ colorObj.r+','+colorObj.g+','+colorObj.b+','+colorObj.a+')'); } } 

सब कुछ किया जाता है, अब आप इसका उपयोग कर सकते हैं।

 p{background-color: #991111; ...} div{background: url(...) ...} 

 <div> <p>...</p> <p>...</p> </div> 

 $('p').width('100%'); $('p:eq(0)').css({'background-color':'rgba(0,111,221,0.9)'}); $('p:eq(1)').css('background-alpha', 0.5); 

जैसा कि हम देख सकते हैं, "ऊंट मामले" शैली में नाम के साथ वस्तुओं के लिए, jQuery स्वचालित रूप से "हाइफ़न" शैली के लिए समर्थन जोड़ता है।

निष्कर्ष

यदि आप कुछ ब्राउज़रों द्वारा समर्थित (या आंशिक रूप से समर्थित) कुछ संपत्ति के लिए समर्थन जोड़ना चाहते हैं, तो आपको यह भूल जाना चाहिए कि यह प्लग-इन बनाकर किया जा सकता है, इसके बजाय, $ .cssHooks का उपयोग करें।

संदर्भ:
अंतिम संस्करण: finom.ho.ua/bgalpha
लेख से हुक कोड: finom.ho.ua/bgalpha/background-rgba.csshook.jquery.js
वैकल्पिक दस्तावेज में cssHooks : jqapi.com/#p=jQuery.cssHooks