jQuery UI изменяемый размер не работает вообще
Ok вот в чем проблема. jQuery Resizable просто не работает на этой странице:нажмите здесь
попробуйте на сером поле в верхнем левом углу.
то, что я хочу сделать, это сделать shoutbox на правильный размер изменяемого размера. Но это не сработало, поэтому я попытался просто скопировать все со страницы примера jQuery UI в свой и попробовать. Поэтому я добавил серый ящик так же, как и они, используя даже тот же css, но он не будет работать.
здесь как называются библиотеки:
<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>
скрипт внутри функции готовности документа (как в Примере):
$('#resizable').resizable();
CSS серого ящика:
<style type="text/css">
#resizable { width: 100px; height: 100px; background: silver; position:relative; z-index:15;}
</style>
мне пришлось добавить параметры position и z-index из-за дизайна моего сайта, но это, похоже, ни на что не влияет.
и реализации:
<div id="resizable"></div>
Я думаю, что я упускаю что-то действительно очевидное здесь, но я не вижу этого. Я даже пробовал с совместимостью с jQuery библиотеками UI в локальный каталог вместо использования google.
Я был бы очень признателен за кивок в правильном направлении. Спасибо
3 ответов
это должно быть сразу после вызова jQuery ui и css:
<script type="text/javascript">
$(function() {
$("#resizable").resizable();
});
</script>
EDIT: кроме того, вам нужно включить тему, чтобы она работала правильно.
вы должны включить css, предоставляемый jQuery-ui при создании пользовательской загрузки. Вы можете найти файл css в jquery-ui-1.8.21.пользовательский\css\ui-lightness\jquery-ui-1.8.21.традиция.css (если вы выбрали тему lightness). Вот 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;}