मेस्सी - गैर-फुटबॉल jQuery पॉपअप प्लगइन

अभिवादन, हाबरापॉलिस के निवासी!

वेब इंटरफेस विकसित करते समय, अक्सर पॉप-अप (मोडल) पॉपअप विंडो या प्रदर्शन संदेशों का उपयोग करने की आवश्यकता होती है। शीर्ष प्रदर्शन में खोज इंजन लंबे थक थक प्लग एक "Colorbox" । मैं उसके बारे में कुछ भी बुरा नहीं कह सकता - लेकिन यह काफी सामान्य है और किसी तरह मेरी आँखों या कुछ से थक गया।



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

1. प्लगइन स्थापित करना:

• हम jQuery लाइब्रेरी कनेक्ट करते हैं;
• Github भंडार से मेस्सी प्लगइन डाउनलोड करें;
• फ़ाइलों की प्रतिलिपि बनाएँ: messi.css और messi.js प्रोजेक्ट फ़ोल्डर में;
• हम शैलियों और एक स्क्रिप्ट को परियोजना से जोड़ते हैं:

<link rel="stylesheet" href="messi.min.css" /> <script src="messi.js"></script> 

2. प्लगइन विकल्प:

• "आटोक्लास" - 'x' मिलीसेकंड के बाद विंडो बंद करें। डिफ़ॉल्ट: अशक्त
• "बटन" - बटन का एक सरणी जो कि विंडो के पाद लेख में होगा, उदाहरण के लिए: [{id: 'ok', लेबल: 'OK', val: 'OK', btnClass: ''}]। डिफ़ॉल्ट: []
• "कॉलबैक" - विंडो बंद करने के बाद एक फ़ंक्शन को कॉल करें। डिफ़ॉल्ट: अशक्त
• "केंद्र" - खिड़की को स्क्रीन के केंद्र में संरेखित करें। डिफ़ॉल्ट: सच
• "क्लोजबटन" - विंडो हेडर में "क्लोज" बटन दिखाएं। डिफ़ॉल्ट: सच
• "ऊंचाई" - सामग्री के साथ ब्लॉक की ऊंचाई। डिफ़ॉल्ट: 'ऑटो'
• "शीर्षक" - खिड़की का शीर्षक। डिफ़ॉल्ट: अशक्त
• "टाइटलक्लास" - विंडो शीर्षक वर्ग: जानकारी, चेतावनी, सफलता, त्रुटि, एनिमेशन। डिफ़ॉल्ट: अशक्त
• "मोडल" - मोडल विंडो का मोड (एक अतिरिक्त परत को लोड करना - डिमिंग)। डिफ़ॉल्ट: गलत
• "मोडलओपेसिटी" - डिमिंग की पारदर्शिता (केवल मोडल मोड में)। डिफ़ॉल्ट: २
• "पैडिंग" - कंटेंट ब्लॉक में इंडेंटेशन। डिफ़ॉल्ट: '10px'
• "शो" - लोड करने के बाद विंडो दिखाएं। डिफ़ॉल्ट: सच
• "अनलोड" - विंडो बंद करने के बाद, DOM से प्लगइन को अनलोड करें। डिफ़ॉल्ट: सच
• "व्यूपोर्ट" - विंडो स्थिति सेट करना (यदि "केंद्र" विकल्प सेट नहीं है)। उदाहरण के लिए: {शीर्ष: '0px', बायां: '0px'}
• "चौड़ाई" - खिड़की की चौड़ाई। डिफ़ॉल्ट: '500px'
• "ZIndex" - सीएसएस संपत्ति: z-index। डिफ़ॉल्ट: 99999

3. प्लगइन का उपयोग करना:

एक सरल संदेश:

 new Messi('This is a message with Messi.'); 

एक शीर्षक के साथ पोस्ट करें:

 new Messi('This is a message with Messi.', {title: 'Title'}); 

मोडल मोड में संदेश:

 new Messi('This is a message with Messi in modal view. Now you can\'t interact with other elements in the page until close this.', {title: 'Modal Window', modal: true}); 

मनमानी स्थिति से पोस्ट करें:

 new Messi('This is a message with Messi in absolute position.', {center: false, viewport: {top: '760px', left: '0px'}}); 

बटन के साथ संदेश:

 new Messi('This is a message with Messi with custom buttons.', {title: 'Buttons', buttons: [{id: 0, label: 'Close', val: 'X'}]}); 

फ़ंक्शन को कॉल करके बटन के साथ संदेश (हां / नहीं):

 new Messi('This is a message with Messi with custom buttons.', {title: 'Buttons', buttons: [{id: 0, label: 'Yes', val: 'Y'}, {id: 1, label: 'No', val: 'N'}], callback: function(val) { alert('Your selection: ' + val); }}); 

बटन के साथ संदेश (हाँ / नहीं / रद्द) + बटन कक्षाएं:

 new Messi('This is a message with Messi with custom buttons.', {title: 'Buttons', buttons: [{id: 0, label: 'Yes', val: 'Y', btnClass: 'btn-success'}, {id: 1, label: 'No', val: 'N', btnClass: 'btn-danger'}, {id: 2, label: 'Cancel', val: 'C'}]}); 

शीर्षक: सफलता:

 new Messi('This is a message with Messi.', {title: 'Title', titleClass: 'success', buttons: [{id: 0, label: 'Close', val: 'X'}]}); 

शीर्षक: जानकारी:

 new Messi('This is a message with Messi.', {title: 'Title', titleClass: 'info', buttons: [{id: 0, label: 'Close', val: 'X'}]}); 

शीर्षक: त्रुटि (एनिमेटेड):

 new Messi('This is a message with Messi.', {title: 'Title', titleClass: 'anim error', buttons: [{id: 0, label: 'Close', val: 'X'}]}); 

शीर्षक: चेतावनी (एनिमेटेड):

 new Messi('This is a message with Messi.', {title: 'Title', titleClass: 'anim warning', buttons: [{id: 0, label: 'Close', val: 'X'}]}); 

मेस्सी.लर्ट () का उपयोग कर:

 Messi.alert('This is an alert with Messi.'); 

मेसी.स्क () का उपयोग कर:

 Messi.ask('This is a question with Messi. Do you like it?', function(val) { alert('Your selection: ' + val); }); 

मेसी.लोड का उपयोग कर ():

 Messi.load('ajax.html'); 

Messi.img () का उपयोग करना:

 Messi.img('messi.jpg'); 

डेमो: http://marcosesperon.es/apps/messi/

गीथब: https://github.com/marcosesperon/Messi

बटन शैलियों : http://twitter.github.com/bootstrap/

पुनश्च ... और कौन ऐसा नाम लेकर आ सकता है जैसा कि स्पैनियार्ड नहीं है (प्रशंसक मुझे समझेंगे)।