jquery UI 跟隨學習筆記——拖拽（Draggable）

原創 水墨荷塘 2018-09-01 12:09

jquery UI 跟隨學習筆記——拖拽（Draggable）

引言

     這周暫時沒有任務下達，所以老大給我的任務就是熟悉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是設置滾動條跟隨速度的效果

複製代碼
 1 <head>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3 <title>jqeruy UI 拖拽練習--滾動條自動滾動</title>
 4 <!--導入jquery插件-->
 5 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script>
 6 <!--導入jqueryUI插件-->
 7 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>
 8 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>
 9 
10 <!--自寫腳本-->
11 <script type="text/javascript" language="javascript">
12    //在頁面加載完之後加載jquery
13    $().ready(function(e) {
14       //拖拽函數,這樣配置只是控制了垂直滾動條（這個可以通過設置scroll爲false測試知道)
15       $('#draggable').draggable({ scroll:true});
16       $('#draggable1').draggable({scroll:true,scrollSensitivity:100});
17       $('#draggable2').draggable({scroll:true,scrollSpeed:100});
18 });
19 </script>
20 <!--自寫腳本-->
21 <style type="text/css">
22   #draggable,#draggable1,#draggable2
23   {
24       width:200px;
25       height:200px;
26       float:left;
27       margin:5px;
28   }
29 </style>
30 </head>
31 
32 <body>
33 <div id="draggable" class="ui-widget-content">
34  <p>Scroll屬性設置爲true,其他默認</p>
35 </div>
36 <div id="draggable1" class="ui-widget-content">
37  <p>Scroll屬性設置爲true,scrollSensitivity屬性設置爲100,其他默認</p>
38 </div>
39 <div id="draggable2" class="ui-widget-content">
40  <p>Scroll屬性設置爲true,scrollSpeed屬性設置爲100,其他默認</p>
41 </div>
42 <div style="height: 5000px; width: 1px;"></div>
43 </body>
複製代碼

    3、移動限制：axis是控制移動方向的屬性；containment是控制元素移動範圍的屬性

複製代碼
 1 <head>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3 <title>jqeruy UI 拖拽練習--移動限制</title>
 4 <!--導入jquery插件-->
 5 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script>
 6 <!--導入jqueryUI插件-->
 7 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>
 8 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>
 9 
