引言

这周暂时没有任务下达，所以老大给我的任务就是熟悉jquery相关插件，我就先选择了jquery UI插件，以及jquery库学习。

我用了两天的时候熟悉Interactions模块中的Draggable功能，并跟随练习，写这篇博文就是想记录下自己的心得体会。

正文：Draggable(拖拽)

1、默认配置：就是简单的一行代码：$( "#目标元素Id" ).draggable();

<title>jqeruy UI 拖拽练习--默认配置</title>

<!--导入jquery插件-->

<script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script>

<!--导入jqueryUI插件-->

<script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>

<link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>

<!--自写脚本-->

<script type="text/javascript" language="javascript">

   //在页面加载完之后加载jquery

   $().ready(function(e) {

      //拖拽函数

      $('#draggable').draggable();

});

</script>

<!--自写脚本-->

<style type="text/css">

  #draggable

  {

      width:150px;

      height:150px;

  }

</style>

</head>

<body>

<div id="draggable" class="ui-widget-content">

   <p>您可以四处随便拖拽我！</p>

</div>

</body>

效果是可以四处随便拖拽

2、自动滚动：scroll设置为true，表示启用滚动条跟随；scrollSensitivity和scrollSpeed是设置滚动条跟随速度的效果

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>jqeruy UI 拖拽练习--滚动条自动滚动</title>

 <!--导入jquery插件-->

 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script>

 <!--导入jqueryUI插件-->

 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>

 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>

 <!--自写脚本-->

 <script type="text/javascript" language="javascript">

    //在页面加载完之后加载jquery

    $().ready(function(e) {

       //拖拽函数,这样配置只是控制了垂直滚动条（这个可以通过设置scroll为false测试知道)

       $('#draggable').draggable({ scroll:true});

       $('#draggable1').draggable({scroll:true,scrollSensitivity:100});

       $('#draggable2').draggable({scroll:true,scrollSpeed:100});

 });

 </script>

 <!--自写脚本-->

 <style type="text/css">

   #draggable,#draggable1,#draggable2

   {

       width:200px;

       height:200px;

       float:left;

       margin:5px;

   }

 </style>

 </head>

 <body>

 <div id="draggable" class="ui-widget-content">

  <p>Scroll属性设置为true,其他默认</p>

 </div>

 <div id="draggable1" class="ui-widget-content">

  <p>Scroll属性设置为true,scrollSensitivity属性设置为100,其他默认</p>

 </div>

 <div id="draggable2" class="ui-widget-content">

  <p>Scroll属性设置为true,scrollSpeed属性设置为100,其他默认</p>

 </div>

 <div style="height: 5000px; width: 1px;"></div>

 </body>

效果是滚动条自动跟随

3、移动限制：axis是控制移动方向的属性；containment是控制元素移动范围的属性

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>jqeruy UI 拖拽练习--移动限制</title>

 <!--导入jquery插件-->

 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script>

 <!--导入jqueryUI插件-->

 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>

 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>

 <!--自写脚本-->

 <script type="text/javascript" language="javascript">

    //在页面加载完之后加载jquery

    $().ready(function(e) {

       //拖拽函数

       $('#draggable').draggable({ axis:"y"});

       $('#draggable2').draggable({axis:"x"});

       $('#draggable3').draggable({containment:"#containment-wrapper",scroll:false});

       $('#draggable5').draggable({containment:"parent"});

 });

 </script>

 <!--自写脚本-->

 <style type="text/css">

   .draggable { width: 190px; height: 190px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }

   #draggable, #draggable2 { margin-bottom:20px; }

   #draggable { cursor: n-resize; }

   #draggable2 { cursor: e-resize; }

   #containment-wrapper { width: 95%; height:350px; border:2px solid #ccc; padding: 10px; }

   h3 { clear: left; }

 </style>

 </head>

 <body>

 <h3>限制运动方向:</h3>

 <div id="draggable" class="draggable ui-widget-content">

 <p>我只能在<b>垂直方向</b>拖拽</p>

 </div>

 <div id="draggable2" class="draggable ui-widget-content">

 <p>我只能在<b>水平方向</b>拖拽</p>

 </div>

 <h3>或只能在一个元素中拖拽:</h3>

 <div id="containment-wrapper">

 <div id="draggable3" class="draggable ui-widget-content">

 <p>我被限制在这个框中拖拽</p>

 </div>

 <div class="draggable ui-widget-content">

 <p id="draggable5" class="ui-widget-header">我被限制在父级框中拖拽</p>

 </div>

 </div>

 </body>

