पर हेडर संदेश की तरह ही यह पहली बार है जब मैंने स्टैक ओवरफ़्लो का दौरा किया और मैंने एक सुंदर हेडर संदेश देखा जो एक टेक्स्ट और एक करीबी बटन प्रदर्शित करता है।स्टैक ओवरफ़्लो
हेडर बार एक तय किया गया है और आगंतुक का ध्यान पाने के लिए बहुत अच्छा है। मैं सोच रहा था कि अगर आप में से कोई भी व्यक्ति हेडर बार के समान प्रकार के कोड को जानता है।
प्रासंगिक सीएसएस शामिल होंगे:
position: fixed;
top: 0;
width: 100%;
More information about position:fixed:
स्थिति के साथ एक तत्व: निर्धारित स्थिति में है निर्दिष्ट पर ब्राउज़र विंडो के सापेक्ष समन्वय करता है। तत्व की स्थिति "बाएं", "शीर्ष", "दाएं", और "नीचे" गुणों के साथ निर्दिष्ट है। स्क्रॉलिंग के बावजूद तत्व उस स्थिति में बना रहता है। आईई 7 (सख्त मोड) में काम करता है
यदि आईई 6 समर्थन आपके लिए महत्वपूर्ण है, तो आप research workarounds की इच्छा कर सकते हैं।
त्वरित शुद्ध जावास्क्रिप्ट कार्यान्वयन:
function MessageBar() {
// CSS styling:
var css = function(el,s) {
for (var i in s) {
el.style[i] = s[i];
}
return el;
},
// Create the element:
bar = css(document.createElement('div'), {
top: 0,
left: 0,
position: 'fixed',
background: 'orange',
width: '100%',
padding: '10px',
textAlign: 'center'
});
// Inject it:
document.body.appendChild(bar);
// Provide a way to set the message:
this.setMessage = function(message) {
// Clear contents:
while(bar.firstChild) {
bar.removeChild(bar.firstChild);
}
// Append new message:
bar.appendChild(document.createTextNode(message));
};
// Provide a way to toggle visibility:
this.toggleVisibility = function() {
bar.style.display = bar.style.display === 'none' ? 'block' : 'none';
};
}
इसका उपयोग कैसे करें:
var myMessageBar = new MessageBar();
myMessageBar.setMessage('hello');
// Toggling visibility is simple:
myMessageBar.toggleVisibility();
यहाँ एक वैकल्पिक पद्धति jQuery का उपयोग कर जो भी/नीचे दिखाएँ/छिपाएँ पर स्लाइड होगा।
सही अपने पृष्ठ में <body> टैग के बाद निम्न HTML जोड़ें:
<div id="msgBox">
<span id="msgText">My Message</span>
<a id="msgCloseButton" href='#'>close</a>
</div>
अपने स्टाइलशीट
#msgBox {
padding:10px;
background-color:Orange;
text-align:center;
display:none;
font:bold 1.4em Verdana;
}
#msgCloseButton{
float:right;
}
और अंत में यहाँ करने के लिए इस CSS जोड़ सेटअप बंद करें बटन और कार्यों के लिए जावास्क्रिप्ट है संदेश बार दिखाने और छिपाने के लिए:
/* Document Ready */
$(function() {
SetupNotifications();
});
SetupNotifications = function() {
//setup close button in msgBox
$("#msgCloseButton").click(function (e) {
e.preventDefault();
CloseMsg();
});
}
DisplayMsg = function (sMsg) {
//set the message text
$("#msgText").text(sMsg);
//show the message
$('#msgBox').slideDown();
}
CloseMsg = function() {
//hide the message
$('#msgBox').slideUp();
//clear msg text
$("#msgtText").val("");
}
एक साधारण परीक्षण आप इस कोशिश कर सकते:
<a href='#' onclick="javascript: DisplayMsg('Testing');">Show Message!</a>
मुझे लगता है कि यह बेहतर समाधान है, क्योंकि यह पूरे पृष्ठ को नीचे ले जाता है! – fjsj
कोड का इस्तेमाल किया:
$(function(){
$('#smsg_link').click(function(){
showMessage('#9BED87', 'black', 'This is sample success message');
return false;
});
$('#imsg_link').click(function(){
showMessage('#FFE16B', 'black', 'This is sample info message');
return false;
});
$('#emsg_link').click(function(){
showMessage('#ED869B', 'black', 'This is sample error message');
return false;
});
});
/*
showMessage function by Sarfraz:
-------------------------
Shows fancy message on top of the window
params:
- bgcolor: The background color for the message box
- color: The text color of the message box
- msg: The message text
*/
var interval = null;
function showMessage(bgcolor, color, msg)
{
$('#smsg').remove();
clearInterval(interval);
if (!$('#smsg').is(':visible'))
{
if (!$('#smsg').length)
{
$('<div id="smsg">'+msg+'</div>').appendTo($('body')).css({
position:'fixed',
top:0,
left:0,
width:'98%',
height:'30px',
lineHeight:'30px',
background:bgcolor,
color:color,
zIndex:1000,
padding:'10px',
fontWeight:'bold',
fontSize:'18px',
textAlign:'center',
opacity:0.8,
margin:'auto',
display:'none'
}).slideDown('show');
interval = setTimeout(function(){
$('#smsg').animate({'width':'hide'}, function(){
$('#smsg').remove();
});
}, 3000);
}
}
}
मैं एफ आप अपना खुद का बनाना चाहते हैं, jQuery के slideToggle फ़ंक्शन देखें।
मैं ऐसी कुछ चीज़ ढूंढ रहा हूं जो पूरी वेबसाइट को नीचे ले जाए, ड्रॉपडाउन मेनू की तरह नहीं –
@harrison: सुनिश्चित नहीं है कि आपका क्या मतलब है, क्या आप एक उदाहरण दे सकते हैं? – Sarfraz
हाँ, पकड़ो। मैं एक ऑनलाइन खोजूँगा। –
ऐसा कुछ?
$("#bar").slideUp();
हालांकि, यहां मुझे लगता है कि वे पहली बार बाहर फीका तो वे मुख्य कंटेनर को लाने, ताकि ऐसा ही कुछ होगा:
$("#bar").fadeOut(function(){
$("#container").animate({"top":"0px"});
});
के बजाय एक टॉगल है संलग्न पंक्ति के बाद बस यह करें: bar.style.display = message === ''? 'कोई नहीं': 'ब्लॉक'; फिर जब आप बार से छुटकारा पाने के लिए चाहते हैं तो बस: myMessageBar.setMessage (''); –
दृश्यता टॉगल करना मेरे लिए एक और अधिक सहज ज्ञान युक्त एपीआई जैसा लगता है; मैं उम्मीद करता हूं कि रिक्त संदेश को बिना किसी बार के बजाए रिक्त संदेश के रूप में दिखाया जाएगा। – Matchu
बार के लिए एक क्लिक के रूप में आप myMessageBar.toggleVisibility() को कैसे आमंत्रित करेंगे? –