zoukankan      html  css  js  c++  java
  • day12—jQuery ui引入及初体验

    转行学开发,代码100天——2018-03-28

    按照所下载教学视频,今天已进行到jQuery UI的学习中。注:本人所用教学视频不是太完整,介绍的内容相对简单,有些只是带过。其他时间中,仍需继续针对各知识模块进行补充学习。

    今天记录一下jQuery UI的引用和使用初体验

    在开发之前,到jQuery UI官网下载库文件。https://jqueryui.com/ 

    库文件引用:

    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery-ui.min.css">
    <script type="text/javascript" src ="jquery-ui.min.js"></script>

    <!DOCTYPE html>
    <html>
    <head>
        <title>jQuery UI 01——draggable</title>
        <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
        <link rel="stylesheet" type="text/css" href="jquery-ui.min.css">
        <script type="text/javascript" src ="jquery-ui.min.js"></script>
        <script type="text/javascript" src="draggable.js"></script>
    </head>
    <body>
     <div id ="div1" style=" 100px ;height: 100px;border: 1px solid red;">
        DIV1
     </div>
     <div id="div2" style=" 200px;height: 300px; border:1px solid yellow;">DIV2</div>
    </body>
    </html>

     本例中,创建两个DIV盒子,一个实现拖动效果,一个实现允许拖入效果

    其中,自定义js文件draggable.js文件中

    $(document).ready(function()
    {
        $("#div1").draggable();
        $("#div2").droppable();
        $("#div2").on("drop",function(event,ui)
            {
                $("#div2").text("drop ok!")
            });
    });

    DIV1实现被拖动,DIV2允许被拖入,即将div1拖进div2中时,实现DIV2文本的修改。

    初始状态:

    拖动完成:

    疑问:在拖动中,如果只是div1盒子少量进入div2中时,并不会修改div2中的 文本,当大部分拖进div2中时,才会修改div2中的文本。

    这种现象源于这个方法的何种内部逻辑?

  • 相关阅读:
    WCF初探-21:WCF终结点(endpoint)
    WCF初探-20:WCF错误协定
    WCF初探-19:WCF消息协定
    WCF初探-18:WCF数据协定之KnownType
    WCF初探-17:WCF数据协定之等效性
    WCF初探-16:WCF数据协定之基础知识
    WCF初探-15:WCF操作协定
    WCF初探-14:WCF服务协定
    WCF初探-13:WCF客户端为双工服务创建回调对象
    WCF初探-12:WCF客户端异常处理
  • 原文地址:https://www.cnblogs.com/allencxw/p/8679941.html
Copyright © 2011-2022 走看看