मैं किसी क्लाइंट के लिए फ़्रेमसेट से 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
समस्या देखा जा सकता है अगर आप बात लेबल आकार बदलने के लिए कोशिश ब्राउन बार का उपयोग करके "साइडबार"।
यहाँ यह ऐसा करने का एक अलग तरीका है: [https://stackoverflow.com/a/48909827/2736742](https://stackoverflow.com/a/48909827/2736742) – amorel