jquery插件课程1 幻灯片、城市选择、日期时间选择、拖放、方向拖动插件
一、总结
一句话总结：都是jquery插件，都还比较小，参数（配置参数、数据）一般都是通过json传递。
1、插件配置数据或者参数的时候用的是什么数据结构？
json数据结构
23 $('.bxslider').bxSlider({
24 'speed':500,
25 'auto':true,
26 'pause':2000,
27 'autoHover':true,
28 'mode':'fade'
29 });
20 $('#citys').cxSelect({ 21 url: 'js/cityData.json', 22 selects: ['province', 'city', 'area'], 23 // nodata: 'none' 24 });
2、有些插件使用需要传递数据，那这些数据如何配置？
用json，在方法里面传json数据
20 $('#citys').cxSelect({ 21 url: 'js/cityData.json', 22 selects: ['province', 'city', 'area'], 23 // nodata: 'none' 24 });
3、本文中的幻灯片、城市选择、日期时间选择、拖放、方向拖动插件有什么共同特点？
都是jquery插件，都是基于jquery的，而且都很小
6 <script src="js/jquery.min.js"></script> 7 <script src="js/jquery.cxselect.min.js"></script>
4、如何记录当前选择（或者说拖动）的元素？
借助另外一个标签，点击的时候就讲这个我们拖动的类名记录在这个标签中，用的时候就直接取就好了
86 <span class='hide'></span> 87 </body> 88 <script> 89 $('.div1,.div2,.div3').mouseenter(function(){ 90 $('.hide').html($(this).attr('class')); 91 });
5、拖放插件叫什么名字？
(dragDrop)
6、鼠标按方向拖动插件叫什么名字？
(draging)
7、日期插件叫什么名字？
(datetimepicker)
8、城市级联插件叫什么名字？
(cxselect)
9、幻灯片插件叫什么名字？
(bxslider)
二、幻灯片、城市选择、日期时间选择、拖放、方向拖动插件
1、相关知识
1.拖放插件(dragDrop)
2.鼠标按方向拖动(draging)
5.日期插件(datetimepicker)
9.城市级联插件(cxselect)
10.幻灯片插件(bxslider)
2、代码
1、幻灯片插件(bxslider)
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <link rel="stylesheet" href="jquery.bxslider.css"> 7 <script src='jquery.min.js'></script> 8 <script src='jquery.bxslider.min.js'></script> 9 <style> 10 img{ 11 width:100%; 12 } 13 </style> 14 </head> 15 <body> 16 <div class="bxslider"> 17 <li><img src="images/pic1.jpg" alt=""></li> 18 <li><img src="images/pic2.jpg" alt=""></li> 19 <li><img src="images/pic3.jpg" alt=""></li> 20 </div> 21 </body> 22 <script> 23 $('.bxslider').bxSlider({ 24 'speed':500, 25 'auto':true, 26 'pause':2000, 27 'autoHover':true, 28 'mode':'fade' 29 }); 30 </script> 31 </html>
2、城市级联插件(cxselect)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>cxSelect 多级联动下拉菜单</title> 6 <script src="js/jquery.min.js"></script> 7 <script src="js/jquery.cxselect.min.js"></script> 8 </head> 9 <body> 10 <div class="wrap"> 11 <h1>jQuery cxSelect 多级联动下拉菜单</h1> 12 13 <div id="citys"> 14 <p>省份：<select class="province" data-value='山西省'></select></p> 15 <p>城市：<select class="city" data-value='太原市'></select></p> 16 <p>地区：<select class="area" data-value='万柏林区'></select></p> 17 </div> 18 </div> 19 <script> 20 $('#citys').cxSelect({ 21 url: 'js/cityData.json', 22 selects: ['province', 'city', 'area'], 23 // nodata: 'none' 24 }); 25 26 </script> 27 </body> 28 </html>
3、日期插件(datetimepicker)
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <style> 7 *{ 8 font-family: 微软雅黑; 9 } 10 </style> 11 <link rel="stylesheet" href="jquery.datetimepicker.css"> 12 <script src="jquery.min.js"></script> 13 <script src="jquery.datetimepicker.full.js"></script> 14 </head> 15 <body> 16 <h1>datetimepicker日期插件:</h1> 17 <p>开始时间: <input type="text" id='start'> 结束时间:<input type='text' id='end'></p> 18 </body> 19 <script> 20 $('#start').datetimepicker({ 21 'format':'Y-m-d', 22 'timepicker':false 23 }); 24 $('#end').datetimepicker({ 25 'format':'H:i:s', 26 'datepicker':false 27 }); 28 </script> 29 </html>
4、拖放插件(dragDrop)
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <style> 7 *{ 8 font-family: 微软雅黑; 9 } 10 11 div{ 12 cursor: pointer; 13 } 14 15 .div1{ 16 position: absolute; 17 top:0px; 18 left:0px; 19 z-index:1; 20 } 21 .div2{ 22 position: absolute; 23 top:200px; 24 left:0px; 25 z-index:1; 26 } 27 .div3{ 28 position: absolute; 29 top:400px; 30 left:0px; 31 z-index:1; 32 } 33 34 .div4{ 35 position: absolute; 36 top:100px; 37 right:100px; 38 width:100px; 39 height:304px; 40 border:1px dashed #00f; 41 } 42 43 .div5{ 44 height:100px; 45 border-bottom:1px dashed #00f; 46 } 47 .div6{ 48 height:100px; 49 border-bottom:1px dashed #00f; 50 } 51 .div7{ 52 height:100px; 53 } 54 55 .hide{ 56 display: none; 57 } 58 </style> 59 <script src="jquery.js"></script> 60 <script src="jquery.drag.js"></script> 61 <script src="jquery.drop.js"></script> 62 </head> 63 <body> 64 <div class='div1'> 65 <img src="logo1.jpg" width='100px'> 66 </div> 67 <div class='div2'> 68 <img src="logo2.jpg" width='100px'> 69 </div> 70 <div class='div3'> 71 <img src="logo3.jpg" width='100px'> 72 </div> 73 74 <div class="div4"> 75 <div class="div5"> 76 77 </div> 78 <div class="div6"> 79 80 </div> 81 <div class="div7"> 82 83 </div> 84 </div> 85 86 <span class='hide'></span> 87 </body> 88 <script> 89 $('.div1,.div2,.div3').mouseenter(function(){ 90 $('.hide').html($(this).attr('class')); 91 }); 92 $('.div1').drag(); 93 $('.div2').drag(); 94 $('.div3').drag(); 95 96 $('.div5').drop(function(){ 97 cls=$('.hide').html(); 98 $('.'+cls).animate({ 99 top: $('.div5').offset().top+'px', 100 left: $('.div5').offset().left+'px' 101 }); 102 }); 103 104 $('.div6').drop(function(){ 105 cls=$('.hide').html(); 106 $('.'+cls).animate({ 107 top: $('.div6').offset().top+'px', 108 left: $('.div6').offset().left+'px' 109 }); 110 }); 111 112 $('.div7').drop(function(){ 113 cls=$('.hide').html(); 114 $('.'+cls).animate({ 115 top: $('.div7').offset().top+'px', 116 left: $('.div7').offset().left+'px' 117 }); 118 }); 119 120 </script> 121 </html>
5、鼠标按方向拖动(draging)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title> DO </title> 6 <meta name="Generator" content="EditPlus"> 7 <meta name="Author" content="作者"> 8 <meta name="Keywords" content="关键字"> 9 <meta name="Description" content="描述"> 10 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 11 12 <!-- 引用css --> 13 <link rel="stylesheet" type="text/css" href="css/style.css" /> 14 <!-- 引用js --> 15 <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> 16 <script type="text/javascript" src="js/drag.js"></script> 17 18 <script> 19 $(function(){ 20 $('.box-1 dl').each(function(){ 21 $(this).dragging({ 22 move : 'x', 23 randomPosition : true 24 }); 25 }); 26 $('.box-2 dl').each(function(){ 27 $(this).dragging({ 28 move : 'y', 29 randomPosition : true 30 }); 31 }); 32 $('.box-3 dl').each(function(){ 33 $(this).dragging({ 34 move : 'both', 35 randomPosition : false 36 }); 37 }); 38 $('.box-4 dl').each(function(){ 39 $(this).dragging({ 40 move : 'both', 41 randomPosition : true 42 }); 43 }); 44 $('.box-5 dl').each(function(){ 45 $(this).dragging({ 46 move : 'both', 47 randomPosition : true , 48 hander:'.hander' 49 }); 50 }); 51 }); 52 </script> 53 </head> 54 <body> 55 <p>只能水平拖动</p> 56 <div class='box box-1'> 57 <dl><img src="img/01.jpg" width=150 height=150></dl> 58 </div> 59 <p>只能垂直拖动</p> 60 <div class='box box-2'> 61 <dl><img src="img/02.jpg" width=150 height=150></dl> 62 </div> 63 <p>自由拖动，初始位置固定</p> 64 <div class='box box-3'> 65 <dl><img src="img/03.jpg" width=150 height=150></dl> 66 </div> 67 <p>自动拖动，初始位置随机</p> 68 <div class='box box-4'> 69 <dl><img src="img/04.jpg" width=150 height=150></dl> 70 <dl><img src="img/05.jpg" width=150 height=150></dl> 71 <dl><img src="img/06.jpg" width=150 height=150></dl> 72 <dl><img src="img/07.jpg" width=150 height=150></dl> 73 </div> 74 <p>自动拖动，初始位置随机，hander拖动</p> 75 <div class='box box-5'> 76 <dl><i class='hander'>拖我</i><img src="img/04.jpg" width=150 height=150></dl> 77 <dl><i class='hander'>拖我</i><img src="img/05.jpg" width=150 height=150></dl> 78 <dl><i class='hander'>拖我</i><img src="img/06.jpg" width=150 height=150></dl> 79 <dl><i class='hander'>拖我</i><img src="img/07.jpg" width=150 height=150></dl> 80 </div> 81 </body> 82 </html>
20 $('#citys').cxSelect({ 21 url: 'js/cityData.json', 22 selects: ['province', 'city', 'area'], 23 // nodata: 'none' 24 });