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),而后两步不是必须的.而且 ...
随机推荐
- HBase高速导入数据--BulkLoad
Apache HBase是一个分布式的.面向列的开源数据库.它能够让我们随机的.实时的訪问大数据.可是如何有效的将数据导入到HBase呢?HBase有多种导入数据的方法.最直接的方法就是在MapRed ...
- <meta-data>的使用
在AndroidManifest.xml中,<meta-data>元素可以作为子元素,被包含在<activity>.<application> .<servi ...
- Mysql基本增删改查
1登陆服务器 mysql -h localhost -u username -p password 2查看存在数据库 show databases; 3创建一个数据库(例如名字为class1,以下都是 ...
- Linux在应用层读写寄存器的方法
可以通过操作/dev/mem设备文件,以及mmap函数,将寄存器的地址映射到用户空间,直接在应用层对寄存器进行操作,示例如下: #include <stdio.h> #include &l ...
- jfreechart,pdf生成组件iText,jasper report报表组件及POI操作excel等在企业软件开发中常遇到的第三方应用
熟悉WEB Service ,Ajax,DWR,JQuery,iBatis等技术,熟练TOMCAT,IIS,JBoss,WebLogic等服务器 图表组件JFreeChart PDF组件-iText的 ...
- Spring学习总结（7）——applicationContext.xml 配置文详解
web.xml中classpath:和classpath*: 有什么区别? classpath:只会到你的class路径中查找找文件; classpath*:不仅包含class路径,还包括jar文件 ...
- js进阶 14-2 如何用ajax验证登陆状态（这里用load方法）
js进阶 14-2 如何用ajax验证登陆状态(这里用load方法) 一.总结 一句话总结:$('#test').load('test.php?password=1234560'),这样就get方式提 ...
- jquery中empty()和remove()的区别
empty 顾名思义,清空方法,但是与删除又有点不一样,因为它只移除了 指定元素中的所有子节点. remove与empty一样,都是移除元素的方法,但是remove会将元素自身移除,同时也会移除元素内 ...
- GCJ 2009 Round 2 Problem A. Crazy Rows
https://code.google.com/codejam/contest/204113/dashboard 题目大意: 给你一个矩阵,让你转化为下三角矩阵,每次只能交换相邻的行,求最小的交换次数 ...
- （素材源代码） 猫猫学IOS（五）UI之360等下载管理器九宫格UI
猫猫分享,必须精品 先看效果 代码学习地址: 猫猫学IOS(五)UI之360等下载管理器九宫格UI 猫猫学IOS(五)UI之360等下载管理器九宫格UI http://blog.csdn.net/u0 ...