आप इसे कैसे कोड करेंगे: SO घोषणा बार

Question

मैं एक व्यक्ति हूं जो उदाहरण से सर्वश्रेष्ठ सीखता है। वर्तमान में, मैं डेस्कटॉप अनुप्रयोगों के विकास के पंद्रह वर्षों के बाद वेब विकास के क्षेत्र में डाइविंग कर रहा हूं। मैं अभी भी आधुनिक वेब साइटों के विकास के लिए उपयोग की जाने वाली सभी वेब प्रौद्योगिकियों में उपयोग कर रहा हूं और हर जगह मैं देखता हूं, मुझे बहुत कम यूआई तत्व दिखाई देते हैं और उन्हें पता नहीं है कि उन्हें कैसे कार्यान्वित किया जाता है। तो मैंने सोचा कि मैं, आप से पूछना चाहते हैं वेब विशेषज्ञों ... wexperts :)

क्या कुछ सीधे आगे या रचनात्मक तरीके तुम इतनी घोषणा बार (नीचे दिखाया गया) कोड कर सकते हैं ...

http://beeeph.squarespace.com/storage/images/misc/so_announcement.jpg http://beeeph.squarespace.com/storage/images/misc/so_announcement.jpg

उदाहरण कोड या उच्च स्तरीय स्पष्टीकरण देने के लिए स्वतंत्र महसूस करें जिसमें शामिल विभिन्न तकनीकों (HTML, CSS, जावास्क्रिप्ट, आदि) शामिल हैं।

ऐसा लगता है कि आप लुप्तप्राय प्रभाव को संभालने के लिए एक जावास्क्रिप्ट फ़ंक्शन लिखेंगे, साथ ही, बैक एंड कोड से भेजे गए घोषणा डेटा को प्राप्त करने और संसाधित करने के लिए।

• कुछ अन्य विचार क्या हैं?
• सीएसएस इस में भूमिका निभाएगा?
• क्या आप इसे आसानी से कार्यान्वित करने के लिए JQuery का उपयोग कर सकते हैं? GWT?
• एक या अधिक घोषणा बार प्रदर्शित होने पर पृष्ठ की सामग्री को स्थानांतरित करने में आप कैसे संभालेंगे? और जब आप बंद बटन पर क्लिक करते हैं तो पृष्ठ को वापस स्थानांतरित करने के बारे में क्या? क्या आप फ्रेम का उपयोग करेंगे (मुझे यह सुझाव देने के लिए चिल्लाओ कि मुझे कोई नोब नहीं है)? क्या आप इसके लिए सीएसएस का उपयोग करेंगे?

आपकी सभी मदद के लिए अग्रिम धन्यवाद!

Answer 1

JQuery के साथ ऐसा करने के लिए code है।

एचटीएमएल:

<div id="message_box"> 
    <img id="close_message" style="float:right;cursor:pointer" src="12-em-cross.png" /> 
    The floating message goes here 
</div> 

<div> 
    .............. 
    other content goes here 
    .................. 
</div> 

सीएसएस:

#message_box { 
position: absolute; 
top: 0; left: 0; 
z-index: 10; 
background:#ffc; 
padding:5px; 
border:1px solid #CCCCCC; 
text-align:center; 
font-weight:bold; 
width:99%; 
} 

JQuery (जावास्क्रिप्ट):

$(window).scroll(function() 
{ 
    $('#message_box').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350}); 
}); 

//when the close button at right corner of the message box is clicked 
$('#close_message').click(function() 
{ 
    //the messagebox gets scrool down with top property and gets hidden with zero opacity 
    $('#message_box').animate({ top:"+=15px",opacity:0 }, "slow"); 
}); 

आप एक Live Demo here देख सकते हैं।

परिणाम:

alt text http://clip2net.com/clip/m12122/1247620668-clip-5kb.png

Answer 2

मैं कहूंगा कि आपको निश्चित रूप से आसपास के जेएस ढांचे में से एक को देखना चाहिए। मैंने JQuery का उपयोग नहीं किया है, लेकिन मैंने इसके बारे में अच्छी बातें सुनी हैं। मैंने MooTools का उपयोग किया है और यह प्रभाव बहुत आसान बनाता है।

Answer 3

ठीक है, सामग्री को स्थानांतरित करने के लिए, आपके पास एक div हो सकता है जो पहले से ही वहां है लेकिन छुपा हुआ है, फिर बस सही मूल्य को जोड़/डालें जहां बैज नाम होना चाहिए और स्लाइडआउट फ़ंक्शन का उपयोग होने पर इसका उपयोग करना चाहिए , जो सामग्री को सही ढंग से नीचे स्थानांतरित करना चाहिए। मुझे विश्वास है कि आप इसे बनाने के लिए jQuery का उपयोग कर सकते हैं, हालांकि मुझे यकीन नहीं है कि वे लाइव प्रभाव कैसे प्राप्त करते हैं- मेरा पहला अनुमान यह होगा कि यह हर बार सर्वर को चुनाव करेगा, लेकिन यह थोड़ा अप्रभावी प्रतीत होता है। मुझे पूरी तरह से यकीन नहीं है कि बेहतर विकल्प क्या होगा, हालांकि, एक इंटरप्ट स्टाइल सिस्टम वास्तव में क्लाइंट-साइड जेएस (जहां तक ​​मुझे पता है) के साथ काम नहीं करेगा।

