Блог

Главная - Вопросы по программированию - jQuery ui с возможностью изменения размера Передают переменные события изменения размера для остановки события

jQuery ui с возможностью изменения размера Передают переменные события изменения размера для остановки события

#jquery #jquery-ui

Вопрос:

мне нужно передать переменную «blabla» события изменения размера, чтобы остановить событие, как я могу это сделать?

заранее спасибо, вот часть кода, чтобы объяснить, что мне нужно:

 .resizable({
                        disabled: disablePoignee,
                        handles: poignees,
                        resize: function (e, ui) {
                            var blabla = "pioup";
                        },
                        stop:function(e,ui){
                            //try to get blabla
                        }});

заранее спасибо за вашу помощь

Комментарии:

1. Вам нужно помочь нам помочь вам. Можете ли вы поделиться дополнительной информацией?

2. @RuiCosta Я просто хочу передать переменную blabla в функцию остановки, как я могу объяснить лучше?

3. Можете ли вы поделиться оставшейся частью кода, который у вас есть?

Ответ №1:

В этом кодексе…

 .resizable({
  disabled: disablePoignee,
  handles: poignees,
  resize: function (e, ui) {
    var blabla = "pioup";
  },
  stop: function(e,ui) {
    //try to get blabla
  }});

… переменная blabla доступна только внутри функции, переданной (как resize свойство options объекта) в resizable функцию плагина. Это значение инкапсулировано — по сути, скрыто — от остального мира.

Чтобы «раскрыть» его, у вас есть два варианта. Во-первых, сделайте эту переменную внешней по отношению к области действия обеих resize stop функций и:

 var blabla; // or const, or let
// ...
.resizable({
  resize: function (e, ui) {
    blabla = "pioup"; // note that `var` shouldn't be used here, as existing variable is reused
  },
  stop: function(e, ui) {
    doSomethingWith(blabla);
  }});

Это, однако, не сработает, если в resizable вашем коде создано более одного экземпляра, и каждый из них должен использовать свое собственное значение blabla . В этом случае может быть полезно выбрать второй вариант — и назначить какое-либо пользовательское свойство объекту jQuery, на котором размещен плагин:

 .resizable({
  resize: function (e, ui) {
    ui.originalElement.data('blabla', 'someValue'); 
  },
  stop: function(e, ui) {
    doSomethingWith(ui.originalElement.data('blabla')); 
  }});

Преимущество такого подхода заключается в том, что данные остаются прикрепленными к этому объекту даже после уничтожения плагина.

Комментарии:

1. Примечание: Это также можно сделать с помощью .data() . Это означает, что переменная может быть добавлена к элементу с помощью .data() , а затем вызвана таким же образом. Полезно, если у вас в игре более 1 элемента.

2. Вы имеете в виду каким-то другим способом, чем использовалось в моем ответе?

3. @raina77ow спасибо за ваш ответ, я использовал это изначально, но я думал и / или надеялся, что есть чистая возможность избежать прохождения dom.

4. @raina77ow Я смотрел на первую часть вашего ответа и не уловил вторую часть.

Ответ №2:

Рассмотрим следующий пример.

 $(function() {
  $("#resizable").resizable({
    resize: function(e, ui) {
      $(this).data("foo", "bar-"   $(this).width());
    },
    stop: function(e, ui) {
      console.log($(this).data("foo"));
    }
  });
}); 
 #resizable {
  width: 150px;
  height: 150px;
  padding: 0.5em;
}

#resizable h3 {
  text-align: center;
  margin: 0;
} 
 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="resizable" class="ui-widget-content">
  <h3 class="ui-widget-header">Resizable</h3>
</div>

Вместо создания более глобальной переменной вы можете использовать данные jQuery.

Храните произвольные данные, связанные с сопоставленными элементами, или возвращайте значение в именованном хранилище данных для первого элемента в наборе сопоставленных элементов.

С помощью этого мы можем устанавливать и получать данные для каждого элемента. Если у вас есть только один изменяемый размер элемента, это не имеет большого значения. Если у вас много изменяемых размеров элементов, это очень полезно для консолидации вашего сценария.

Комментарии:

1. спасибо за ваш ответ, я использовал это изначально, но я думал и / или надеялся, что есть чистая возможность избежать прохождения dom.

Метки: