做竞品分析去哪个网站,惠州市建筑信息平台,河北通信网站建设,wordpress自动插件jquery插件课程1 幻灯片、城市选择、日期时间选择、拖放、方向拖动插件 一、总结 一句话总结#xff1a;都是jquery插件#xff0c;都还比较小#xff0c;参数#xff08;配置参数、数据#xff09;一般都是通过json传递。 1、插件配置数据或者参数的时候用的是什么数据结… 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 srcjs/jquery.min.js/script7 script srcjs/jquery.cxselect.min.js/script 4、如何记录当前选择或者说拖动的元素 借助另外一个标签点击的时候就讲这个我们拖动的类名记录在这个标签中用的时候就直接取就好了 86 span classhide/span87 /body88 script89 $(.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 html2 html langen3 head4 meta charsetUTF-85 titleindex/title6 link relstylesheet hrefjquery.bxslider.css7 script srcjquery.min.js/script8 script srcjquery.bxslider.min.js/script9 style
10 img{
11 width:100%;
12 }
13 /style
14 /head
15 body
16 div classbxslider
17 liimg srcimages/pic1.jpg alt/li
18 liimg srcimages/pic2.jpg alt/li
19 liimg srcimages/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 HTML2 html3 head4 meta charsetutf-85 titlecxSelect 多级联动下拉菜单/title6 script srcjs/jquery.min.js/script7 script srcjs/jquery.cxselect.min.js/script8 /head9 body
10 div classwrap
11 h1jQuery cxSelect 多级联动下拉菜单/h1
12
13 div idcitys
14 p省份select classprovince data-value山西省/select/p
15 p城市select classcity data-value太原市/select/p
16 p地区select classarea 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 html2 html langen3 head4 meta charsetUTF-85 titleindex/title6 style7 *{8 font-family: 微软雅黑;9 }
10 /style
11 link relstylesheet hrefjquery.datetimepicker.css
12 script srcjquery.min.js/script
13 script srcjquery.datetimepicker.full.js/script
14 /head
15 body
16 h1datetimepicker日期插件:/h1
17 p开始时间: input typetext idstart nbsp;nbsp;nbsp;nbsp;nbsp;结束时间:input typetext idend/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 html2 html langen3 head4 meta charsetUTF-85 titleindex/title6 style7 *{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 /style59 script srcjquery.js/script60 script srcjquery.drag.js/script61 script srcjquery.drop.js/script62 /head63 body64 div classdiv165 img srclogo1.jpg width100px66 /div 67 div classdiv268 img srclogo2.jpg width100px69 /div 70 div classdiv371 img srclogo3.jpg width100px72 /div 73 74 div classdiv475 div classdiv576 77 /div 78 div classdiv679 80 /div81 div classdiv782 83 /div84 /div85 86 span classhide/span87 /body88 script89 $(.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().toppx,
100 left: $(.div5).offset().leftpx
101 });
102 });
103
104 $(.div6).drop(function(){
105 cls$(.hide).html();
106 $(.cls).animate({
107 top: $(.div6).offset().toppx,
108 left: $(.div6).offset().leftpx
109 });
110 });
111
112 $(.div7).drop(function(){
113 cls$(.hide).html();
114 $(.cls).animate({
115 top: $(.div7).offset().toppx,
116 left: $(.div7).offset().leftpx
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.dtd2 html xmlnshttp://www.w3.org/1999/xhtml3 head4 meta http-equivContent-Type contenttext/html; charsetutf-8 /5 title DO /title6 meta nameGenerator contentEditPlus7 meta nameAuthor content作者8 meta nameKeywords content关键字9 meta nameDescription content描述
10 meta http-equivX-UA-Compatible contentIEedge,chrome1 /
11
12 !-- 引用css --
13 link relstylesheet typetext/css hrefcss/style.css /
14 !-- 引用js --
15 script typetext/javascript srcjs/jquery-1.9.1.min.js/script
16 script typetext/javascript srcjs/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 classbox box-1
57 dlimg srcimg/01.jpg width150 height150/dl
58 /div
59 p只能垂直拖动/p
60 div classbox box-2
61 dlimg srcimg/02.jpg width150 height150/dl
62 /div
63 p自由拖动初始位置固定/p
64 div classbox box-3
65 dlimg srcimg/03.jpg width150 height150/dl
66 /div
67 p自动拖动初始位置随机/p
68 div classbox box-4
69 dlimg srcimg/04.jpg width150 height150/dl
70 dlimg srcimg/05.jpg width150 height150/dl
71 dlimg srcimg/06.jpg width150 height150/dl
72 dlimg srcimg/07.jpg width150 height150/dl
73 /div
74 p自动拖动初始位置随机hander拖动/p
75 div classbox box-5
76 dli classhander拖我/iimg srcimg/04.jpg width150 height150/dl
77 dli classhander拖我/iimg srcimg/05.jpg width150 height150/dl
78 dli classhander拖我/iimg srcimg/06.jpg width150 height150/dl
79 dli classhander拖我/iimg srcimg/07.jpg width150 height150/dl
80 /div
81 /body
82 /html 20 $(#citys).cxSelect({
21 url: js/cityData.json,
22 selects: [province, city, area],
23 // nodata: none
24 }); 转载于:https://www.cnblogs.com/Renyi-Fan/p/9228779.html
