के साथ प्रदर्शन संदेश मैंने इन्हें jQuery UI के थीम पेज पर देखा, और सोचा कि वे साफ थे।jQuery UI
मुझे आश्चर्य है कि कैसे दोनों एक स्थिर तरीके से और जावास्क्रिप्ट के साथ इन शैलियों के साथ संदेशों को प्रदर्शित करने।
अग्रिम धन्यवाद।
क्रोम डेवलपर टूल का उपयोग कर रहे हैं, मैंने त्रुटि संदेश का HTML का निरीक्षण किया है। आप दूसरे के लिए भी ऐसा ही कर सकते हैं या आप jQuery UI CSS Framework देख सकते हैं।
एचटीएमएल
<div class="ui-widget">
<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
<p>
<span class="ui-icon ui-icon-alert"
style="float: left; margin-right: .3em;"></span>
<strong>Alert:</strong> Sample ui-state-error style.
</p>
</div>
</div>
सीएसएस
body {
font-family: Verdana,Arial,sans-serif;
font-size: 10px;
}
p {
margin: 1em 0;
}
strong {
font-weight: 900;
}
आप इन कक्षाओं प्रोग्राम के रूप में जे एस का उपयोग कर जोड़ने के लिए addClass विधि का उपयोग कर सकते हैं। show और hide विधियां भी देखें जिन्हें आप इन संदेशों को दिखाने/छिपाने के लिए उपयोग कर सकते हैं।
<button id="show">Show</button>
<button id="hide">Hide</button>
$("#show").click(function() {
$(".ui-widget").show();
});
$("#hide").click(function() {
$(".ui-widget").hide();
});
fiddle देखें।
jQuery UI उत्पन्न करने वाली कक्षाओं और HTML संरचना की प्रतिलिपि बनाएँ, और सुनिश्चित करें कि आपने एक jQuery UI थीम शामिल की है।
बस उस तत्व के HTML का निरीक्षण करने के लिए फ़ायरबग का उपयोग करें। ऐसा लगता है कि वे <div style="margin-top: 20px; padding: 0pt 0.7em;" class="ui-state-highlight ui-corner-all"> <p><span style="float: left; margin-right: 0.3em;" class="ui-icon ui-icon-info"></span> <strong>Hey!</strong> Sample ui-state-highlight style.</p> </div>
Jquery Messages Plugin का उपयोग करें। यह साफ, हल्का और उपयोग करने में आसान है।
मैंने त्रुटि/हाइलाइट तत्वों में 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);
यहाँ जावास्क्रिप्ट है