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),而后两步不是必须的.而且 ...
随机推荐
- 【JEECG技术博文】JEECG 简单实例解说权限控制
JEECG简单实例解说权限控制 请大家点击这里为我们投票.2015博客之星.很多其他分享敬请期待 博文地址:http://blog.itpub.net/30066956/viewspace-18687 ...
- 測试CPU支持指令集AVX，AVX2，SSE情况的代码【VS2010调试通过】
完整代码例如以下所看到的 http://download.csdn.net/detail/vbskj/7723827 本人的測试结果 watermark/2/text/aHR0cDovL2Jsb2cu ...
- H5+混合移动app
H5+混合移动app 前言 经过2个多月的艰苦奋斗,app的第一个版本已经快完工了,期间遇到了太多的坑,作为一个喜欢分享的人,我当然不会吝啬分享这爬坑历程.不要问我有多坑,我会告诉你很多,很多.... ...
- 73.fseek与宽字符读取文件
fseek //文件路径 ] = "1.txt"; //FILE *pf = fopen(path, "a+");//尾部添加,文件指针在尾部 //FILE * ...
- Atcoder At Beginner Contest 068 C - Cat Snuke and a Voyage
C - Cat Snuke and a Voyage Time limit : 2sec / Memory limit : 256MB Score : 300 points Problem State ...
- LoadRunner IP欺骗使用
- WEB前端--深入进去
在网站开发这条道路上做专做精,一个专题一个专题的深入探索,一个盲区一个盲区的理解和记忆,终有大成的那一天的.
- js面向对象1----了解构造函数
一.构造函数与实例的区别 1 构造函数 构造函数主要是一种用于生成对象的饼干模具,这些对象具有默认属性和属性方法,它可以创建多个共享特定特性和行为的对象. 构造函数只是一个函数,但当函数遇到了ne ...
- 每日技术总结：encodeURI,encodeURIComponent,toFixed
1. encodeURI(URIstring) encodeURI()函数可把字符串作为URI进行编码 encodeURI("http://www.w3school.com.cn" ...
- Mongodb总结3-稍微封装一下
上次发表的2,纯粹是Demo,演示API的用法. 今天,稍微封装了下,看得更清楚. 考虑到不容易做得很有通用性,所以封装的一般,换种场景需要直接修改代码,但是有一部分是可以复用的. 最近项目,很可能只 ...