मैं इस साइट पर एक अधिसूचना बार की तलाश कर रहा हूं जो शीर्ष पर प्रदर्शित होता है जो परिवर्तन के उपयोगकर्ता को सूचित करता है। इसमें बंद होने की क्षमता होनी चाहिए। मैं jquery के लिए पा सकता हूं this onejquery अधिसूचना सलाखों को खारिज कर दिया जा सकता है?
क्या किसी के पास कोई अन्य सिफारिशें या सुझाव हैं?
सुपर अपना खुद का निर्माण करना आसान है। बस इसे <body> टैग के तहत पहली <div> बनाने के लिए, और कुछ इस तरह करने के लिए सीएसएस सेट:
#notify {
position:relative;
width:100%;
background-color:orange;
height:50px;
color:white;
display:none;
}
, बस स्लाइड नीचे:
$('#notify').html('new message').slideDown();
और करने के लिए एक क्लिक करें घटना जोड़ने इसे बंद करें और अधिसूचना को साफ:
$('#notify').click(function(){
$(this).slideUp().empty();
});
डेमो: http://jsfiddle.net/AlienWebguy/Azh4b/
यदि आप वास्तव में इसे स्टैक ओवरफ्लो की तरह बनाना चाहते हैं तो आप अधिसूचना जारी करते समय बस एक कुकी सेट करेंगे, और फिर प्रत्येक पृष्ठ लोड उन सभी सूचनाओं को दिखाता है जिनमें लागू कुकीज़ हैं।
यदि आप एकाधिक अधिसूचना चाहते हैं, #notify.notify और स्टैक em अप करें। कुछ इस तरह:
$('.notify').live('click',function() {
$(this).slideUp('fast',function(){$(this).remove();});
});
$(function(){
notify('You have earned the JQuery badge!');
notify('You have earned the Super Awesome badge!');
});
function notify(msg) {
$('<div/>').prependTo('body').addClass('notify').html(msg).slideDown();
}
कभी भी अपना खुद का निर्माण करने पर विचार नहीं किया ... समझ में आता है। धन्यवाद और महान उदाहरण के लिए धन्यवाद :) – Paul
आपका स्वागत है, मदद करने में खुशी :) – AlienWebguy
मैंने वास्तव में मेरी कुछ परियोजनाओं के लिए कुछ ऐसा ही बनाया है।
एक JSFiddle demo है, जो काम करता है लेकिन यह मेरे व्यक्तिगत libs - कोड से सीधे लिफ्ट है जो शायद सफाई और अनुकूलन का उपयोग कर सकता है, लेकिन यह एक अच्छा प्रभाव देता है कि यह कैसे काम करता है।
मेरे कोड का जोड़ा बोनस यह है कि यह डुप्लिकेट आइटम नहीं दिखाता है - यह वर्तमान में मौजूदा "पिंग्स" है। अधिसूचना पर कहीं भी क्लिक करना इसे बंद कर देता है।
इसके लिए एकमात्र कमी जो मैं देख सकता हूं वह यह है कि इसमें कुछ मुख्य सामग्री शामिल है, लेकिन यह ठीक है अगर आप position: static के साथ अपनी सामग्री के शीर्ष पर अधिसूचना कंटेनर डालते हैं।
कृपया मुझे बताएं कि क्या कोई विनिर्देश है जो आप मुझे समझाना चाहते हैं; एक जवाब में चलाने के लिए बहुत सारे कोड हैं।
मैं शायद एक jQuery प्लगइन लिखूंगा जो इसे किसी बिंदु पर करता है, क्योंकि यह केवल एक उदाहरण है। जब मैं करता हूं तो मैं इसे यहां पोस्ट करूंगा।
एनबी। setInterval() केवल प्रदर्शन उद्देश्यों के लिए उपयोग किया जाता है। इसके अलावा, अलग-अलग रंगीन अलर्ट (सफलता, जानकारी, चेतावनी, त्रुटि - हरा, नीला, नारंगी और लाल क्रमशः) हैं।
आप प्रयास कर सकते हैं "noty" https://github.com/needim/noty
यह * वास्तव में * बनाने के लिए आसान है। यहां तक कि इस साइट पर एक है! – Blender
@ ब्लेंडर: "यहां तक कि यह" लगता है क्योंकि यह आसान है क्योंकि * यहां तक कि * स्टैक ओवरफ्लो इसे चल रहा है। –
इस साइट पर अधिकांश सामान काफी कम और सरल (और स्पष्ट रूप से अच्छी तरह से कोडित) है। – Blender