2012-04-25 11 views
9

मैं एक संगीत संपादक/अनुक्रमक ऐप पर काम कर रहा हूं जो जावास्क्रिप्ट + एचटीएमएल 5 में लिखा जाएगा और कैनवास तत्व और क्रोम के वेब ऑडियो एपीआई का उपयोग करेगा (मेरे पास पहले से ही simple prototype working है)।एचटीएमएल + जावास्क्रिप्ट जीयूआई सलाह

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

क्या प्रत्येक टैब को एक अलग HTML परत के रूप में लागू करना बेहतर होगा और बटन पर नियंत्रण होगा कि कौन सी परत शीर्ष पर दिखाई देती है? जब टैब बटन दबाए जाते हैं तो फ्लाई पर एचटीएमएल उत्पन्न करने के बजाय बेहतर होगा?

आपकी सलाह की सराहना की जाती है।

+5

मज़ा डेमो धन्यवाद (सिर्फ एक mousedown चर का उपयोग) बिना यह संभव कई चौराहों जगह बनाने! – kaveman

+1

यह एक बेहद अच्छा डेमो है, बस fyi। इसके साथ 10 मिनट की तरह खेलना। +2 अगर मैं कर सकता था, ऐसा लगता है कि यह कहीं जा रहा है। –

उत्तर

2

मैं JQuery UI लाइब्रेरी की जांच करने का सुझाव दूंगा। अधिक विशेष रूप से, टैब कार्यक्षमता जो यह प्रदान करती है, http://jqueryui.com/demos/tabs/

अपने टैब में डेटा लोड करने के लिए अंगूठे का सरल नियम। छोटे और सरल, इसे आगे लोड करें। बड़े और जटिल, इसे मांग पर लोड करें। संदेह में, इसे मांग पर लोड करें।

5

क्या प्रत्येक टैब को एक अलग HTML परत के रूप में लागू करना बेहतर होगा और बटनों को नियंत्रित करता है कि कौन सी परत शीर्ष पर दिखाई देती है? क्या यह बेहतर होगा (फिर) फ्लाई पर HTML उत्पन्न करेगा जब टैब बटन दबाए जाएंगे?

मैं एक बार सामग्री पैदा करने और दिखा/मांग पर यह छुपा खासकर अगर काम के बहुमत ब्राउज़र में किया जाता है और कोई सिंक्रोनस अनुरोध जब पृष्ठ के तत्वों के साथ बातचीत के एक सर्वर के प्रयास किए जा रहे हैं की ओर झुक जाएगा । फुटनोट 1

जब एक टैब की सामग्री को दिखा ...
प्रत्येक टैब की सामग्री मान लिया जाये कि जल्दी से उत्पन्न करता है देखें, आप जब यह अनुरोध किया जाता है केवल टैब के लिए सामग्री बनाने के द्वारा अपने आवेदन अधिक प्रभावी बना सकती पहली बार। इस तरह, यदि टैब कभी भी एक्सेस नहीं किया जाता है तो कोई संसाधन उपयोग नहीं किया जाता है।

जब एक टैब की सामग्री को छुपा ...
जब मल्टीमीडिया के साथ काम करते समय आपको सामग्री को छुपाने के अतिरिक्त कार्रवाई करने के लिए आवश्यकता हो सकती है। उदाहरण के लिए, एक वीडियो सिर्फ इसलिए खेलना बंद नहीं करेगा क्योंकि आप इसे छुपाते हैं। आपके ऑडियो एप्लिकेशन के लिए आपको वर्तमान अनुक्रम के प्लेबैक को रोकने की आवश्यकता हो सकती है।

jQuery UI tabs (फ्री) और Sliding Tabs (लाइसेंस प्राप्त लेकिन सस्ती) जैसे कई टैब नियंत्रण उपलब्ध हैं।

अन्य परिदृश्यों
टैब्स रोजगार के लिए दस्तावेजों (जैसे ब्राउज़र टैब) और/या नियमित रूप से इस्तेमाल कार्यक्षमता (उदाहरण के लिए एक कर्मियों रूप है जो संपर्क जानकारी के लिए एक टैब है की तरह सामग्री के प्रमुख ब्लॉक और एक अन्य के बीच स्विच करने के लिए इस्तेमाल किया जाना चाहिए इतिहास)। अन्य परिदृश्य एक संवाद (मोडल या गैर-मोडल) के लिए बेहतर अनुकूल हो सकते हैं।

ऑडियो उदाहरण का उपयोग करते हुए, यदि आपके पास "टेम्पो" लेबल वाला बटन था, तो मुझे उम्मीद है कि यह मुझे एक नए टैब पर ले जाने के बजाय मेरे वर्तमान दृश्य के शीर्ष पर एक छोटी संवाद विंडो खोलने की उम्मीद करेगा। रोलैंड का workstation keyboards इस प्रतिमान का उपयोग करें। प्रमुख सामग्री वर्तमान दृश्य को प्रतिस्थापित करती है, लेकिन सेटिंग्स/कॉन्फ़िगरेशन विंडो आमतौर पर मौजूदा दृश्य के ऊपर पॉपअप होती है।

jQuery UI इस उद्देश्य के लिए एक संवाद प्लगइन भी है। यदि आप जावास्क्रिप्ट समझदार हैं और नए ब्राउज़र को लक्षित करते हैं, तो अपने स्वयं के सरल संवाद को लिखना मुश्किल नहीं है। मक्खी पर


1 उत्पन्न सामग्री अभी भी एक इंटरैक्टिव क्लाइंट-सर्वर रिश्ते के साथ पूरी तरह से स्वीकार्य हो सकता है लेकिन यह इस तरह क्या सर्वर पर डाटा मॉडल के साथ ब्राउज़र में है के तुल्यकालन के रूप में अतिरिक्त विचार, का परिचय (यदि हो तो), (अनुरोध के आकार में वृद्धि) आदि अनावश्यक प्रपत्र फ़ील्ड्स वाले संपूर्ण पृष्ठ आकार, प्रस्तुत करने

0

आप एक जटिल यूआई के लिए देख रहे हैं, मैं सुझाव है कि आप Dojo या Ext JS की जाँच करें। वे दोनों जावा के स्विंग ढांचे के करीब यूआई फ्रेमवर्क प्रदान करते हैं।

हालांकि, यदि आप टैब की तलाश में हैं, और केवल टैब, jQuery UI बहुत अच्छा है।

0

यदि आप कैनवास पर काम कर रहे हैं, तो अपने कैनवास पर अपना जीयूआई करें। गंभीरता से। एक कैनवास के सामने divs का उपयोग बस उबाऊ है। मैंने दोनों की कोशिश की, और मैं कैनवास का उपयोग करना पसंद करता हूं।

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

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

के

और कृपया, reclick को

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