效果是可以控制元素的移动方向和移动范围

4、光标样式：cursor设置光标样式；cursorAt设置鼠标位置

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>jqeruy UI 拖拽练习--光标样式</title>

 <!--导入jquery插件-->

 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script>

 <!--导入jqueryUI插件-->

 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>

 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>

 <!--自写脚本-->

 <script type="text/javascript" language="javascript">

    //在页面加载完之后加载jquery

    $().ready(function(e) {

       //拖拽函数

       $('#draggable_cursor_center').draggable({ cursor:"move",cursorAt:{top:56,left:56}});

       $('#draggable_cursor_leftup').draggable({cursor:"corsshair",cursorAt:{top:-5,left:-5}});

       $('#draggable_cursor_bottom').draggable({cursorAt:{bottom:0}});

 });

 </script>

 <!--自写脚本-->

 <style type="text/css">

   #draggable_cursor_center,#draggable_cursor_leftup,#draggable_cursor_bottom { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }

 </style>

 </head>

 <body>

 <div id="draggable_cursor_center" class="ui-widget-content">

 <p>光标位置一直在中心</p>

 </div>

 <div id="draggable_cursor_leftup" class="ui-widget-content">

 <p>光标在 left -5 和 top -5的左上角</p>

 </div>

 <div id="draggable_cursor_bottom" class="ui-widget-content">

 <p>光标位置限制在下方</p>

 </div>

 </body>

效果是光标样式和位置发生变化

5、延时启动：distance设置像素，delay设置延时毫秒数

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>jqeruy UI 拖拽练习--延时启动</title>

 <!--导入jquery插件-->

 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script>

 <!--导入jqueryUI插件-->

 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>

 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>

 <!--自写脚本-->

 <script type="text/javascript" language="javascript">

    //在页面加载完之后加载jquery

    $().ready(function(e) {

        //按下鼠标，滑动20像素，启动拖动

        $('#draggable').draggable({ distance:20});

        //按下鼠标，等待1000毫秒，启动拖动

       $('#draggable2').draggable({delay:1000});

 });

 </script>

 <!--自写脚本-->

 <style type="text/css">

   #draggable,#draggable1,#draggable2

   {

       width:120px;

       height:120px;

       float:left;

       margin:5px;

   }

 </style>

 </head>

 <body>

 <div id="draggable" class="ui-widget-content">

 <p>按下鼠标，滑动20像素，启动拖拽</p>

 </div>

 <div id="draggable2" class="ui-widget-content">

 <p>按下鼠标，等待1000毫秒，启动拖拽</p>

 </div>

 </body>

效果是延时启动拖拽

6、事件：start触发启动事件，drag触发拖拽事件，stop触发结束事件

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>jqeruy UI 拖拽练习-事件</title>

 <!--导入jquery插件-->

 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script>

 <!--导入jqueryUI插件-->

 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>

 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>

 <!--自写脚本-->

 <script type="text/javascript" language="javascript">

    //在页面加载完之后加载jquery

    $().ready(function(e) {

        //定义变量

        var $start_counter=$('#event-start'),

            $drag_counter=$('#event-drag'),

            $stop_counter=$('#event-stop'),

            counts=[0,0,0];

        $("#draggable").draggable({

            start:function(){

                  //启动开始，总数+1

                  counts[0]++;

                  //修改状态

                  updateCounterStatus($start_counter,counts[0]);

                } ,

            drag:function(){

                 //拖拽，总数+1

                 counts[1]++;

                  //修改状态

                 updateCounterStatus($drag_counter,counts[1]);

                },

            stop:function(){

                  //结束开始，总数+1

                  counts[2]++;

                   //修改状态

                  updateCounterStatus($stop_counter,counts[2]);

                }

         });

         //修改状态

         function updateCounterStatus($event_counter,new_count)

         {

             //判断是否存在该样式

             if(!$event_counter.hasClass("ui-state-hover"))

             {

                 $event_counter.addClass("ui-state-hover")

                    .siblings().removeClass("ui-state-hover");

             }

             //修改数据

             $("span.count",$event_counter).text(new_count);

         }

      });

 </script>

 <!--自写脚本-->

 <style type="text/css">

    #draggable { width: 16em; padding: 0 1em; }

    #draggable ul li { margin: 1em 0; padding: 0.5em 0; } * html #draggable ul li { height: 1%; }

    #draggable ul li span.ui-icon { float: left; }

    #draggable ul li span.count { font-weight: bold; }

 </style>

 </head>

 <body>

 <div id="draggable" class="ui-widget ui-widget-content">

 <p>拖拽我来触发事件链</p>

 <ul class="ui-helper-reset">

 <li id="event-start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span>"开始" 调用 <span class="count">0</span>x</li>

 <li id="event-drag" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-4"></span>"拖拽"  调用 <span class="count">0</span>x</li>

 <li id="event-stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop"></span>"结束"  调用 <span class="count">0</span>x</li>

 </ul>

 </div>

 </body>

