JQuery UI Resizable के साथ केवल क्षैतिज या लंबवत आकार कैसे करें?

Question

एकमात्र समाधान जो मैंने पाया है वह वर्तमान मूल्य के साथ अधिकतम और न्यूनतम ऊंचाई या चौड़ाई निर्धारित करना है।

उदाहरण:

foo.resizable({ 
  maxHeight: foo.height(), 
  minHeight: foo.height() 
});

लेकिन यह वास्तव में बदसूरत है, खासकर अगर मुझे तत्व की ऊंचाई को प्रोग्रामेटिक रूप से बदलना होगा।

Answer 1

आप इस तरह से केवल बाएं और दाएं (या पूर्व / पश्चिम) पर दिखाने के लिए आकार बदलने का handlesविकल्प सेट कर सकते हैं :

foo.resizable({
    handles: 'e, w'
});​

आप इसे यहाँ आज़मा सकते हैं।

Comments

मुझे इस समाधान के साथ एक चेतावनी मिली। यह इनलाइन शैली के रूप में किए जाने पर भी चौड़ाई और ऊँचाई रखेगा। यह मेरे लिए एक ऊर्ध्वाधर एकमात्र समाधान के साथ समस्याएं पैदा कर रहा है। एक बार जब मैंने इसे आकार दिया है तो चौड़ाई सेट हो गई है और यह अब 100% नहीं है (लेकिन एक px मान)। बस इसे यहां डालते हुए अन्य लोग खोज रहे हैं और इसे पार कर रहे हैं।

— फर्नकर

@Fernker हाँ, यह एक दर्द है।

— बेन

यदि आप न्यूनतम-चौड़ाई और अधिकतम-चौड़ाई के गुण अपने div को देते हैं तो आप प्रतिशत चौड़ाई वापस पा सकते हैं। यह ओवरराइड नहीं होगा :)

— सेबैस्टियन

शिफ्ट-ड्रैग टेस्ट को विफल करता है।

— कुछ भी नहीं

क्या आप "शिफ्ट-ड्रैग टेस्ट" का वर्णन कर सकते हैं?

— जॉन जेड

Answer 2

जबकि पोस्टर मुख्य रूप से एक क्षैतिज-केवल आकार के लिए पूछ रहा था, प्रश्न ऊर्ध्वाधर के लिए भी पूछता है।

ऊर्ध्वाधर मामले में एक विशेष मुद्दा है: आपने एक रिश्तेदार चौड़ाई (जैसे 50%) निर्धारित की होगी जिसे आप ब्राउज़र विंडो के आकार बदलने पर भी रखना चाहते हैं। हालांकि jQuery यूआई एक बार जब आप पहले तत्व का आकार बदल देते हैं और सापेक्ष चौड़ाई खो जाता है तो पीएक्स में एक पूर्ण चौड़ाई सेट करता है।

यदि इस उपयोग के मामले में काम करने के लिए निम्न कोड पाया जाता है:

$("#resizable").resizable({
    handles: 's',
    stop: function(event, ui) {
        $(this).css("width", '');
   }
});

Http://jsfiddle.net/cburgmer/wExtX/ और jQuery UI resizable भी देखें : जब अकेले पूर्व का उपयोग कर ऑटो ऊंचाई

Comments

बहुत दिलचस्प है, धन्यवाद। मैं इसे याद रखूंगा। मुझे लगता है कि यह टिप्पणी करना महत्वपूर्ण है कि आकार बदलने वाले तत्व को सीएसएस द्वारा अपनी चौड़ाई निर्धारित करनी है यदि नहीं, यह आकार बदलने के बाद खो जाएगा। यहां देखें jsfiddle.net/paska/wExtX/10

— डिएगो

यह वह उपाय है जिसकी मुझे तलाश थी। इस क्षेत्र के लिए संभाल अक्षम होने के बावजूद किसी कारण से, यह अभी भी px पर सेट होने के लिए आयाम लगता है। यदि आप इस पद्धति का उपयोग नहीं करते हैं तो आप अपने% आधारित ऊंचाई या चौड़ाई को ढीला कर देते हैं।

— सेरहि

वास्तव में यह jQuery-ui 1.11.0 में काम नहीं करता है। तत्व पर सीधे सेट सीएसएस चौड़ाई प्रारंभिक चौड़ाई से नहीं ली गई है। मैं एक प्रतिशत होने के लिए चौड़ाई सेट करने की कोशिश कर रहा हूं और यह कई अंकों के साथ लिखा जाता है px।

— बेन

