2009-10-16 3 views
7

मैं उस शांत, AJAX स्लाइडिंग बार को प्राप्त करने की कोशिश कर रहा हूं जो ट्विटर के पास है (इसका थोड़ा पारदर्शी, सफेद)।ट्विटर अधिसूचना AJAX बार, उन्होंने यह कैसे किया?

मैंने एचटीएमएल/सीएसएस को देखने की कोशिश की, लेकिन ऐसा लगता है कि वे गतिशील रूप से विभिन्न डीओएम परतों को इंजेक्ट करते हैं।

क्या कोई जानता है कि उन्होंने इसे कैसे कार्यान्वित किया?

मैं वास्तव में यह सीखना चाहता हूं कि यह कैसे करें।

+6

में काम नहीं किया है कि तुम क्या डोम और शैलियों सेट कर रहे हैं देखने के लिए कोशिश कर रहे हैं आश्चर्य नहीं होगा मैं निश्चित रूप से हो रही सिफारिश करेंगे फ़ायरफ़ॉक्स के लिए फायरबग प्लग-इन। आप डोम ब्राउज़ कर सकते हैं, सीएसएस विशेषताओं आदि को आसानी से देख सकते हैं। –

+1

इसे यहां देखें, यह बिल्कुल एक jQuery प्लगइन के रूप में है: [जेबीआर jQuery अधिसूचना प्लगइन] (http://tympanus.net/codrops/2009/10/29/jbar-a-jquery-notification-plugin/) यह अच्छी तरह विन्यास योग्य है । – cssmaniac

उत्तर

16

रन फ़ायरबग में या document.ready()

$("<div id='notification'>Notification text here</div>").css({ 
position:"fixed", 
top:"0px", 
left:"0px", 
height:"20px", 
width:"100%", 
backgroundColor:"#cccccc", 
color:"blue", 
padding:"5px", 
fontWeight:"bold", 
textAlign:"center", 
opacity:"0.5" 
}) 
.appendTo("body"); 

और आपको तत्काल सूचना बार करना चाहिए था पर इस कोड को ...

आप jQuery (जो मुझे लगता है आप कर रहे हैं से परिचित हैं क्योंकि सवाल) jQuery के साथ टैग है, तो आप अपनी आवश्यकताओं के अनुसार सीएसएस और एचटीएमएल मूल्यों tweak कर सकते हैं ...

यह नीचे स्लाइड आप ऐसा करते हैं होता है करने के लिए:

$("<div id='notification'>Notification text here</div>").css({ 
position:"fixed", 
top:"0px", 
left:"0px", 
height:"20px", 
width:"100%", 
backgroundColor:"#cccccc", 
color:"blue", 
padding:"5px", 
fontWeight:"bold", 
textAlign:"center", 
display:"none", //<-- notice this new value 
opacity:"0.5" 
}) 
.appendTo("body"); 
$("#notification").slideDown("slow"); //<-- this is the animation code 

अस्वीकरण: बस एक त्वरित बात मैं ऊपर मार पड़ी है, है, अगर यह IE

संबंधित मुद्दे