效果是可以通过拖拽触发事件链

7、Handles(不清楚该怎么翻译)：handle设置可以拖拽的元素，cancel禁用不能拖拽的元素

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>jqeruy UI 拖拽练习--Handles</title>

 <!--导入jquery插件-->

 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script>

 <!--导入jqueryUI插件-->

 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>

 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>

 <!--自写脚本-->

 <script type="text/javascript" language="javascript">

    //在页面加载完之后加载jquery

    $().ready(function(e) {

        //通过P元素拖动

        $("#draggable").draggable({handle:"p"});

        // 禁用样式为ui-widget-header的P元素的拖拽

        $("#draggable2").draggable({cancel:"p.ui-widget-header"});

        //

        $("div,p").disableSelection();

      });

 </script>

 <!--自写脚本-->

 <style type="text/css">

    #draggable, #draggable2 { width: 100px; height: 200px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }

    #draggable p { cursor: move; }

 </style>

 </head>

 <body>

 <div id="draggable" class="ui-widget-content">

 <p class="ui-widget-header">

 我只能用这个手柄拖拽</p>

 </div>

 <div id="draggable2" class="ui-widget-content">

 <p>你能四处拖拽我&hellip;</p>

 <p class="ui-widget-header">&hellip;但是，用这个手柄你不能拖拽我.</p>

 </div>

 </body>

效果是我们想怎么控制拖拽就怎么控制

8、复位：revert设置是否可以复位，helper这个属性我不知道该怎么解释

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>jqeruy UI 拖拽练习--恢复到原来位置</title>

 <!--导入jquery插件-->

 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script>

 <!--导入jqueryUI插件-->

 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>

 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>

 <!--自写脚本-->

 <script type="text/javascript" language="javascript">

    //在页面加载完之后加载jquery

    $().ready(function(e) {

        //通过P元素拖动

        $("#draggable").draggable({revert:true});

        // 禁用样式为ui-widget-header的P元素的拖拽

        $("#draggable2").draggable({revert:true,helper:"clone"});

        //

      });

 </script>

 <!--自写脚本-->

 <style type="text/css">

    #draggable, #draggable2 { width: 150px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }

 </style>

 </head>

 <body>

 <div id="draggable" class="ui-widget-content">

 <p>恢复到原来位置</p>

 </div>

 <div id="draggable2" class="ui-widget-content">

 <p>Revert the helper</p>

 </div>

 </body>

效果是拖拽到他处的元素在放开控制的时候可以回到原来的位置

9、扑捉元素或网格：

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>jqeruy UI 拖拽练习--扑捉元素或网格</title>

 <!--导入jquery插件-->

 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script>

 <!--导入jqueryUI插件-->

 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>

 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>

 <!--自写脚本-->

 <script type="text/javascript" language="javascript">

    //在页面加载完之后加载jquery

    $().ready(function(e) {

        //扑捉所有可以拖拽的元素

        $("#draggable").draggable({snap:true});

        //扑捉样式为ui-widget-header元素

        $("#draggable2").draggable({snap:".ui-widget-header"});

        //扑捉样式为ui-widget-header元素的外边

        $("#draggable3").draggable({snap:".ui-widget-header",snapModel:"outer"});

        //扑捉宽或者高为20的网格

        $("#draggable4").draggable({grid:[20,20]});

        //扑捉宽或者高为80的网格

        $("#draggable5").draggable({grid:[80,80]});

      });

 </script>

 <!--自写脚本-->

 <style type="text/css">

    .draggable { width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; }

    .ui-widget-header p, .ui-widget-content p { margin: 0; }

    #snaptarget { height: 140px; }

 </style>

 </head>

 <body>

 <div id="snaptarget" class="ui-widget-header">

 <p>我是一个扑捉（快照）标签</p>

 </div>

 <br style="clear:both">

 <div id="draggable" class="draggable ui-widget-content">

 <p>默认 (snap: true),捕捉所有其他可拖动的元素.</p>

 </div>

 <div id="draggable2" class="draggable ui-widget-content">

 <p>我只扑捉 the big box.</p>

 </div>

 <div id="draggable3" class="draggable ui-widget-content">

 <p>我只捕捉 the big box 的外边.</p>

 </div>

 <div id="draggable4" class="draggable ui-widget-content">

 <p>我捕捉一个20×20 的网格.</p>

 </div>

 <div id="draggable5" class="draggable ui-widget-content">

 <p>我捕捉一个 80 x 80 的网格.</p>

 </div>

 </body>