धन्यवाद, यह चाल भी काम में 'शिफ्ट खींचें' है कि पहलू अनुपात को बनाए रखता है, जबकि आकार बदलने (क्षैतिज आकार बदलने के लिए, सेट सीएसएस अनदेखी करने के लिए आया था heightके लिए ''में resizeऔर stopहैंडलर)

— nothingisnecessary

Answer 3

एक बहुत ही सरल उपाय:

$( ".selector" ).resizable({ grid: [1, 10000] }); // horizontal
$( ".selector" ).resizable({ grid: [10000, 1] }); // vertical

यह ड्रैगेबल () के लिए भी काम करता है। उदाहरण: http://jsfiddle.net/xCepm/

Comments

यह वास्तव में बदसूरत है !! इसके अलावा, सही समाधान (जिसे हम उपयोग करने वाले हैं) @ क्रिक है

— डिएगो

मैं सहमत हूँ! :-) लेकिन यह अच्छा है कि यह resizable () और draggable () के साथ काम करता है।

— जनवरी

मैं यह पसंद है! गणितीय रूप से शांत होने के अलावा, यह नीचे-दाएं कोने में हैंडल को छोड़ देता है, जिससे एक दृश्य संकेत मिलता है कि तत्व resizable है। स्वीकृत समाधान में रिसाइज़ हैंडल छिपा हुआ है, और उपयोगकर्ता को यह अनुमान लगाना होगा कि निचला मार्जिन एक गर्म स्थान है।

— corwin.amber

यह उन कारणों के लिए एकदम सही है जो @ corwin.amber में कहा गया है

— लोम्बास

यह मेरी जरूरतों के लिए एकदम सही था:{handles: 'se', grid: [10000, 1], autoHide: true}

— इलेक्ट्रोटाइप

Answer 4

इसका समाधान यह है कि यह आपके आकार बदलने योग्य हो जाए ताकि यह आपके इच्छित आयाम को रद्द न कर सके।

यहाँ केवल लंबवत पुनरुत्थान का एक उदाहरण है:

foo.resizable({
  resize: function(event, ui) { 
    ui.size.width = ui.originalSize.width;
  }      
}); 

Comments

जोर से नहीं है कि बहुत तरह का हो सकता है?

— डिएगो

इस तरह उपयोगकर्ता एक ऐसा हैंडल देखता है जिसका वह उपयोग नहीं कर सकता है।

— नीमा

Answer 5

जब ब्राउज़र पुनः आकार देता है तो मैं चौड़ाई को फिर से आकार देना चाहता था, लेकिन जब उपयोगकर्ता तत्व का आकार बदलता है, तो यह ठीक काम करता है:

foo.first().resizable({
    resize: function(event, ui) { 
    ui.element.css('width','auto');
    },
}); 

Answer 6

मेरे लिए हैंडल और resizeहैंडलर दोनों के साथ समाधान ठीक काम करता है, इसलिए उपयोगकर्ता हैंडल देखते हैं लेकिन केवल क्षैतिज रूप से आकार बदल सकते हैं, इसी तरह के समाधान को ऊर्ध्वाधर के लिए काम करना चाहिए। निचले दाएं हाथ के उपयोगकर्ता के बिना अनजान हो सकता है कि वह तत्व का आकार बदल सकता है।

जब ui.size.height = ui.originalSize.height;इसका उपयोग ठीक से काम नहीं करेगा यदि तत्व बदल गया है तो प्रारंभिक अवस्था से इसका आकार है।

foo.resizable({
    // Handles left right and bottom right corner
    handles: 'e, w, se',
    // Remove height style
    resize: function(event, ui) {
        $(this).css("height", '');
    }
});

बेहतर प्रदर्शन के $(this)लिए हटाया जा सकता है:

var foo = jQuery('#foo');
foo.resizable({
    // Handles left right and bottom right corner
    handles: 'e, w, se',
    // Remove height style
    resize: function(event, ui) {
        foo.css("height", '');
    }
});

Answer 7

Successfully working div position Vertically and horizontally
-------------------------------------------------------------

<head>

    <style>
    .resizable {
        height: 100px;
        width: 500px;
        background: #09C;
    }
    .resizable-x {
        height: 100px;
        width: 500px;
        background: #F60;
    }
    </style>

    <script>
     $(function() {

        $( ".resizable" ).resizable({
            grid: [10000, 1]
        });

        $( ".resizable-x " ).resizable({
            grid: [1, 10000]
        });


        $( ".resizable" ).draggable();
        });

      });
        </script>`enter code here`
    </head>

    <body>
    <div class="resizable"></div>
    <div class="resizable-x"></div>
    </body>