Answer 4

मैं सीएसएस/एचटीएमएल के साथ तत्व बनाकर शुरू करूंगा।

एचटीएमएल

<div class="message"><p>You've earned...</p><div class="close">x</div></div> 

सीएसएस

.message { position:absolute/*or fixed*/;top:0;left:0;background-color:orange;width:100%;height:30px} 
.close{width:20px;height:20px;float:right} 

कुछ ऐसे ही वैसे भी। इसके साथ खेलें। एक बार जब यह सब सुंदर दिखता है तो आपको पता लगाना होगा कि जब आप चाहें तो इसे कैसे दिखाना है। मैं शायद PHP के साथ बैकएंड पर ऐसा करूँगा - अगर उपयोगकर्ता ने यह स्वीकार नहीं किया है कि उसे संदेश प्राप्त हुआ है, तो बस उस HTML को प्रिंट करें। आप डेटाबेस से पूछकर और कुछ "स्वीकृत" ध्वज को देखकर ऐसा करेंगे।

फिर, जब आप एक्स पर क्लिक करते हैं तो आप AJAX का उपयोग करेंगे जो एक और बैकएंड स्क्रिप्ट कहलाएगा जो अक्वाल्डवेड ध्वज सेट करेगा, और फिर आप बार को फीका कर सकते हैं।इसके लिए, मैं jQuery का उपयोग करता हूँ।

Answer 5

jQuery आपको एक समाधान को जल्दी से चाबुक करने की अनुमति देगा। $ ("# FancyBar") fadein()।; इसे दिखाने के लिए, और $ ("# फैंसीबार")। fadeOut(); इसे छुपाने के लिए।

<div id="fancyBar"><p>You're a teacher!</p></div> 

कि पाठ कुछ सर्वर-साइड तर्क द्वारा उत्पन्न किया जा सकता है: अपने तत्व खुद के लिए के रूप में

<?php 

    $alerts = get_alerts(); 
    print json_encode($alerts); 

?> 

तरीके पूरा करने के लिए इस चौंका देने वाला है। बस पैर में कूदने के लिए सबसे अच्छा।

Answer 6

यहां एक उदाहरण है जो दस्तावेज़ तैयार होने पर शीर्ष टूलबार पॉप अप करता है।

<html> 
<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
</head> 
<body> 
    <style> 
     body { 
      margin:0px; 
      padding:0px; 
     } 

     #StackOverflowBar { 
      display:none; 
      border-bottom:1px solid #000000; 
      background:#444444; 
      padding:2px; 
      color:#FFFFFF; 
      font-weight:bold; 
      text-align:center; 
      font-size:1.1em; 
     } 
    </style> 

    <script>    
     $(function() { 
      $("#StackOverflowBar").append("<div>toolbar/announcement content</div>").fadeIn(); 
     }); 
    </script> 
    <div id="StackOverflowBar"></div> 
    Here's some content that will be below the toolbar. 
</body> 
</html> 

स्पष्टीकरण:

स्क्रिप्ट शामिल jQuery, here's a link कि किराये के लाभों Google आपके लिए होस्ट ऊपर से निकलता है। जाहिर है कि कमियां हैं लेकिन मुझे लगता है कि लाभ उनसे अधिक हैं।

स्क्रिप्ट अनुभाग में, $() फ़ंक्शन कॉल jQuery() फ़ंक्शन के लिए उपनाम है, और जब आप किसी फ़ंक्शन को तर्क के रूप में पास करते हैं तो यह दस्तावेज़ तैयार पर चलता है। स्क्रिप्ट क्या कर रही है वह "स्टैक ओवरफ्लोबार" की आईडी के साथ एक तत्व ढूंढ रही है और इसे HTML में जोड़ रही है और उसके बाद उसी तत्व पर fadeIn() फ़ंक्शन चला रही है।

आप उन उपयोगकर्ताओं के लिए < नोस्क्रिप्ट > अनुभाग भी शामिल कर सकते हैं, जिनके पास जावास्क्रिप्ट सक्षम नहीं है यदि आप अभी भी उन्हें अलर्ट दिखाना चाहते हैं।

Answer 7

एक अच्छा विचार एक सत्र चर का उपयोग है। तो आप कुछ ऐसा कर सकते हैं। कोडनिर्देशक जैसे ढांचे में आप फ्लैशडाटा का उपयोग कर सकते हैं, और डेटा केवल अगले सर्वर अनुरोध के लिए उपलब्ध होगा। http://codeigniter.com/user_guide/libraries/sessions.html