Как это не будет работать ни в jQuery UI 3.3.1, ни в 1.9.1, а работает только в 1.9.2?

Question

Пока я искал решение для переключения текстового поля с флажка, я наткнулся на эту скрипку из другого поста здесь, в StackOverflow.

http://jsfiddle.net/67x4bwnr/

HTML

<div class="toggler">
  <div id="effect" class="ui-widget-content ui-corner-all">
  <h3 class="ui-widget-header ui-corner-all">Toggle</h3>
    <p>
  Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
    </p>
  </div>
</div>

<select name="effects" id="effectTypes">
  <option value="blind">Blind</option>
  <option value="bounce">Bounce</option>
  <option value="clip">Clip</option>
  <option value="drop">Drop</option>
  <option value="explode">Explode</option>
  <option value="fold">Fold</option>
  <option value="highlight">Highlight</option>
  <option value="puff">Puff</option>
  <option value="pulsate">Pulsate</option>
  <option value="scale">Scale</option>
  <option value="shake">Shake</option>
  <option value="size">Size</option>
  <option value="slide">Slide</option>
</select>

<input type="checkbox" id="run_effect" name="run_effect"> Click to execute effect

JavaScript + JQuery

function runEffect() {
  // get effect type from
  var selectedEffect = 'slide';

  // most effect types need no options passed by default
  var options = {};
  // some effects have required parameters
  if ( selectedEffect === "scale" ) {
    options = { percent: 0 };
  } else if ( selectedEffect === "size" ) {
    options = { to: { width: 200, height: 60 } };
  }

  // run the effect
  $( "#effect" ).toggle( selectedEffect, options, 500 );
};

 $( "#effect" ).toggle( false );
// set effect from select menu value
$("#run_effect").click(function(){
    if($('#run_effect').is(':checked')){
        runEffect();
    }else{
        runEffect();
    }
});

CSS

.toggler {
    width: 500px;
    height: 200px;
  }
  #button {
    padding: .5em 1em;
    text-decoration: none;
  }
  #effect {
    position: relative;
    width: 240px;
    height: 135px;
    padding: 0.4em;
  }
  #effect h3 {
    margin: 0;
    padding: 0.4em;
    text-align: center;
  }

Скрипка будет работать только с использованием jQuery 1.9.2. Я пробовал использовать 3.3.1, 1.9.1, и он не будет работать.

Итак, мой первый вопрос: Как это?

И второй вопрос: Как заставить его работать с помощью 3.3.1?

Пожалуйста, имейте в виду, что я не являюсь передовым разработчиком, поэтому все это для меня как "китайский".

Answer 1

Вам необходимо включить jQuery, а также CSS и скрипт для пользовательского интерфейса jQuery. Пример (см. Верхнюю часть HTML)

Теперь о том, почему / как использовать jsFiddle, это их дизайнерское решение не включать переключатель JQuer UI, когда другие версии, кроме 1.9.1, являются выбранной версией jQuery.

ПРИМЕЧАНИЕ: это отвечает на ваш вопрос.

СЕЙЧАС Я немного повеселился с этим, установил флажок select / и добавил кнопку, чтобы показать выбранный эффект при нажатии. Сделал объект из условных выражений и использовал это, не стесняйтесь просто использовать здесь «ответ». Он по-прежнему вызывает событие «change» - при нажатии на кнопку, чтобы он НЕ показывал никакого эффекта, если он не отмечен, он просто показывает / скрывает базовый jQuery.

function runEffect(pick, choice) {
  // get effect type from
  var selectedEffect = choice.val(); //'slide';
  // console.log(selectedEffect);
  let defaultOptions = {
    duration: 500,
    scale: {
      options: {
        percent: 0
      }
    },
    size: {
      options: {
        to: {
          width: 200,
          height: 60
        }
      }
    }
  };
  let options = defaultOptions[selectedEffect] ? (defaultOptions[selectedEffect].options ? defaultOptions[selectedEffect].options : {}) : {};
  // run the effect IF checked?
  if (pick) {
    $("#effect").toggle(selectedEffect, options, defaultOptions.duration);
  } else {
    // just basic jquery hide/show toggle
    $("#effect").toggle();
  }
};
// this is an alias for and the same as $("#effect").hide();
$("#effect").toggle(false);

// set effect from select menu value
// this is better with '.on(' and should use "change" not click
$("#run_effect").on('change', function() {
  let me = $(this).is(':checked');
  let choice = $('#effectTypes');
  runEffect(me, choice);
});
$("#show-effect").on('click', function() {
  $("#run_effect").trigger('change');
});

.toggler {
  width: 500px;
  height: 200px;
}

#button {
  padding: .5em 1em;
  text-decoration: none;
}

#effect {
  position: relative;
  width: 240px;
  height: 135px;
  padding: 0.4em;
}

#effect h3 {
  margin: 0;
  padding: 0.4em;
  text-align: center;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="toggler">
  <div id="effect" class="ui-widget-content ui-corner-all">
    <h3 class="ui-widget-header ui-corner-all">Toggle</h3>
    <p>
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
    </p>
  </div>
</div>

<select name="effects" id="effectTypes">
  <option value="blind">Blind</option>
  <option value="bounce">Bounce</option>
  <option value="clip">Clip</option>
  <option value="drop">Drop</option>
  <option value="explode">Explode</option>
  <option value="fold">Fold</option>
  <option value="highlight">Highlight</option>
  <option value="puff">Puff</option>
  <option value="pulsate">Pulsate</option>
  <option value="scale">Scale</option>
  <option value="shake">Shake</option>
  <option value="size">Size</option>
  <option value="slide" selected>Slide</option>
</select>
<label>
<input type="checkbox" id="run_effect" name="run_effect"> Click to execute effect javascript+jquery</label>
<button type="button" id="show-effect">Do Effect Show</button>