效果就是拖拽的元素在靠近符合条的元素的时候会自动磁性靠近

10、视觉反馈：

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>jqeruy UI 拖拽练习--视觉反馈</title>

 <!--导入jquery插件-->

 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script>

 <!--导入jqueryUI插件-->

 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>

 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>

 <!--自写脚本-->

 <script type="text/javascript" language="javascript">

    //在页面加载完之后加载jquery

    $().ready(function(e) {

        //拖拽原控件

        $("#draggable").draggable({helper:"original"});

        //拖拽复制体

        $("#draggable2").draggable({opacity:0.7,helper:"clone"});

        //

        $("#draggable3").draggable({

               cursor:"move",

               cursorAt:{top:-12,left:-20},

               helper:function(event){

                     return $("<div class='ui-widget-header'>我是一个自定义helper</div>");

                   }

            });

         //

         $("#set div").draggable({stack:"#set div"});

      });

 </script>

 <!--自写脚本-->

 <style type="text/css">

    #draggable, #draggable2, #draggable3, #set div { width: 150px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }

 #draggable, #draggable2, #draggable3 { margin-bottom:20px; }

 #set { clear:both; float:left; width: 368px; height: 120px; }

 p { clear:both; margin:0; padding:1em 0; }

 </style>

 </head>

 <body>

 <h3 class="docs">With helpers:</h3>

 <div id="draggable" class="ui-widget-content">

 <p>Original</p>

 </div>

 <div id="draggable2" class="ui-widget-content">

 <p>半透明克隆</p>

 </div>

 <div id="draggable3" class="ui-widget-content">

 <p>自定义 helper (与 cursorAt 组合)</p>

 </div>

 <h3 class="docs">Stacked:</h3>

 <div id="set">

 <div class="ui-widget-content">

 <p>We are draggables..</p>

 </div>

 <div class="ui-widget-content">

 <p>..whose z-indexes are controlled automatically..</p>

 </div>

 <div class="ui-widget-content">

 <p>..with the stack option.</p>

 </div>

 </div>

 </body>

效果是给人一种视觉上的信息反馈

11、拖拽排序：

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>jqeruy UI 拖拽练习--拖拽排序</title>

 <!--导入jquery插件-->

 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script>

 <!--导入jqueryUI插件-->

 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>

 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>

 <!--自写脚本-->

 <script type="text/javascript" language="javascript">

    //在页面加载完之后加载jquery

    $().ready(function(e) {

        //

        $("#sortable").sortable({ revert:true});

       //拖拽函数

       $('#draggable').draggable({

             connectToSortable:"#sortable",

             helper:"clone",

             revert:"invalid"

           });

        $("ul,li").disableSelection();

 });

 </script>

 <!--自写脚本-->

 <style type="text/css">

   ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }

   li { margin: 5px; padding: 5px; width: 150px; }

 </style>

 </head>

 <body>

 <ul>

 <li id="draggable" class="ui-state-highlight">拖拽我下来</li>

 </ul>

 <ul id="sortable">

 <li class="ui-state-default">Item 1</li>

 <li class="ui-state-default">Item 2</li>

 <li class="ui-state-default">Item 3</li>

 <li class="ui-state-default">Item 4</li>

 <li class="ui-state-default">Item 5</li>

 </ul>

 </body>

效果是可以拖拽这元素进行排序

结束语

因为我不知道怎么把自己做的效果直接在博文中显示出来也就是效果和jQueryUI官方一样，所以只有把 代码贴出来了，代码中带有我自己写的一些体会，如果问题请指正，谢谢！！^_^

