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);        }