Невозможно настроить jQuery изменяемого размера на работу: что я делаю не так? - PullRequest
Новая
       10

Невозможно настроить jQuery изменяемого размера на работу: что я делаю не так?

14 голосов
/ 29 марта 2009

Вот мой простой код, чтобы попробовать и проверить, работает ли jQuery resizable. Я прекрасно использую другие компоненты jQuery, используя google.load, и я попытался заменить google.load на локальную версию без разницы. Я протестировал в 3 браузерах, я скопировал код с нескольких демонстрационных / обучающих сайтов (где это работает, найдите на их сайте). 

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi?key=blahblah_obviously changed_blahblah-blahblah_blah_blahblahblah"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");google.load("jqueryui", "1.7.1");</script>
<style type="text/css">
   #resizable { width: 100px; height: 100px; background: silver; }
</style>
<script type="text/javascript">
  $(document).ready(function(){
  $("#resizable").resizable();
});
</script>
</head>
<body>  
 <div id="resizable"></div>
</body>
</html>

Я не получаю никаких сообщений об ошибках. Я в конце своего остроумия. Что я делаю неправильно? Почему даже этот простой случай не работает?

ОБНОВЛЕНИЕ: библиотеки пользовательского интерфейса jQuery включены в строку google.load ("jqueryui", "1.7.1");

Ответы [ 3 ]

45 голосов
/ 29 марта 2009

Пользовательский интерфейс jQuery работает нормально в вашем образце, проблема в том, что у вас нет CSS-темы, включенной в ваш последний тест , а значок «маркера изменяемого размера» не отображается.

Добавьте свою собственную тему или тему по умолчанию: 

<link rel="stylesheet" type="text/css" 
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>

См. Ваш образец здесь .

11 голосов
/ 27 апреля 2011

Все CSS, которые вам нужны, чтобы получить рабочий интерфейс jquery .resizable (): (не забудьте сохранить изображение на локальном компьютере) 

<style type="text/css">
.ui-icon { width: 16px; height: 16px; background-image: url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; 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: 0px; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0px; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0px; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0px; 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;}
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
</style>
1 голос
/ 29 марта 2009

Вы пробовали: 

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

Стоит отметить, что google.load () является асинхронным вызовом, и вы не сможете вызывать функции jQuery, пока они не будут загружены, следовательно, обратный вызов.

Хорошо, взглянули на ваш пример, и у вас есть несколько проблем:

  1. Это самое большое: у вас нет таблицы стилей пользовательского интерфейса jQuery;
  2. Вы вдвойне, включая jQuery, jQuery UI и SWFObject от Google и локально;
  3. Последний div внутри вашего изменяемого размера div блокирует изменение размера. Не знаю точно, почему, но я прокомментировал это, и он отлично работает; и
  4. Вам не нужен ключ API для API библиотек AJAX от Google. Это не вызывает проблем. Это просто к вашему сведению.

Ваша рабочая версия: 

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/blitzer/jquery-ui.css">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.1");
google.load("swfobject", "2.1");
google.setOnLoadCallback(function() {
  $(function() {
    $("#resizable").resizable();
  });
});
</script>
<style type="text/css">
  #resizable { width: 100px; height: 100px; background: silver; }
</style>
</head>
<body>
<div id="resizable">
  <div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-e"></div>
  <div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-s"></div>
  <!--<div unselectable="on" style="z-index: 1001; -moz-user-select: none;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div>-->
</div>
</body>
</html>
...