Bootstrap 插件【四】
2016-05-28 20:00
513 查看
学习要点
附加导航
颜色选择器
日期选择器
1.附加导航
第一种:data调用
css样式
第二种:用JS控制
去除data-spy=”affix” data-offset-top=”280”
2.颜色选择器
使用颜色选择器
第一步:引入对应文件,在这里,Bootstrap文件不重复了
第二步:编写html
第三步:触发JS文件
3.日期选择器
使用和配置
第一步:导入插件
第二步:编写html
第三步:编写JS,上述的属性也可以用JS来编写
例子2:在规定的起始时间和终止时间内挑选时间
第一步:导入插件,不再累赘
第二步:编写html
第三步:编写JS
例子3:在指定范围选择日期
第一步:导入插件,不再累赘
第二步:编写html
第三步:编写JS
附加导航
颜色选择器
日期选择器
1.附加导航
第一种:data调用
<!-- data-spy="scroll" data-target="#menu" 设置滚动监听和对象 --> <body data-spy="scroll" data-target="#menu"> <!-- hero-unit hero单元,显示网站信息 --> <div class="hero-unit"> <h3>site name</h3> <button type="button" class="btn btn-large btn-success">content</button> </div> <div class="row-fluid"> <!-- id="menu"与body中的data-target对应 --> <!-- 导航菜单 --> <div class="span3" id="menu"> <!-- nav nav-list 导航 --> <!-- data-spy="affix" 附加导航 --> <ul class="nav nav-list" data-spy="affix" data-offset-top="280"> <li><a href="#1"><i class="icon-chevron-right"></i> 列表1</a></li> <li><a href="#2"><i class="icon-chevron-right"></i> 列表2</a></li> <li><a href="#3"><i class="icon-chevron-right"></i> 列表3</a></li> </ul> </div> <!-- 信息主体 --> <div class="span9"> <fieldset id="1"> <legend>列表1</legend> <div class="fieldset-content"> <p><img src="img/1.jpg"></p> </div> </fieldset> <fieldset id="2"> <legend>列表2</legend> <div class="fieldset-content"> <p><img src="img/2.jpg"></p> </div> </fieldset> <fieldset id="3"> <legend>列表3</legend> <div class="fieldset-content"> <p><img src="img/3.jpg"></p> </div> </fieldset> </div> </div>
css样式
.nav-list { top : 20px; }
第二种:用JS控制
去除data-spy=”affix” data-offset-top=”280”
$(function () { $(".nav-list").affix({ offset : { top : 280, } }); });
2.颜色选择器
使用颜色选择器
第一步:引入对应文件,在这里,Bootstrap文件不重复了
<link rel="stylesheet" type="text/css" href="colorpicker/img/colorpicker.css"> <script type="text/javascript" src="colorpicker/js/bootstrap-colorpicker.js"></script>
第二步:编写html
<!-- color 颜色包含框 --> <!-- data-color-format="rgb" 的格式 --> <!-- data-color="rgb(255, 146, 180)"设置默认颜色值 --> <div class="input-append color" data-color="rgb(255, 146, 180)" data-color-format="rgb"> <input type="text" class="span2" value=""> <!-- add-on 后缀 --> <span class="add-on"><i style="background-color: rgb(255, 146, 180);"></span> </div>
第三步:触发JS文件
$(function () { // 配置颜色选择器 $('.color').colorpicker({ // 格式,十六进制 format : "hex" }); // 触发事件,当颜色选择器的颜色改变时,body的背景颜色也改变 $(".color").on("changeColor", function (e) { $("body")[0].style.backgroundColor = e.color.toHex(); }); });
3.日期选择器
使用和配置
第一步:导入插件
<link rel="stylesheet" type="text/css" href="datepicker/img/datepicker.css"> <script type="text/javascript" src="datepicker/js/bootstrap-datepicker.js"></script>
第二步:编写html
<!-- data-date-format="yyyy-mm-dd" 设置日期格式--> <!-- data-date-format="yyyy-mm-dd" 设置日期格式--> <!-- data-date="2013-02-24" 设置日期默认值 --> <!-- data-date-viewmode="years" 依次让用户选择日期的年->月->日 --> <!-- data-date-minviewmode="months" 显示到月停止 --> <div class="input-append date" id="date" data-date="2013-02-24" data-date-format="yyyy-mm-dd" data-date-viewmode="years" data-date-minviewmode="months"> <input class="span2" type="text" value="2013-02-24" readonly> <span class="add-on"><i class="icon-calendar"></i></span> </div>
第三步:编写JS,上述的属性也可以用JS来编写
$(function () { $("#date").datepicker({ // 格式 format : "yyyy-mm-dd", viewMode : "years" }); });
例子2:在规定的起始时间和终止时间内挑选时间
第一步:导入插件,不再累赘
第二步:编写html
<button class="btn small" id="start" data-date-format="yyyy-mm-dd" data-date="2013-05-20">起始日期</button> <span id="startDate">2016-05-20</span><br> <button class="btn small" id="end" data-date-format="yyyy-mm-dd" data-date="2013-06-20">结束日期</button> <span id="endDate">2016-06-20</span><br> <div class="alert alert-error" id="alert"></div>
第三步:编写JS
$(function () { var startDate = new Date(2016, 4, 20); // 2016-5-20 var endDate = new Date(2016, 5, 20); // 2016-6-20 // 警告框隐藏 $(".alert").hide(); $("#start").datepicker().on("changeDate", function (e) { // 如果选择的起始时间的时间戳大于结束时间的时间戳, // 那么就报错:起始日期不得大于终止日期 if (e.date.valueOf() > endDate.valueOf()) { $("#alert").show().html("起始日期不得大于终止日期"); } else { $("#alert").hide(); startDate = new Date(e.date); // $("#start").data("date") 日期选择器的日期 $("#startDate").text($("#start").data("date")); } }); $("#end").datepicker().on("changeDate", function (e) { // 如果选择的结束时间的时间戳小于起始时间的时间戳, // 那么就报错:终止日期不得小于起始日期 if (e.date.valueOf() < startDate.valueOf()) { $("#alert").show().html("终止日期不得小于起始日期"); } else { $("#alert").hide(); endDate = new Date(e.date); // $("#end").data("date") 日期选择器的日期 $("#endDate").text($("#end").data("date")); } }); });
例子3:在指定范围选择日期
第一步:导入插件,不再累赘
第二步:编写html
<button class="btn small" id="start" data-date-format="yyyy-mm-dd" data-date="2016-05-20">起始日期</button><br> <button class="btn small" id="end" data-date-format="yyyy-mm-dd" data-date="2016-06-20">结束日期</button>
第三步:编写JS
$(function () { var nowTemp = new Date(); // 实例化当前时间 var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0); var checkin = $('#start').datepicker({ // 当日期被选中高亮后 // 如果选择日期的时间戳 < 当前日期的时间戳 // 那么小于当前日期的日期都disabled掉 onRender: function(date) { return date.valueOf() < now.valueOf() ? 'disabled' : ''; } }).on('changeDate', function(e) { // 如果选择的起始日期的时间戳 > 终止日期的时间戳 // 那么终止日期等于当前选中的日期 + 1天 if (e.date.valueOf() > checkout.date.valueOf()) { var newDate = new Date(e.date) newDate.setDate(newDate.getDate() + 1); checkout.setValue(newDate); } checkin.hide(); $('#end')[0].focus(); }).data('datepicker'); var checkout = $('#end').datepicker({ // 当日期被选中高亮后 // 如果选择日期的时间戳 <= 起始日期的时间戳 // 那么小于起始日期的日期都disabled掉 onRender: function(date) { return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : ''; } }).on('changeDate', function(e) { checkout.hide(); }).data('datepicker'); });
相关文章推荐
- bootstrap初试进度条
- Bootstrap 3.3.4 发布,Web 前端 UI 框架
- java自动生成验证码插件-kaptcha
- angular 指令简述
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例
- 加载flash9.ocx出现错误的解决方法
- jquery实现的代替传统checkbox样式插件
- 10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
- 推荐40个非常优秀的jQuery插件和教程【系列三】
- Node.js插件的正确编写方式
- 推荐十款免费 WordPress 插件
- NopCommerce架构分析之(四)基于路由实现灵活的插件机制
- 基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
- Bootstrap教程JS插件弹出框学习笔记分享
- 使用JavaScript开发IE浏览器本地插件实例
- Bootstrap框架动态生成Web页面文章内目录的方法
- jQuery实现的简单提示信息插件
- 推荐25个超炫的jQuery网格插件