मैं आकार बदलने का तरीका कैसे निर्धारित कर सकता हूं? मैंने इसे गुगल करने की कोशिश की और jquery ui पर टिकट पाया, जो कहा गया कि यह तय है। लेकिन इसका उपयोग करने के तरीके पर कोई डॉक्टर नहीं है।jQuery यूआई आकार बदलने योग्य - ऑपरेशन की दिशा
सुनिश्चित नहीं हैं कि अगर आप का मतलब है कि आप एक विशेष अक्ष के आकार बदलने के आपरेशन विवश करना चाहते हैं, या यदि आप को पता है कि दिशा आकार वास्तव में चाहते हैं के लिए दस्तावेज़ीकरण देख सकते हैं
राययल का उत्तर काम करता है यदि आप पूर्व चाहते थे। मैं बाद में चर्चा करूंगा।
आप इस प्रकार का आकार बदलने योग्य सेट करते हैं:
var r = $("#resizable");
r.resizable();
मान लीजिए कि आप को पता है कि दिशा आकार के बाद में हुई उपयोगकर्ता माउस बटन रिलीज करना चाहते हैं। के आकार को रोकने घटना के लिए एक समारोह के लिए बाध्य करते हैं:
r.bind('resizestop', function(event, ui) {
// determine resize deltas
var delta_x = ui.size.width - ui.originalSize.width;
var delta_y = ui.size.height - ui.originalSize.height;
}
पारित कर दिया ui वस्तु का उपयोग करना, हम पुराने आकार से नए आकार को घटा कर आकार में सापेक्ष परिवर्तन निर्धारित कर सकते हैं। उसके बाद, आप delta_x और delta_y का उपयोग कर सकते हैं, हालांकि आप चाहें। आइए एक स्ट्रिंग बनाएं जो हैंडल में से एक के अनुरूप है।
r.bind('resizestop', function(event, ui) {
// determine resize deltas
var delta_x = ui.size.width - ui.originalSize.width;
var delta_y = ui.size.height - ui.originalSize.height;
// build direction string
var dir = '';
if (delta_y > 0) {
dir += 's';
} else if (delta_y < 0) {
dir += 'n';
}
if (delta_x > 0) {
dir += 'e';
} else if (delta_x < 0) {
dir += 'w';
}
// do something with this string
alert(dir);
});
ध्यान दें कि यह जरूरी नहीं लौटेगा जो संभाल वास्तव में अगर तुम तत्व के दोनों किनारों पर हैंडल है आकार प्रदर्शन करने के लिए इस्तेमाल किया गया था, केवल यह नेट दिशा है।
यह समाधान अच्छा है, जब मैं आकार बदलने के अंत में परिवर्तन निर्धारित करना चाहता हूं। लेकिन समस्या यह है कि मैं आकार बदलने की शुरुआत में दिशा जानना चाहता हूं। मुझे पता है कि यह बेतुका प्रतीत हो सकता है, क्योंकि मैं अनुमान नहीं लगा सकता, चाहे उपयोगकर्ता आकार को कम या बढ़ाए। लेकिन मुझे केवल एक चीज जानने की जरूरत है, जो हैनल्डर चुना गया था - पूर्व या पश्चिम (केवल उन दोनों को मेरे ऐप में संभव है)। – gruszczy
इस उत्तर में अंतिम बयान के आगे, क्या यह विफल नहीं होगा, उदाहरण के लिए, 'पश्चिम' हैंडल स्थानांतरित हो गया है? उस स्थिति में, यदि चौड़ाई कम हो जाती है - पूर्व में हैंडल को स्थानांतरित करके - delta_x शून्य से कम होगा, इसलिए रिपोर्ट की गई दिशा 'डब्ल्यू' होगी। –
मुझे लगता है कि विकल्प handles है कि तुम क्या कर रहे हैं के बाद:
$(selector).resizable({handles: 'n, s, e, w'})
कहाँ पत्र भौगोलिक दिशाओं का प्रतिनिधित्व करते हैं:
उपयोग उपरोक्त के किसी भी उप-समूह को आप पसंद करते हैं।
आप उस विकल्प here
नहीं, ओपी संभावित दिशाओं को परिभाषित नहीं करना चाहता, लेकिन यह निर्धारित करने के लिए कि वास्तव में कौन सी दिशा चुनी गई थी। – AGuyCalledGerald
यह मूल प्रश्न को संबोधित नहीं करता है। – SeanK
शुरुआत में, आकार परिवर्तन, और कॉलबैक रोक:
$(this).data('resizable').axis
$(".ui-resizable-handle").live("mousedown", function(e) {
$.ui.curResizeDirection = this.className.split("-").pop();
console.log($.ui.curResizeDirection);
});
मैं जानता हूँ कि यह एक लंबे समय पहले से एक सवाल है, लेकिन दिया समाधान मेरी समस्या का समाधान नहीं है। मुझे स्टार्ट फ़ंक्शन में हैंडलर पहुंचने का एक तरीका मिला और यह एफएफ और क्रोम में काम कर रहा है। मेरा संगठन आईई का समर्थन नहीं करता है, इसलिए यह अवांछित है, लेकिन इस मामले में एफएफ रास्ता काम करना चाहिए क्योंकि यह अधिक मानक घटना हैंडलिंग है।
$(".resizable").resizable({
start: function (event, ui) {
var dir = event.toElement ? event.toElement : event.originalEvent.target;
}
});
dir तो वास्तविक हैंडलर, आप (कक्षा सूची से पार्स, अगर मैं वहाँ पाने मैं मैं क्या कर पोस्ट करेंगे) वर्ग और उस से दिशा खोजने के लिए होगा।
कई कारणों से आकार बदलने से पहले आकार बदलने के लिए यह जानना उपयोगी है, और मुझे लगता है कि jQuery को यह जानने के लिए एक तरीका शामिल करना चाहिए था कि कौन सा हैंडल पकड़ा गया था।
बाद में संपादित करें: jQueryUI ही टिककर खेल अपने एपीआई के लिए, इस मामले में संभाल सूची आप चाहते प्राप्त करने के लिए प्रदान करता है बस
var handles = $(".selector").resizable("option", "handles");
कर (जो घोड़ों मुँह से सीधे है)। मेरे मामले में, मैंने अभी जांच की है कि यह 'एन' या 'एस' (ऊपर या नीचे) था और उसके बाद स्टार्ट फ़ंक्शन में मूल आकार को पकड़कर ऑब्जेक्ट में आकार के परिवर्तन की गणना की गई थी, और लूप जैसे आकार बदलने का काम कर रहा था इसकी गणना करने के लिए। अगर आकार कम हो रहा था तो दक्षिण हैंडल से नीचे और नीचे अगर हैंडल से नीचे, और यदि यह बढ़ रहा था तो इसका मतलब था कि दिशा दक्षिण हैंडल से या उत्तरी हैंडल से नीचे थी।
चाहे वह 'एन' या 'एस' खींचा जा रहा था पाने के लिए, मैं सिर्फ ऊपर से dir पकड़ा और वर्ग के नाम से दूर सब कुछ है, लेकिन अंतिम अक्षर कटा हुआ लौट आए, के बाद से वर्ग ui-handle-s की तरह कुछ है।
यह वास्तव में विनोदी है क्योंकि मैंने इनमें से अधिकतर का उपयोग नहीं किया है, क्योंकि मैंने इसे केवल नीचे से आकार देने के लिए बदल दिया है। चूंकि मैं इसका उपयोग नहीं कर रहा हूं, मुझे आशा है कि किसी और को यह सहायक लगेगा।
मुझे इसके बारे में एक अजीब चीज़ का सामना करना पड़ रहा है। यदि मैं आकार बदलने वाले हैंडल के किनारे पर क्लिक करता हूं, तो लौटाया गया तत्व वास्तव में तत्व है जो आकार बदलने योग्य तत्व के बाहर मौजूद है। तत्व अभी भी आकार बदलता है। आप उसमें भागने का कोई मौका? – smurf
मुझे इस तरह की कोई समस्या नहीं थी, लेकिन जिन चीज़ों का मैं आकार बदल रहा हूं वे वास्तव में छोटे हैं, लगभग 100px चौड़े परिवर्तनीय ऊंचाई के साथ। चूंकि हमने इसका उपयोग नहीं किया है, इसलिए मुझे आकार में बदलाव मिल गया है। यदि आप केवल एक तरफ से आकार बदल रहे हैं जो एक विकल्प हो सकता है। – maggiekh
हाँ, मुझे लगता है कि यह अन्य div पर एक और jquery mousemove घटना के साथ एक समस्या है जो मूल आकार बदलने की घटना में बाधा डाल रहा है – smurf
jsonx एक अच्छा समाधान मिल गया है, लेकिन आप भी उपयोग कर सकते हैं में निर्मित घटनाओं:
$('#resizable').resizable({
handles: 'n,s',
start: function(event, ui) {
var handleDirection = event.srcElement.className.split("-").pop();
}
});
कोड '#resizable' तत्व आकार बदलने योग्य बनाता है और उत्तर और दक्षिण पक्षों तत्व की पर हैंडल डालता है । यदि उत्तर हैंडल क्लिक किया गया है और खींच लिया गया है तो हैंडल डायरेक्शन 'एन' है। मैं 'स्टॉप' ईवेंट के साथ ऐसा करने के लिए एक समान तरीका खोजने में असमर्थ रहा हूं।
$("#resizable").resizable({
handles: "n, e, s, w",
resize: function(event, ui) {
//your codes here
}
});
div का उपयोग कर संपत्ति संभालती द्वारा चारों दिशाओं में आकार दिया जाता है:
इस कोड का प्रयास करें।
यहाँ देखें:
http://www.landcoder.com/4-dynamic-interactive-code-snippets-jquery-705#resizable
मुझे यह भी पता करने के लिए जो आकार बदलें हैंडल के शुरू में क्लिक किया गया था चाहते हैं। – Karl
कृपया मेरा उत्तर देखें http://stackoverflow.com/a/20833716/776687 – Webars