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'> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;结束时间:<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 幻灯片、城市选择、日期时间选择、拖放、方向拖动插件的更多相关文章

  1. 基于jquery的城市选择插件

    城市选择插件的难度不是很大,主要是对dom节点的操作.而我写的这个插件相对功能比较简答,没有加入省市联动. 上代码好了,参照代码的注释应该比较好理解. /* *基于jquery的城市选择插件 *aut ...

  2. 利用jquery mobiscroll插件选择日期、select、treeList的具体运用

    体验更优排版请移步原文:http://blog.kwin.wang/programming/jquery-mobiscroll-select-treeList.html mobiscroll是个很好用 ...

  3. 纯原生js移动端城市选择插件

    接着上一篇纯js移动端日期选择插件,话说今天同事又来咨询省市县联动的效果在移动端中如何实现,还是老样子,百度上一搜,诶~又全是基于jquery.zepto的,更加可恨的是大多数都是PC版的,三个sel ...

  4. 移动端城市选择JavaScript插件(基于WG的城市选择插件的修改版本)

    周末的时候趁着一次机会,拿WG(博客)开发的城市选择插件改了一个移动端可以直接用的城市选择插件. 原版插件是基于原声JavaScript写的,在此先感谢作者. 我做的只是依照肯德基注册会员的页面的交互 ...

  5. 【转载】jQuery手机移动端触屏日历日期选择

    文章转载自 科e互联 http://www.internetke.com/ 原文链接:http://www.internetke.com/effects/css3/2015/0120/1222.htm ...

  6. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  7. 1、用datetimepicker插件实现限定时间范围的选择 2、时间插件实现默认当天的时间和只能选择小于今天的日期

    一.用datetimepicker插件实现限定时间范围的选择 1.下面是要实现的效果图,让开始时间只能从  2018-7-1  到 2018-7-7 选择. 2.html的结构 <div cla ...

  8. 基于jQuery仿去哪儿城市选择代码

    基于jQuery仿去哪儿城市选择代码.这是一款使用的jQuery城市选择特效代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="lin ...

  9. jquery插件课程2 放大镜、多文件上传和在线编辑器插件如何使用

    jquery插件课程2 放大镜.多文件上传和在线编辑器插件如何使用 一.总结 一句话总结:插件使用真的还是比较简单的,引包,初始化,配置参数(json),配置数据(json),而后两步不是必须的.而且 ...

随机推荐

  1. Linux-清除rootpassword

    1.Linux进入单用户模式,通常选择内核按e 最后加入single,按b进入单用户. 2.清除/etc/shadow中root这一行第一个:符号和第二个:符号之间内容. 3.正常启动,passwd ...

  2. Android开发经验一判断当前屏幕是全屏还是非全屏

    public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView ...

  3. spring的BeanWrapper类的原理和使用方法

    转自:http://blog.sina.com.cn/s/blog_79ae79b30100t4hh.html 如果动态设置一个对象属性,可以借助Java的Reflection机制完成: Class ...

  4. C# Aspect-Oriented Programming(AOP) 利用多种模式实现动态代理

    什么是AOP(Aspect-Oriented Programming)? AOP允许开发者动态地修改静态的OO模型,构造出一个能够不断增长以满足新增需求的系统,就象现实世界中的对象会在其生命周期中不断 ...

  5. asp.net Code学习二(使用vs 2015 update 3)

    1.在vs 2015上搭建asp.net core:  安装 .Net core sdk.vs2015 tool 即可使用vs 2015开发asp.net core. 2.Net core中国学习小组 ...

  6. [Vue + TS] Create Type-Safe Vue Directives in TypeScript

    Directives allow us to apply DOM manipulations as side effects. We’ll show you how you can create yo ...

  7. java 并发原子性与易变性 来自thinking in java4 21.3.3

    java 并发原子性与易变性  具体介绍请參阅thinking in java4 21.3.3 thinking in java 4免费下载:http://download.csdn.net/deta ...

  8. 在同一个局域网下实时访问vue项目,移动端也可以。

    之前,UI看做好的页面效果,一直都是把项目打包好后放上服务器跑. 现在,UI能实时看到我的项目的页面效果情况了. 那么问题来了!!! 要怎样做到呢??? 接下来照做就行了!!! 请您先打开项目下的pa ...

  9. DB2 概览

    2006:IBM公布DB2.9.将数据库领域带入XML时代.IT建设业已进入SOA(Service-Oriented Architecture)时代.实现SOA.其核心难点是顺畅解决不同应用间的数据交 ...

  10. C++组合数(combination)的实现

    实现: (nm) 既需要计算组合的总数 (32)=3: 也需要分别获得每一种组合的情形,用于穷举搜索: 1, 2; 1, 3; 2, 3 1. 递归实现 // picked + toPick == m ...