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),而后两步不是必须的.而且 ...
随机推荐
- 阿里云 CentOS7.4 环境安装nginx
下载 nginx地址: http://nginx.org/en/download.html Mainline version可以理解为开发版本 Stable version 稳定版 Legacy ve ...
- spring定时器完整
介绍:在开发中,我们经常需要一些周期性就进行某一项操作.这时候我们就要去设置个定时器,Java中最方便.最高效的实现方式是用java.util.Timer工具类,再通过调度java.util.Time ...
- $.post()提交了数据,return不给跳转
本来Controller接到普通请求,return “somePage”,这样就跳转了.前台用$.post()提交了数据(不需要回调),我了个大草,return那里就不给跳转了这样怎么解决? ajax ...
- Java学习笔记三.2
5.继承 //Java中所有对象都显式/隐式的继承子Object类 class fu{ fu(){ System.out.println("fu..."+getNum()); sh ...
- 创建VG
创建VG smit mkvg Add a Volume Group Add a Scalable Volume Group VOLUME GROUP name ...
- vue移动端上拉加载更多
LoadMore.vue <template> <div class="load-more-wrapper" @touchstart="touchSta ...
- 洛谷——P1443 马的遍历
https://www.luogu.org/problem/show?pid=1443#sub 题目描述 有一个n*m的棋盘(1<n,m<=400),在某个点上有一个马,要求你计算出马到达 ...
- 利用安卓手机的OTG共享有线网络
利用安卓手机的OTG共享有线网络 安卓手机有些是支持OTG的,OTG的显著特点就是手机能给外部设备供电,而且能交换数据. 那么,没有OTG功能的手机能不能给弄个OTG出来呢?当然可以,原因很简单,既然 ...
- Express框架是什么
Express框架是什么 一.总结 1.express框架:基于node.js的web应用框架,可快速搭建一个完整功能的网站,丰富的HTTP工具以及来自Connect框架的中间件随取随用. 二.Exp ...
- 学习笔记（三）：jQuery之DOM
1.jQuery属性. 获取元素属性的语法: attr(name) 例子:$("#img1").attr("src"); 设 ...