मैं jQuery UI की हाइलाइट और त्रुटि विजेट का उपयोग कैसे करूं?

Question

jQuery UI में चेतावनी और हाइलाइटिंग के लिए कुछ अच्छी सुविधाजनक सीएसएस शैलियों हैं। मैं इसे the themeroller site पर देख सकता हूं - दाईं तरफ देखो। क्या इन शैलियों में जावास्क्रिप्ट इंटरफ़ेस है? क्या हम हार्ड-कोडित सीएसएस का उपयोग करते हैं? यह दस्तावेज कहां है?

क्या jQuery सूची पर इंटरैक्टिव दस्तावेज़ों के अलावा विधि सूची, चीटशीट या कुछ भी है?

Answer 1

UI/Theming/API पेज से वांछित बातचीत क्यू के लिए उपयुक्त सीएसएस वर्गों को लागू करें। आप इसे गतिशील रूप से करने के लिए स्थिर रूप से कर सकते हैं या .addClass('ui-state-highlight') या .addClass('ui-state-error') का उपयोग कर सकते हैं।

Answer 2

वे केवल सीएसएस शैलियों हैं। आप उन्हें बैकएंड पर लागू कर सकते हैं, या .addClass() का उपयोग करके उन्हें लागू कर सकते हैं। प्रकाश डाला और त्रुटि के लिए .ui-राज्य त्रुटि के लिए .ui-राज्य के मुख्य आकर्षण:

Answer 3

मैंने त्रुटि/हाइलाइट तत्वों में divs (टेक्स्ट युक्त) के दिए गए सेट को परिवर्तित करने के लिए एक छोटा jQuery फ़ंक्शन अनुकूलित किया है।

आप इसे this jsFiddle पर कार्रवाई में देख सकते हैं।

//function to create error and alert dialogs 
function errorHighlight(e, type, icon) { 
    if (!icon) { 
     if (type === 'highlight') { 
      icon = 'ui-icon-info'; 
     } else { 
      icon = 'ui-icon-alert'; 
     } 
    } 
    return e.each(function() { 
     $(this).addClass('ui-widget'); 
     var alertHtml = '<div class="ui-state-' + type + ' ui-corner-all" style="padding:0 .7em;">'; 
     alertHtml += '<p>'; 
     alertHtml += '<span class="ui-icon ' + icon + '" style="float:left;margin-right: .3em;"></span>'; 
     alertHtml += $(this).text(); 
     alertHtml += '</p>'; 
     alertHtml += '</div>'; 

     $(this).html(alertHtml); 
    }); 
} 

//error dialog 
(function($) { 
    $.fn.error = function() { 
     errorHighlight(this, 'error'); 
    }; 
})(jQuery); 

//highlight (alert) dialog 
(function($) { 
    $.fn.highlight = function() { 
     errorHighlight(this, 'highlight'); 
    }; 
})(jQuery); 

Answer 4

मैं एक और समाधान साझा करना चाहते हैं:

यहाँ जावास्क्रिप्ट है। यह कस्टम विगेट्स पर आधारित है और एक शीर्षक और अनुकूलन आइकन जोड़ने की अनुमति देता है। Fiddle आज़माएं या नीचे देखें:

$.widget('custom.noteBox', { 
options: { 
    icon: true, 
    state: 'highlight' 
}, 
_create: function() { 
    var icon, note = $('<p>').html(this.element.html()); 
    if (this.options.icon === true) { 
     switch (this.options.state) { 
      case 'highlight': 
       icon = 'info'; 
       break; 
      case 'error': 
       icon = 'alert'; 
       break; 
      default: 
       icon = false; 
     } 
    } else { 
     icon = this.options.icon; 
    } 
    if (icon) note.prepend($('<span>') 
     .addClass('ui-icon ui-icon-' + icon) 
     .css({ 
     'float': 'left', 
     'margin-right': '.3em' 
    })); 
    var title = this.element.attr('title'); 
    if (title) note.prepend($('<strong>').text(title + ' ')); 
    this.element.addClass('ui-widget') 
     .replaceWith($('<div>') 
     .addClass('ui-state-' + this.options.state + ' ui-corner-all') 
     .css({ 
     'margin-top': '20px', 
     'padding': '0 .7em' 
    }) 
     .append(note)); 
    } 
}); 


$('.error').noteBox({ 
    state: 'error' 
}); 
$('.info').noteBox(); 
$('<div title="Note! ">I`m dynamically added #1</div>') 
    .appendTo('body').noteBox({ 
    icon: 'folder-open' 
}); 
$('<div title="Note! ">I`m dynamically added #2</div>') 
    .appendTo('body').noteBox({ 
    state: 'error' 
}); 
$('<div title="Note! ">I`m dynamically added #3</div>') 
    .appendTo('body').noteBox({ 
    state: 'error', 
    icon: 'trash' 
});