अपनी परियोजना में सुंदर संवाद के लिए MUX.Dialog प्लगइन

यह प्लगइन आपको आसानी से और सुरुचिपूर्ण ढंग से म्यूटूल पर निर्मित अपनी वेब परियोजनाओं में संदेश और छोटे रूपों को प्रदर्शित करने की अनुमति देता है।

मुख्य विशेषताएं

1. पूर्ण कार्यात्मक संवाद। इसका मतलब है कि मोडिटी, मल्टी-विंडोिंग, Esc क्लोज़िंग, ड्रैगिंग, ड्रैगिंग (वैकल्पिक), बटन जोड़ने का एक सुविधाजनक तंत्र और अन्य अच्छाईयां बॉक्स से बाहर काम करती हैं। एक ही समय में, सब कुछ बहुत विनीत है।
2. संवादों को अनुकूलित और हेरफेर करने के लिए सरल एपीआई।
3. CSS के माध्यम से स्टाइलिंग, जिसका अर्थ है कि कई, यदि उपस्थिति से संबंधित सभी गुण और यहां तक ​​कि व्यवहार से संबंधित कुछ भी आपकी CSS फाइलों में पुनर्परिभाषित नहीं किए जा सकते हैं, जिसका अर्थ है कि आप आसानी से अपने प्रोजेक्ट की शैली में डायलॉग दर्ज कर सकते हैं (उदाहरण देखें)।
4. ईवेंट आपको संवाद व्यवहार के प्रमुख क्षणों को पकड़ने और उन्हें अपने व्यवहार के साथ पूरक करने की अनुमति देगा।
5. बॉक्स के बाहर MUX.Loaders के साथ काम करता है, लेकिन अगर आप उन्हें उपयोग नहीं करना चाहते हैं तो उन्हें इसकी आवश्यकता नहीं है। बस लोडर फ़ाइल को संवादों और उस पर संलग्न करें - एनीमेशन स्वयं submit घटना से पहले शुरू हो जाएगा और बंद होने पर बंद हो जाएगा।
6. पूर्ण प्रलेखन और उदाहरण ।

प्रोजेक्ट पर जीथब https://github.com/lavmax/MUX.Dialog

IE7 +, FF3 +, क्रोम, सफारी, ओपेरा के नवीनतम संस्करणों पर परीक्षण किया गया।

उपयोग और अनुकूलन के कुछ उदाहरण

संदेश और क्रॉस बटन को बंद करने के लिए सबसे सरल मोडल संवाद बनाना और प्रदर्शित करना

 new MUX.Dialog({ content: new Element('p', {html: '   . .'}) }); 

एक विशिष्ट मोडल संदेश बनाना और प्रदर्शित करना

 new MUX.Dialog({ title: '!', content: new Element('p', {html: '   . .'}), buttons: [{ title: '  ', click: 'close' }] }); 

घटनाओं के साथ काम करें

 new MUX.Dialog({ title: '!', content: new Element('p', {html: '   . .'}), buttons: [{ title: '  ', click: 'submit' }], onOpen: function() { //     . //         //    ,   . this.content.getElement('my-selector').doSomething(); }, onSubmit: function() { //       '  '. var self = this; new Request({ ..., onFailure: function(xhr) { ... self.loader.stop(); }, onSuccess: function(responseText, responseXML) { ... self.close(); } }).post(); }, onClose: function() { //  onClose     , //  ..     . //     // (         ). this.loader.stop(); } }); 

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

 .mux-dialog-header { cursor: move; } .mux-dialog-resize-icon { cursor: se-resize; } 

काम करने वाले संवादों और कोड के अधिक उदाहरण ।
यहां सभी संभावित विकल्पों, घटनाओं और विधियों का विवरण ।

इससे पहले कि मैं इस पुस्तकालय को लिखूँ, मुझे मूट्स फोर्ज, मोचा यूआई, एक्सटीजेएस और जेवाईयूयूआई पर सब कुछ पता चल गया। हालाँकि, मैं यह बताने से परहेज करूँगा कि सूचीबद्ध पुस्तकालयों में से प्रत्येक ने मुझे सूट क्यों नहीं किया, ताकि अनावश्यक विवाद न पैदा हों। सब अपने लिए तय करेंगे।

मैं वास्तव में सभी पहलुओं (उपस्थिति, उपयोग, कोड) पर टिप्पणियों में रचनात्मक आलोचना पर भरोसा करता हूं। यदि आप कार्यशील परियोजनाओं में इस पुस्तकालय का उपयोग करेंगे, तो कृपया मुझे पीएम या जीथूब में बताएं ताकि मैं जीथब पर आपकी परियोजनाओं के लिंक पोस्ट कर सकूं।