jQuery UI resizable सभी

Question

पर काम नहीं कर रहा है ठीक है यहाँ समस्या है। jQuery Resizable बस इस पृष्ठ पर काम नहीं करता है: click here

ऊपरी बाएं कोने में ग्रे बॉक्स पर इसे आज़माएं।

मैं जो करना चाहता हूं वह सही आकार पर shoutbox को आकार देने योग्य है। लेकिन यह काम नहीं किया, इसलिए मैंने jQuery UI उदाहरण पृष्ठ से सबकुछ कॉपी करने की कोशिश की और इसे आजमाएं। इसलिए मैंने उसी सीएसएस का उपयोग करके ग्रे बॉक्स को उसी तरह जोड़ा, लेकिन यह काम नहीं करेगा।

यहां बताया गया है पुस्तकालयों कहा जाता है:

<script src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 

google.load("jquery", "1.4.1"); 
google.load("jqueryui", "1.7.2"); 

google.setOnLoadCallback(function() { 

}); 

</script> 

<script type="text/javascript" src="js/thickbox.js"></script> 
<script type='text/javascript' src='js/jqueryEasingMin.js'></script> 
<script type='text/javascript' src='js/jquery.imghover-1.1rc.js'></script> 
<script type="text/javascript" src="js/shoutbox.js" ></script> 
<script type="text/javascript" src="js/bbcode.js" ></script> 
<script type='text/javascript' src='js/jqueryLoader2.js'></script> 

(उदाहरण की तरह) दस्तावेज़ तैयार समारोह के अंदर स्क्रिप्ट:

<style type="text/css"> 
#resizable { width: 100px; height: 100px; background: silver; position:relative; z-index:15;} 
</style> 

मैं:

$('#resizable').resizable(); 

ग्रे बॉक्स के सीएसएस मेरी साइट के डिज़ाइन की वजह से स्थिति और जेड-इंडेक्स पैरामीटर जोड़ना था, लेकिन ऐसा लगता है कि किसी भी को प्रभावित नहीं करना है एनजी।

और कार्यान्वयन:

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

मुझे लगता है कि मैं यहाँ वास्तव में कुछ स्पष्ट याद कर रहा हूँ लेकिन मैं यह नहीं देख सकता। मैंने jquery UI पुस्तकालयों को Google के उपयोग करने के बजाय स्थानीय निर्देशिका में जोड़ने के साथ भी कोशिश की।

मैं वास्तव में सही दिशा में एक विनम्रता की सराहना करता हूं। धन्यवाद

Answer 1

वहाँ jQuery ui और सीएसएस बुला के बाद यह अधिकार माना जाता है:

<script type="text/javascript"> 
$(function() { 
    $("#resizable").resizable(); 
}); 
</script> 

संपादित करें: इसके अलावा, आप इसे सही ढंग से काम करने के लिए एक विषय को शामिल करने की जरूरत है।

Answer 2

जब आप अपना कस्टम डाउनलोड बनाते हैं तो आपको jquery-ui द्वारा प्रदान किए गए सीएसएस को शामिल करना होगा। आप jquery-ui-1.8.21.custom \ css \ ui-lightness \ jquery-ui-1.8.21.custom.css (यदि आपने हल्कापन थीम चुना है) में सीएसएस फ़ाइल पा सकते हैं। यहाँ आकार बदलने योग्य के लिए सीएसएस है:

.ui-resizable { position: relative;} 
.ui-resizable-handle { position: absolute;font-size: 0.1px; display: block; } 
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; } 
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; } 
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; } 
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; } 
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; } 
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; } 
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; } 
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; } 
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;} 

Answer 3

कोशिश इस जोड़ने:

<div id="resizable" class="ui-widget-content">