10 <!--自寫腳本-->
11 <script type="text/javascript" language="javascript">
12    //在頁面加載完之後加載jquery
13    $().ready(function(e) {
14       //拖拽函數
15       $('#draggable').draggable({ axis:"y"});
16       $('#draggable2').draggable({axis:"x"});
17       
18       $('#draggable3').draggable({containment:"#containment-wrapper",scroll:false});
19       $('#draggable5').draggable({containment:"parent"});
20 });
21 </script>
22 <!--自寫腳本-->
23 <style type="text/css">
24   .draggable { width: 190px; height: 190px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
25   #draggable, #draggable2 { margin-bottom:20px; }
26   #draggable { cursor: n-resize; }
27   #draggable2 { cursor: e-resize; }
28   #containment-wrapper { width: 95%; height:350px; border:2px solid #ccc; padding: 10px; }
29   h3 { clear: left; }
30 </style>
31 </head>
32 
33 <body>
34 <h3>限制運動方向:</h3>
35 <div id="draggable" class="draggable ui-widget-content">
36 <p>我只能在<b>垂直方向</b>拖拽</p>
37 </div>
38 <div id="draggable2" class="draggable ui-widget-content">
39 <p>我只能在<b>水平方向</b>拖拽</p>
40 </div>
41 <h3>或只能在一個元素中拖拽:</h3>
42 <div id="containment-wrapper">
43 <div id="draggable3" class="draggable ui-widget-content">
44 <p>我被限制在這個框中拖拽</p>
45 </div>
46 <div class="draggable ui-widget-content">
47 <p id="draggable5" class="ui-widget-header">我被限制在父級框中拖拽</p>
48 </div>
49 </div>
50 
51 </body>
複製代碼

    4、光標樣式：cursor設置光標樣式；cursorAt設置鼠標位置

複製代碼
 1 <head>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3 <title>jqeruy UI 拖拽練習--光標樣式</title>
 4 <!--導入jquery插件-->
 5 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script>
 6 <!--導入jqueryUI插件-->
 7 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>
 8 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>
 9 
10 <!--自寫腳本-->
11 <script type="text/javascript" language="javascript">
12    //在頁面加載完之後加載jquery
13    $().ready(function(e) {
14       //拖拽函數
15       $('#draggable_cursor_center').draggable({ cursor:"move",cursorAt:{top:56,left:56}});
16       $('#draggable_cursor_leftup').draggable({cursor:"corsshair",cursorAt:{top:-5,left:-5}});
17       
18       $('#draggable_cursor_bottom').draggable({cursorAt:{bottom:0}});
19 });
20 </script>
21 <!--自寫腳本-->
22 <style type="text/css">
23   #draggable_cursor_center,#draggable_cursor_leftup,#draggable_cursor_bottom { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
24 </style>
25 </head>
26 
27 <body>
28 <div id="draggable_cursor_center" class="ui-widget-content">
29 <p>光標位置一直在中心</p>
30 </div>
31 <div id="draggable_cursor_leftup" class="ui-widget-content">
32 <p>光標在 left -5 和 top -5的左上角</p>
33 </div>
34 <div id="draggable_cursor_bottom" class="ui-widget-content">
35 <p>光標位置限制在下方</p>
36 </div>
37 </body>
複製代碼

    5、延時啓動：distance設置像素，delay設置延時毫秒數

複製代碼
 1 <head>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3 <title>jqeruy UI 拖拽練習--延時啓動</title>
 4 <!--導入jquery插件-->
 5 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script>
 6 <!--導入jqueryUI插件-->
 7 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>
 8 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>
 9 
10 <!--自寫腳本-->
11 <script type="text/javascript" language="javascript">
12    //在頁面加載完之後加載jquery
13    $().ready(function(e) {
14        //按下鼠標，滑動20像素，啓動拖動
15        $('#draggable').draggable({ distance:20});
16        //按下鼠標，等待1000毫秒，啓動拖動
17       $('#draggable2').draggable({delay:1000});
18 });
19 </script>
20 <!--自寫腳本-->
21 <style type="text/css">
22   #draggable,#draggable1,#draggable2
23   {
24       width:120px;
25       height:120px;
26       float:left;
27       margin:5px;
28   }
29 </style>
30 </head>
31 
32 <body>
33 <div id="draggable" class="ui-widget-content">
34 <p>按下鼠標，滑動20像素，啓動拖拽</p>
35 </div>
36 <div id="draggable2" class="ui-widget-content">
37 <p>按下鼠標，等待1000毫秒，啓動拖拽</p>
38 </div>
39 
40 </body>
複製代碼

    6、事件：start觸發啓動事件，drag觸發拖拽事件，stop觸發結束事件

複製代碼
 1 <head>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3 <title>jqeruy UI 拖拽練習-事件</title>
 4 <!--導入jquery插件-->
 5 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script>
 6 <!--導入jqueryUI插件-->
 7 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>
 8 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>
 9 
10 <!--自寫腳本-->
11 <script type="text/javascript" language="javascript">
12    //在頁面加載完之後加載jquery
13    $().ready(function(e) {
14        //定義變量
15        var $start_counter=$('#event-start'),
16            $drag_counter=$('#event-drag'),
17            $stop_counter=$('#event-stop'),
18            counts=[0,0,0];
19            
20        $("#draggable").draggable({
21            start:function(){
22                  //啓動開始，總數+1
23                  counts[0]++;
24                  //修改狀態
25                  updateCounterStatus($start_counter,counts[0]);
26                } ,
27            drag:function(){
28                 //拖拽，總數+1
29                 counts[1]++;
30                  //修改狀態
31                 updateCounterStatus($drag_counter,counts[1]);
32                },
33            stop:function(){
34                  //結束開始，總數+1
35                  counts[2]++;
36                   //修改狀態
37                  updateCounterStatus($stop_counter,counts[2]);
38                }
39         });
40         
41         //修改狀態
42         function updateCounterStatus($event_counter,new_count)
43         {
44             //判斷是否存在該樣式
45             if(!$event_counter.hasClass("ui-state-hover"))
46             {
47                 $event_counter.addClass("ui-state-hover")
48                    .siblings().removeClass("ui-state-hover");
49             }
50             //修改數據
51             $("span.count",$event_counter).text(new_count);
52         }
53      });
54 </script>
55 <!--自寫腳本-->
56 <style type="text/css">
57    #draggable { width: 16em; padding: 0 1em; }
58    #draggable ul li { margin: 1em 0; padding: 0.5em 0; } * html #draggable ul li { height: 1%; }
59    #draggable ul li span.ui-icon { float: left; }
60    #draggable ul li span.count { font-weight: bold; }
61 </style>
62 </head>
63 
64 <body>
65 <div id="draggable" class="ui-widget ui-widget-content">
66 <p>拖拽我來觸發事件鏈</p>
67 <ul class="ui-helper-reset">
68 <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>
69 <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>
70 <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>
71 </ul>
72 </div>
73 </body>
複製代碼

    7、Handles(不清楚該怎麼翻譯)：handle設置可以拖拽的元素，cancel禁用不能拖拽的元素

複製代碼
 1 <head>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3 <title>jqeruy UI 拖拽練習--Handles</title>
 4 <!--導入jquery插件-->
 5 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script>
 6 <!--導入jqueryUI插件-->
 7 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>
 8 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>
 9 
10 <!--自寫腳本-->
11 <script type="text/javascript" language="javascript">
12    //在頁面加載完之後加載jquery
13    $().ready(function(e) {
14        //通過P元素拖動
15        $("#draggable").draggable({handle:"p"});
16        // 禁用樣式爲ui-widget-header的P元素的拖拽
17        $("#draggable2").draggable({cancel:"p.ui-widget-header"});
18        //
19        $("div,p").disableSelection();
20      });
21 </script>
22 <!--自寫腳本-->
23 <style type="text/css">
24    #draggable, #draggable2 { width: 100px; height: 200px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
25    #draggable p { cursor: move; }
26 </style>
27 </head>
28 
29 <body>
30 <div id="draggable" class="ui-widget-content">
31 <p class="ui-widget-header">
32 我只能用這個手柄拖拽</p>
33 </div>
34 <div id="draggable2" class="ui-widget-content">
35 <p>你能四處拖拽我&hellip;</p>
36 <p class="ui-widget-header">&hellip;但是，用這個手柄你不能拖拽我.</p>
37 </div>
38 </body>
複製代碼

    8、復位：revert設置是否可以復位，helper這個屬性我不知道該怎麼解釋

複製代碼
 1 <head>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3 <title>jqeruy UI 拖拽練習--恢復到原來位置</title>
 4 <!--導入jquery插件-->
 5 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script>
 6 <!--導入jqueryUI插件-->
 7 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>
 8 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>
 9 
10 <!--自寫腳本-->
11 <script type="text/javascript" language="javascript">
12    //在頁面加載完之後加載jquery
13    $().ready(function(e) {
14        //通過P元素拖動
15        $("#draggable").draggable({revert:true});
16        // 禁用樣式爲ui-widget-header的P元素的拖拽
17        $("#draggable2").draggable({revert:true,helper:"clone"});
18        //
19        
20      });
21 </script>
22 <!--自寫腳本-->
23 <style type="text/css">
24    #draggable, #draggable2 { width: 150px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
25 </style>
26 </head>
27 
28 <body>
29 <div id="draggable" class="ui-widget-content">
30 <p>恢復到原來位置</p>
31 </div>
32 <div id="draggable2" class="ui-widget-content">
33 <p>Revert the helper</p>
34 </div>
35 </body>
複製代碼

    9、撲捉元素或網格：

複製代碼
 1 <head>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3 <title>jqeruy UI 拖拽練習--撲捉元素或網格</title>
 4 <!--導入jquery插件-->
 5 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script>
 6 <!--導入jqueryUI插件-->
 7 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>
 8 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>
 9 
10 <!--自寫腳本-->
11 <script type="text/javascript" language="javascript">
12    //在頁面加載完之後加載jquery
13    $().ready(function(e) {
14        //撲捉所有可以拖拽的元素
15        $("#draggable").draggable({snap:true});
16        //撲捉樣式爲ui-widget-header元素
17        $("#draggable2").draggable({snap:".ui-widget-header"});
18        //撲捉樣式爲ui-widget-header元素的外邊
19        $("#draggable3").draggable({snap:".ui-widget-header",snapModel:"outer"});
20        //撲捉寬或者高爲20的網格
21        $("#draggable4").draggable({grid:[20,20]});
22        //撲捉寬或者高爲80的網格
23        $("#draggable5").draggable({grid:[80,80]});
24      });
25 </script>
26 <!--自寫腳本-->
27 <style type="text/css">
28    .draggable { width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; }
29    .ui-widget-header p, .ui-widget-content p { margin: 0; }
30    #snaptarget { height: 140px; }
31 </style>
32 </head>
33 
34 <body>
35 
36 <div id="snaptarget" class="ui-widget-header">
37 <p>我是一個撲捉（快照）標籤</p>
38 </div>
39 <br style="clear:both">
40 <div id="draggable" class="draggable ui-widget-content">
41 <p>默認 (snap: true),捕捉所有其他可拖動的元素.</p>
42 </div>
43 <div id="draggable2" class="draggable ui-widget-content">
44 <p>我只撲捉 the big box.</p>
45 </div>
46 <div id="draggable3" class="draggable ui-widget-content">
47 <p>我只捕捉 the big box 的外邊.</p>
48 </div>
49 <div id="draggable4" class="draggable ui-widget-content">
50 <p>我捕捉一個20×20 的網格.</p>
51 </div>
52 <div id="draggable5" class="draggable ui-widget-content">
53 <p>我捕捉一個 80 x 80 的網格.</p>
54 </div>
55 </body>
複製代碼

    10、視覺反饋：

複製代碼
 1 <head>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3 <title>jqeruy UI 拖拽練習--視覺反饋</title>
 4 <!--導入jquery插件-->
 5 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script>
 6 <!--導入jqueryUI插件-->
 7 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>
 8 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>
 9 
10 <!--自寫腳本-->
11 <script type="text/javascript" language="javascript">
12    //在頁面加載完之後加載jquery
13    $().ready(function(e) {
14        //拖拽原控件
15        $("#draggable").draggable({helper:"original"});
16        //拖拽複製體
17        $("#draggable2").draggable({opacity:0.7,helper:"clone"});
18        //
19        $("#draggable3").draggable({
20               cursor:"move",
21               cursorAt:{top:-12,left:-20},
22               helper:function(event){
23                     return $("<div class='ui-widget-header'>我是一個自定義helper</div>");
24                   }
25            });
26         //
27         $("#set div").draggable({stack:"#set div"});
28      });
29 </script>
30 <!--自寫腳本-->
31 <style type="text/css">
32    #draggable, #draggable2, #draggable3, #set div { width: 150px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
33 #draggable, #draggable2, #draggable3 { margin-bottom:20px; }
34 #set { clear:both; float:left; width: 368px; height: 120px; }
35 p { clear:both; margin:0; padding:1em 0; }
36 </style>
37 </head>
38 
39 <body>
40 
41 <h3 class="docs">With helpers:</h3>
42 <div id="draggable" class="ui-widget-content">
43 <p>Original</p>
44 </div>
45 <div id="draggable2" class="ui-widget-content">
46 <p>半透明克隆</p>
47 </div>
48 <div id="draggable3" class="ui-widget-content">
49 <p>自定義 helper (與 cursorAt 組合)</p>
50 </div>
51 <h3 class="docs">Stacked:</h3>
52 <div id="set">
53 <div class="ui-widget-content">
54 <p>We are draggables..</p>
55 </div>
56 <div class="ui-widget-content">
57 <p>..whose z-indexes are controlled automatically..</p>
58 </div>
59 <div class="ui-widget-content">
60 <p>..with the stack option.</p>
61 </div>
62 </div>
63 
64 </body>
複製代碼

    11、拖拽排序：

複製代碼
 1 <head>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3 <title>jqeruy UI 拖拽練習--拖拽排序</title>
 4 <!--導入jquery插件-->
 5 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script>
 6 <!--導入jqueryUI插件-->
 7 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>
 8 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>
 9 
10 <!--自寫腳本-->
11 <script type="text/javascript" language="javascript">
12    //在頁面加載完之後加載jquery
13    $().ready(function(e) {
14        //
15        $("#sortable").sortable({ revert:true});
16       //拖拽函數
17       $('#draggable').draggable({
18             connectToSortable:"#sortable",
19             helper:"clone",
20             revert:"invalid"
21           });
22        $("ul,li").disableSelection();
23 });
24 </script>
25 <!--自寫腳本-->
26 <style type="text/css">
27   ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
28   li { margin: 5px; padding: 5px; width: 150px; }
29 </style>
30 </head>
31 
32 <body>
33 
34 <ul>
35 <li id="draggable" class="ui-state-highlight">拖拽我下來</li>
36 </ul>
37 <ul id="sortable">
38 <li class="ui-state-default">Item 1</li>
39 <li class="ui-state-default">Item 2</li>
40 <li class="ui-state-default">Item 3</li>
41 <li class="ui-state-default">Item 4</li>
42 <li class="ui-state-default">Item 5</li>
43 </ul>
44 
45 </body>
複製代碼

 

 

結束語 

    因爲我不知道怎麼把自己做的效果直接在博文中顯示出來也就是效果和jQueryUI官方一樣，所以只有把 代碼貼出來了，代碼中帶有我自己寫的一些體會，如果問題請指正，謝謝！！^_^

漫漫人生，唯有激流勇進，不畏艱險，奮力拼搏，方能中流擊水，抵達光明的彼岸

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

JavaScript 本地存儲

本地存儲簡介 在HTML5中，新加入了一個localStorage特性，這個特性主要是用來作爲本地存儲來使用的 web 應用程序能夠在用戶瀏覽器中對數據進行本地的存儲 解決了cookie存儲空間不足的問題（cookie的存儲

OliGit 2020-07-08 12:27:32

JQuery 之Ajax 示例

 jQuery之ajax post篇------Code <script type="text/javascript">function adddata()    {     var typeName=$("#<%=this.typeNa

zrz009 2020-07-08 11:14:16

w3school學習3-jQuery 事件

jQuery 事件函數 jQuery 事件處理方法是 jQuery 中的核心函數。 事件處理程序指的是: 當 HTML 中發生某些事件時所調用的方法。 術語由事件“觸發”（或“激發”）經常會被使用。 通常會把 jQuery 代碼放到

amtea 2020-07-08 04:08:56

jquery.cookie() jQuery Cookie的基本使用及保存路徑以及設置全局cookie

一個輕量級的cookie 插件，可以讀取、寫入、刪除 cookie。  jquery.cookie.js 的配置 首先包含jQuery的庫文件，在後麪包含 jquery.cookie.js 的庫文件。  <script type="

可以好吧 2020-07-08 11:22:12

Jquery 示例二 簡單動畫

   主要用到 $("#id").show();//顯示 $("#id").hide();//隱藏 $("#id").toggle();//狀態相反

ethan永不言弃 2020-07-08 09:21:00

微信alert去除默認的提示

原文鏈接：https://blog.csdn.net/qq_32307891/article/details/98953960 微信下alert會多顯示個標題欄，會顯示當前網址。用jQuery下的彈出框，在顯示軟鍵盤情況下點不到“確認”按

felix 2020-07-08 09:14:02

jQuery中以0/1編號

在jQuery中，基本都是以0開始編號的。如：eq()、odd、even這些。 有個例外，就是nth-child()，他是以1開始編號的。 另外，JS的數組也是從0開始編號，但是CSS是從1開始編號的。

hcy48 2020-07-08 06:58:12

【Python成長之路】基於Flask框架開發web -- 實現”新增 “功能，並實現簡單的表格管理平臺（5）

【功能】 在表格新增一行，並且能將新增的數據提交到後臺。   【實現原理】 1、如何添加“新增”按鈕 <td><input type="button" value="新增" id="create"></td><br> 2、點擊新增按鈕後

鹏哥贼优秀 2020-07-08 06:35:52

springboot+idea+bootstrap的帶有圖片的表格編輯操作

前面已經寫了 批量導入，圖片顯示，現在寫的是批量修改，後面會寫用echarts+springboot 做折線圖，有時間貼上 1、jsp代碼如下，編輯按鈕 formatter: function (value, row, inde

你的孤独，虽败犹荣 2020-07-08 05:52:00

Jquery調用WebMethod(PageMethod) NET2.0

必須在WebConfig下的system.web節點加入此配置信息    <httpModules>      <add name="ScriptModule" type="System.Web.Handlers.ScriptModule

jarryzhong 2020-07-08 05:30:21

CSS＋JS實現瀏覽器不保存用戶名密碼

因爲信息安全問題，客戶要求在輸入密碼的時候，不讓瀏覽器彈出是否保存用戶名密碼的框框..... 調查發現只要將input的type指定爲password就會提示，所以想了這麼個辦法... 只試過IE11和Chrome，其他瀏覽器不知道好不好

橘猫猫猫猫丶 2020-07-08 04:09:33

w3school學習6-jQuery HTML 操作

jQuery 包含很多供改變和操作 HTML 的強大函數。 改變 HTML 內容 語法 $(selector).html(content) html() 函數改變所匹配的 HTML 元素的內容（innerHTML）。 實例

amtea 2020-07-08 04:08:56

w3school學習1-jQuery 語法

jQuery 是一個 JavaScript 函數庫。 jQuery 庫包含以下特性： HTML 元素選取HTML 元素操作CSS 操作HTML 事件函數JavaScript 特效和動畫HTML DOM 遍歷和修改AJAXUtiliti

amtea 2020-07-08 04:08:56

magento 立即購買跳轉到結賬頁面

先找到該目錄下的app\design\frontend\default\blank\template\catalog\product\view\ addtocart.phtml 文件 然後對這個文件做修改： <button id="che

漫步v沉思 2020-07-08 03:13:58

標籤點擊事件後的操作

其實，也不知道怎麼去給文章命名，就簡單的記錄下我遇到的問題吧，不多說，上代碼。 <a id="tab1" href="https://www.baidu.com">測試連接</a> <br/>

just_coming_here 2020-07-08 02:54:27