jquery插件课程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 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)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="jquery.bxslider.css">
<script src='jquery.min.js'></script>
<script src='jquery.bxslider.min.js'></script>
<style>
img{
width:100%;
}
</style>
</head>
<body>
<div class="bxslider">
<li><img src="data:images/pic1.jpg" alt=""></li>
<li><img src="data:images/pic2.jpg" alt=""></li>
<li><img src="data:images/pic3.jpg" alt=""></li>
</div>
</body>
<script>
$('.bxslider').bxSlider({
'speed':,
'auto':true,
'pause':2000,
'autoHover':true,
'mode':'fade'
});
</script>
</html>
2、城市级联插件(cxselect)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>cxSelect 多级联动下拉菜单</title>
6 <script src="js/jquery.min.js"></script>
<script src="js/jquery.cxselect.min.js"></script>
</head>
<body>
<div class="wrap">
<h1>jQuery cxSelect 多级联动下拉菜单</h1> <div id="citys">
<p>省份：<select class="province" data-value='山西省'></select></p>
<p>城市：<select class="city" data-value='太原市'></select></p>
<p>地区：<select class="area" data-value='万柏林区'></select></p>
</div>
</div>
<script>
$('#citys').cxSelect({
url: 'js/cityData.json',
selects: ['province', 'city', 'area'],
// nodata: 'none'
}); </script>
</body>
</html>
3、日期插件(datetimepicker)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
}
</style>
<link rel="stylesheet" href="jquery.datetimepicker.css">
<script src="jquery.min.js"></script>
<script src="jquery.datetimepicker.full.js"></script>
</head>
<body>
<h1>datetimepicker日期插件:</h1>
<p>开始时间: <input type="text" id='start'> 结束时间:<input type='text' id='end'></p>
</body>
<script>
$('#start').datetimepicker({
'format':'Y-m-d',
'timepicker':false
});
$('#end').datetimepicker({
'format':'H:i:s',
'datepicker':false
});
</script>
</html>
4、拖放插件(dragDrop)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
} div{
cursor: pointer;
} .div1{
position: absolute;
top:0px;
left:0px;
z-index:1;
}
.div2{
position: absolute;
top:200px;
left:0px;
z-index:1;
}
.div3{
position: absolute;
top:400px;
left:0px;
z-index:1;
} .div4{
position: absolute;
top:100px;
right:100px;
width:100px;
height:304px;
border:1px dashed #00f;
} .div5{
height:100px;
border-bottom:1px dashed #00f;
}
.div6{
height:100px;
border-bottom:1px dashed #00f;
}
.div7{
height:100px;
} .hide{
display: none;
}
</style>
<script src="jquery.js"></script>
<script src="jquery.drag.js"></script>
<script src="jquery.drop.js"></script>
</head>
<body>
<div class='div1'>
<img src="logo1.jpg" width='100px'>
</div>
<div class='div2'>
<img src="logo2.jpg" width='100px'>
</div>
<div class='div3'>
<img src="logo3.jpg" width='100px'>
</div> <div class="div4">
<div class="div5"> </div>
<div class="div6"> </div>
<div class="div7"> </div>
</div> <span class='hide'></span>
</body>
<script>
$('.div1,.div2,.div3').mouseenter(function(){
$('.hide').html($(this).attr('class'));
});
$('.div1').drag();
$('.div2').drag();
$('.div3').drag(); $('.div5').drop(function(){
cls=$('.hide').html();
$('.'+cls).animate({
top: $('.div5').offset().top+'px',
left: $('.div5').offset().left+'px'
});
}); $('.div6').drop(function(){
cls=$('.hide').html();
$('.'+cls).animate({
top: $('.div6').offset().top+'px',
left: $('.div6').offset().left+'px'
});
}); $('.div7').drop(function(){
cls=$('.hide').html();
$('.'+cls).animate({
top: $('.div7').offset().top+'px',
left: $('.div7').offset().left+'px'
});
}); </script>
</html>
5、鼠标按方向拖动(draging)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> DO </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="作者">
<meta name="Keywords" content="关键字">
<meta name="Description" content="描述">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 引用css -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- 引用js -->
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/drag.js"></script> <script>
$(function(){
$('.box-1 dl').each(function(){
$(this).dragging({
move : 'x',
randomPosition : true
});
});
$('.box-2 dl').each(function(){
$(this).dragging({
move : 'y',
randomPosition : true
});
});
$('.box-3 dl').each(function(){
$(this).dragging({
move : 'both',
randomPosition : false
});
});
$('.box-4 dl').each(function(){
$(this).dragging({
move : 'both',
randomPosition : true
});
});
$('.box-5 dl').each(function(){
$(this).dragging({
move : 'both',
randomPosition : true ,
hander:'.hander'
});
});
});
</script>
</head>
<body>
<p>只能水平拖动</p>
<div class='box box-1'>
<dl><img src="img/01.jpg" width=150 height=150></dl>
</div>
<p>只能垂直拖动</p>
<div class='box box-2'>
<dl><img src="img/02.jpg" width=150 height=150></dl>
</div>
<p>自由拖动，初始位置固定</p>
<div class='box box-3'>
<dl><img src="img/03.jpg" width=150 height=150></dl>
</div>
<p>自动拖动，初始位置随机</p>
<div class='box box-4'>
<dl><img src="img/04.jpg" width=150 height=150></dl>
<dl><img src="img/05.jpg" width=150 height=150></dl>
<dl><img src="img/06.jpg" width=150 height=150></dl>
<dl><img src="img/07.jpg" width=150 height=150></dl>
</div>
<p>自动拖动，初始位置随机，hander拖动</p>
<div class='box box-5'>
<dl><i class='hander'>拖我</i><img src="img/04.jpg" width=150 height=150></dl>
<dl><i class='hander'>拖我</i><img src="img/05.jpg" width=150 height=150></dl>
<dl><i class='hander'>拖我</i><img src="img/06.jpg" width=150 height=150></dl>
<dl><i class='hander'>拖我</i><img src="img/07.jpg" width=150 height=150></dl>
</div>
</body>
</html>
20 $('#citys').cxSelect({
21 url: 'js/cityData.json',
22 selects: ['province', 'city', 'area'],
23 // nodata: 'none'
24 });
jquery插件课程1 幻灯片、城市选择、日期时间选择、拖放、方向拖动插件的更多相关文章
- 基于jquery的城市选择插件
城市选择插件的难度不是很大,主要是对dom节点的操作.而我写的这个插件相对功能比较简答,没有加入省市联动. 上代码好了,参照代码的注释应该比较好理解. /* *基于jquery的城市选择插件 *aut ...
- 利用jquery mobiscroll插件选择日期、select、treeList的具体运用
体验更优排版请移步原文:http://blog.kwin.wang/programming/jquery-mobiscroll-select-treeList.html mobiscroll是个很好用 ...
- 纯原生js移动端城市选择插件
接着上一篇纯js移动端日期选择插件,话说今天同事又来咨询省市县联动的效果在移动端中如何实现,还是老样子,百度上一搜,诶~又全是基于jquery.zepto的,更加可恨的是大多数都是PC版的,三个sel ...
- 移动端城市选择JavaScript插件（基于WG的城市选择插件的修改版本）
周末的时候趁着一次机会,拿WG(博客)开发的城市选择插件改了一个移动端可以直接用的城市选择插件. 原版插件是基于原声JavaScript写的,在此先感谢作者. 我做的只是依照肯德基注册会员的页面的交互 ...
- 【转载】jQuery手机移动端触屏日历日期选择
文章转载自 科e互联 http://www.internetke.com/ 原文链接:http://www.internetke.com/effects/css3/2015/0120/1222.htm ...
- 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间
原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...
- 1、用datetimepicker插件实现限定时间范围的选择 2、时间插件实现默认当天的时间和只能选择小于今天的日期
一.用datetimepicker插件实现限定时间范围的选择 1.下面是要实现的效果图,让开始时间只能从 2018-7-1 到 2018-7-7 选择. 2.html的结构 <div cla ...
- 基于jQuery仿去哪儿城市选择代码
基于jQuery仿去哪儿城市选择代码.这是一款使用的jQuery城市选择特效代码下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="lin ...
- jquery插件课程2 放大镜、多文件上传和在线编辑器插件如何使用
jquery插件课程2 放大镜.多文件上传和在线编辑器插件如何使用 一.总结 一句话总结:插件使用真的还是比较简单的,引包,初始化,配置参数(json),配置数据(json),而后两步不是必须的.而且 ...
随机推荐
- Apache ZooKeeper Getting Started Guide 翻译
ZooKeeper 開始向导 開始:用zookeeper协调分布式程序 单例操作 管理zookeeper存储 连接zookeeper 执行zookeeper 以复制模式执行zookeeper 其他优化 ...
- widget-移除底部小部件内容
今天有一个要求,就是在调出手机窗口小部件的时候,让其中的某些小部件不显示.折腾了好久,虽然不知道原理,最终还是实现了屏蔽其中个别小部件的方法.记录下来 要想屏蔽底部小部件的显示,只需要把相关的类跟广播 ...
- 请使劲回答一个关于UNIX/Linux自己主动扩展stack的问题
有本事就出来,没本事就当鳖! 假设让我回答关于进程栈,线程栈的问题,仅仅要问题不笼统,仅仅要问题明白.我会一五一十地回答,正确率上九成,然而,可悲的是,问题往往他妈的都不是非常明白,因此,游戏到此结束 ...
- 让ie6 7 8 9支持原生html5 websocket
让ie6 7 8 9支持原生html5 websocket 从github上的 web-socket-js(socket.io好像也是用这个做的他们的flash替代传输方式)改过来的.不过值得 ...
- Vue 拖拽组件 vuedraggable 和 awe-dnd
vuedraggable:https://www.npmjs.com/package/vuedraggable awe-dnd:https://www.npmjs.com/package/awe-dn ...
- [selenium]-处理滚动条
转载于:https://blog.csdn.net/lilongsy/article/details/76142497 1.先把driver 强制转换为js,如下 JavascriptExecutor ...
- GO语言学习（二十）Go 语言递归函数
Go 语言递归函数 递归,就是在运行的过程中调用自己. 语法格式如下: func recursion() { recursion() /* 函数调用自身 */ } func main() { recu ...
- java与javax的区别分析
Java是一种受C语言影响的编程语言.Java和Javax本质上是与Java编程语言的上下文一起使用的包.实际上Java和Javax没有区别.这只是不同的名字. Java是一种编程语言,受到C语言的影 ...
- 原 HttpClient 4.3超时设置
https://my.oschina.net/u/577453/blog/173724 http://blog.csdn.net/zh521zh/article/details/51994140
- 通过Rman catalog 创建及管理Oracle数据库备份
基本环境信息target DB (需备份数据库) 192.168.199.67 ORACLE_SID=zgw HOSTNAME=Oracle11 catlog DB (备份管理数据库) 192.168 ...