आकार बदलने योग्य फ्रेम इम्यूलेशन

Question

मैं समझता हूं कि <frameset> और <frame> टैग बहिष्कृत हो रहे हैं। क्या आकार बदलने योग्य फ्रेम का अनुकरण करने का कोई तरीका है? मैं जो चाहता हूं वह एक संकीर्ण विभाजक है जो क्षेत्र को क्षैतिज या लंबवत से अलग करता है, जो उपयोगकर्ता द्वारा चलने योग्य है ताकि जब इसका एक तरफ छोटा हो जाए, दूसरी तरफ बड़ा हो जाए, और इसके विपरीत। मैं प्रत्येक फ्रेम को एचटीएमएल पेज के साथ पारंपरिक फ्रेम की तरह भरना नहीं चाहता, बल्कि कुछ डीओएम सामग्री के साथ।

मुझे पता है कि CSS3 में resize विशेषता है, लेकिन यह केवल अपने आकार को नियंत्रित करता है। मुझे यकीन नहीं है कि इसका उपयोग समाधान के लिए किया जाना है या नहीं।

मैं विशेष रूप से जावास्क्रिप्ट का उपयोग करना पसंद नहीं करता, लेकिन यदि आवश्यक हो तो मैं इसका उपयोग करने की संभावना को शामिल नहीं कर रहा हूं।

Answer 1

फ़्रेमसेट का उपयोग न करें, कृपया। मुझे नहीं लगता कि jQuery का आकार आपको या तो बहुत मदद करेगा।

ऐसा करने का सबसे अच्छा तरीका "स्प्लिटर" का उपयोग करना है। Jquery के लिए कई प्लगइन्स हैं जो इसे कई अलग-अलग तरीकों से करेंगे और वे सभी वास्तव में काफी सरल हैं।

मैं पहले इस एक का इस्तेमाल किया है: http://methvin.com/splitter/3psplitter.html

Answer 2

मैं जावास्क्रिप्ट को देखता हूं और समर्थन खींचता हूं और छोड़ देता हूं।

वास्तव में, एक नकली फ़्रेमसेट केवल दो divs और उनके बीच एक हैंडल हो सकता है जिसे आकार बदलने के लिए पकड़ा जा सकता है। JQuery के नमूने का आकार बदलने के लिए नमूने हैं: http://jqueryui.com/demos/resizable/ मुझे नहीं लगता कि उस अवधारणा को फिट करने के लिए बहुत मुश्किल होगा।

फिर मैं AJAX के माध्यम से दस्तावेज़ लोड करूंगा, और यह शायद फ्रेम को पूरी तरह से बदल सकता है।

Answer 3

आप YUI के लिए इस लिंक पसंद कर सकते हैं http://people.ischool.berkeley.edu/~rdhyee/yui/examples/layout/panel_layout.html

उदाहरण: http://people.ischool.berkeley.edu/~rdhyee/yui/examples/layout/panel_layout_source.html

Answer 4

दृश्य jQuery Resizable या इस तरह के js चीजों की मेरी बात से अपने समाधान है। इसके demos के लिए जाएं।
jQuery का उपयोग करने के मामले में आप होगा अतिरिक्त संभावनाओं:

• अधिकतम/न्यूनतम आकार
• विवश आकार बदलने के क्षेत्र
• देरी ग्रिड से शुरू
• स्नैप

यहाँ एक है jQuery के लिए नमूना कोड आकार बदलने योग्य डिफ़ॉल्ट कार्यक्षमता:

<style> 
    #resizable { 
     width: 150px; 
     height: 150px; 
     display: block; 
     border: 1px solid gray; 
     text-align: center; 
    } 
</style> 

<script> 
    $(function() { 
     $("#resizable").resizable(); 
    }); 
</script> 

<div id="resizable"> 
    <h3>Resizable</h3> 
</div> 

Answer 5

जानूस Troelsen के समाधान के ऊपर अगर आप तालिकाओं कोई आपत्ति नहीं है महान है: http://methvin.com/splitter/

आप यहाँ एक अच्छा प्रदर्शन पा सकते हैं। मुझे बिना समाधान के SoonDead द्वारा यह समाधान भी मिला, जो क्रोम और एफएफ के साथ बहुत अच्छा काम करता था, लेकिन आईई 8 के लिए एक बुरा समय खर्च करना पड़ा। यह StackOverflow पर "Emulate Frameset Separator Behavior"