Day 32 (Jq-UI)

JQ-UI使用步骤-1:

(1)API Documentation > (左侧) Interactions > Draggable Widget

https://jqueryui.com/droppable/
找一个喜欢的样式

(2)效果内找出关键字 droppable draggable

    <script>
      $(function () {
        $("#draggable").draggable();
        $("#droppable").droppable({
          drop: function (event, ui) {
            $(this).addClass("ui-state-highlight").find("p").html("Dropped!");
          },
        });
      });
    </script>

(3)搜寻可以怎麽更改或使用

API Documentation > (左侧) Interactions > Draggable Widget
https://api.jqueryui.com/draggable/
API Documentation > (左侧) Interactions > Droppable Widget
https://api.jqueryui.com/droppable/

(4)增加的方式:

新增 找到可使用的地方 +「,」 继续使用

          drop: function (event, ui) {
            // 自己改颜色
            $(this).addClass("green").find("p").html("apple");
            // 或
            //.css('backgroundColor', 'green')
          },     // 新增 找到可使用的地方 +, 继续使用(记得把function ()变数删除)
          out: function () {
            $(this).find("p").html("移出去了");
          },     // 新增 找到可使用的地方 +, 继续使用(记得把function ()变数删除)
          over: function () {
            $(this).find("p").text("移进来了");
          },

(5)查找效果位置:console.log()看一下

           drop: function (event, ui) {
            // 想知道event,看一下
            console.log(event); //target: div#droppable.ui-widget-header.ui-droppable
            // 想知道 ui,看一下
            console.log(ui); //找到{draggable:}这个位置

            console.log(ui.draggable); //可以看是哪一层(游标指过去) 
            //0: div.draggable.ui-widget-content.ui-draggable.ui-draggable-handle

            ui.draggable.hide();

JQ-UI使用步骤-2:CSS变色的秘密

点了就会把这个类别放上去因此换色

             #apple .ui-selected {
              background: #2314f3;
              color: white;
            }

类别直接拿来用! 就不用再写选定谁

            var temp = $("#apple .ui-selected").text(); // 'apple';
            console.log(temp);
            $("#mySelected").text(temp);

JQ-UI使用步骤-3:日历

https://api.jqueryui.com/datepicker/
https://jqueryui.com/datepicker/#date-range

(1)属性 : 设定

(2)dateFormat: dateFormat，设定日历格式，会回去抓"yy/mm/dd"

      $(function () {
        var dateFormat = "yy/mm/dd", //被抓
          from = $("#from")
            .datepicker({

              defaultDate: "+1w", //一周
              changeMonth: true, //
              numberOfMonths: 3,

              // 属性 : 设定

              changeYear: true, //开启年份下拉
              yearRange: "c-1:c+2", //设定年分  系统年-1~+2年
              dateFormat: dateFormat, 
         //设定日历格式  会回去抓"yy/mm/dd"
         //JQ给的dateFormat:自己写的dateFormat

            })

JQ-UI使用步骤-4:卷轴

(1)被後盖前，无效而方框不会因拉动变色，想要效果後面加上refreshSwatch()

(2)范例只有一个，但此时有三个#red, #green, #blue"==>使用this

      $("#red, #green, #blue").slider({
          orientation: "horizontal", //横向
          range: "min", //max
          max: 255, // (o)
          value: 127,
          // slide: refreshSwatch,  //1.slide: 被後盖前，无效而方框不会变色

          //把上面范例 卷轴里面有数字↓↓↓↓↓↓ code拿来用
          create: function () {
            //范例只有一个，但此时有三个#red, #green, #blue"
            //使用this(这个)
            $(this).find(".custom-handle").text($(this).slider("value"));
          },

          slide: function (event, ui) {
            refreshSwatch(); //2.把前面的refreshSwatch搬过来,+()执行
            $(this).find(".custom-handle").text(ui.value);
            console.log(ui);
          },

JQ-UI使用步骤-5:查阅:使用console.log(this);

          change: function (event, ui) {
            // 滑动中会跟着变色
            refreshSwatch();
            console.log("change");
            console.log(this);
            $(this).find(".custom-handle").text(ui.value);
          },

JQ-UI使用步骤-6:.animate()

.animate()在Jq不能改背景色，跟UI有各自的分工
https://api.jquery.com/animate/#animate-properties-duration-easing-complete
(For example, width, height, or left can be animated but background-color cannot be,
unless the jQuery.Color plugin is used).

JQ-UI使用步骤-7:Effect

https://api.jqueryui.com/show/
https://jqueryui.com/show/

(1)可以直接挑效果:Ex:"explode"

        function runEffect() {
          $("#effect").show("explode", { }, 500,callback);
        }

(2)选择样式：搜寻XXXX-effect

2-1.从文件得知样式的的属性变更在第二格(options)

.show( effect [, options ] [, duration ] [, complete ] )

2-2.搜寻explode-effect，选择喜欢的贴上
https://api.jqueryui.com/explode-effect/

        function runEffect() {
          $("#effect").show("explode", { pieces: 4 }, 500,callback);
        }