jquery UI 跟随学习笔记——拖拽（Draggable）的更多相关文章

  1. Angular 学习笔记——拖拽

    <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...

  2. JQUERY 拖拽 draggable droppable resizable selectable sortable

    今天用了jq ui的拖动碰撞功能,好不容易看到有详细的API解说,记录如下:   <script language="JavaScript" type="text/ ...

  3. UI设计学习笔记（7-12）

    UI学习笔记(7)--扁平化图标 认识扁平化 Flat Design 抛弃传统的渐变.阴影.高光等拟真视觉效果,打造看上去更平的界面.(颜色.形状) 扁平化图标有什么优缺点 优点: 简约不简单.有新鲜 ...

  4. jquery源码学习笔记三：jQuery工厂剖析

    jquery源码学习笔记二:jQuery工厂 jquery源码学习笔记一:总体结构 上两篇说过,query的核心是一个jQuery工厂.其代码如下 function( window, noGlobal ...

  5. 网站开发常用jQuery插件总结(三）拖拽插件gridster

    1.gridster插件功能 实现类似于win8 磁贴拖拽的功能 2.gridster官方地址 http://gridster.net/ 在官方的网站上也有插件的帮助和实例,但是按照官方的说明,我在本 ...

  6. 锋利的jquery第二版学习笔记

    jquery系统学习笔记 一.初识:jquery的优势:1.轻量级(压缩后不到30KB)2.强大的选择器(支持css1.css2选择器的全部 css3的大部分 以及一些独创的 加入插件的话还可支持XP ...

  7. 【C#/WPF】UI控件的拖拽/拉伸

    需求①:控件拖拽——按住鼠标,可自由拖拽控件. 方法:目前看到的办法有两种. 使用ZoomableCanvas:http://www.cnblogs.com/gnielee/archive/2011/ ...

  8. js学习笔记29----拖拽

    原理:先计算鼠标与拖拽目标的左侧距离 跟 上面距离,再计算拖动后的位置. 示例代码: <!DOCTYPE html> <html lang="en"> &l ...

  9. ios UI自动化测试学习笔记

    一.一些注意事项: 1.做自动化测试时注意如果是真机话首先要设置不锁屏. 2.自动化测试过程中如果程序后台或崩溃了.脚本运行将会暂停,直到程序再次回到前台. 3.必须明确指定关闭自动测试,测试完成或中 ...

随机推荐

  1. flask笔记(一)

    1.第一个flask项目 # 首先你要安装flask这个模块 pip install flask # 安装好了之后,直接新建一个py文件,开始写最简单的flask项目了 from flask impo ...

  2. js数组去重方法整理

    1.思路:定义一个新数组,并存放原数组的第一个元素,然后将原数组的项和新数组的元素一一对比,若不同则存放在新数组中. function unique(arr){ var res = [arr[0]]; ...

  3. 重置mysql5.7.25临时密码

    安装完mysql之后,登陆以后,不管运行任何命令,总是提示这个:mac mysql error You must reset your password using ALTER USER statem ...

  4. js替换字符串中的空格，换行符\r\n或\n替换成<br>

    为了让回车换行符正确显示,需要将 \n 或 \r\n 替换成 <br>.同样地,将空格替换存  .这里我们通过正则表达式来替换. 一.替换所有的空格.回车换行符 //原始字符串 var s ...

  5. dcm4che 的依赖无法下载

    遇到问题时我在Gradle这样引入 maven { url "http://www.dcm4che.org/maven2"} 这样使用可以解决问题 maven { url &quo ...

  6. [JSOI2008]最大数（线段树基础）

    题目描述 现在请求你维护一个数列,要求提供以下两种操作: 1. 查询操作. 语法:Q L 功能:查询当前数列中末尾L个数中的最大的数,并输出这个数的值. 限制: L 不超过当前数列的长度.(L > ...

  7. 微信订阅号 获取用户基本信息，登录及 php

    <?php //echo file_get_contents("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_cr ...

  8. DevOps - 项目私库 - Nexus Repository

    相关链接 Sonatype官网:https://www.sonatype.com Products: Nexus Repository OSS2.x & 3.x Documentation:  ...

  9. JavaScript实现图片切换

    页面内容:一个按钮标签  一个Img标签 实现原理:通过修改Img标签的src属性,实现图片的切换 备注:代码中flag变量仅仅用作标记,也可以直接用Img标签的src属性进行判断,不过在判断时候不能 ...

  10. loushang框架的开发中关于BSP的使用，将写好的功能模块部署到主页界面结构上

    前言: 当我们已经开发好相应的模块或者功能的时候,需要将这个功能部署在index主页上作为可点击直接使用的模块,而不是每次需要去浏览对应的url地址. 这时候就需要运用到L5的BSP. 作为刚刚入门l ...