2011-01-12 10 views
10

मैं किसी क्लाइंट के लिए फ़्रेमसेट से divs तक एक साइट को परिवर्तित कर रहा हूं। एक विशेषता है कि क्लाइंट में एक साइडबार है जिसका आकार बदल सकता है इस पर निर्भर करता है कि उपयोगकर्ता को कितनी जगह चाहिए। फ़्रेम का उपयोग करके इस साइडबार का आकार बदलना बनाया गया था। हालांकि, मुझे jQuery में इस क्षमता को अनुकरण करने में कुछ कठिनाई हो रही है।jQuery UI का उपयोग किये बिना jQuery का उपयोग कर divs के साथ फ्रेम-आकार बदलने का व्यवहार अनुकरण?

मैं ऐसा करने के लिए jQuery UI का उपयोग नहीं करना चाहता, मुझे यूआई सूट प्रदान करने वाली सभी अतिरिक्त कार्यक्षमताओं की आवश्यकता नहीं है, और इसकी देखभाल करने के लिए कोड की कुछ पंक्तियां लिखना चाहेंगे।

मुझे केवल क्षैतिज विमान में आकार बदलने की आवश्यकता है, लंबवत आयाम तय किए गए हैं।

वर्तमान में मेरे पास एक समाधान है (प्रकार) काम करता है। साइडबार div का आकार बदला जा सकता है, लेकिन केवल तभी जब कोई उपयोगकर्ता आकार बदलने योग्य div पर क्लिक करता है, तो माउस को ड्रैग करता है, फिर फिर से div पर क्लिक करता है (mousemove ईवेंट को हटाने के लिए)।

अनुभव जो मैं चाहता हूं वह यह है: एक उपयोगकर्ता आकार बदलने योग्य div पर हो जाता है, माउस बटन को दबाता है, फिर div को बड़ा/छोटा होने के लिए ड्रैग करता है, और बटन को रिलीज़ करता है।

मेरी समस्या यह है कि: यदि कोई उपयोगकर्ता मेरे आकार बदलने योग्य div पर क्लिक करता है, तो इसे छोटे/बड़े बनाने के लिए खींचने का प्रयास करता है, माउस "नहीं" आइकन बन जाता है, और वहां एक पारदर्शी संस्करण होता है मेरा div जो माउस के साथ दवा है।

शायद यह मेरे कोड को देखकर बेहतर समझाया गया है:।

$(document).ready(function() { 
var i = 0; 
    $('#dragbar').mousedown(function(){ 
     $('#mousestatus').html("mousedown" + i++); 
     $(document).mousemove(function(e){ 
      $('#position').html(e.pageX +', '+ e.pageY); 
      $('#sidebar').css("width",e.pageX+2); 
     }) 
     console.log("leaving mouseDown"); 
    }); 
    $(document).mouseup(function(){ 
     $('#clickevent').html('in another mouseUp event' + i++); 
     $(document).unbind('mousemove'); 
     }); 
}); 

और एचटीएमएल:

<div id="header"> 
    header 
    <span id="mousestatus"></span> 
    <span id="clickevent"></span> 
</div> 
<div id="sidebar"> 
    <span id="position"></span> 
    <div id="dragbar"> 
    </div> 
    sidebar 
</div> 
<div id="main"> 
    main 
</div> 
<div id="footer"> 
    footer 
</div> 

यहाँ मूल लेआउट काम कर के साथ एक अस्थायी वेब पेज है:

http://pastehtml.com/view/1crj2lj.html

समस्या देखा जा सकता है अगर आप बात लेबल आकार बदलने के लिए कोशिश ब्राउन बार का उपयोग करके "साइडबार"।

+0

यहाँ यह ऐसा करने का एक अलग तरीका है: [https://stackoverflow.com/a/48909827/2736742](https://stackoverflow.com/a/48909827/2736742) – amorel

उत्तर

18

देखो मैं #main क्षेत्र बदल left:200px (और कोई चौड़ाई) किया जाना है।
संदेश के चयन से बचने के लिए mousedown पर e.preventDefault() जोड़ा गया।
कोड में मैं रूप में अच्छी तरह ताकि दोनों पक्षों के लिए कदम #main की left संपत्ति को बदलने ..


नहीं

यकीन है कि क्या आप इस समस्या वास्तव में है, लेकिन क्या देखते है कि #sidebar आकार दिया गया था, लेकिन नीचे जा रहा था है #main और इतने #dragbar गायब हो गया ..

+0

हाँ, यह तय है! बहुत बहुत धन्यवाद, मुझे लगा कि मुझे कहीं भी रोकथाम डीफॉल्ट() की जरूरत है! – user210099

+0

सिडेनोट: फ्लोट और पूर्ण स्थिति एक साथ नहीं रहती है। [डब्ल्यू 3 सी] (http://www.w3.org/TR/CSS2/visuren.html#propdef-position) 9.7 'प्रदर्शन', 'स्थिति', और 'फ्लोट' के बीच संबंध _ "अगर 'स्थिति' है मूल्य 'पूर्ण' या 'निश्चित', बॉक्स पूरी तरह से स्थित है, 'फ्लोट' का गणना मूल्य 'कोई नहीं' है ... "_ – uicoded

+0

उत्कृष्ट प्रश्न और शानदार उत्तर। क्या किसी को यह देखना चाहिए, हालांकि, किसी भी पॉइंटर्स को मैं चरम बाएं या दाएं खींचने पर खींचने योग्य "ऑफ पेज" पर कैसे रोक सकता हूं? और मैं साइडबार और मुख्य पर न्यूनतम चौड़ाई और अधिकतम चौड़ाई कैसे सेट कर सकता हूं? – Benteh