【2015年11月4日 10:21:57】
数组去除重复项，思路：利用对象的的属性唯一性，例如：
var obj = new Object(); obj.name = 'jack'; obj.age = 20 ; //alert(obj.name); obj.name = 'mark'; alert(obj.name);
上例说明对象的属性的唯一性。
数组去重的思路：
第一步，将数组转换为对象，利用对象的唯一性去除对象的重复项；
第二步，再将对象转化为数组；
第三步，合并，具体代码如下：
1 //数组去重,字符串，数字均可以 2 //将数组转化为对象 3 var arrTestStr = ['行政事务','行政事务','行政事务','公文办理','公文办理','公文办理','公文办理','公文检索','公文检索','公文检索','公文检索','公文操作','公文操作','公文操作','公文操作','公文操作']; 4 var arrTestNum = [1,1,1,2,2,2,3,3,3,3,3,5,5,5,5,5,6,6,6,6]; 5 function toObj(arr){ 6 var obj = {}; 7 var leng; 8 for(var i = 0, leng = arr.length; i < leng; i++){ 9 obj[arr[i]] = true; 10 } 11 return obj; 12 } 13 //将对象转为数组 14 function toArr(obj){ 15 var arr = []; 16 for(var attr in obj){ 17 if(obj.hasOwnProperty(attr)){ 18 arr.push(attr); 19 } 20 } 21 return arr; 22 } 23 //合并 24 function arrUnique(arr){ 25 return toArr(toObj(arr)); 26 } 27 28 console.log(arrUnique(arrTestStr)); //["行政事务", "公文办理", "公文检索", "公文操作"] 29 console.log(arrUnique(arrTestNum)); //["1", "2", "3", "5", "6"]
【2015年12月4日 09:17:55】
将数组去重函数，封装
1 /* 2 2015年12月4日 09:11:13 3 数组去重复，利用对象的属性唯一的特性， 4 */ 5 6 function arrUnique(arr){ 7 8 //1.将数组转换为对象，利用对象的唯一性去除对象的重复项； 9 function toObj(arr){ 10 var obj = {}; 11 var leng; 12 for(var i = 0, leng = arr.length; i < leng; i++){ 13 obj[arr[i]] = true; 14 } 15 return obj; 16 } 17 18 //2.再将对象转化为数组； 19 function toArr(obj){ 20 var arr = []; 21 for(var attr in obj){ 22 if(obj.hasOwnProperty(attr)){ 23 arr.push(attr); 24 } 25 } 26 return arr; 27 } 28 29 //3.合并 30 return toArr(toObj(arr)); 31 }
【2015年11月5日 10:39:25】
每点击左侧二级导航的一个元素，在右侧的动态添加三级导航
思路：
（1）先设置一个标记，用于记录记录左侧元素是否在左侧存在，如果存在就将标记改变；
（2）每点击左侧的元素，与右侧的比较，如果存在给其激活（加样式），并将标记改变
（3）如果标记不改变说明，右侧没有存在就在左侧加上
具体js代码：
1 //动态加载li导航 2 var strRemove ='<span class="glyphicon glyphicon-remove"></span>'; 3 var rightFirst = $(".detail a:eq(0)").text(); 4 $("#thdNav").prepend('<li>'+ rightFirst + strRemove +'</li>'); 5 6 $(".detail li").find("a").click(function(){ 7 var rightNavTxt = $(this).text(); 8 var flag = -1; //设置标记 9 $("#thdNav li").each(function(){ 10 var thdNavTxt = $(this).text(); 11 if(rightNavTxt==thdNavTxt){ 12 $(this).addClass("active").siblings().removeClass("active"); 13 //$(this).find("span").fadeIn("slow").parent().siblings().find("span").fadeOut("slow"); 14 flag=9; //改变标记 15 } 16 }); 17 18 if(flag==-1){ 19 $("#thdNav").prepend('<li>'+ rightNavTxt + strRemove +'</li>'); 20 $("#thdNav li:first-child").addClass("active").siblings().removeClass("active"); 21 } 22 23 thdLvNav(); 24 25 }); 26 $("#thdNav").append('<div class="clear"></div>');
thdLvNav();函数代码：
1 //三级导航 2 function thdLvNav(){ 3 //$(".thdNav").find("li").eq(0).addClass("active"); 4 $(".thdNav").find("li").click(function(){ 5 $(this).addClass("active").siblings().removeClass("active"); 6 $(this).find("span").fadeIn("slow").parent().siblings().find("span").fadeOut("slow"); 7 }); 8 9 $(".thdNav").find("span").click(function(){ 10 $(this).parent().remove(); 11 }); 12 }
【2015年11月13日 15:36:25】
jQuery中的.height()、.innerHeight()和.outerHeight()
jQuery中的.height()、.innerHeight()和.outerHeight()和W3C的盒模型相关的几个获取元素尺寸的方法。对应的宽度获取方法分别为.width()、.innerWidth()和.outerWidth()，在此不详述。
⑴ .height()
获取匹配元素集合中的第一个元素的当前计算高度值 或 设置每一个匹配元素的高度值(带一个参数)。
注意：
1).css('height')和.height()之间的区别是后者返回一个没有单位的数值(例如，400)，前者是返回带有完整单位的字符串(例如，400px)。
2).height()总是返回内容宽度,不管CSSbox-sizing属性值。.height('value')设置的容器宽度是根据CSSbox-sizing属性来定的, 将这个属性值改成border-box，将造成这个函数改变这个容器的outerHeight，而不是原来的内容高度。
⑵ .innerHeight()
为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding，但是不包括border。
⑶ .outerHeight()
获取元素集合中第一个元素的当前计算高度值,包括padding，border和选择性的margin。返回一个整数(不包含“px”)表示的值 ，或如果在一个空集合上调用该方法，则会返回 null。
在.outerHeight()计算中总是包含padding-top ,padding-bottom 和 border-top，border-bottom ;如果includeMargin参数是true，那么margin (top 和 bottom)也会被包含。
【2015年11月17日 14:56:15】
HTML:
1 <!-- modal --> 2 <div id="myModal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none;"> 3 <div class="modal-dialog" role="document"> 4 <div class="modal-content"> 5 <div class="modal-header"> 6 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 7 <h4 class="modal-title" id="myModalLabel">Modal title</h4> 8 </div><!-- /modal-header --> 9 <div class="modal-body"> 10 Modal content 11 12 </div><!-- /modal-body --> 13 <div class="modal-footer"> 14 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 15 <button type="button" class="btn btn-primary">Save changes</button> 16 </div><!-- modal-footer --> 17 </div><!-- /modal-content --> 18 </div><!-- /modal-dialog --> 19 </div><!-- /modal --> 20 <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
CSS:
1 .modal {position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 1040;display: none;overflow: auto;overflow-y: scroll;} 2 .fade {opacity: 0;-webkit-transition: opacity .55s linear;transition: opacity .55s linear;} 3 .modal .modal-dialog {margin: 0px auto;width: 600px;} 4 .modal .modal-dialog .modal-content {position: relative;outline: 0;border: 0px solid #999;border: 0px solid rgba(0,0,0,.2);border-radius: 0px;background-color: #fff;background-clip: padding-box;-webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);box-shadow: 0 3px 9px rgba(0,0,0,.5);} 5 .modal .modal-dialog .modal-content .modal-header {padding: 15px;min-height: 16.43px;border-bottom: 1px solid #e5e5e5;} 6 .modal .modal-dialog .modal-content .modal-header span{-background:url("../images/end/user/user-remove.png") no-repeat center center;display:inline-block;width:12px;height:12px;} 7 .modal .modal-dialog .modal-content .modal-header .modal-title {margin: 0;line-height: 1.428571429;} 8 .modal .modal-dialog .modal-content .modal-body {position: relative;padding: 20px;} 9 .modal .modal-dialog .modal-content .modal-footer {margin-top: 15px;padding: 19px 20px 20px;border-top: 1px solid #e5e5e5;text-align: right;}
用户管理-添加用户
HTML:
1 <!-- modal --> 2 <div id="userAdd" class="modalBox fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 3 <div class="modalBox-dialog" role="document"> 4 <div class="modalBox-content"> 5 <div class="modalBox-header"> 6 <div class="vtlctBase center"> 7 <div class="vtlctSub"> 8 <div> 9 <span class="pull-right" data-dismiss="modal" aria-label="Close"></span> 10 <h4 class="bold">增加用户</h4> 11 </div> 12 </div><!-- /vtlctSub --> 13 </div><!-- /vtlctBase --> 14 </div><!-- /modal-header --> 15 <div class="modalBox-body"> 16 <div class="detail center"> 17 modalBox-body content... 18 </div><!-- /detail --> 19 </div><!-- /modal-body --> 20 <div class="modalBox-footer vtlctBase center"> 21 <div class="vtlctSub"> 22 <button type="button" class="btn1" data-dismiss="modal">确认</button> 23 <button type="button" class="btn1">重置</button> 24 </div> 25 </div><!-- modal-footer --> 26 </div><!-- /modal-content --> 27 </div><!-- /modal-dialog --> 28 </div><!-- /modal --> 29 <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
CSS:
1 .modalBox {position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 1040;display: none;overflow: auto;overflow-y: scroll;} 2 .fade {opacity: 0;-webkit-transition: opacity .55s linear;transition: opacity .55s linear;} 3 .modalBox .modalBox-dialog {margin: 50px auto;width: 600px;} 4 .modalBox .modalBox-dialog .modalBox-content {background:#fff;outline:0;border: 0px solid #999;border: 0px solid rgba(0,0,0,.2);border-radius: 0px;background-color: #fff;background-clip: padding-box;-webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);box-shadow: 0 3px 9px rgba(0,0,0,.5);} 5 .modalBox .modalBox-dialog .modalBox-content .modalBox-header{height:40px;width:100%;background:#1d68df;} 6 .modalBox .modalBox-dialog .modalBox-content .modalBox-header span{background:url("../images/end/user/user-remove.png") no-repeat center center;display:inline-block;width:12px;height:12px;cursor:pointer;} 7 .modalBox .modalBox-dialog .modalBox-content .modalBox-header .vtlctSub div{width:560px;} 8 .modalBox .modalBox-dialog .modalBox-content .modalBox-header .vtlctSub h4{font-size:14px;font-family:Microsoft YaHei;text-align:center;color:#fff} 9 .modalBox .modalBox-dialog .modalBox-content .modalBox-body {background:#fff;margin-top:25px;} 10 .modalBox .modalBox-dialog .modalBox-content .modalBox-body .detail{width:560px;height:278px;border:1px solid #bacadf;} 11 .modalBox .modalBox-dialog .modalBox-content .modalBox-footer {text-align:center;background:#fff;height:60px;} 12 .modalBox .modalBox-dialog .modalBox-content .modalBox-footer .btn1{-border-color: #ccc;background-color: #2f82ea;color: #fff;display: inline-block;margin-bottom: 0;padding: 5px 21px;border: 1px solid transparent;border-radius: 2px;background-image: none;vertical-align: middle;text-align: center;white-space: nowrap;font-weight: 700;font-size: 14px;line-height: 1.428571429;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;-o-user-select: none;user-select: none;} 13 .modalBox .modalBox-dialog .modalBox-content .modalBox-footer .btn1:hover{border-color: #285e8e;background-color: #3276b1;} 14 .modalBox .modalBox-dialog .modalBox-content .modalBox-footer .btn1:first-child{margin-right:23px;}
【Sat Nov 19 2016 13:57:07 GMT+0800】
默认模态框
1 <div class="modal fade in" id="login" data-backdrop="static" tabindex="-1" role="dialog" > 2 <div class="modal-dialog"> 3 <div class="modal-content"> 4 <div class="modal-header"> 5 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 6 <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4> 7 </div><!-- /modal-header --> 8 <div class="modal-body">在这里添加一些文本</div><!-- /modal-body --> 9 <div class="modal-footer"> 10 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> 11 <button type="button" class="btn btn-primary">提交更改</button> 12 </div><!-- /modal-foote --> 13 </div><!-- /.modal-content --> 14 </div><!-- /.modal --> 15 <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
【Fri Aug 05 2016 09:04:10 GMT+0800】
在移动端（jQueryMobile）用Bootstrap模态框
HTML:
1 <!-- modal --> 2 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 3 <div class="modal-dialog" role="document"> 4 <div class="modal-content"> 5 <div class="modal-header"> 6 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 7 <h4 class="modal-title" id="myModalLabel">Modal title</h4> 8 </div><!-- /modal-header --> 9 <div class="modal-body"> 10 <p>One fine body…</p> 11 </div><!-- /modal-body --> 12 <div class="modal-footer"> 13 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 14 <button type="button" class="btn btn-primary">Save changes</button> 15 </div><!-- /modal-footer --> 16 </div><!-- /modal-content --> 17 </div><!-- /modal-dialog --> 18 </div><!-- /modal --> 19 <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
CSS:
1 /*modalBox*/ 2 .fade{opacity:0;-webkit-transition:opacity .15s linear;transition:opacity .15s linear} 3 .fade.in{opacity:1} 4 .close{float:right;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;filter:alpha(opacity=20)} 5 button.close{padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none} 6 /*.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.428571429;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;background-image:none;border:1px solid transparent;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none} 7 .btn-default{color:#333;background-color:#fff;border-color:#ccc} 8 .btn-primary{color:#fff;background-color:#428bca;border-color:#357ebd} 9 */ 10 .modal-open{overflow:hidden} 11 .modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;display:none;overflow:auto;overflow-y:scroll} 12 .modal.fade .modal-dialog{-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);transform:translate(0,-25%);-webkit-transition:-webkit-transform .3s ease-out;-moz-transition:-moz-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out} 13 .modal.in .modal-dialog{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)} 14 .modal-dialog{position:relative;z-index:1050;width:auto;margin:0 17.592592592592593%;} 15 .modal-content{position:relative;background-color:#fff;border:1px solid #999;border:1px solid rgba(0,0,0,.2);border-radius:6px;outline:0;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5);background-clip:padding-box} 16 .modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1030;background-color:#000} 17 .modal-backdrop.fade{opacity:0;filter:alpha(opacity=0)} 18 .modal-backdrop.in{opacity:.5;filter:alpha(opacity=50)} 19 .modal-header{min-height:16.43px;padding:15px;border-bottom:1px solid #e5e5e5} 20 .modal-header .close{margin-top:-2px} 21 .modal-title{margin:0;line-height:1.428571429} 22 .modal-body{position:relative;padding:20px} 23 .modal-footer{padding:19px 20px 20px;margin-top:15px;text-align:right;border-top:1px solid #e5e5e5} 24 .modal-footer:after,.modal-footer:before{display:table;content:" "} 25 .modal-footer:after{clear:both} 26 .modal-footer:after,.modal-footer:before{display:table;content:" "} 27 .modal-footer:after{clear:both} 28 .modal-footer .btn+.btn{margin-bottom:0;margin-left:5px} 29 .modal-footer .btn-group .btn+.btn{margin-left:-1px} 30 .modal-footer .btn-block+.btn-block{margin-left:0}
js:CDN备用
1 /*! 2 * Bootstrap v3.0.3 (http://getbootstrap.com) 3 * Copyright 2013 Twitter, Inc. 4 * Licensed under http://www.apache.org/licenses/LICENSE-2.0 5 */ 6 7 if("undefined"==typeof jQuery)throw new Error("Bootstrap requires jQuery");+function(a){"use strict";function b(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var c in b)if(void 0!==a.style[c])return{end:b[c]}}a.fn.emulateTransitionEnd=function(b){var c=!1,d=this;a(this).one(a.support.transition.end,function(){c=!0});var e=function(){c||a(d).trigger(a.support.transition.end)};return setTimeout(e,b),this},a(function(){a.support.transition=b()})}(jQuery),+function(a){"use strict";var b='[data-dismiss="alert"]',c=function(c){a(c).on("click",b,this.close)};c.prototype.close=function(b){function c(){f.trigger("closed.bs.alert").remove()}var d=a(this),e=d.attr("data-target");e||(e=d.attr("href"),e=e&&e.replace(/.*(?=#[^\s]*$)/,""));var f=a(e);b&&b.preventDefault(),f.length||(f=d.hasClass("alert")?d:d.parent()),f.trigger(b=a.Event("close.bs.alert")),b.isDefaultPrevented()||(f.removeClass("in"),a.support.transition&&f.hasClass("fade")?f.one(a.support.transition.end,c).emulateTransitionEnd(150):c())};var d=a.fn.alert;a.fn.alert=function(b){return this.each(function(){var d=a(this),e=d.data("bs.alert");e||d.data("bs.alert",e=new c(this)),"string"==typeof b&&e[b].call(d)})},a.fn.alert.Constructor=c,a.fn.alert.noConflict=function(){return a.fn.alert=d,this},a(document).on("click.bs.alert.data-api",b,c.prototype.close)}(jQuery),+function(a){"use strict";var b=function(c,d){this.$element=a(c),this.options=a.extend({},b.DEFAULTS,d)};b.DEFAULTS={loadingText:"loading..."},b.prototype.setState=function(a){var b="disabled",c=this.$element,d=c.is("input")?"val":"html",e=c.data();a+="Text",e.resetText||c.data("resetText",c[d]()),c[d](e[a]||this.options[a]),setTimeout(function(){"loadingText"==a?c.addClass(b).attr(b,b):c.removeClass(b).removeAttr(b)},0)},b.prototype.toggle=function(){var a=this.$element.closest('[data-toggle="buttons"]'),b=!0;if(a.length){var c=this.$element.find("input");"radio"===c.prop("type")&&(c.prop("checked")&&this.$element.hasClass("active")?b=!1:a.find(".active").removeClass("active")),b&&c.prop("checked",!this.$element.hasClass("active")).trigger("change")}b&&this.$element.toggleClass("active")};var c=a.fn.button;a.fn.button=function(c){return this.each(function(){var d=a(this),e=d.data("bs.button"),f="object"==typeof c&&c;e||d.data("bs.button",e=new b(this,f)),"toggle"==c?e.toggle():c&&e.setState(c)})},a.fn.button.Constructor=b,a.fn.button.noConflict=function(){return a.fn.button=c,this},a(document).on("click.bs.button.data-api","[data-toggle^=button]",function(b){var c=a(b.target);c.hasClass("btn")||(c=c.closest(".btn")),c.button("toggle"),b.preventDefault()})}(jQuery),+function(a){"use strict";var b=function(b,c){this.$element=a(b),this.$indicators=this.$element.find(".carousel-indicators"),this.options=c,this.paused=this.sliding=this.interval=this.$active=this.$items=null,"hover"==this.options.pause&&this.$element.on("mouseenter",a.proxy(this.pause,this)).on("mouseleave",a.proxy(this.cycle,this))};b.DEFAULTS={interval:5e3,pause:"hover",wrap:!0},b.prototype.cycle=function(b){return b||(this.paused=!1),this.interval&&clearInterval(this.interval),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},b.prototype.getActiveIndex=function(){return this.$active=this.$element.find(".item.active"),this.$items=this.$active.parent().children(),this.$items.index(this.$active)},b.prototype.to=function(b){var c=this,d=this.getActiveIndex();return b>this.$items.length-1||0>b?void 0:this.sliding?this.$element.one("slid.bs.carousel",function(){c.to(b)}):d==b?this.pause().cycle():this.slide(b>d?"next":"prev",a(this.$items[b]))},b.prototype.pause=function(b){return b||(this.paused=!0),this.$element.find(".next, .prev").length&&a.support.transition.end&&(this.$element.trigger(a.support.transition.end),this.cycle(!0)),this.interval=clearInterval(this.interval),this},b.prototype.next=function(){return this.sliding?void 0:this.slide("next")},b.prototype.prev=function(){return this.sliding?void 0:this.slide("prev")},b.prototype.slide=function(b,c){var d=this.$element.find(".item.active"),e=c||d[b](),f=this.interval,g="next"==b?"left":"right",h="next"==b?"first":"last",i=this;if(!e.length){if(!this.options.wrap)return;e=this.$element.find(".item")[h]()}this.sliding=!0,f&&this.pause();var j=a.Event("slide.bs.carousel",{relatedTarget:e[0],direction:g});if(!e.hasClass("active")){if(this.$indicators.length&&(this.$indicators.find(".active").removeClass("active"),this.$element.one("slid.bs.carousel",function(){var b=a(i.$indicators.children()[i.getActiveIndex()]);b&&b.addClass("active")})),a.support.transition&&this.$element.hasClass("slide")){if(this.$element.trigger(j),j.isDefaultPrevented())return;e.addClass(b),e[0].offsetWidth,d.addClass(g),e.addClass(g),d.one(a.support.transition.end,function(){e.removeClass([b,g].join(" ")).addClass("active"),d.removeClass(["active",g].join(" ")),i.sliding=!1,setTimeout(function(){i.$element.trigger("slid.bs.carousel")},0)}).emulateTransitionEnd(600)}else{if(this.$element.trigger(j),j.isDefaultPrevented())return;d.removeClass("active"),e.addClass("active"),this.sliding=!1,this.$element.trigger("slid.bs.carousel")}return f&&this.cycle(),this}};var c=a.fn.carousel;a.fn.carousel=function(c){return this.each(function(){var d=a(this),e=d.data("bs.carousel"),f=a.extend({},b.DEFAULTS,d.data(),"object"==typeof c&&c),g="string"==typeof c?c:f.slide;e||d.data("bs.carousel",e=new b(this,f)),"number"==typeof c?e.to(c):g?e[g]():f.interval&&e.pause().cycle()})},a.fn.carousel.Constructor=b,a.fn.carousel.noConflict=function(){return a.fn.carousel=c,this},a(document).on("click.bs.carousel.data-api","[data-slide], [data-slide-to]",function(b){var c,d=a(this),e=a(d.attr("data-target")||(c=d.attr("href"))&&c.replace(/.*(?=#[^\s]+$)/,"")),f=a.extend({},e.data(),d.data()),g=d.attr("data-slide-to");g&&(f.interval=!1),e.carousel(f),(g=d.attr("data-slide-to"))&&e.data("bs.carousel").to(g),b.preventDefault()}),a(window).on("load",function(){a('[data-ride="carousel"]').each(function(){var b=a(this);b.carousel(b.data())})})}(jQuery),+function(a){"use strict";var b=function(c,d){this.$element=a(c),this.options=a.extend({},b.DEFAULTS,d),this.transitioning=null,this.options.parent&&(this.$parent=a(this.options.parent)),this.options.toggle&&this.toggle()};b.DEFAULTS={toggle:!0},b.prototype.dimension=function(){var a=this.$element.hasClass("width");return a?"width":"height"},b.prototype.show=function(){if(!this.transitioning&&!this.$element.hasClass("in")){var b=a.Event("show.bs.collapse");if(this.$element.trigger(b),!b.isDefaultPrevented()){var c=this.$parent&&this.$parent.find("> .panel > .in");if(c&&c.length){var d=c.data("bs.collapse");if(d&&d.transitioning)return;c.collapse("hide"),d||c.data("bs.collapse",null)}var e=this.dimension();this.$element.removeClass("collapse").addClass("collapsing")[e](0),this.transitioning=1;var f=function(){this.$element.removeClass("collapsing").addClass("in")[e]("auto"),this.transitioning=0,this.$element.trigger("shown.bs.collapse")};if(!a.support.transition)return f.call(this);var g=a.camelCase(["scroll",e].join("-"));this.$element.one(a.support.transition.end,a.proxy(f,this)).emulateTransitionEnd(350)[e](this.$element[0][g])}}},b.prototype.hide=function(){if(!this.transitioning&&this.$element.hasClass("in")){var b=a.Event("hide.bs.collapse");if(this.$element.trigger(b),!b.isDefaultPrevented()){var c=this.dimension();this.$element[c](this.$element[c]())[0].offsetHeight,this.$element.addClass("collapsing").removeClass("collapse").removeClass("in"),this.transitioning=1;var d=function(){this.transitioning=0,this.$element.trigger("hidden.bs.collapse").removeClass("collapsing").addClass("collapse")};return a.support.transition?(this.$element[c](0).one(a.support.transition.end,a.proxy(d,this)).emulateTransitionEnd(350),void 0):d.call(this)}}},b.prototype.toggle=function(){this[this.$element.hasClass("in")?"hide":"show"]()};var c=a.fn.collapse;a.fn.collapse=function(c){return this.each(function(){var d=a(this),e=d.data("bs.collapse"),f=a.extend({},b.DEFAULTS,d.data(),"object"==typeof c&&c);e||d.data("bs.collapse",e=new b(this,f)),"string"==typeof c&&e[c]()})},a.fn.collapse.Constructor=b,a.fn.collapse.noConflict=function(){return a.fn.collapse=c,this},a(document).on("click.bs.collapse.data-api","[data-toggle=collapse]",function(b){var c,d=a(this),e=d.attr("data-target")||b.preventDefault()||(c=d.attr("href"))&&c.replace(/.*(?=#[^\s]+$)/,""),f=a(e),g=f.data("bs.collapse"),h=g?"toggle":d.data(),i=d.attr("data-parent"),j=i&&a(i);g&&g.transitioning||(j&&j.find('[data-toggle=collapse][data-parent="'+i+'"]').not(d).addClass("collapsed"),d[f.hasClass("in")?"addClass":"removeClass"]("collapsed")),f.collapse(h)})}(jQuery),+function(a){"use strict";function b(){a(d).remove(),a(e).each(function(b){var d=c(a(this));d.hasClass("open")&&(d.trigger(b=a.Event("hide.bs.dropdown")),b.isDefaultPrevented()||d.removeClass("open").trigger("hidden.bs.dropdown"))})}function c(b){var c=b.attr("data-target");c||(c=b.attr("href"),c=c&&/#/.test(c)&&c.replace(/.*(?=#[^\s]*$)/,""));var d=c&&a(c);return d&&d.length?d:b.parent()}var d=".dropdown-backdrop",e="[data-toggle=dropdown]",f=function(b){a(b).on("click.bs.dropdown",this.toggle)};f.prototype.toggle=function(d){var e=a(this);if(!e.is(".disabled, :disabled")){var f=c(e),g=f.hasClass("open");if(b(),!g){if("ontouchstart"in document.documentElement&&!f.closest(".navbar-nav").length&&a('<div class="dropdown-backdrop"/>').insertAfter(a(this)).on("click",b),f.trigger(d=a.Event("show.bs.dropdown")),d.isDefaultPrevented())return;f.toggleClass("open").trigger("shown.bs.dropdown"),e.focus()}return!1}},f.prototype.keydown=function(b){if(/(38|40|27)/.test(b.keyCode)){var d=a(this);if(b.preventDefault(),b.stopPropagation(),!d.is(".disabled, :disabled")){var f=c(d),g=f.hasClass("open");if(!g||g&&27==b.keyCode)return 27==b.which&&f.find(e).focus(),d.click();var h=a("[role=menu] li:not(.divider):visible a",f);if(h.length){var i=h.index(h.filter(":focus"));38==b.keyCode&&i>0&&i--,40==b.keyCode&&i<h.length-1&&i++,~i||(i=0),h.eq(i).focus()}}}};var g=a.fn.dropdown;a.fn.dropdown=function(b){return this.each(function(){var c=a(this),d=c.data("bs.dropdown");d||c.data("bs.dropdown",d=new f(this)),"string"==typeof b&&d[b].call(c)})},a.fn.dropdown.Constructor=f,a.fn.dropdown.noConflict=function(){return a.fn.dropdown=g,this},a(document).on("click.bs.dropdown.data-api",b).on("click.bs.dropdown.data-api",".dropdown form",function(a){a.stopPropagation()}).on("click.bs.dropdown.data-api",e,f.prototype.toggle).on("keydown.bs.dropdown.data-api",e+", [role=menu]",f.prototype.keydown)}(jQuery),+function(a){"use strict";var b=function(b,c){this.options=c,this.$element=a(b),this.$backdrop=this.isShown=null,this.options.remote&&this.$element.load(this.options.remote)};b.DEFAULTS={backdrop:!0,keyboard:!0,show:!0},b.prototype.toggle=function(a){return this[this.isShown?"hide":"show"](a)},b.prototype.show=function(b){var c=this,d=a.Event("show.bs.modal",{relatedTarget:b});this.$element.trigger(d),this.isShown||d.isDefaultPrevented()||(this.isShown=!0,this.escape(),this.$element.on("click.dismiss.modal",'[data-dismiss="modal"]',a.proxy(this.hide,this)),this.backdrop(function(){var d=a.support.transition&&c.$element.hasClass("fade");c.$element.parent().length||c.$element.appendTo(document.body),c.$element.show(),d&&c.$element[0].offsetWidth,c.$element.addClass("in").attr("aria-hidden",!1),c.enforceFocus();var e=a.Event("shown.bs.modal",{relatedTarget:b});d?c.$element.find(".modal-dialog").one(a.support.transition.end,function(){c.$element.focus().trigger(e)}).emulateTransitionEnd(300):c.$element.focus().trigger(e)}))},b.prototype.hide=function(b){b&&b.preventDefault(),b=a.Event("hide.bs.modal"),this.$element.trigger(b),this.isShown&&!b.isDefaultPrevented()&&(this.isShown=!1,this.escape(),a(document).off("focusin.bs.modal"),this.$element.removeClass("in").attr("aria-hidden",!0).off("click.dismiss.modal"),a.support.transition&&this.$element.hasClass("fade")?this.$element.one(a.support.transition.end,a.proxy(this.hideModal,this)).emulateTransitionEnd(300):this.hideModal())},b.prototype.enforceFocus=function(){a(document).off("focusin.bs.modal").on("focusin.bs.modal",a.proxy(function(a){this.$element[0]===a.target||this.$element.has(a.target).length||this.$element.focus()},this))},b.prototype.escape=function(){this.isShown&&this.options.keyboard?this.$element.on("keyup.dismiss.bs.modal",a.proxy(function(a){27==a.which&&this.hide()},this)):this.isShown||this.$element.off("keyup.dismiss.bs.modal")},b.prototype.hideModal=function(){var a=this;this.$element.hide(),this.backdrop(function(){a.removeBackdrop(),a.$element.trigger("hidden.bs.modal")})},b.prototype.removeBackdrop=function(){this.$backdrop&&this.$backdrop.remove(),this.$backdrop=null},b.prototype.backdrop=function(b){var c=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var d=a.support.transition&&c;if(this.$backdrop=a('<div class="modal-backdrop '+c+'" />').appendTo(document.body),this.$element.on("click.dismiss.modal",a.proxy(function(a){a.target===a.currentTarget&&("static"==this.options.backdrop?this.$element[0].focus.call(this.$element[0]):this.hide.call(this))},this)),d&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),!b)return;d?this.$backdrop.one(a.support.transition.end,b).emulateTransitionEnd(150):b()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),a.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(a.support.transition.end,b).emulateTransitionEnd(150):b()):b&&b()};var c=a.fn.modal;a.fn.modal=function(c,d){return this.each(function(){var e=a(this),f=e.data("bs.modal"),g=a.extend({},b.DEFAULTS,e.data(),"object"==typeof c&&c);f||e.data("bs.modal",f=new b(this,g)),"string"==typeof c?f[c](d):g.show&&f.show(d)})},a.fn.modal.Constructor=b,a.fn.modal.noConflict=function(){return a.fn.modal=c,this},a(document).on("click.bs.modal.data-api",'[data-toggle="modal"]',function(b){var c=a(this),d=c.attr("href"),e=a(c.attr("data-target")||d&&d.replace(/.*(?=#[^\s]+$)/,"")),f=e.data("modal")?"toggle":a.extend({remote:!/#/.test(d)&&d},e.data(),c.data());b.preventDefault(),e.modal(f,this).one("hide",function(){c.is(":visible")&&c.focus()})}),a(document).on("show.bs.modal",".modal",function(){a(document.body).addClass("modal-open")}).on("hidden.bs.modal",".modal",function(){a(document.body).removeClass("modal-open")})}(jQuery),+function(a){"use strict";var b=function(a,b){this.type=this.options=this.enabled=this.timeout=this.hoverState=this.$element=null,this.init("tooltip",a,b)};b.DEFAULTS={animation:!0,placement:"top",selector:!1,template:'<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',trigger:"hover focus",title:"",delay:0,html:!1,container:!1},b.prototype.init=function(b,c,d){this.enabled=!0,this.type=b,this.$element=a(c),this.options=this.getOptions(d);for(var e=this.options.trigger.split(" "),f=e.length;f--;){var g=e[f];if("click"==g)this.$element.on("click."+this.type,this.options.selector,a.proxy(this.toggle,this));else if("manual"!=g){var h="hover"==g?"mouseenter":"focus",i="hover"==g?"mouseleave":"blur";this.$element.on(h+"."+this.type,this.options.selector,a.proxy(this.enter,this)),this.$element.on(i+"."+this.type,this.options.selector,a.proxy(this.leave,this))}}this.options.selector?this._options=a.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},b.prototype.getDefaults=function(){return b.DEFAULTS},b.prototype.getOptions=function(b){return b=a.extend({},this.getDefaults(),this.$element.data(),b),b.delay&&"number"==typeof b.delay&&(b.delay={show:b.delay,hide:b.delay}),b},b.prototype.getDelegateOptions=function(){var b={},c=this.getDefaults();return this._options&&a.each(this._options,function(a,d){c[a]!=d&&(b[a]=d)}),b},b.prototype.enter=function(b){var c=b instanceof this.constructor?b:a(b.currentTarget)[this.type](this.getDelegateOptions()).data("bs."+this.type);return clearTimeout(c.timeout),c.hoverState="in",c.options.delay&&c.options.delay.show?(c.timeout=setTimeout(function(){"in"==c.hoverState&&c.show()},c.options.delay.show),void 0):c.show()},b.prototype.leave=function(b){var c=b instanceof this.constructor?b:a(b.currentTarget)[this.type](this.getDelegateOptions()).data("bs."+this.type);return clearTimeout(c.timeout),c.hoverState="out",c.options.delay&&c.options.delay.hide?(c.timeout=setTimeout(function(){"out"==c.hoverState&&c.hide()},c.options.delay.hide),void 0):c.hide()},b.prototype.show=function(){var b=a.Event("show.bs."+this.type);if(this.hasContent()&&this.enabled){if(this.$element.trigger(b),b.isDefaultPrevented())return;var c=this.tip();this.setContent(),this.options.animation&&c.addClass("fade");var d="function"==typeof this.options.placement?this.options.placement.call(this,c[0],this.$element[0]):this.options.placement,e=/\s?auto?\s?/i,f=e.test(d);f&&(d=d.replace(e,"")||"top"),c.detach().css({top:0,left:0,display:"block"}).addClass(d),this.options.container?c.appendTo(this.options.container):c.insertAfter(this.$element);var g=this.getPosition(),h=c[0].offsetWidth,i=c[0].offsetHeight;if(f){var j=this.$element.parent(),k=d,l=document.documentElement.scrollTop||document.body.scrollTop,m="body"==this.options.container?window.innerWidth:j.outerWidth(),n="body"==this.options.container?window.innerHeight:j.outerHeight(),o="body"==this.options.container?0:j.offset().left;d="bottom"==d&&g.top+g.height+i-l>n?"top":"top"==d&&g.top-l-i<0?"bottom":"right"==d&&g.right+h>m?"left":"left"==d&&g.left-h<o?"right":d,c.removeClass(k).addClass(d)}var p=this.getCalculatedOffset(d,g,h,i);this.applyPlacement(p,d),this.$element.trigger("shown.bs."+this.type)}},b.prototype.applyPlacement=function(a,b){var c,d=this.tip(),e=d[0].offsetWidth,f=d[0].offsetHeight,g=parseInt(d.css("margin-top"),10),h=parseInt(d.css("margin-left"),10);isNaN(g)&&(g=0),isNaN(h)&&(h=0),a.top=a.top+g,a.left=a.left+h,d.offset(a).addClass("in");var i=d[0].offsetWidth,j=d[0].offsetHeight;if("top"==b&&j!=f&&(c=!0,a.top=a.top+f-j),/bottom|top/.test(b)){var k=0;a.left<0&&(k=-2*a.left,a.left=0,d.offset(a),i=d[0].offsetWidth,j=d[0].offsetHeight),this.replaceArrow(k-e+i,i,"left")}else this.replaceArrow(j-f,j,"top");c&&d.offset(a)},b.prototype.replaceArrow=function(a,b,c){this.arrow().css(c,a?50*(1-a/b)+"%":"")},b.prototype.setContent=function(){var a=this.tip(),b=this.getTitle();a.find(".tooltip-inner")[this.options.html?"html":"text"](b),a.removeClass("fade in top bottom left right")},b.prototype.hide=function(){function b(){"in"!=c.hoverState&&d.detach()}var c=this,d=this.tip(),e=a.Event("hide.bs."+this.type);return this.$element.trigger(e),e.isDefaultPrevented()?void 0:(d.removeClass("in"),a.support.transition&&this.$tip.hasClass("fade")?d.one(a.support.transition.end,b).emulateTransitionEnd(150):b(),this.$element.trigger("hidden.bs."+this.type),this)},b.prototype.fixTitle=function(){var a=this.$element;(a.attr("title")||"string"!=typeof a.attr("data-original-title"))&&a.attr("data-original-title",a.attr("title")||"").attr("title","")},b.prototype.hasContent=function(){return this.getTitle()},b.prototype.getPosition=function(){var b=this.$element[0];return a.extend({},"function"==typeof b.getBoundingClientRect?b.getBoundingClientRect():{width:b.offsetWidth,height:b.offsetHeight},this.$element.offset())},b.prototype.getCalculatedOffset=function(a,b,c,d){return"bottom"==a?{top:b.top+b.height,left:b.left+b.width/2-c/2}:"top"==a?{top:b.top-d,left:b.left+b.width/2-c/2}:"left"==a?{top:b.top+b.height/2-d/2,left:b.left-c}:{top:b.top+b.height/2-d/2,left:b.left+b.width}},b.prototype.getTitle=function(){var a,b=this.$element,c=this.options;return a=b.attr("data-original-title")||("function"==typeof c.title?c.title.call(b[0]):c.title)},b.prototype.tip=function(){return this.$tip=this.$tip||a(this.options.template)},b.prototype.arrow=function(){return this.$arrow=this.$arrow||this.tip().find(".tooltip-arrow")},b.prototype.validate=function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},b.prototype.enable=function(){this.enabled=!0},b.prototype.disable=function(){this.enabled=!1},b.prototype.toggleEnabled=function(){this.enabled=!this.enabled},b.prototype.toggle=function(b){var c=b?a(b.currentTarget)[this.type](this.getDelegateOptions()).data("bs."+this.type):this;c.tip().hasClass("in")?c.leave(c):c.enter(c)},b.prototype.destroy=function(){this.hide().$element.off("."+this.type).removeData("bs."+this.type)};var c=a.fn.tooltip;a.fn.tooltip=function(c){return this.each(function(){var d=a(this),e=d.data("bs.tooltip"),f="object"==typeof c&&c;e||d.data("bs.tooltip",e=new b(this,f)),"string"==typeof c&&e[c]()})},a.fn.tooltip.Constructor=b,a.fn.tooltip.noConflict=function(){return a.fn.tooltip=c,this}}(jQuery),+function(a){"use strict";var b=function(a,b){this.init("popover",a,b)};if(!a.fn.tooltip)throw new Error("Popover requires tooltip.js");b.DEFAULTS=a.extend({},a.fn.tooltip.Constructor.DEFAULTS,{placement:"right",trigger:"click",content:"",template:'<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'}),b.prototype=a.extend({},a.fn.tooltip.Constructor.prototype),b.prototype.constructor=b,b.prototype.getDefaults=function(){return b.DEFAULTS},b.prototype.setContent=function(){var a=this.tip(),b=this.getTitle(),c=this.getContent();a.find(".popover-title")[this.options.html?"html":"text"](b),a.find(".popover-content")[this.options.html?"html":"text"](c),a.removeClass("fade top bottom left right in"),a.find(".popover-title").html()||a.find(".popover-title").hide()},b.prototype.hasContent=function(){return this.getTitle()||this.getContent()},b.prototype.getContent=function(){var a=this.$element,b=this.options;return a.attr("data-content")||("function"==typeof b.content?b.content.call(a[0]):b.content)},b.prototype.arrow=function(){return this.$arrow=this.$arrow||this.tip().find(".arrow")},b.prototype.tip=function(){return this.$tip||(this.$tip=a(this.options.template)),this.$tip};var c=a.fn.popover;a.fn.popover=function(c){return this.each(function(){var d=a(this),e=d.data("bs.popover"),f="object"==typeof c&&c;e||d.data("bs.popover",e=new b(this,f)),"string"==typeof c&&e[c]()})},a.fn.popover.Constructor=b,a.fn.popover.noConflict=function(){return a.fn.popover=c,this}}(jQuery),+function(a){"use strict";function b(c,d){var e,f=a.proxy(this.process,this);this.$element=a(c).is("body")?a(window):a(c),this.$body=a("body"),this.$scrollElement=this.$element.on("scroll.bs.scroll-spy.data-api",f),this.options=a.extend({},b.DEFAULTS,d),this.selector=(this.options.target||(e=a(c).attr("href"))&&e.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.offsets=a([]),this.targets=a([]),this.activeTarget=null,this.refresh(),this.process()}b.DEFAULTS={offset:10},b.prototype.refresh=function(){var b=this.$element[0]==window?"offset":"position";this.offsets=a([]),this.targets=a([]);var c=this;this.$body.find(this.selector).map(function(){var d=a(this),e=d.data("target")||d.attr("href"),f=/^#\w/.test(e)&&a(e);return f&&f.length&&[[f[b]().top+(!a.isWindow(c.$scrollElement.get(0))&&c.$scrollElement.scrollTop()),e]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){c.offsets.push(this[0]),c.targets.push(this[1])})},b.prototype.process=function(){var a,b=this.$scrollElement.scrollTop()+this.options.offset,c=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,d=c-this.$scrollElement.height(),e=this.offsets,f=this.targets,g=this.activeTarget;if(b>=d)return g!=(a=f.last()[0])&&this.activate(a);for(a=e.length;a--;)g!=f[a]&&b>=e[a]&&(!e[a+1]||b<=e[a+1])&&this.activate(f[a])},b.prototype.activate=function(b){this.activeTarget=b,a(this.selector).parents(".active").removeClass("active");var c=this.selector+'[data-target="'+b+'"],'+this.selector+'[href="'+b+'"]',d=a(c).parents("li").addClass("active");d.parent(".dropdown-menu").length&&(d=d.closest("li.dropdown").addClass("active")),d.trigger("activate.bs.scrollspy")};var c=a.fn.scrollspy;a.fn.scrollspy=function(c){return this.each(function(){var d=a(this),e=d.data("bs.scrollspy"),f="object"==typeof c&&c;e||d.data("bs.scrollspy",e=new b(this,f)),"string"==typeof c&&e[c]()})},a.fn.scrollspy.Constructor=b,a.fn.scrollspy.noConflict=function(){return a.fn.scrollspy=c,this},a(window).on("load",function(){a('[data-spy="scroll"]').each(function(){var b=a(this);b.scrollspy(b.data())})})}(jQuery),+function(a){"use strict";var b=function(b){this.element=a(b)};b.prototype.show=function(){var b=this.element,c=b.closest("ul:not(.dropdown-menu)"),d=b.data("target");if(d||(d=b.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,"")),!b.parent("li").hasClass("active")){var e=c.find(".active:last a")[0],f=a.Event("show.bs.tab",{relatedTarget:e});if(b.trigger(f),!f.isDefaultPrevented()){var g=a(d);this.activate(b.parent("li"),c),this.activate(g,g.parent(),function(){b.trigger({type:"shown.bs.tab",relatedTarget:e})})}}},b.prototype.activate=function(b,c,d){function e(){f.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),b.addClass("active"),g?(b[0].offsetWidth,b.addClass("in")):b.removeClass("fade"),b.parent(".dropdown-menu")&&b.closest("li.dropdown").addClass("active"),d&&d()}var f=c.find("> .active"),g=d&&a.support.transition&&f.hasClass("fade");g?f.one(a.support.transition.end,e).emulateTransitionEnd(150):e(),f.removeClass("in")};var c=a.fn.tab;a.fn.tab=function(c){return this.each(function(){var d=a(this),e=d.data("bs.tab");e||d.data("bs.tab",e=new b(this)),"string"==typeof c&&e[c]()})},a.fn.tab.Constructor=b,a.fn.tab.noConflict=function(){return a.fn.tab=c,this},a(document).on("click.bs.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(b){b.preventDefault(),a(this).tab("show")})}(jQuery),+function(a){"use strict";var b=function(c,d){this.options=a.extend({},b.DEFAULTS,d),this.$window=a(window).on("scroll.bs.affix.data-api",a.proxy(this.checkPosition,this)).on("click.bs.affix.data-api",a.proxy(this.checkPositionWithEventLoop,this)),this.$element=a(c),this.affixed=this.unpin=null,this.checkPosition()};b.RESET="affix affix-top affix-bottom",b.DEFAULTS={offset:0},b.prototype.checkPositionWithEventLoop=function(){setTimeout(a.proxy(this.checkPosition,this),1)},b.prototype.checkPosition=function(){if(this.$element.is(":visible")){var c=a(document).height(),d=this.$window.scrollTop(),e=this.$element.offset(),f=this.options.offset,g=f.top,h=f.bottom;"object"!=typeof f&&(h=g=f),"function"==typeof g&&(g=f.top()),"function"==typeof h&&(h=f.bottom());var i=null!=this.unpin&&d+this.unpin<=e.top?!1:null!=h&&e.top+this.$element.height()>=c-h?"bottom":null!=g&&g>=d?"top":!1;this.affixed!==i&&(this.unpin&&this.$element.css("top",""),this.affixed=i,this.unpin="bottom"==i?e.top-d:null,this.$element.removeClass(b.RESET).addClass("affix"+(i?"-"+i:"")),"bottom"==i&&this.$element.offset({top:document.body.offsetHeight-h-this.$element.height()}))}};var c=a.fn.affix;a.fn.affix=function(c){return this.each(function(){var d=a(this),e=d.data("bs.affix"),f="object"==typeof c&&c;e||d.data("bs.affix",e=new b(this,f)),"string"==typeof c&&e[c]()})},a.fn.affix.Constructor=b,a.fn.affix.noConflict=function(){return a.fn.affix=c,this},a(window).on("load",function(){a('[data-spy="affix"]').each(function(){var b=a(this),c=b.data();c.offset=c.offset||{},c.offsetBottom&&(c.offset.bottom=c.offsetBottom),c.offsetTop&&(c.offset.top=c.offsetTop),b.affix(c)})})}(jQuery);
【2015年11月25日 09:33:20】
无限级联CSS
不用在ul或li上加任何class即可实现树型无限级联，且代码超简单：
如图：
CSS:
1 .tree{width:188px;border-right:1px solid #b4c5dc;font-size:12px;} 2 .tree > ul{padding-left:10px;} 3 .tree li{height:28px;line-height:28px;cursor:pointer;background:url("../images/end/menu/menu-open.png") no-repeat left center;text-indent:15px;} 4 .tree li.active{background:url("../images/end/menu/menu-close.png") no-repeat left center;} 5 .tree li ~ ul {padding-left:22px;background:#ebeff8;display:none;overflow:auto;overflow-y:hidden;overflow-x }
HTML:
1 <div class="tree lft"> 2 <ul> 3 <li>壹加贰联合不动产集团</li> 4 <ul> 5 <li>集团本部</li> 6 <ul> 7 <li>人力资源</li> 8 <ul> 9 <li>1部</li> 10 <ul> 11 <li>1组</li> 12 </ul> 13 </ul> 14 </ul> 15 </ul> 16 <li>石家庄壹加贰联合不动产集团</li> 17 <li>南京联合不动产集团</li> 18 <li>郑州壹加贰联合不动产集团</li> 19 <li>沧州壹加贰联合不动产集团</li> 20 <li>承德壹加贰联合不动产集团</li> 21 <li>点到科技</li> 22 <li>二手房事业部</li> 23 </ul> 24 </div><!-- /tree -->
js:
1 function menuTree(){ 2 $(".tree li").click(function(){ 3 var oThis = $(this); 4 //console.log(oThis.children()); 5 if(oThis.attr("class")!="active"){ 6 oThis.addClass("active"); 7 oThis.next().fadeIn("fast"); 8 }else{ 9 oThis.removeClass("active"); 10 oThis.next().fadeOut("fast"); 11 } 12 }); 13 14 } 15 menuTree();
第7、10行使用.next()，使得DOM结构非常简单
播放音乐js实现
js代码：无需jQuery支持即可实现。
1 /* 2 playSound(strId,strUrl,strMP3PlayerUrl); 3 mp3player.swf 4 */ 5 function playSound(){ 6 var oDiv = document.createElement("div"); 7 oDiv.innerHTML='<div style="opacity:0;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0" id="'+arguments[0]+'"></div>'; 8 document.body.appendChild(oDiv); 9 document.getElementById(arguments[0]).innerHTML= ('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"width="200" height="20" id="HjMp3Player" align="middle" ><param name="sameDomain" value="always" /><param name="movie" value="' +arguments[1]+ '" /><param name="quality" value="high" /><param name="scale" value="noScale" /><param name="allowFullScreen" value="true" /><param name="wmode" value="window" /><param name="flashvars" value="' +arguments[1]+ '&autostart=true" /><param name="allowFullScreen" value="true" /><embed src="'+arguments[2]+'" quality="high" scale="noScale" wmode="transparent" allowFullScreen="true" bgcolor="#ffffff" width="200" height="20" flashvars="file=' +arguments[1]+ '&autostart=true" name="HjMp3Player" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>'); 10 }
playSound()函数需要传三个参数，分别是：id，音频文件地址，播放器文件地址，都是以字符串的形式传入
playSound("hidemp3","http://localhost/project/eastco/sound/Track20.mp3","http://localhost/project/eastco/sound/mp3player.swf");
【2015年12月17日 09:59:26】
EXCEL筛选手机运营商，公式：
=IF(OR(--LEFT(A1,3)={130,131,132,155,156,185,186,145,176}),"联通",IF(OR(--LEFT(A1,3)={133,153,177,189,180,181}),"电信",IF(OR(--
LEFT(A1,3)={134,135,136,137,138,139,147,150,151,152,157,158,159,178,182,183,184,187,188}),"移动","非手机号"))
【Tue Jan 19 2016 10:51:00】
1 <VirtualHost *:80> 2 ServerAdmin webmaster@example.com ——管理员邮箱（可以随便写一个） 3 DocumentRoot "/home/phpok-com" ——网站目录 4 ServerName example.com —— 要绑定的域名 5 ServerAlias www.example.com ——要绑定的别名，如果有多个别名就用英文逗号隔开 6 CustomLog logs/example.com_custom_log——用户日志格式（这一行也可以为空） 7 ErrorLog logs/example.com_error_log ——错误日志（也可以为空） 8 </VirtualHost>
具体步骤：
1.修改httpd.conf
在ln563，把#Include conf/extra/httpd-vhosts.conf前面的#去掉，意思是让httpd.conf文件包含httpd-vhosts.conf这个配置文件，这是apache的配置模块化的一个表现
2.修改httpd-vhosts.conf（在【conf/extra/】目录下，因为Include导入了这个目录下的【httpd-vhosts.conf】这个文件）
添加如下代码（有些可能文件里面就有，改一下就可以了）：
<VirtualHost *:80> ServerAdmin webmaster@dummy-host.x DocumentRoot "D:/AppServ/www/my012" ServerName localhost ServerAlias www.dummy-host.x ErrorLog "logs/dummy-host.x-error.log" CustomLog "logs/dummy-host.x-access.log" common </VirtualHost>
如果设定dedecms的上级目录是：{cmspath}/html，
上级目录：就是【{cmspath}/html/】下新建一个目录。eg：【{cmspath}/html/joinus】
CMS根目录：【{cmspath}/】下新建一个目录。eg：【{cmspath}/proserv】
站点根目录：【/】下新建一个目录。eg：【/aboutus】
注：{cmspath}的意思是，在打开后台【系统】→【系统基本参数】→【核心设置】可以看到第二项，【DedeCMS安装目录】
这个就是{cmspath}所解析出来的路径。详细参考织梦DEDECMS标签{cmspath}意思解释
第一次操作请先备份
第一步：httpd.conf文件 （在C:\AppServ\Apache2.2\conf）
1、在apache配置文件(conf)httpd.conf里面找到
# Virtual hosts
Include conf/extra/httpd-vhosts.conf 把这行的#去除,去除#说明开始载入扩展 (extra是扩展文件夹）
2、然后在该文件找到：
<Directory /> Options FollowSymLinks AllowOverride None Order deny,allow deny from all Satisfy all </Directory>
把deny中的deny改成了allow。（经本人测试，此步骤可以省略）
3、在该文件找到（本人安装在D盘）
<Directory "d:/AppServ/www">
确保这地址要比DocumentRoot "C:/AppServ/www" 地址范围广，改为“<Directory "C:/AppServ"> ”（经本人测试，此步骤可以省略）
第二步：在extra文件夹里面找到 httpd-vhosts.conf (第一步时引入的)
在底部仿照例子为，以下这2项是必须的，其他可以根据自己需求添加：
#Tue Jan 19 2016 14:49:23 GMT+0800 <VirtualHost *:80> ServerAdmin webmaster@dummy-host.x DocumentRoot "D:/AppServ/www" ServerName 127.0.0.1 ServerAlias localhost ErrorLog "logs/dummy-host.x-error.log" CustomLog "logs/dummy-host.x-access.log" common </VirtualHost> <VirtualHost *:80> ServerAdmin webmaster@dummy-host.x DocumentRoot "D:/AppServ/www/project/my012" ServerName 127.0.0.2 ServerAlias www.dummy-host.x ErrorLog "logs/dummy-host.x-error.log" CustomLog "logs/dummy-host.x-access.log" common </VirtualHost>
第一个是为了保证其他文件在【D:/AppServ/www】正常访问，别名用【localhost】
注：第ln203，【#LoadModule vhost_alias_module modules/mod_vhost_alias.so】去掉#意思是，启用apache的虚拟主机功能。（经本人测试，此步骤可以省略）
【Thu Mar 31 2016 08:58:38 GMT+0800】
Bootstrap模态框:
HTML:
1 <div id="myModal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static"> 2 <div class="modal-dialog" role="document"> 3 <div class="modal-content"> 4 <div class="modal-header"> 5 <button type="button" class="close" data-dismiss="modal" aria-hidden="true" data-role="none">×</button> 6 <h4 class="modal-title" id="myModalLabel">Modal title</h4> 7 </div><!-- /modal-header --> 8 <div class="modal-body"> 9 在这里添加一些文本 10 </div><!-- /modal-body --> 11 <div class="modal-footer"> 12 <button type="button" class="btn btn-default" data-dismiss="modal" data-role="none">关闭</button> 13 <button type="button" class="btn btn-primary" data-dismiss="modal" data-role="none">提交更改</button> 14 </div><!-- /modal-footer --> 15 </div><!-- /modal-content --> 16 </div><!-- /modal-dialog --> 17 </div><!-- /modalBox -->
CSS:
1 /*modalBox*/ 2 .fade{opacity:0;-webkit-transition:opacity .15s linear;transition:opacity .15s linear} 3 .fade.in{opacity:1} 4 .close{float:right;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;filter:alpha(opacity=20)} 5 button.close{padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none} 6 .btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.428571429;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;background-image:none;border:1px solid transparent;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none} 7 .btn-default{color:#333;background-color:#fff;border-color:#ccc} 8 .btn-primary{color:#fff;background-color:#428bca;border-color:#357ebd} 9 10 .modal-open{overflow:hidden} 11 .modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;display:none;overflow:auto;overflow-y:scroll} 12 .modal.fade .modal-dialog{-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);transform:translate(0,-25%);-webkit-transition:-webkit-transform .3s ease-out;-moz-transition:-moz-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out} 13 .modal.in .modal-dialog{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)} 14 .modal-dialog{position:relative;z-index:1050;width:auto;margin:0 10px;} 15 .modal-content{position:relative;background-color:#fff;border:1px solid #999;border:1px solid rgba(0,0,0,.2);border-radius:6px;outline:0;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5);background-clip:padding-box} 16 .modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1030;background-color:#000} 17 .modal-backdrop.fade{opacity:0;filter:alpha(opacity=0)} 18 .modal-backdrop.in{opacity:.5;filter:alpha(opacity=50)} 19 .modal-header{min-height:16.43px;padding:15px;border-bottom:1px solid #e5e5e5} 20 .modal-header .close{margin-top:-2px} 21 .modal-title{margin:0;line-height:1.428571429} 22 .modal-body{position:relative;padding:20px} 23 .modal-footer{padding:19px 20px 20px;margin-top:15px;text-align:right;border-top:1px solid #e5e5e5} 24 .modal-footer:after,.modal-footer:before{display:table;content:" "} 25 .modal-footer:after{clear:both} 26 .modal-footer:after,.modal-footer:before{display:table;content:" "} 27 .modal-footer:after{clear:both} 28 .modal-footer .btn+.btn{margin-bottom:0;margin-left:5px} 29 .modal-footer .btn-group .btn+.btn{margin-left:-1px} 30 .modal-footer .btn-block+.btn-block{margin-left:0} 31 /* END modalBox*/
bootstrap.min.js on CDN://cdn.bootcss.com/bootstrap/3.0.3/js/bootstrap.min.js
js：解决模态框垂直居中问题
1 //模态框居中的控制 2 function centerModals(){ 3 4 //遍历每一个模态框 5 $('.modal').each(function(i){ 6 var $clone = $(this).clone().css('display', 'block').appendTo('body'); 7 var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2); 8 top = top > 0 ? top : 0; 9 $clone.remove(); 10 $(this).find('.modal-content').css("margin-top", top-30); //修正原先已经有的30个像素 上面CSS（ln14）margin:0 10px; 11 }); 12 13 $('.modal').on('show.bs.modal', centerModals); //当模态框出现的时候 14 $(window).on('resize', centerModals); //当窗口大小变化的时候 15 16 }
【Thu Apr 14 2016 10:48:05 GMT+0800】
jQuery mobile整屏代码
html：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="author" content="yahari@126.com" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 7 <meta http-equiv="X-UA-Compatible" content="chrome=1" /> 8 <meta name="renderer" content="webkit" /> 9 <meta name="format-detection" content="telephone=no"> 10 <meta name="format-detection" content="email=no"> 11 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 12 <meta content="yes" name="apple-mobile-web-app-capable"> 13 <meta content="yes" name="apple-touch-fullscreen"> 14 <meta content="telephone=no,email=no" name="format-detection"> 15 <link rel="stylesheet" href="../style/user.css"> 16 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script> 17 <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 18 <script src="../js/index.js"></script> 19 <title>个人中心</title> 20 </head> 21 <body> 22 23 <div class="container user" data-role="page" id="pageone"> 24 25 <div class="header" data-role="header" data-position="fixed"> 26 <div class="center perWidth"><h1><a href="javascript:;"></a>个人中心</h1></div> 27 </div><!-- /header --> 28 29 <div class="main ui-content" data-role="main"> 30 <div class="banner"></div><!-- /banner --> 31 32 </div><!-- /main --> 33 34 35 </div><!-- /container --> 36 37 38 </body> 39 </html>
CSS：
1 .user{height:100%;padding-top:45px;} 2 .ui-page-header-fixed{padding-top:0} 3 4 .user .header{border-bottom:1px solid #f3f3f3;background:#fff;text-shadow:none;-height:7.00%;height:45px;} 5 .user .header h1{margin:0;height:44px;text-align:center;text-shadow:none;font-weight:400;font-size:14px;font-family:Microsoft YaHei;line-height:45px} 6 .user .header h1 > a{float:left;display:inline-block;width:20px;height:45px;background:url("../images/index/nav.png") no-repeat left center;background-size:80%} 7 8 .user .main{padding:0;height:100%;} 9 .user .main .banner{width:100%;height:42.7%;background:url("../images/index/banner.png") no-repeat center center;background-size:100%;}
js：
1 $(".user").removeAttr('style');
【Fri Apr 22 2016 13:02:52 GMT+0800】
移动端手机首页导航想右侧滑屏插件
HTML：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="author" content="yahari@126.com" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 7 <meta http-equiv="X-UA-Compatible" content="chrome=1" /> 8 <meta name="renderer" content="webkit" /> 9 <meta name="format-detection" content="telephone=no"> 10 <meta name="format-detection" content="email=no"> 11 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 12 <meta content="yes" name="apple-mobile-web-app-capable"> 13 <meta content="yes" name="apple-touch-fullscreen"> 14 <meta content="telephone=no,email=no" name="format-detection"> 15 <link rel="stylesheet" href="../style/index.css"> 16 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script> 17 <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 18 <script src="../js/jquery.mmenu.min.js"></script> 19 <script src="../js/index.js"></script> 20 <title>个人中心</title> 21 </head> 22 <body> 23 24 <div class="container index" data-role="page" id="pageone"> 25 <div class="header" data-role="header" data-position="fixed"> 26 <div class="center perWidth"> 27 <h1> 28 <a href="#menu" ></a> 29 <span>首页</span> 30 <div class="city"> 31 <a href="javascript:;">石家庄</a> 32 <ul> 33 <li>石家庄</li> 34 <li>南京</li> 35 <li>沧州</li> 36 <li>承德</li> 37 <li>郑州</li> 38 </ul> 39 </div><!-- /city --> 40 <div class="clear"></div> 41 </h1> 42 </div> 43 </div><!-- /header --> 44 45 <div class="main ui-content" data-role="main"> 46 <div class="banner"></div><!-- /banner --> 47 48 <div class="info"> 49 <p> 50 <span>新增二手房<strong>30</strong>套</span> 51 <span>新增租房<strong>530</strong>套</span> 52 </p> 53 </div><!-- /info --> 54 55 <div class="sort"> 56 <div> 57 <ul> 58 <li><a><p><img src="../images/index/buy.png" /></p><span>我要买房</span></a></li> 59 <li><a><p><img src="../images/index/rent.png" /></p><span>我要租房</span></a></li> 60 <li><a><p><img src="../images/index/recommend.png" /></p><span>新房推荐</span></a></li> 61 <li><a><p><img src="../images/index/delegation.png" /></p><span>我要委托</span></a></li> 62 </ul> 63 </div> 64 <p></p> 65 </div><!-- /sort --> 66 </div><!-- /main --> 67 68 <nav id="menu"> 69 <ul> 70 <li class="Selected"><a href="#">按钮1</a></li> 71 <li><a href="#">按钮2</a></li> 72 <li><a href="#">按钮3</a></li> 73 <li><a href="#">按钮4</a></li> 74 <li><a href="#">按钮5</a></li> 75 </ul> 76 </nav> 77 78 </div><!-- /container --> 79 80 81 </body> 82 </html>
js：
/* * jQuery mmenu 1.3.1 * * Copyright (c) 2013 Fred Heusschen * www.frebsite.nl * * Dual licensed under the MIT and GPL licenses. * http://en.wikipedia.org/wiki/MIT_License * http://en.wikipedia.org/wiki/GNU_General_Public_License */ (function(a){function i(b){return"string"==typeof b?("left"==b||"right"==b)&&(b={position:b}):"object"!=typeof b&&(b={}),b.addCounters!==void 0&&(a.fn.mmenu.deprecated("addCounters-option","counters.add-option"),b.counters={add:b.addCounters}),b.closeOnClick!==void 0&&(a.fn.mmenu.deprecated("closeOnClick-option","onClick.close-option"),b.onClick={close:b.closeOnClick}),"boolean"==typeof b.counters?b.counters={add:b.counters,count:b.counters}:"object"!=typeof b.counters&&(b.counters={}),"boolean"==typeof b.onClick?b.onClick={close:b.onClick}:"object"!=typeof b.onClick&&(b.onClick={}),"boolean"==typeof b.searchfield?b.searchfield={add:b.searchfield,search:b.searchfield}:"string"==typeof b.searchfield?b.searchfield={add:!0,search:!0,placeholder:b.searchfield}:"object"!=typeof b.searchfield&&(b.searchfield={}),b}function j(a){return"boolean"==typeof a.onClick.delayPageload&&(a.onClick.delayPageload=a.onClick.delayPageload?a.configuration.slideDuration:0),a}function k(b,c){return b||(b=a("> "+c.pageNodetype,d),b.length>1&&(b=b.wrapAll("<"+c.pageNodetype+" />").parent()),b.addClass(y("page"))),b}function l(b,c){return b.is(c.menuNodetype)||(b=a("<"+c.menuNodetype+" />").append(b)),b.addClass(y("").slice(0,-1)).prependTo("body"),a("li."+c.selectedClass,b).removeClass(c.selectedClass).addClass(y("selected")),a("li."+c.labelClass,b).removeClass(c.labelClass).addClass(y("label")),b}function m(b,c,d){b.addClass(y(c)),a("ul ul",b).addClass(y("submenu")).each(function(b){var e=a(this);$a=e.parent().find("> a, > span"),h=e.attr("id")||y("s"+d+"-"+b),e.attr("id",h);var f=a('<a class="'+y("subopen")+'" href="#'+h+'" />').insertBefore($a);if($a.is("a")||f.addClass(y("fullsubopen")),"horizontal"==c){var g=e.parent().parent(),h=g.attr("id")||y("p"+d+"-"+b);g.attr("id",h),e.prepend('<li class="'+y("subtitle")+'"><a class="'+y("subclose")+'" href="#'+h+'">'+$a.text()+"</a></li>")}}),"horizontal"==c?(a("li."+y("selected"),b).parents("li."+y("selected")).removeClass(y("selected")).end().each(function(){var b=a(this),c=b.find("> ul");c.length&&(b.parent().addClass(y("subopened")),c.addClass(y("opened")))}).parent().addClass(y("opened")).parents("ul").addClass(y("subopened")),a("ul."+y("opened"),b).length||a("ul",b).not("."+y("submenu")).addClass(y("opened")),a("ul ul",b).appendTo(b)):a("li."+y("selected"),b).addClass(y("opened")).parents("."+y("selected")).removeClass(y("selected"))}function n(b,c){return b||(b=a('<div id="'+y("blocker")+'" />').appendTo(d)),x(b,function(){c.trigger(A("close"))}),b}function o(b,d){if(d.close){var f=a("a",b).not("."+y("subopen")).not("."+y("subclose"));x(f,function(){var e=a(this),g=e.attr("href");b.trigger(A("close")),f.parent().removeClass(y("selected")),e.parent().addClass(y("selected")),d.blockUI&&"#"!=g.slice(0,1)&&c.addClass(y("blocking")),"#"!=g&&setTimeout(function(){window.location.href=g},d.delayPageload)})}}function p(b,c,d){a("em."+d.counterClass,b).removeClass(d.counterClass).addClass(y("counter")),c.add&&a("."+y("submenu"),b).each(function(){var c=a(this),d=c.attr("id");if(d&&d.length){var e=a('<em class="'+y("counter")+'" />'),f=a("a."+y("subopen"),b).filter('[href="#'+d+'"]');f.parent().find("em."+y("counter")).length||f.before(e)}}),c.count&&a("em."+y("counter"),b).each(function(){var c=a(this),d=a("ul"+c.next().attr("href"),b);c.bind(A("count"),function(a){a.preventDefault(),a.stopPropagation();var b=d.children().not("."+y("label")).not("."+y("subtitle")).not("."+y("noresult")).not("."+y("noresults"));c.html(b.length)})}).trigger(A("count"))}function q(b,c){if(c.add){var d=a('<div class="'+y("search")+'" />').prependTo(b);d.append('<input placeholder="'+c.placeholder+'" type="text" autocomplete="off" />'),c.noResults&&a("ul",b).not("."+y("submenu")).append('<li class="'+y("noresults")+'">'+c.noResults+"</li>")}if(c.search){var d=a("div."+y("search"),b),e=a("input",d),f=a("li."+y("label"),b),g=a("em."+y("counter"),b),h=a("li",b).not("."+y("subtitle")).not("."+y("label")).not("."+y("noresults")),i="> a";c.showLinksOnly||(i+=", > span"),e.bind(A("keyup"),function(){var c=e.val().toLowerCase();h.add(f).addClass(y("noresult")),h.each(function(){var b=a(this);a(i,b).text().toLowerCase().indexOf(c)>-1&&b.add(b.prevAll("."+y("label")).first()).removeClass(y("noresult"))}),a(a("ul."+y("submenu"),b).get().reverse()).each(function(){var c=a(this),d=null,e=c.attr("id"),f=c.find("li").not("."+y("subtitle")).not("."+y("label")).not("."+y("noresult"));if(e&&e.length)var d=a("a."+y("subopen"),b).filter('[href="#'+e+'"]').parent();f.length?d&&(d.removeClass(y("noresult")),d.removeClass(y("nosubresult"))):(c.trigger(A("close")),d&&d.addClass(y("nosubresult")))}),b[h.not("."+y("noresult")).length?"removeClass":"addClass"](y("noresults")),g.trigger(A("count"))})}}function r(b,c){var d=b.attr("id");d&&d.length&&x('a[href="#'+d+'"]',function(){b.trigger(A("toggle"))});var d=c.attr("id");d&&d.length&&x('a[href="#'+d+'"]',function(){b.trigger(A("close"))}),x(a("a."+y("subopen")+", "+"a."+y("subclose"),b),function(){a(a(this).attr("href")).trigger(A("toggle"))})}function s(a,d){var f=w(),g=0;return b.bind(A("resize"),function(){var c=b.width();c!=g&&(g=c,e.attr("style",e.data(z("style"))).width(c))}),e.data(z("style"),e.attr("style")||"").data(z("scrollTop"),f).width(e.outerWidth()).css("top",-f),a.addClass(y("opened")),c.addClass(y("opened")).addClass(y(d)),setTimeout(function(){c.addClass(y("opening"))},25),"open"}function t(a,d){return c.removeClass(y("opening")),setTimeout(function(){c.removeClass(y("opened")).removeClass(y(d.position)),a.removeClass(y("opened")),e.attr("style",e.data(z("style"))),b.unbind(A("resize")),g&&g.scrollTop(e.data(z("scrollTop")))},d.configuration.slideDuration+25),"close"}function u(a,b){return a.prevAll("ul").addClass(y("subopened")),a.nextAll("ul").removeClass(y("subopened")),a.removeClass(y("subopened")).addClass(y("opened")),setTimeout(function(){a.nextAll("ul").removeClass(y("opened"))},b.configuration.slideDuration+25),"open"}function v(a){return a.prevAll("ul."+y("opened")).first().trigger(A("open")),"close"}function w(){return g||(0!=a("html").scrollTop()?g=a("html"):0!=a("body").scrollTop()&&(g=a("body"))),g?g.scrollTop()-1:0}function x(b,c){"string"==typeof b&&(b=a(b)),b.bind(A("click"),function(a){a.preventDefault(),a.stopPropagation(),c.call(this,a)})}function y(a){return"mmenu-"+a}function z(a){return"mmenu-"+a}function A(a){return a+".mmenu"}var b=null,c=null,d=null,e=null,f=null,g=null,h=0;a.fn.mmenu=function(g){return b||(b=a(window),c=a("html"),d=a("body")),g=i(g),g=a.extend(!0,{},a.fn.mmenu.defaultOptions,g),g=j(g),c[g.configuration.hardwareAcceleration?"addClass":"removeClass"](y("accelerated")),this.each(function(){var b=a(this),c=!1,d=g.slidingSubmenus?"horizontal":"vertical";h++,e=k(e,g.configuration),f=n(f,b,g.configuration),b=l(b,g.configuration),m(b,d,h),o(b,g.onClick,g.configuration),p(b,g.counters,g.configuration),q(b,g.searchfield),r(b,e);var i=b.find("ul");b.add(i).bind(A("toggle")+" "+A("open")+" "+A("close"),function(a){a.preventDefault(),a.stopPropagation()}),b.bind(A("toggle"),function(){return b.triggerHandler(A(c?"close":"open"))}).bind(A("open"),function(){return c?!1:(c=!0,s(b,g.position))}).bind(A("close"),function(){return c?(c=!1,t(b,g)):!1}),"horizontal"==d?i.bind(A("toggle"),function(){return a(this).triggerHandler(A("open"))}).bind(A("open"),function(){return u(a(this),g)}).bind(A("close"),function(){return v(a(this),g)}):i.bind(A("toggle"),function(){var c=a(this);return c.triggerHandler(A(c.parent().hasClass(y("opened"))?"close":"open"))}).bind(A("open"),function(){return a(this).parent().addClass(y("opened")),"open"}).bind(A("close"),function(){return a(this).parent().removeClass(y("opened")),"close"})})},a.fn.mmenu.defaultOptions={position:"left",slidingSubmenus:!0,counters:{add:!1,count:!0},searchfield:{add:!1,search:!0,showLinksOnly:!0,placeholder:"Search",noResults:"No results found."},onClick:{close:!0,delayPageload:!0,blockUI:!1},configuration:{hardwareAcceleration:!0,selectedClass:"Selected",labelClass:"Label",counterClass:"Counter",pageNodetype:"div",menuNodetype:"nav",slideDuration:500}},a.fn.mmenu.debug=function(a){"undefined"!=typeof console&&console.log!==void 0&&console.log("MMENU: "+a)},a.fn.mmenu.deprecated=function(a,b){"undefined"!=typeof console&&console.warn!==void 0&&console.warn("MMENU: "+a+" is deprecated, use "+b+" instead.")}})(jQuery);
CSS：
1 #pageone nav{display:none} 2 header{background:#999;color:#fff;text-align:center;line-height:40px;height:40px;position:relative} 3 header .l_tbn{position:absolute;left:0;top:0;width:40px;height:40px;border-right:1px #AFAFAF solid} 4 header .l_tbn a{display:block;width:40px;height:40px;overflow:hidden;color:#fff;text-decoration:none} 5 header .l_tbn a:hover{color:#fff} 6 .content{padding:10px} 7 .mmenu-opened,.mmenu-opened body{height:100%;width:100%;overflow:hidden} 8 .mmenu-opened body{position:relative} 9 .mmenu{display:none;width:100%;height:100%;position:absolute;top:0;left:0;z-index:0;overflow:auto;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch} 10 .mmenu,.mmenu *{-webkit-text-size-adjust:none;font-family:Arial,Helvetica,Garuda,sans-serif;font-size:14px} 11 .mmenu li,.mmenu ul{list-style:none} 12 .mmenu li{position:relative} 13 .mmenu li,.mmenu li>a,.mmenu li>span,.mmenu ul{display:block;padding:0;margin:0} 14 .mmenu>ul{background-color:inherit;padding:10px 0 40px 0} 15 .mmenu-opened .mmenu.mmenu-opened{display:block} 16 .mmenu-opened .mmenu-page{box-shadow:0 0 20px rgba(0,0,0,.8);background-color:inherit;min-height:100%;position:absolute;z-index:1;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} 17 #mmenu-blocker{display:none} 18 .mmenu-blocking #mmenu-blocker,.mmenu-opened #mmenu-blocker{background:#fff;opacity:0;display:block;width:100%;height:100%;position:absolute;top:0;z-index:2} 19 .mmenu-opened #mmenu-blocker,.mmenu-opened .mmenu-page{-webkit-transition:left .5s ease,right .5s ease,margin .5s ease;-moz-transition:left .5s ease,right .5s ease,margin .5s ease;transition:left .5s ease,right .5s ease,margin .5s ease} 20 .mmenu-accelerated .mmenu-page,html.mmenu-accelerated #mmenu-blocker{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} 21 .mmenu-left.mmenu-opened .mmenu-page,html.mmenu-left.mmenu-opened #mmenu-blocker{margin-left:0;left:0} 22 .mmenu-left.mmenu-opening #mmenu-blocker,.mmenu-left.mmenu-opening .mmenu-page{margin-left:-65px;left:100%} 23 .mmenu-right.mmenu-opened #mmenu-blocker,.mmenu-right.mmenu-opened .mmenu-page{margin-right:0;right:0} 24 .mmenu-right.mmenu-opening #mmenu-blocker,.mmenu-right.mmenu-opening .mmenu-page{margin-right:-65px;right:100%} 25 .mmenu{background:#333} 26 .mmenu *{text-shadow:0 1px 2px rgba(0,0,0,.5)} 27 .mmenu li{border:none;border-top:1px solid #444;border-bottom:1px solid #111} 28 .mmenu li:first-child{border-top-width:0} 29 .mmenu li>a,.mmenu li>span{text-indent:20px;text-overflow:ellipsis;white-space:nowrap;line-height:40px;overflow:hidden;padding-right:5px} 30 .mmenu li>a,.mmenu li>a:hover,.mmenu li>span{color:#999;text-decoration:none} 31 .mmenu li.mmenu-selected>a,.mmenu li.mmenu-selected>span{background:#222} 32 .mmenu li.mmenu-selected>a.mmenu-subopen{background:0 0} 33 .mmenu.mmenu-horizontal{width:1000%} 34 .mmenu.mmenu-horizontal ul{width:10%;margin-left:0;float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:margin-left .5s ease;-moz-transition:margin-left .5s ease;transition:margin-left .5s ease} 35 .mmenu-accelerated .mmenu.mmenu-horizontal ul{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} 36 .mmenu.mmenu-horizontal ul.mmenu-submenu{display:none} 37 .mmenu.mmenu-horizontal ul.mmenu-submenu.mmenu-opened{display:block} 38 .mmenu.mmenu-horizontal ul.mmenu-subopened{margin-left:-10%;height:100%;overflow:hidden} 39 @media all and (min-width:500px){.mmenu.mmenu-horizontal{width:5000px} 40 .mmenu-right .mmenu.mmenu-horizontal{left:auto;right:-4500px} 41 .mmenu-left.mmenu-opening #mmenu-blocker,.mmenu-left.mmenu-opening .mmenu-page{left:500px} 42 } 43 44 /*nav center*/ 45 .mmenu-left.mmenu-opening .mmenu-page, .mmenu-left.mmenu-opening #mmenu-blocker {margin-left: -50%;left: 100%;} 46 47 48 @font-face{font-family:'Glyphicons Halflings';src:url(../fonts/glyphicons-halflings-regular.eot);src:url(../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),url(../fonts/glyphicons-halflings-regular.woff) format('woff'),url(../fonts/glyphicon-shalflings-regular.ttf) format('truetype'),url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')} 49 .glyphicon:before{font-family:'Glyphicons Halflings';font-style:normal;-webkit-font-smoothing:antialiased} 50 .glyphicon-glass:before{content:"\e001"} 51 .glyphicon-music:before{content:"\e002"} 52 .glyphicon-search:before{content:"\e003"} 53 .glyphicon-envelope:before{content:"\2709"} 54 .glyphicon-heart:before{content:"\e005"} 55 .glyphicon-star:before{content:"\e006"} 56 .glyphicon-star-empty:before{content:"\e007"} 57 .glyphicon-user:before{content:"\e008"} 58 .glyphicon-film:before{content:"\e009"} 59 .glyphicon-th-large:before{content:"\e010"} 60 .glyphicon-th:before{content:"\e011"} 61 .glyphicon-th-list:before{content:"\e012"} 62 .glyphicon-ok:before{content:"\e013"} 63 .glyphicon-remove:before{content:"\e014"} 64 .glyphicon-zoom-in:before{content:"\e015"} 65 .glyphicon-zoom-out:before{content:"\e016"} 66 .glyphicon-off:before{content:"\e017"} 67 .glyphicon-signal:before{content:"\e018"} 68 .glyphicon-cog:before{content:"\e019"} 69 .glyphicon-trash:before{content:"\e020"} 70 .glyphicon-home:before{content:"\e021"} 71 .glyphicon-file:before{content:"\e022"} 72 .glyphicon-time:before{content:"\e023"} 73 .glyphicon-road:before{content:"\e024"} 74 .glyphicon-download-alt:before{content:"\e025"} 75 .glyphicon-download:before{content:"\e026"} 76 .glyphicon-upload:before{content:"\e027"} 77 .glyphicon-inbox:before{content:"\e028"} 78 .glyphicon-play-circle:before{content:"\e029"} 79 .glyphicon-repeat:before{content:"\e030"} 80 .glyphicon-refresh:before{content:"\e031"} 81 .glyphicon-list-alt:before{content:"\e032"} 82 .glyphicon-lock:before{content:"\e033"} 83 .glyphicon-flag:before{content:"\e034"} 84 .glyphicon-headphones:before{content:"\e035"} 85 .glyphicon-volume-off:before{content:"\e036"} 86 .glyphicon-volume-down:before{content:"\e037"} 87 .glyphicon-volume-up:before{content:"\e038"} 88 .glyphicon-qrcode:before{content:"\e039"} 89 .glyphicon-barcode:before{content:"\e040"} 90 .glyphicon-tag:before{content:"\e041"} 91 .glyphicon-tags:before{content:"\e042"} 92 .glyphicon-book:before{content:"\e043"} 93 .glyphicon-bookmark:before{content:"\e044"} 94 .glyphicon-print:before{content:"\e045"} 95 .glyphicon-camera:before{content:"\e046"} 96 .glyphicon-font:before{content:"\e047"} 97 .glyphicon-bold:before{content:"\e048"} 98 .glyphicon-italic:before{content:"\e049"} 99 .glyphicon-text-height:before{content:"\e050"} 100 .glyphicon-text-width:before{content:"\e051"} 101 .glyphicon-align-left:before{content:"\e052"} 102 .glyphicon-align-center:before{content:"\e053"} 103 .glyphicon-align-right:before{content:"\e054"} 104 .glyphicon-align-justify:before{content:"\e055"} 105 .glyphicon-list:before{content:"\e056"} 106 .glyphicon-indent-left:before{content:"\e057"} 107 .glyphicon-indent-right:before{content:"\e058"} 108 .glyphicon-facetime-video:before{content:"\e059"} 109 .glyphicon-picture:before{content:"\e060"} 110 .glyphicon-pencil:before{content:"\270f"} 111 .glyphicon-map-marker:before{content:"\e062"} 112 .glyphicon-adjust:before{content:"\e063"} 113 .glyphicon-tint:before{content:"\e064"} 114 .glyphicon-edit:before{content:"\e065"} 115 .glyphicon-share:before{content:"\e066"} 116 .glyphicon-check:before{content:"\e067"} 117 .glyphicon-move:before{content:"\e068"} 118 .glyphicon-step-backward:before{content:"\e069"} 119 .glyphicon-fast-backward:before{content:"\e070"} 120 .glyphicon-backward:before{content:"\e071"} 121 .glyphicon-play:before{content:"\e072"} 122 .glyphicon-pause:before{content:"\e073"} 123 .glyphicon-stop:before{content:"\e074"} 124 .glyphicon-forward:before{content:"\e075"} 125 .glyphicon-fast-forward:before{content:"\e076"} 126 .glyphicon-step-forward:before{content:"\e077"} 127 .glyphicon-eject:before{content:"\e078"} 128 .glyphicon-chevron-left:before{content:"\e079"} 129 .glyphicon-chevron-right:before{content:"\e080"} 130 .glyphicon-plus-sign:before{content:"\e081"} 131 .glyphicon-minus-sign:before{content:"\e082"} 132 .glyphicon-remove-sign:before{content:"\e083"} 133 .glyphicon-ok-sign:before{content:"\e084"} 134 .glyphicon-question-sign:before{content:"\e085"} 135 .glyphicon-info-sign:before{content:"\e086"} 136 .glyphicon-screenshot:before{content:"\e087"} 137 .glyphicon-remove-circle:before{content:"\e088"} 138 .glyphicon-ok-circle:before{content:"\e089"} 139 .glyphicon-ban-circle:before{content:"\e090"} 140 .glyphicon-arrow-left:before{content:"\e091"} 141 .glyphicon-arrow-right:before{content:"\e092"} 142 .glyphicon-arrow-up:before{content:"\e093"} 143 .glyphicon-arrow-down:before{content:"\e094"} 144 .glyphicon-share-alt:before{content:"\e095"} 145 .glyphicon-resize-full:before{content:"\e096"} 146 .glyphicon-resize-small:before{content:"\e097"} 147 .glyphicon-plus:before{content:"\002b"} 148 .glyphicon-minus:before{content:"\2212"} 149 .glyphicon-asterisk:before{content:"\002a"} 150 .glyphicon-exclamation-sign:before{content:"\e101"} 151 .glyphicon-gift:before{content:"\e102"} 152 .glyphicon-leaf:before{content:"\e103"} 153 .glyphicon-fire:before{content:"\e104"} 154 .glyphicon-eye-open:before{content:"\e105"} 155 .glyphicon-eye-close:before{content:"\e106"} 156 .glyphicon-warning-sign:before{content:"\e107"} 157 .glyphicon-plane:before{content:"\e108"} 158 .glyphicon-calendar:before{content:"\e109"} 159 .glyphicon-random:before{content:"\e110"} 160 .glyphicon-comment:before{content:"\e111"} 161 .glyphicon-magnet:before{content:"\e112"} 162 .glyphicon-chevron-up:before{content:"\e113"} 163 .glyphicon-chevron-down:before{content:"\e114"} 164 .glyphicon-retweet:before{content:"\e115"} 165 .glyphicon-shopping-cart:before{content:"\e116"} 166 .glyphicon-folder-close:before{content:"\e117"} 167 .glyphicon-folder-open:before{content:"\e118"} 168 .glyphicon-resize-vertical:before{content:"\e119"} 169 .glyphicon-resize-horizontal:before{content:"\e120"} 170 .glyphicon-hdd:before{content:"\e121"} 171 .glyphicon-bullhorn:before{content:"\e122"} 172 .glyphicon-bell:before{content:"\e123"} 173 .glyphicon-certificate:before{content:"\e124"} 174 .glyphicon-thumbs-up:before{content:"\e125"} 175 .glyphicon-thumbs-down:before{content:"\e126"} 176 .glyphicon-hand-right:before{content:"\e127"} 177 .glyphicon-hand-left:before{content:"\e128"} 178 .glyphicon-hand-up:before{content:"\e129"} 179 .glyphicon-hand-down:before{content:"\e130"} 180 .glyphicon-circle-arrow-right:before{content:"\e131"} 181 .glyphicon-circle-arrow-left:before{content:"\e132"} 182 .glyphicon-circle-arrow-up:before{content:"\e133"} 183 .glyphicon-circle-arrow-down:before{content:"\e134"} 184 .glyphicon-globe:before{content:"\e135"} 185 .glyphicon-wrench:before{content:"\e136"} 186 .glyphicon-tasks:before{content:"\e137"} 187 .glyphicon-filter:before{content:"\e138"} 188 .glyphicon-briefcase:before{content:"\e139"} 189 .glyphicon-fullscreen:before{content:"\e140"} 190 .glyphicon-dashboard:before{content:"\e141"} 191 .glyphicon-paperclip:before{content:"\e142"} 192 .glyphicon-heart-empty:before{content:"\e143"} 193 .glyphicon-link:before{content:"\e144"} 194 .glyphicon-phone:before{content:"\e145"} 195 .glyphicon-pushpin:before{content:"\e146"} 196 .glyphicon-euro:before{content:"\20ac"} 197 .glyphicon-usd:before{content:"\e148"} 198 .glyphicon-gbp:before{content:"\e149"} 199 .glyphicon-sort:before{content:"\e150"} 200 .glyphicon-sort-by-alphabet:before{content:"\e151"} 201 .glyphicon-sort-by-alphabet-alt:before{content:"\e152"} 202 .glyphicon-sort-by-order:before{content:"\e153"} 203 .glyphicon-sort-by-order-alt:before{content:"\e154"} 204 .glyphicon-sort-by-attributes:before{content:"\e155"} 205 .glyphicon-sort-by-attributes-alt:before{content:"\e156"} 206 .glyphicon-unchecked:before{content:"\e157"} 207 .glyphicon-expand:before{content:"\e158"} 208 .glyphicon-collapse:before{content:"\e159"} 209 .glyphicon-collapse-top:before{content:"\e160"}
运行：
1 $(function() { 2 $('nav#menu').mmenu(); 3 });
【Fri May 06 2016 10:03:06 GMT+0800】
JavaScript的IE各版本判断
1 function isIE(){ 2 var isIE = !!window.ActiveXObject, 3 isIE6 = isIE && !window.XMLHttpRequest, 4 isIE8 = isIE && !!document.documentMode, 5 isIE7 = isIE && !isIE6 && !isIE8; 6 7 if(isIE){ 8 if(isIE6) 9 alert("IE6"); 10 else if(isIE7) 11 alert("IE7"); 12 else if(isIE8) 13 alert("IE8"); 14 }else{ 15 //NOT IE 16 } 17 }
【Mon May 23 2016 17:51:49 GMT+0800】
手机滑屏插件：swipe2
先引入<script src="../js/swipe.js"></script>
1 /* 2 * Swipe 2.0 3 * 4 * Brad Birdsall 5 * Copyright 2013, MIT License 6 * 7 */ 8 9 function Swipe(container, options) { 10 11 "use strict"; 12 13 // utilities 14 var noop = function() {}; // simple no operation function 15 var offloadFn = function(fn) { setTimeout(fn || noop, 0) }; // offload a functions execution 16 17 // check browser capabilities 18 var browser = { 19 addEventListener: !!window.addEventListener, 20 touch: ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch, 21 transitions: (function(temp) { 22 var props = ['transitionProperty', 'WebkitTransition', 'MozTransition', 'OTransition', 'msTransition']; 23 for ( var i in props ) if (temp.style[ props[i] ] !== undefined) return true; 24 return false; 25 })(document.createElement('swipe')) 26 }; 27 28 // quit if no root element 29 if (!container) return; 30 var element = container.children[0]; 31 var slides, slidePos, width, length; 32 options = options || {}; 33 var index = parseInt(options.startSlide, 10) || 0; 34 var speed = options.speed || 300; 35 options.continuous = options.continuous !== undefined ? options.continuous : true; 36 37 function setup() { 38 39 // cache slides 40 slides = element.children; 41 length = slides.length; 42 43 // set continuous to false if only one slide 44 if (slides.length < 2) options.continuous = false; 45 46 //special case if two slides 47 if (browser.transitions && options.continuous && slides.length < 3) { 48 element.appendChild(slides[0].cloneNode(true)); 49 element.appendChild(element.children[1].cloneNode(true)); 50 slides = element.children; 51 } 52 53 // create an array to store current positions of each slide 54 slidePos = new Array(slides.length); 55 56 // determine width of each slide 57 width = container.getBoundingClientRect().width || container.offsetWidth; 58 59 element.style.width = (slides.length * width) + 'px'; 60 61 // stack elements 62 var pos = slides.length; 63 while(pos--) { 64 65 var slide = slides[pos]; 66 67 slide.style.width = width + 'px'; 68 slide.setAttribute('data-index', pos); 69 70 if (browser.transitions) { 71 slide.style.left = (pos * -width) + 'px'; 72 move(pos, index > pos ? -width : (index < pos ? width : 0), 0); 73 } 74 75 } 76 77 // reposition elements before and after index 78 if (options.continuous && browser.transitions) { 79 move(circle(index-1), -width, 0); 80 move(circle(index+1), width, 0); 81 } 82 83 if (!browser.transitions) element.style.left = (index * -width) + 'px'; 84 85 container.style.visibility = 'visible'; 86 87 } 88 89 function prev() { 90 91 if (options.continuous) slide(index-1); 92 else if (index) slide(index-1); 93 94 } 95 96 function next() { 97 98 if (options.continuous) slide(index+1); 99 else if (index < slides.length - 1) slide(index+1); 100 101 } 102 103 function circle(index) { 104 105 // a simple positive modulo using slides.length 106 return (slides.length + (index % slides.length)) % slides.length; 107 108 } 109 110 function slide(to, slideSpeed) { 111 112 // do nothing if already on requested slide 113 if (index == to) return; 114 115 if (browser.transitions) { 116 117 var direction = Math.abs(index-to) / (index-to); // 1: backward, -1: forward 118 119 // get the actual position of the slide 120 if (options.continuous) { 121 var natural_direction = direction; 122 direction = -slidePos[circle(to)] / width; 123 124 // if going forward but to < index, use to = slides.length + to 125 // if going backward but to > index, use to = -slides.length + to 126 if (direction !== natural_direction) to = -direction * slides.length + to; 127 128 } 129 130 var diff = Math.abs(index-to) - 1; 131 132 // move all the slides between index and to in the right direction 133 while (diff--) move( circle((to > index ? to : index) - diff - 1), width * direction, 0); 134 135 to = circle(to); 136 137 move(index, width * direction, slideSpeed || speed); 138 move(to, 0, slideSpeed || speed); 139 140 if (options.continuous) move(circle(to - direction), -(width * direction), 0); // we need to get the next in place 141 142 } else { 143 144 to = circle(to); 145 animate(index * -width, to * -width, slideSpeed || speed); 146 //no fallback for a circular continuous if the browser does not accept transitions 147 } 148 149 index = to; 150 offloadFn(options.callback && options.callback(index, slides[index])); 151 } 152 153 function move(index, dist, speed) { 154 155 translate(index, dist, speed); 156 slidePos[index] = dist; 157 158 } 159 160 function translate(index, dist, speed) { 161 162 var slide = slides[index]; 163 var style = slide && slide.style; 164 165 if (!style) return; 166 167 style.webkitTransitionDuration = 168 style.MozTransitionDuration = 169 style.msTransitionDuration = 170 style.OTransitionDuration = 171 style.transitionDuration = speed + 'ms'; 172 173 style.webkitTransform = 'translate(' + dist + 'px,0)' + 'translateZ(0)'; 174 style.msTransform = 175 style.MozTransform = 176 style.OTransform = 'translateX(' + dist + 'px)'; 177 178 } 179 180 function animate(from, to, speed) { 181 182 // if not an animation, just reposition 183 if (!speed) { 184 185 element.style.left = to + 'px'; 186 return; 187 188 } 189 190 var start = +new Date; 191 192 var timer = setInterval(function() { 193 194 var timeElap = +new Date - start; 195 196 if (timeElap > speed) { 197 198 element.style.left = to + 'px'; 199 200 if (delay) begin(); 201 202 options.transitionEnd && options.transitionEnd.call(event, index, slides[index]); 203 204 clearInterval(timer); 205 return; 206 207 } 208 209 element.style.left = (( (to - from) * (Math.floor((timeElap / speed) * 100) / 100) ) + from) + 'px'; 210 211 }, 4); 212 213 } 214 215 // setup auto slideshow 216 var delay = options.auto || 0; 217 var interval; 218 219 function begin() { 220 221 interval = setTimeout(next, delay); 222 223 } 224 225 function stop() { 226 227 delay = 0; 228 clearTimeout(interval); 229 230 } 231 232 233 // setup initial vars 234 var start = {}; 235 var delta = {}; 236 var isScrolling; 237 238 // setup event capturing 239 var events = { 240 241 handleEvent: function(event) { 242 243 switch (event.type) { 244 case 'touchstart': this.start(event); break; 245 case 'touchmove': this.move(event); break; 246 case 'touchend': offloadFn(this.end(event)); break; 247 case 'webkitTransitionEnd': 248 case 'msTransitionEnd': 249 case 'oTransitionEnd': 250 case 'otransitionend': 251 case 'transitionend': offloadFn(this.transitionEnd(event)); break; 252 case 'resize': offloadFn(setup); break; 253 } 254 255 if (options.stopPropagation) event.stopPropagation(); 256 257 }, 258 start: function(event) { 259 260 var touches = event.touches[0]; 261 262 // measure start values 263 start = { 264 265 // get initial touch coords 266 x: touches.pageX, 267 y: touches.pageY, 268 269 // store time to determine touch duration 270 time: +new Date 271 272 }; 273 274 // used for testing first move event 275 isScrolling = undefined; 276 277 // reset delta and end measurements 278 delta = {}; 279 280 // attach touchmove and touchend listeners 281 element.addEventListener('touchmove', this, false); 282 element.addEventListener('touchend', this, false); 283 284 }, 285 move: function(event) { 286 287 // ensure swiping with one touch and not pinching 288 if ( event.touches.length > 1 || event.scale && event.scale !== 1) return 289 290 if (options.disableScroll) event.preventDefault(); 291 292 var touches = event.touches[0]; 293 294 // measure change in x and y 295 delta = { 296 x: touches.pageX - start.x, 297 y: touches.pageY - start.y 298 } 299 300 // determine if scrolling test has run - one time test 301 if ( typeof isScrolling == 'undefined') { 302 isScrolling = !!( isScrolling || Math.abs(delta.x) < Math.abs(delta.y) ); 303 } 304 305 // if user is not trying to scroll vertically 306 if (!isScrolling) { 307 308 // prevent native scrolling 309 event.preventDefault(); 310 311 // stop slideshow 312 stop(); 313 314 // increase resistance if first or last slide 315 if (options.continuous) { // we don't add resistance at the end 316 317 translate(circle(index-1), delta.x + slidePos[circle(index-1)], 0); 318 translate(index, delta.x + slidePos[index], 0); 319 translate(circle(index+1), delta.x + slidePos[circle(index+1)], 0); 320 321 } else { 322 323 delta.x = 324 delta.x / 325 ( (!index && delta.x > 0 // if first slide and sliding left 326 || index == slides.length - 1 // or if last slide and sliding right 327 && delta.x < 0 // and if sliding at all 328 ) ? 329 ( Math.abs(delta.x) / width + 1 ) // determine resistance level 330 : 1 ); // no resistance if false 331 332 // translate 1:1 333 translate(index-1, delta.x + slidePos[index-1], 0); 334 translate(index, delta.x + slidePos[index], 0); 335 translate(index+1, delta.x + slidePos[index+1], 0); 336 } 337 338 } 339 340 }, 341 end: function(event) { 342 343 // measure duration 344 var duration = +new Date - start.time; 345 346 // determine if slide attempt triggers next/prev slide 347 var isValidSlide = 348 Number(duration) < 250 // if slide duration is less than 250ms 349 && Math.abs(delta.x) > 20 // and if slide amt is greater than 20px 350 || Math.abs(delta.x) > width/2; // or if slide amt is greater than half the width 351 352 // determine if slide attempt is past start and end 353 var isPastBounds = 354 !index && delta.x > 0 // if first slide and slide amt is greater than 0 355 || index == slides.length - 1 && delta.x < 0; // or if last slide and slide amt is less than 0 356 357 if (options.continuous) isPastBounds = false; 358 359 // determine direction of swipe (true:right, false:left) 360 var direction = delta.x < 0; 361 362 // if not scrolling vertically 363 if (!isScrolling) { 364 365 if (isValidSlide && !isPastBounds) { 366 367 if (direction) { 368 369 if (options.continuous) { // we need to get the next in this direction in place 370 371 move(circle(index-1), -width, 0); 372 move(circle(index+2), width, 0); 373 374 } else { 375 move(index-1, -width, 0); 376 } 377 378 move(index, slidePos[index]-width, speed); 379 move(circle(index+1), slidePos[circle(index+1)]-width, speed); 380 index = circle(index+1); 381 382 } else { 383 if (options.continuous) { // we need to get the next in this direction in place 384 385 move(circle(index+1), width, 0); 386 move(circle(index-2), -width, 0); 387 388 } else { 389 move(index+1, width, 0); 390 } 391 392 move(index, slidePos[index]+width, speed); 393 move(circle(index-1), slidePos[circle(index-1)]+width, speed); 394 index = circle(index-1); 395 396 } 397 398 options.callback && options.callback(index, slides[index]); 399 400 } else { 401 402 if (options.continuous) { 403 404 move(circle(index-1), -width, speed); 405 move(index, 0, speed); 406 move(circle(index+1), width, speed); 407 408 } else { 409 410 move(index-1, -width, speed); 411 move(index, 0, speed); 412 move(index+1, width, speed); 413 } 414 415 } 416 417 } 418 419 // kill touchmove and touchend event listeners until touchstart called again 420 element.removeEventListener('touchmove', events, false) 421 element.removeEventListener('touchend', events, false) 422 423 }, 424 transitionEnd: function(event) { 425 426 if (parseInt(event.target.getAttribute('data-index'), 10) == index) { 427 428 if (delay) begin(); 429 430 options.transitionEnd && options.transitionEnd.call(event, index, slides[index]); 431 432 } 433 434 } 435 436 } 437 438 // trigger setup 439 setup(); 440 441 // start auto slideshow if applicable 442 if (delay) begin(); 443 444 445 // add event listeners 446 if (browser.addEventListener) { 447 448 // set touchstart event on element 449 if (browser.touch) element.addEventListener('touchstart', events, false); 450 451 if (browser.transitions) { 452 element.addEventListener('webkitTransitionEnd', events, false); 453 element.addEventListener('msTransitionEnd', events, false); 454 element.addEventListener('oTransitionEnd', events, false); 455 element.addEventListener('otransitionend', events, false); 456 element.addEventListener('transitionend', events, false); 457 } 458 459 // set resize event on window 460 window.addEventListener('resize', events, false); 461 462 } else { 463 464 window.onresize = function () { setup() }; // to play nice with old IE 465 466 } 467 468 // expose the Swipe API 469 return { 470 setup: function() { 471 472 setup(); 473 474 }, 475 slide: function(to, speed) { 476 477 // cancel slideshow 478 stop(); 479 480 slide(to, speed); 481 482 }, 483 prev: function() { 484 485 // cancel slideshow 486 stop(); 487 488 prev(); 489 490 }, 491 next: function() { 492 493 // cancel slideshow 494 stop(); 495 496 next(); 497 498 }, 499 stop: function() { 500 501 // cancel slideshow 502 stop(); 503 504 }, 505 getPos: function() { 506 507 // return current index position 508 return index; 509 510 }, 511 getNumSlides: function() { 512 513 // return total number of slides 514 return length; 515 }, 516 kill: function() { 517 518 // cancel slideshow 519 stop(); 520 521 // reset element 522 element.style.width = ''; 523 element.style.left = ''; 524 525 // reset slides 526 var pos = slides.length; 527 while(pos--) { 528 529 var slide = slides[pos]; 530 slide.style.width = ''; 531 slide.style.left = ''; 532 533 if (browser.transitions) translate(pos, 0, 0); 534 535 } 536 537 // removed event listeners 538 if (browser.addEventListener) { 539 540 // remove current event listeners 541 element.removeEventListener('touchstart', events, false); 542 element.removeEventListener('webkitTransitionEnd', events, false); 543 element.removeEventListener('msTransitionEnd', events, false); 544 element.removeEventListener('oTransitionEnd', events, false); 545 element.removeEventListener('otransitionend', events, false); 546 element.removeEventListener('transitionend', events, false); 547 window.removeEventListener('resize', events, false); 548 549 } 550 else { 551 552 window.onresize = null; 553 554 } 555 556 } 557 } 558 559 } 560 561 562 if ( window.jQuery || window.Zepto ) { 563 (function($) { 564 $.fn.Swipe = function(params) { 565 return this.each(function() { 566 $(this).data('Swipe', new Swipe($(this)[0], params)); 567 }); 568 } 569 })( window.jQuery || window.Zepto ) 570 }
配置js
1 function swipe2(){ 2 3 var elem = document.getElementById('mySwipe'); 4 window.mySwipe = Swipe(elem, { 5 /* 6 startSlide Integer (default:0) - index position Swipe should start at（滑动的索引值,即从*值开始滑动，默认值为0） 7 8 speed Integer (default:300) - speed of prev and next transitions in milliseconds.（滑动的速度，默认值300毫秒） 9 10 auto Integer - begin with auto slideshow (time in milliseconds between slides)（自动滑动，单位为毫秒） 11 12 continuous Boolean (default:true) - create an infinite feel with no endpoints（是否循环滑动，默认值为true） 13 14 disableScroll Boolean (default:false) - stop any touches on this container from scrolling the page（停止任何触及此容器上滚动页面，默认值flase） 15 16 stopPropagation Boolean (default:false) - stop event propagation（停止事件传播,默认值flase） 17 18 callback Function - runs at slide change.（回调函数） 19 20 transitionEnd Function - runs at the end slide transition.（滑动过渡时调用的函数） 21 22 */ 23 24 // startSlide: 4, 25 // auto: 3000, 26 continuous: false, 27 // disableScroll: true, 28 // stopPropagation: true, 29 // callback: function(index, element) {}, 30 31 32 transitionEnd: function(index, element) { 33 var spanLeng = $(".cnt").length; 34 if(index == 0) 35 alert("已经是第一张图片!"); 36 else if(index == spanLeng - 1) 37 alert("已经是最后张图片!"); 38 } 39 40 41 }); 42 43 var spanLeng = $(".cnt").length; 44 45 $(".cnt").each(function(i){ 46 var spanLeng = $(".cnt").length; 47 48 $(this).find("span:first").text(i + 1); 49 50 $(this).find("span:last").text(spanLeng); 51 52 }); 53 54 }
html：
1 <div id='mySwipe'> 2 <div class="swipe-wrap"> 3 <div><img class="img-responsive" src="../images/detail/swipe001.jpg" ><p class="cnt"><span></span>/<span></span></p></div> 4 <div><img class="img-responsive" src="../images/detail/swipe002.jpg" ><p class="cnt"><span></span>/<span></span></p></div> 5 6 </div><!-- /swipe-wrap --> 7 </div>
CSS：
1 #console{font-size:12px;font-family:Inconsolata,Monaco,Consolas,"Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;color:#999;line-height:18px;margin-top:20px;max-height:150px;overflow:auto} 2 #mySwipe div p{-min-width:34px;width:34px;height:14px;position:relative;bottom:30px;-right:15%;left:82%;padding:3px;;font-size:12px;text-align:center;background:rgba(0, 0, 0, 0.55);border-radius:10em;font-size:10px;} 3 4 #mySwipe div p span{font-weight:normal;padding:1px;color:#fff;text-shadow: none;} 5 .swipe{overflow:hidden;visibility:hidden;position:relative} 6 .swipe-wrap{overflow:hidden;position:relative;} 7 .swipe-wrap>div{float:left;width:100%;position:relative}
【Tue May 24 2016 10:42:45 GMT+0800】
绑定鼠标滑轮滚动事件
1 var i = 0; 2 window.addEventListener('scroll',function(){ 3 console.log(i++); 4 },false);
【Mon Jun 06 2016 15:25:00 GMT+0800】
1 window.addEventListener('scroll',function(){ 2 console.log(document.body.scrollTop); 3 },false);
【Fri Aug 05 2016 15:22:20 GMT+0800 】
绑定鼠标滑轮滚动事件（在某个dom内）
var gsname = document.getElementById('gsname'); gsname.addEventListener('scroll',function(){ console.log(gsname.scrollTop); },false);
【Mon May 30 2016 16:36:17 GMT+0800】
百度地图
其中，title是信息窗口打开后的标题，同时也是label标签的取值。
content是信息窗口的内容。
point是经纬度，请使用百度坐标（获取地址：http://dev.baidu.com/wiki/static/map/API/tool/getPoint/）
isopen是控制信息窗口是否打开的开关。
icon里的选项是控制marker图片的，width是宽，height是高等等。
html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title>过度平台</title> 5 <meta charset="UTF-8"> 6 <meta name="author" content="yahari@126.com" /> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 9 <meta name="renderer" content="webkit" /> 10 <link type="text/css" rel="stylesheet"href="../style/index.css" /> 11 <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> 12 <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=true"></script> 13 <script src="js/baiduMap.js"></script> 14 </head> 15 <body> 16 <div style="width:520px;height:340px;border:1px solid gray" id="container"></div> 17 <p> 18 二选一： 19 <input id="type1" type="radio" name="type" value="single"/><label for="type1">精准查找</label> 20 <input id="type2" type="radio" name="type" value="more" checked="checked"/><label for="type2">模糊查找</label> 21 </p> 22 <p> 23 二选一： 24 <input id="show1" type="radio" name="show" value="" checked="checked"/><label for="show1">仅查找到的内容</label> 25 <input id="show2" type="radio" name="show" value="all"/><label for="show2">显示所有内容</label> 26 </p> 27 <p> 28 <input id="keyword" type="text" style="width:150px;" value="银行"/> 29 <input type="button" value="搜索" onclick="search('type','show','keyword')"/> 30 </p> 31 32 </body> 33 </html>
js：
1 $(function(){ 2 baiduMap(); 3 }); 4 5 6 function baiduMap(){ 7 8 // 标注点数组 9 var BASEDATA = [ 10 { 11 title:"奥亚酒店", 12 content:"北苑路169号", 13 point:"116.422792|40.009471", 14 isOpen:1, 15 icon:{w:21,h:21,l:115,t:46,x:1,lb:10} 16 }, 17 { 18 title:"珀丽酒店", 19 content:"将台西路8号", 20 point:"116.484289|39.97936", 21 isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5} 22 }, 23 { 24 title:"北京银行", 25 content:"北京市海淀区白石桥路39号", 26 point:"116.329593|39.952398", 27 isOpen:0, 28 icon:{w:21,h:21,l:0,t:0,x:6,lb:5} 29 }, 30 { 31 title:"海淀银行", 32 content:"丹棱街16西门", 33 point:"116.315551|39.984388", 34 isOpen:0, 35 icon:{w:21,h:21,l:0,t:0,x:6,lb:5} 36 }, 37 ] 38 39 //创建和初始化地图函数： 40 function initMap(){ 41 window.map = new BMap.Map("container"); 42 map.centerAndZoom(new BMap.Point(116.412318,39.887037),12); 43 map.enableScrollWheelZoom(); 44 map.addControl(new BMap.NavigationControl()); 45 window.searchClass = new SearchClass(); 46 searchClass.setData(BASEDATA) 47 var dd = searchClass.search({k:"title",d:"银行",t:"more",s:""});//t:{single|more},s{all|!all} 48 addMarker(dd);//向地图中添加marker 49 } 50 51 window.search = function(name_t,name_s,id_d){ 52 var t_o = document.getElementsByName(name_t); 53 var s_o = document.getElementsByName(name_s); 54 var s_v,t_v,d_v = document.getElementById(id_d).value; 55 for(var i = 0; i < t_o.length; i++){ 56 if(t_o[i].checked){ 57 t_v = t_o[i].value; 58 } 59 } 60 for(var i = 0; i < s_o.length; i++){ 61 if(s_o[i].checked){ 62 s_v = s_o[i].value; 63 } 64 } 65 searchClass.trim(t_v) == "" && (t_v = "single"); 66 var dd = searchClass.search({k:"title",d:d_v,t:t_v,s:s_v}); 67 addMarker(dd);//向地图中添加marker 68 } 69 70 //创建marker 71 window.addMarker = function (data){ 72 map.clearOverlays(); 73 for(var i=0;i<data.length;i++){ 74 var json = data[i]; 75 var p0 = json.point.split("|")[0]; 76 var p1 = json.point.split("|")[1]; 77 var point = new BMap.Point(p0,p1); 78 var iconImg = createIcon(json.icon); 79 var marker = new BMap.Marker(point,{icon:iconImg}); 80 var iw = createInfoWindow(i); 81 var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)}); 82 marker.setLabel(label); 83 map.addOverlay(marker); 84 label.setStyle({ 85 borderColor:"#808080", 86 color:"#333", 87 cursor:"pointer" 88 }); 89 90 (function(){ 91 var _json = json; 92 var _iw = createInfoWindow(_json); 93 var _marker = marker; 94 _marker.addEventListener("click",function(){ 95 this.openInfoWindow(_iw); 96 }); 97 _iw.addEventListener("open",function(){ 98 _marker.getLabel().hide(); 99 }) 100 _iw.addEventListener("close",function(){ 101 _marker.getLabel().show(); 102 }) 103 label.addEventListener("click",function(){ 104 _marker.openInfoWindow(_iw); 105 }) 106 if(!!json.isOpen){ 107 label.hide(); 108 _marker.openInfoWindow(_iw); 109 } 110 })() 111 } 112 } 113 114 //创建InfoWindow 115 function createInfoWindow(json){ 116 var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>"); 117 return iw; 118 } 119 //创建一个Icon 120 function createIcon(json){ 121 var icon = new BMap.Icon("http://openapi.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)}) 122 return icon; 123 } 124 125 function SearchClass(data){ 126 this.datas = data; 127 } 128 // rule = {k:"title",d:"酒店",s:"all",t:"single"}=>t{single:(key=?),more:(key like[%?%])}//t:{single|more},s{all|!all} 129 SearchClass.prototype.search = function(rule){ 130 if(this.datas == null){ 131 alert("数据不存在!"); 132 return false; 133 } 134 135 if(this.trim(rule) == "" || this.trim(rule.d) == "" || this.trim(rule.k) == "" || this.trim(rule.t) == ""){ 136 alert("请指定要搜索内容!"); 137 return false; 138 } 139 var reval = []; 140 var datas = this.datas; 141 var len = datas.length; 142 var me = this; 143 var ruleReg = new RegExp(this.trim(rule.d)); 144 var hasOpen = false; 145 146 var addData = function(data,isOpen){ 147 // 第一条数据打开信息窗口 148 if(isOpen && !hasOpen){ 149 hasOpen = true; 150 data.isOpen = 1; 151 }else{ 152 data.isOpen = 0; 153 } 154 reval.push(data); 155 } 156 var getData = function(data,key){ 157 var ks = me.trim(key).split(/\./); 158 var i = null,s = "data"; 159 if(ks.length == 0){ 160 return data; 161 }else{ 162 for(var i = 0; i < ks.length; i++){ 163 s += '["' + ks[i] + '"]'; 164 } 165 return eval(s); 166 } 167 } 168 for(var cnt = 0; cnt < len; cnt++){ 169 var data = datas[cnt]; 170 var d = getData(data,rule.k); 171 if(rule.t == "single" && rule.d == d){ 172 addData(data,true); 173 }else if(rule.t != "single" && ruleReg.test(d)){ 174 addData(data,true); 175 }else if(rule.s == "all"){ 176 addData(data,false); 177 } 178 } 179 return reval; 180 } 181 182 SearchClass.prototype.setData = function(data){ 183 this.datas = data; 184 } 185 186 SearchClass.prototype.trim = function(str){ 187 if(str == null){ 188 str = ""; 189 }else{ 190 str = str.toString(); 191 } 192 return str.replace(/(^[\s\t\xa0\u3000]+)|([\u3000\xa0\s\t]+$)/g, ""); 193 } 194 195 196 initMap();//创建和初始化地图 197 }
【Wed Jun 01 2016 15:21:21 GMT+0800】
js手机号验证是哪个运营商
1 /** 2 * 校验手机号 3 */ 4 function isMobile(v) { 5 /* 6 中国移动号段 1340-1348 135 136 137 138 139 150 151 152 157 158 159 187 188 147 182 7 中国联通号段 130 131 132 155 156 185 186 145 8 中国电信号段 133 1349 153 180 181 189 9 */ 10 var cm = "134,135,136,137,138,139,150,151,152,157,158,159,187,188,147,182,183", 11 cu = "130,131,132,155,156,185,186,145", 12 ct = "133,153,180,181,189", 13 v = v || "", 14 h1 = v.substring(0, 3), 15 h2 = v.substring(0, 4), 16 v = (/^1\d{10}$/).test(v) ? (cu.indexOf(h1) >= 0 ? "联通" : (ct.indexOf(h1) >= 0 ? "电信" : (h2 == "1349" ? "电信" : (cm.indexOf(h1) >= 0 ? "移动" : "未知")))) : false; 17 //首先找是否联通，然后查找是否电信，然后在移动中查找‘1349’为电信，最后在移动中查找 18 return v; 19 } 20 21 /* 22 var cm = ['134','135','136','137','138','139','150','151','152','158','159','187','188','147','182','183'], 23 cu = ['130','131','132','155','156','185','186','145'], 24 ct = ['133','153','180','181','189']; 25 */ 26 27 /* 28 Wed Jun 01 2016 15:21:21 GMT+0800 29 */ 30 31 function isMob(mobCode){ 32 33 var mobCodeLen = parseInt(mobCode.length); 34 //console.log(mobCodeLen); 35 var mobHead = mobCode.substring(0,3); 36 if(mobCodeLen == 11){ 37 38 var operators = { 39 cm : { 40 name : '中国移动', 41 segment : ['134','135','136','137','138','139','150','151','152','158','159','187','188','147','182','183'] 42 }, 43 cu : { 44 name : '中国联通', 45 segment : ['130','131','132','155','156','185','186','145'] 46 }, 47 ct : { 48 name : '中国电信', 49 segment : ['133','153','180','181','189'] 50 } 51 }; 52 53 for(var k in operators){ 54 //console.log(operators[k].name, operators[k].segment); 55 //alert(operators[k].segment); 56 57 for(var i = 0; operators[k].segment[i]; i++){ 58 //console.log(operators[k].segment[i]); 59 if(operators[k].segment[i] == mobHead){ 60 return operators[k].name; 61 } 62 } 63 } 64 alert("您输入的手机号码有误!"); 65 }else{ 66 alert("您输入的手机号位数不正确!"); 67 } 68 }
【Tue Jul 26 2016 17:37:32 GMT+0800】
1 function isIE(no){ 2 var browser = navigator.appName; 3 var b_version = navigator.appVersion; 4 var version = b_version.split(";"); 5 var trim_Version = version[1].replace(/[ ]/g,""); 6 var ie = "Microsoft Internet Explorer"; 7 var verIE = trim_Version.substring(4,5); 8 9 if(no == verIE) 10 return true; 11 else 12 return false; 13 }
【Thu Aug 11 2016 15:45:12 GMT+0800】
百度地图：
1 //para:#BaiduMap 2 function BaiduMap(){ 3 var id = arguments[0].substring(1); 4 var grade = 15; 5 var school = $(".info h3").text(); 6 7 var map = new BMap.Map(id); 8 9 // 创建地址解析器实例 10 var myGeo = new BMap.Geocoder(); 11 // 将地址解析结果显示在地图上,并调整地图视野 12 myGeo.getPoint(school, function(point){ 13 if (point) { 14 map.centerAndZoom(point, grade); 15 map.addOverlay(new BMap.Marker(point)); 16 }else{ 17 alert("您选择地址没有解析到结果!"); 18 } 19 //添加文字标签 20 map.centerAndZoom(point, 16); 21 var opts = { 22 position : point, // 指定文本标注所在的地理位置 23 offset : new BMap.Size(0, 0) //设置文本偏移量 24 } 25 26 var label = new BMap.Label(school, opts); // 创建文本标注对象 27 label.setStyle({ 28 color : "#fff", 29 fontSize : "12px", 30 height : "20px", 31 lineHeight : "20px", 32 background: "rgba(0, 0, 0, 0.48)", 33 border:"none" 34 }); 35 map.addOverlay(label); 36 }, ""); 37 38 //设置点的弹跳动画 39 var point = new BMap.Point(point); 40 map.centerAndZoom(point, grade); 41 var marker = new BMap.Marker(point); // 创建标注 42 map.addOverlay(marker); // 将标注添加到地图中 43 marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 44 45 function showInfo(e){ 46 console.log(e.point.lng + ", " + e.point.lat); 47 } 48 map.addEventListener("click", showInfo); 49 }
CSS:
1 .map{padding-bottom:10px;} 2 #BaiduMap{width:100%;height:164px;} 3 .BMapLabel{text-shadow: none;}
HTML:
1 <div class="map"> 2 <div id="BaiduMap"></div> 3 </div><!-- /map -->
【Mon Aug 15 2016 15:02:22 GMT+0800】
scroll事件切换导航
js:
1 function shop(){ 2 var gsname = document.getElementById('gsname'); 3 var dlheight = []; 4 var dllen = $(".rightSide dl").length; 5 var realheight = 0; 6 7 $(".shop .leftSide li:first").addClass("active"); 8 9 $(".shop .leftSide li").each(function(i){ 10 11 $(this).click(function(){ 12 $(this).addClass("active").siblings().removeClass("active"); 13 for(var k=0; k<dllen;k++) 14 dlheight[k] = $(".rightSide dl").eq(k).height(); 15 for(j=0; j<i; j++) 16 realheight += dlheight[j]; 17 gsname.scrollTop = realheight; 18 realheight = 0; 19 //console.log(dlheight,realheight,i) 20 }); 21 }); 22 23 $(".rightSide dd").each(function(){ 24 $(this).click(function(){ 25 $(this).attr("data-toggle","modal").siblings().removeAttr("data-toggle"); 26 }); 27 }); 28 29 $(".top p").click(function(){ 30 $(".rightSide dd").removeAttr("data-toggle"); 31 }); 32 33 var offseTop = $(".rightSide dl").eq(0).offset().top; 34 var len = $(".rightSide dl").length; 35 36 gsname.addEventListener('scroll',function(){ 37 for(var i=0; $(".rightSide dl").eq(i).offset().top <= offseTop; i++){ 38 $(".leftSide li").eq(i).addClass("active").siblings().removeClass("active"); 39 } 40 },false); 41 42 }
css:
1 @import url("../base/css/base.css"); 2 3 @import url("commonBase.css"); 4 5 @import url("header.css"); 6 7 8 9 ul{list-style:none;padding:0;margin:0;} 10 dl,dd,h5,p{margin:0;} 11 h5{font-weight:normal;} 12 13 .container{background:#fff;} 14 15 .search{height:29px;background:#f4f4f4;border-radius:10em;margin:10px auto;-position:fixed;-left:0;-right:0} 16 .search>div{padding:0 14px;height:100%} 17 .search .lens{width:2pc;height:100%} 18 .search .lens a{height:100%;background:url("../images/index/lens.png") no-repeat center center;background-size:50%;display:block} 19 .search .inputBox{width:80%} 20 .search .inputBox input{font-size:12px;background:#f4f4f4;outline:0;width:100%;border:none;color:#acacac;} 21 22 .main{} 23 .main > div{} 24 .main .leftSide{width:30%;overflow-y: scroll;} 25 26 .main ul{list-style:none;color:#333;font-size:14px;} 27 .main ul li{height:40px;line-height:40px;border-bottom:1px solid #dedede;padding-left:20px;} 28 .main ul li.active{background:#f6f6f6;color:#33cc4e;} 29 30 31 32 .main .rightSide{width:70%;overflow-y: scroll;} 33 .main .rightSide > div{-padding-left:11px;} 34 .main dl{font-size:12px;} 35 .main dl dt{height:26px;line-height:26px;background:#f4f4f4;padding-left:11px;} 36 .main dl dd{-padding-left:11px;padding:10px 0 10px 11px;border-bottom:1px solid #dedede;} 37 .main dl dd h5{color:#333;margin:0 0 5px;font-size:12px;} 38 .main dl dd p{color:#999;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;} 39 40 .modal-content{background:none;} 41 .modal-header,.modal-body,.modal-footer{background: #fff;} 42 .modal-dialog{margin:0 6%;} 43 .modal .top{background:#7f7f7f;width:100%;height:40px;} 44 .modal .top p{width:17px;height:40px;float:right;} 45 46 .modal .top img{height:100%;} 47 .modal-content{border-radius:0 0 6px 6px;border:none;} 48 .modal-header{border-radius:6px 6px 0 0;border-bottom: 0px solid #e5e5e5;padding: 11px 15px;} 49 .modal-footer{margin:0;border-radius:0 0 6px 6px;border-top:none;} 50 51 .avatar{width:97px;height:97px;margin:0 auto} 52 .avatar img{width:100%;height:100%;border:3px solid #1fbaf3;border-radius:10em} 53 .info {text-align:center;} 54 .info h3{font-size:14px;font-family:"Micosoft YaHei";} 55 .info h3 span{color:#f00;} 56 .info h2{font-size:16px;font-family:"Micosoft YaHei";margin-top:10px;margin-bottom:10px;} 57 .info p{font-size:12px;color:#999;} 58 .modal-footer button {display: block;background:#1fbaf3;border: none;color: #fff;width:86%;height: 32px;line-height: 27px;border-radius: 6px;font-size: 12px;} 59 .modal-footer button img{height:16px;}
html:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="author" content="yahari@126.com" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 7 <meta http-equiv="X-UA-Compatible" content="chrome=1" /> 8 <meta name="renderer" content="webkit" /> 9 <meta name="format-detection" content="telephone=no"> 10 <meta name="format-detection" content="email=no"> 11 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 12 <meta content="yes" name="apple-mobile-web-app-capable"> 13 <meta content="yes" name="apple-touch-fullscreen"> 14 <meta content="telephone=no,email=no" name="format-detection"> 15 <link rel="stylesheet" href="../style/shop.css"> 16 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script> 17 <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 18 <script src="../js/shop.js"></script> 19 <title>门店</title> 20 </head> 21 <body> 22 23 <div class="container indexDet shop" data-role="page" id="pageone"> 24 25 <div class="header ui-header ui-bar-inherit ui-header-fixed1 slidedown" data-role="none"> 26 <div class="center perWidth"><h1><a href="javascript:;"></a>门店</h1></div> 27 </div><!-- /header --> 28 29 <div class="search perWidth center"> 30 <div> 31 <div class="lens rgt vtlctBase"> 32 <div class="vtlctSub"><a href="javascript:;" data-ajax="false" class="ui-link"></a></div> 33 </div><!-- /lens --> 34 <div class="inputBox lft vtlctBase"> 35 <div class="vtlctSub"><input data-role="none" placeholder="请输入您要找的门店..." value=""></div> 36 </div><!-- /inputBox --> 37 </div> 38 </div><!-- /search --> 39 40 <div class="main" data-role="main"> 41 <div class="leftSide lft"> 42 <ul> 43 <li>长安区</li> 44 <li>桥东区</li> 45 <li>裕华区</li> 46 <li>桥西区</li> 47 <li>新华区</li> 48 </ul> 49 </div><!-- /leftSide --> 50 51 52 53 <div class="rightSide lft" id="gsname"> 54 55 <!--dl> 56 <dt>长安区</dt> 57 <dd data-toggle="modal" data-target="#area"> 58 <h5>和平世家1分公司</h5> 59 <p>长安区和平路与翟营大街交口东行50米路北</p> 60 </dd> 61 </dl--> 62 63 <!--#include virtual="testShop.html"--> 64 </div><!-- /rightSide --> 65 66 67 </div><!-- /main --> 68 69 70 </div><!-- /container --> 71 72 <!-- modal --> 73 <div class="modal fade" id="area" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static"> 74 75 <div class="modal-dialog" role="document"> 76 <div class="modal-content"> 77 <div class="top"><p data-dismiss="modal"><img src="../images/shop/close.png"></p><div class="clear"></div></div> 78 <div class="modal-header"> 79 80 </div><!-- /modal-header --> 81 <div class="modal-body"> 82 <div class="avatar"> 83 <img src="../images/shop/avatar.png"> 84 </div><!-- /avatar --> 85 <div class="info"> 86 <h3>立即到门店享受<span>VIP服务</span></h3> 87 <h2>瑞城分公司</h2> 88 <p>谈固北大街与北宋路交口东行150米路北</p> 89 </div> 90 </div><!-- /modal-body --> 91 <div class="modal-footer"> 92 <button class="center" data-role="none"><img src="../images/shop/tel.png">400-1234-5678</button> 93 </div><!-- /modal-footer --> 94 </div><!-- /modal-content --> 95 </div><!-- /modal-dialog --> 96 </div><!-- /modal --> 97 <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 98 </body> 99 </html>
【Fri Aug 19 2016 09:02:45 GMT+0800】
遍历aJax返回的级联对象。例如aJax返回的对象如下：
1 function ajaxObj(){ 2 var obj = { 3 "disname": { 4 "新华一区": { 5 "gsname": ["新华路2分公司", "盛世天骄1分公司", "盛世天骄2分公司", "广源路分公司", "广源路2分公司", "北新街分公司", "新华路1分公司", "信达花园分公司"], 6 "address": ["null", "新华路新合街交叉口 北行100米路东", "新华路新合街交叉口 北行100米路东", "新华区广源路2号合作小区42B-1-102", "null", "null", "null", "null"], 7 "src": ["null", "null", "null", "null", "null", "null", "null", "null"] 8 }, 9 "新华二区": { 10 "gsname": ["北城路2分公司", "明珠花苑2分公司", "北城路3分公司", "红星街2分公司", "西城分公司", "西三庄分公司", "北城路1分公司", "联盟路分公司", "红星街分公司", "广源路分公司"], 11 "address": ["万信花园底商", "中华北大街与颐宏路交口东300米路北明珠花苑底商", "北城路万信花园门口西侧", "null", "null", "西三庄街与翔翼路交口", "北城路万信花园门口西侧", "联盟西路高柱商务楼底商", "联盟路红星街交口东行20米路北", "广源路与国泰街头交口东行１００米"], 12 "src": ["null", "null", "null", "null", "null", "null", "null", "null", "null", "null"] 13 }, 14 "长安区": { 15 "gsname": ["瑞城分公司", "和平世家1分公司", "和平世家2分公司", "白佛2分公司", "谈固西1分公司", "谈固西2分公司", "白佛分公司"], 16 "address": ["中山路与谈固大街交口北行200米路东", "和平路翟营大街东行50米路北", "null", "null", "建明北路与谈固西大街交口南行30米路西", "建明北路与谈固西大街交口南行30米路西", "中山东路与东二环交叉口瑞景华庭底商"], 17 "src": ["null", "null", "null", "null", "null", "null", "null"] 18 }, 19 "裕华一区": { 20 "gsname": ["尚东绿洲2分公司", "雅清分公司", "尚东绿洲1分公司", "尚东绿洲3分公司", "彩虹源分公司", "豪景丽园分公司"], 21 "address": ["null", "null", "null", "null", "null", "null"], 22 "src": ["null", "null", "null", "null", "null", "null"] 23 }, 24 "桥西二区": { 25 "gsname": ["顺美华庭分公司", "联邦名都2分公司", "恒大城1分公司", "恒大城2分公司", "恒大城3分公司", "联邦名都1分公司", "西里1分公司", "西里2分公司", "海棠湾1分公司", "海棠湾2分公司", "顺美华庭2分公司", "红旗分公司"], 26 "address": ["null", "联邦名都", "槐安路与维明大街交口南行200米路西", "槐安路与维明大街交口南行200米路西", "null", "联邦名都", "null", "null", "null", "null", "null", "null"], 27 "src": ["null", "null", "null", "null", "null", "null", "null", "null", "null", "null", "null", "null"] 28 }, 29 "裕华三区": { 30 "gsname": ["九里庭院2分公司", "九里庭院1分公司", "国际城3分公司", "国际城2分公司", "国际大道分公司", "水榭花都分公司", "国际城1分公司"], 31 "address": ["null", "null", "null", "null", "null", "null", "谈固南大街59-4号"], 32 "src": ["null", "null", "null", "null", "null", "null", "null"] 33 }, 34 "桥西三区": { 35 "gsname": ["春江花月1分公司", "春江花月2分公司", "新石1分公司", "旭芳园分公司", "都市晶华分公司", "新石2分公司", "都市晶华2分公司", "裕华西2分公司", "春江花月3分公司", "裕华西分公司"], 36 "address": ["null", "null", "null", "null", "null", "null", "null", "null", "null", "裕华西路与城角街交口东行100米路南"], 37 "src": ["null", "null", "null", "null", "null", "null", "null", "null", "null", "null"] 38 }, 39 "裕华二区": { 40 "gsname": ["塔北路1分公司", "塔北路2分公司", "碧水青园分公司", "翟营南2分公司", "东岗路分公司", "东岗路2分公司", "翟营南1分公司"], 41 "address": ["null", "null", "null", "null", "null", "null", "null"], 42 "src": ["null", "null", "null", "null", "null", "null", "null"] 43 }, 44 "桥西一区": { 45 "gsname": ["槐安西1分公司", "紫阁分公司", "槐安西分公司", "维明街2分公司", "维明街1分公司", "紫阁2分公司", "君晓家园2分公司", "鹿泉上庄分公司", "君晓家园1分公司"], 46 "address": ["null", "null", "红旗大街与槐安西路交口东行150米路北", "null", "null", "null", "null", "null", "null"], 47 "src": ["null", "null", "null", "null", "null", "null", "null", "null", "null"] 48 }, 49 "桥东区": { 50 "gsname": ["光华路2分公司", "胜利北3分公司", "青园北2分公司", "胜利北2分公司", "光华路1分公司", "胜利北1分公司", "青园北分公司"], 51 "address": ["null", "null", "健康路与青园街交口北行30米路东", "null", "null", "胜利北大街花香维也纳底商", "健康路与青园街交口北行30米路东"], 52 "src": ["null", "null", "null", "null", "null", "null", "null"] 53 } 54 } 55 } 56 return obj; 57 }
模拟服务器返回：
1 function testAjaxObj(){ 2 var json = ajaxObj(); 3 var d = json.disname; 4 var left = '', right = ''; 5 //console.log(json); 6 7 for(var k in d) 8 left += '<li>'+ k +'</li>'; 9 for(var k in d){ 10 //console.log(d[k].address.length); 11 right +='<dl>'; 12 right += '<dt>'+ k +'</dt>'; 13 for(i=0; i<d[k].address.length; i++){ 14 if(d[k].src[i] == 'null' || typeof(d[k].src[i]) == 'undefined') 15 d[k].src[i] = '../images/shop/avatar.png'; 16 17 if(d[k].address[i] == 'null' || typeof(d[k].address[i]) == 'undefined') 18 d[k].address[i] = '暂无详细地址'; 19 20 right += '<dd data-target="#area" data-src="'+ d[k].src[i] +'">' 21 right += '<h5>'+ d[k].gsname[i] +'</h5>'; 22 right += '<p>'+ d[k].address[i] +'</p>'; 23 right += '</dd>'; 24 } 25 right += '</dl>'; 26 } 27 $(".leftSide ul").append(left); 28 $(".rightSide div").append(right); 29 }
【Mon Oct 24 2016 10:06:05 GMT+0800】
百度地图根据自己的经纬度坐标展示地图，在1000m范围内展示需要的配套信息：
html：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html> 3 <head> 4 <title>学区房子详情</title> 5 <meta charset="UTF-8"> 6 <meta name="author" content="yahari@126.com" /> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 9 <meta name="renderer" content="webkit" /> 10 <link type="text/css" rel="stylesheet"href="../style/detail.css" /> 11 <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> 12 <!-- <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=mr6NNUk7aM8eDfHjXCuxD98y&services=&t=20160108163541"></script> --> 13 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=A4749739227af1618f7b0d1b588c0e85"></script> 14 <script src="../js/detail.js"></script> 15 </head> 16 17 <body id="st"> 18 <div class="newhouse detail"> 19 20 <div class="main"> 21 <div class="title"> 22 <div class="center w"> 23 <div class="btm"> 24 <div class="disname"> 25 <h3 data-lng="114.54204" data-lat="38.030902"><strong>石门小学</strong><span>在售</span></h3> 26 <p>项目地址：红星街与北二环西路交汇处北行500米路东</p> 27 </div><!-- /disname --> 28 <div class="tele"><a href="javascript:;"></a></div> 29 <div class="clear"></div> 30 </div><!-- /btm --> 31 </div> 32 </div><!-- /title --> 33 <div class="banner"> 34 <div class="center w"></div> 35 </div><!-- /banner --> 36 37 <div class="tab" id="tab"> 38 <div> 39 <ul class="center w"> 40 <li>楼盘动态</li> 41 <li>户型介绍</li> 42 <li>楼盘相册</li> 43 <li>月供参考</li> 44 <li>楼栋信息</li> 45 <li>周边配套</li> 46 <li>楼盘详情</li> 47 </ul> 48 </div> 49 </div><!-- /tab --> 50 51 <div class="wrap" id="wrap"> 52 <div class="center w"> 53 <div class="zbpt"> 54 <div> 55 <h3>周边配套</h3> 56 <div> 57 <ul> 58 <li class="active">公交</li> 59 <li>地铁</li> 60 <li>教育设施</li> 61 <li>医院</li> 62 <li>银行</li> 63 <li>休闲娱乐</li> 64 <li>购物</li> 65 <li>餐饮</li> 66 <li>运动健身</li> 67 </ul> 68 <div class="map"> 69 <div id="BaiduMap"></div> 70 </div><!-- /map --> 71 <div class="zbinfo" id="result">555</div><!-- /zbinfo --> 72 <div class="clear"></div> 73 </div> 74 </div> 75 </div><!-- /zbpt --> 76 </div> 77 </div><!-- /wrap --> 78 </div><!-- /main --> 79 </div><!-- /index --> 80 </body> 81 </html>
CSS：
1 @import url("../assets/css/init.css"); 2 @import url("common.css"); 3 4 .newhouse .title{height:162px;background:#f5f5f6;} 5 .getinfo{display:none;} 6 .breadcrumbnav ul{height:53px;border-bottom:1px dotted #b4b4b4;} 7 .breadcrumbnav ul li{display:inline-block;color:#b4b4b4;line-height:53px;} 8 .breadcrumbnav ul li a{color:#b4b4b4;} 9 .title .btm{height:106px;} 10 .title .disname{float:left;width:896px;} 11 .title .disname h3{padding:20px 0;font-size:28px;} 12 .title .disname h3 span{background:url("../images/detail/titlebg.png") no-repeat;width:60px;height:30px;line-height:30px;margin-left:10px;color:#fff;font-size:20px;display:inline-block;text-align:center;} 13 .title .tele{float:left;width:304px;} 14 .title .tele a{width:304px;height:106px;background:url("../images/detail/tele.png") no-repeat center center;display:block;} 15 16 .banner{height:502px;background:url("../images/detail/bannerbg.png") no-repeat;} 17 .banner > div{background:url("../images/detail/banner.png") no-repeat;height:500px;overflow:hidden;} 18 19 .tab{background:#f5f5f6;} 20 21 .tab > div{padding-top:28px;} 22 .tab ul{border-bottom:2px solid #088ee5;background:#fff;} 23 .tab li{-float:left;display:inline-block;height:47px;line-height:47px;width:110px;text-align:center;font-size:16px;cursor:pointer;} 24 .tab li.active{color:#fff;background:#088ee5;} 25 26 .fixed{position:fixed;top:0;left:0;right:0;z-index:999;} 27 28 .wrap{background:#f5f5f6;} 29 .wrap > div{} 30 .wrap > div > div{-min-height:500px;margin:0 auto 32px;border:1px solid #e1e1e1;background:#fff;} 31 .wrap > div > div > div{padding:0 20px;} 32 .wrap > div > div h3{height:55px;line-height:55px;border-bottom:1px solid #e1e1e1;font-size:16px;} 33 .wrap > div > div > a div{color:#999;background:#f9f9f9;height:50px;line-height:50px;text-align:center;} 34 35 .wrap .lpdt{} 36 .wrap .lpdt .det{height:82px;padding-top:18px;margin-top:15px;} 37 .wrap .lpdt .det .lside span{color:#04447c;background:#f4f7f9;padding:6px 12px;} 38 .wrap .lpdt .lside{width:114px;float:left;height:100%;} 39 .wrap .lpdt .rside{width:1044px;float:left;height:100%;border-bottom:1px dotted #e1e1e1;} 40 .wrap .lpdt .rside h4{font-size:14px;} 41 .wrap .lpdt .rside h4 span,.wrap .lpdt a{color:#999;float:right;} 42 .wrap .lpdt .rside p{color:#999;margin-top:23px;} 43 44 .wrap .hxjs ul{float:right;} 45 .wrap .hxjs ul li{display:inline-block;color:#999;cursor:pointer;font-size:14px;} 46 .wrap .hxjs ul li.active{color:#666;} 47 .wrap .hxjs .det{margin:28px 0;} 48 .wrap .hxjs .lside{width:246px;float:left;} 49 .wrap .hxjs .lside img{border:1px solid #e0e0e0;height:100%;} 50 .wrap .hxjs .rside{width:836px;float:left;height:105px;} 51 .wrap .hxjs .rside .info{width:585px;float:left;height:100%;} 52 .wrap .hxjs .rside .info h4{font-weight:bold;} 53 .wrap .hxjs .rside .info h4 span{font-weight:normal;padding:4px 12px;border-radius:6px;margin-left:16px;} 54 .wrap .hxjs .rside .info h4 span.sale{border:1px solid #db4c3f;background:#fff5f5;color:#db4c3f;} 55 .wrap .hxjs .rside .info p{color:#999;font-size:14px;width:585px;margin:23px 0;overflow: hidden;text-overflow: ellipsis; white-space: nowrap;} 56 .wrap .hxjs .rside .info div span {margin-right:10px;padding: 4px 8px;color: #fff;font-weight: normal;} 57 58 .wrap .hxjs .rside .price{width:250px;float:left;height:105px;line-height:50px;color:#999;font-size:14px;text-align:center;} 59 .wrap .hxjs .rside .price span{font-size:18px;color:#db4c3f;} 60 .wrap .hxjs .rside .price span strong{font-size:36px;} 61 62 .wrap .lpxc .album{padding-top:40px;} 63 .wrap .lpxc .album li{width:230px;height:200px;float:left;} 64 .wrap .lpxc .album li p{text-align:center;color:#333;font-size:14px;height:68px;line-height:68px;} 65 .wrap .lpxc .album li img{width:202px;} 66 67 .map{padding-bottom:10px;width:800px;} 68 #BaiduMap{width:100%;height:364px;} 69 .BMapLabel{text-shadow: none;} 70 71 .wrap > div > div.zbpt h3, .wrap > div > div.lpxq h3, .wrap > div > div.ygck h3{border:none;} 72 .wrap .zbpt ul{margin-bottom:10px;} 73 .wrap .zbpt ul li{display:inline-block;height:36px;line-height:36px;font-size:16px;padding:2px 24px;cursor:pointer;} 74 .wrap .zbpt ul li.active{background:#088ee5;color:#fff;} 75 .wrap .zbpt > div > div{padding-left:24px;} 76 77 .wrap .zbpt .map{float:left;} 78 .wrap .zbpt .zbinfo{float:right;width:303px;background:#f8f8f8;height:364px;overflow:auto;overflow-y:scroll;} 79 80 .wrap .lpxq{} 81 .wrap .lpxq > div > div{padding-left:50px;} 82 83 .wrap .lpxq .base ul{width:537px;float:left;} 84 .wrap .lpxq h4{font-size:15px;height:42px;line-height:42px;margin-bottom:20px;color:#999;font-size:14px;} 85 .wrap .lpxq .base ul h4{background:url("../images/detail/line.png") no-repeat left bottom;} 86 .wrap .lpxq .base ul li{height:33px;line-height:33px;} 87 .wrap .lpxq .fen .table{border-bottom:1px solid #e1e1e1;} 88 .wrap .lpxq .fen .table>tbody>tr>th{background:#f3f3f3;} 89 .wrap .lpxq .fen .table>tbody>tr>td,.wrap .lpxq .fen .table>tbody>tr>th{text-align:center;border-top:1px solid #e1e1e1;height:52px;line-height:52px;padding:0px;font-size:14px;} 90 91 .wrap .lpxq .conf{}
js:
1 $(function(){ 2 BaiduMap("#BaiduMap"); 3 }); 4 //lng: 114.54204, lat: 38.030902 5 function BaiduMap(){ 6 var id = arguments[0].substring(1), 7 bdinfo = ['公交','地铁','学校','医院','银行','娱乐','购物','餐饮','健身'], 8 grade = 15, 9 disname = $(".disname h3 strong").text(), 10 lng = $(".disname h3").attr('data-lng'), 11 lat = $(".disname h3").attr('data-lat'), 12 coordinate ={'lng': lng, 'lat': lat}, 13 map = new BMap.Map(id); 14 15 // 初始化地图,设置中心点坐标和地图级别 16 map.centerAndZoom(new BMap.Point(coordinate.lng, coordinate.lat), grade); 17 18 var point = new BMap.Point(coordinate.lng, coordinate.lat); 19 map.centerAndZoom(point, grade); 20 var marker = new BMap.Marker(point); // 创建标注 21 map.addOverlay(marker); // 将标注添加到地图中 22 //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 23 24 var opts = { 25 position : point, 26 offset : new BMap.Size(0, 0) 27 } 28 29 //文字标签 30 var label = new BMap.Label(disname, opts); 31 label.setStyle({ 32 color : "#fff", 33 fontSize : "12px", 34 height : "20px", 35 lineHeight : "20px", 36 background: "rgba(0, 0, 0, 0.48)", 37 border:"none" 38 }); 39 map.addOverlay(label); 40 41 //point附近1000m内的信息 42 var local = new BMap.LocalSearch(map, { 43 renderOptions: {map: map, panel: "result"} 44 }); 45 local.searchNearby(bdinfo[0], point, 1000); 46 $(".zbpt ul li").each(function(i){ 47 $(this).click(function(){ 48 $(this).addClass("active").siblings().removeClass("active"); 49 local.searchNearby(bdinfo[i], point, 1000); 50 }); 51 }); 52 53 54 } 55 56 function BaiduMapLocalName(){ 57 bdinfo = ['公交','地铁','学校','医院','银行','娱乐','购物','餐饮','健身']; 58 var id = arguments[0].substring(1), 59 grade = 15, 60 disname = $(".disname h3 strong").text(), 61 map = new BMap.Map(id), 62 myGeo = new BMap.Geocoder(); 63 64 myGeo.getPoint(disname, function(point){ 65 if(point){ 66 map.centerAndZoom(point, grade); 67 map.addOverlay(new BMap.Marker(point)); 68 }else 69 console.log("您选择地址没有解析到结果!"); 70 map.centerAndZoom(point, 16); 71 var opts = { 72 position : point, 73 offset : new BMap.Size(0, 0) 74 } 75 76 local = new BMap.LocalSearch(map, { 77 renderOptions: {map: map, panel: "result"} 78 }); 79 80 local.searchNearby(bdinfo[0], point, 1000); 81 $(".zbpt ul li").each(function(i){ 82 $(this).click(function(){ 83 $(this).addClass("active").siblings().removeClass("active"); 84 local.searchNearby(bdinfo[i], point, 1000); 85 }); 86 }); 87 88 var label = new BMap.Label(disname, opts); 89 label.setStyle({ 90 color : "#fff", 91 fontSize : "12px", 92 height : "20px", 93 lineHeight : "20px", 94 background: "rgba(0, 0, 0, 0.48)", 95 border:"none" 96 }); 97 map.addOverlay(label); 98 }, "石家庄"); 99 }
【Wed Feb 22 2017 13:45:32 GMT+0800】
js工具函数
1 /***数组工具类***/ 2 3 //数组去空函数，返回去空后的数组 4 Array.prototype.removeNull = function() { 5 var real = []; 6 var len = this.length; 7 8 for(var i=0; i<len; i++){ 9 if(this[i] == "" || this[i] == null) 10 continue; 11 real.push(this[i]); 12 } 13 14 return real; 15 } 16 17 //去除数组指定的值，返回去除指定值后的数组 18 Array.prototype.removeByValue = function() { 19 20 var len = this.length; 21 22 for(var i=0; i<len; i++) { 23 if(this[i] == arguments[0]) { 24 this.splice(i, 1); 25 break; 26 } 27 } 28 return this; 29 } 30 31 32 Array.prototype.removeByValues = function(val) { 33 34 var len = this.length; 35 var leng = arguments.length; 36 37 for(var j =0; j<leng;j++){ 38 for(var i=0; i<len; i++) { 39 if(this[i] == arguments[j]) { 40 this.splice(i, 1); 41 break; 42 } 43 } 44 } 45 46 return this; 47 48 } 49 50 51 //清空数组 52 Array.prototype.empty = function() { 53 this.splice(0, this.length); 54 return this; 55 } 56 57 //判断数组中是否有为空或为null的元素 58 Array.prototype.isEmpty = function() { 59 var len = this.length; 60 61 for(var i=0;i<len;i++){ 62 if(this[i] == null || this[i] == ''){ 63 return true; 64 break; 65 } 66 } 67 68 return false; 69 } 70 71 //查找某个元素是否在数组中存在 72 Array.prototype.find = function(){ 73 var len = this.length; 74 75 for(var i=0;i<len;i++){ 76 if(arguments[0] == this[i]){ 77 return true; 78 break; 79 } 80 } 81 82 return false; 83 } 84 85 86 // 87 88 89 Array.prototype.unique = function () { 90 91 var hash = {}, result = [], type = '', item; 92 93 for (var i = 0; i < this.length; i++) { 94 item = this[i]; 95 type = Object.prototype.toString.call(item); 96 97 if(!hash[item + type]) { 98 hash[item + type] = true; 99 result.push(item); 100 } 101 } 102 103 return result; 104 } 105 106 107 108 //数组去重复元素 109 Array.prototype.removeRepeationElement = function() { 110 var arr = []; 111 var obj = {}; 112 var len = this.length; 113 114 for(var i = 0; i<len; i++){ 115 obj[this[i]] = i; 116 } 117 118 for(var k in obj){ 119 arr.push(k); 120 } 121 122 return arr; 123 } 124 125 126 127 // 128 Array.prototype.removeRepeat = function() { 129 130 var obj = {}; 131 var arr = []; 132 var len = this.length; 133 134 for(var i = 0; i<len; i++){ 135 obj[this[i]] = true; 136 } 137 138 for(var attr in obj){ 139 if(obj.hasOwnProperty(attr)){ 140 arr.push(attr); 141 } 142 } 143 return arr; 144 } 145 146 147 function getId(){ 148 return document.getElementById(arguments[0]); 149 } 150 151 //获取URL链接的指定参数的值 152 function getUlrParmaValue(){ 153 var arr = window.location.search.substring(1).split("&"); 154 var obj = {}; 155 156 for(var i=0, len=arr.length; i<len; i++) 157 for(var j=0;j<arr[i].length; j++) 158 obj[arr[i].split("=")[0]] = arr[i].split("=")[1]; 159 160 return obj[arguments[0]]; 161 } 162 163 //Mon Mar 27 2017 10:20:40 GMT+0800 获取返回指定URL的值，参数为Number类型，从根目录下，第几个路径 164 function pathnameValue(){ 165 var arr = window.location.pathname.split('/'); 166 return arr[arguments[0]]; 167 } 168 169 function Extend(Child, Parent) { 170 var F = function(){}; 171 F.prototype = Parent.prototype; 172 Child.prototype = new F(); 173 Child.prototype.constructor = Child; 174 Child.uber = Parent.prototype; 175 } 176 177 178 function tabClkSwitch(){ 179 var selector = arguments[0]; 180 var div = arguments[1]; 181 var callback = arguments[2]; 182 var bool, current; 183 for(k in arguments){ 184 if(typeof arguments[k] == 'boolean') 185 bool = arguments[k]; 186 else 187 bool = true; 188 if(arguments[k].toString().indexOf(".") != -1 || typeof arguments[k]=='boolean') 189 current = 'active'; 190 else 191 current = arguments[k]; 192 } 193 194 if(bool){ 195 $(selector).eq(0).addClass(current); 196 } 197 198 $(selector).each(function(i){ 199 $(this).click(function(){ 200 $(this).addClass(current).siblings().removeClass(current); 201 if(typeof div === 'string' && typeof div != undefined){ 202 $(div).eq(i).show().siblings().hide(); 203 } 204 if(typeof callback === 'function'){ 205 callback(); 206 } 207 }); 208 }); 209 } 210 211 212 function shop(){ 213 var gsname = document.getElementById('gsname'); 214 var n = 96; 215 var dh = []; 216 var len = $(".rightSide dl").length; 217 var rh = 0; 218 219 $(".shop .leftSide li:first").addClass("active"); 220 221 $(".shop .leftSide li").each(function(i){ 222 $(this).attr('id',"id"+i); 223 224 $(this).click(function(){ 225 $(this).addClass("active").siblings().removeClass("active"); 226 for(var k=0; k<len;k++) 227 dh[k] = $(".rightSide dl").eq(k).height(); 228 for(j=0; j<i; j++) 229 rh += dh[j]; 230 gsname.scrollTop = rh; 231 rh = 0; 232 }); 233 }); 234 235 $(".rightSide dd").each(function(){ 236 $(this).click(function(){ 237 $(this).attr("data-toggle","modal").siblings().removeAttr("data-toggle"); 238 $(".info h2").text($(this).find("h5").text()); 239 $(".info p").text($(this).find("p").text()); 240 $(".avatar img").attr('src', $(this).attr('data-src')); 241 }); 242 }); 243 244 $(".top p").click(function(){ 245 $(".rightSide dd").removeAttr("data-toggle"); 246 }); 247 248 gsname.addEventListener('scroll',function(){ 249 for(var i=0; $(".rightSide dl").eq(i).offset().top <= n; i++){ 250 $(".leftSide li").eq(i).addClass("active").siblings().removeClass("active"); 251 } 252 },false); 253 254 } 255 256 function ajaxShop(){ 257 var left = "", right =""; 258 mui.plusReady(function(){ 259 var url = 'http://192.168.20.235:8080/my012tradapp/DEPT/DeptList.do'; 260 var data = {}; 261 var type = 'POST'; 262 var dataType = 'json'; 263 var success = function(data){ 264 mui.plusReady(function(){ 265 //关闭等待框 266 plus.nativeUI.closeWaiting(); 267 //显示当前页面 268 mui.currentWebview.show(); 269 }); 270 var d = data.disname; 271 var len = getJsonObjLength(d[k]); 272 273 for(var k in d){ 274 left += '<li>'+ k +'</li>'; 275 } 276 277 for(var k in d){ 278 right +='<dl>'; 279 right += '<dt>'+ k +'</dt>'; 280 for(i=0; i<d[k].address.length; i++){ 281 if(d[k].src[i] == 'null' || typeof(d[k].src[i]) == 'undefined') 282 d[k].src[i] = '../images/shop/avatar.png'; 283 284 if(d[k].address[i] == 'null' || typeof(d[k].address[i]) == 'undefined') 285 d[k].address[i] = '暂无详细地址'; 286 287 right += '<dd data-target="#area" data-src="'+ d[k].src[i] +'">' 288 right += '<h5>'+ d[k].gsname[i] +'</h5>'; 289 right += '<p>'+ d[k].address[i] +'</p>'; 290 right += '</dd>'; 291 } 292 right += '</dl>'; 293 } 294 295 $(".leftSide ul").html(left); 296 $(".rightSide div").append(right); 297 shop(); 298 } 299 $.post(url, success, dataType); 300 }); 301 302 303 } 304 305 306 function ajaxObj(){ 307 var obj = { 308 "disname": { 309 "新华一区": { 310 "gsname": ["新华路2分公司", "盛世天骄1分公司", "盛世天骄2分公司", "广源路分公司", "广源路2分公司", "北新街分公司", "新华路1分公司", "信达花园分公司"], 311 "address": ["null", "新华路新合街交叉口 北行100米路东", "新华路新合街交叉口 北行100米路东", "新华区广源路2号合作小区42B-1-102", "null", "null", "null", "null"], 312 "src": ["null", "null", "null", "null", "null", "null", "null", "null"] 313 }, 314 "新华二区": { 315 "gsname": ["北城路2分公司", "明珠花苑2分公司", "北城路3分公司", "红星街2分公司", "西城分公司", "西三庄分公司", "北城路1分公司", "联盟路分公司", "红星街分公司", "广源路分公司"], 316 "address": ["万信花园底商", "中华北大街与颐宏路交口东300米路北明珠花苑底商", "北城路万信花园门口西侧", "null", "null", "西三庄街与翔翼路交口", "北城路万信花园门口西侧", "联盟西路高柱商务楼底商", "联盟路红星街交口东行20米路北", "广源路与国泰街头交口东行１００米"], 317 "src": ["null", "null", "null", "null", "null", "null", "null", "null", "null", "null"] 318 }, 319 "长安区": { 320 "gsname": ["瑞城分公司", "和平世家1分公司", "和平世家2分公司", "白佛2分公司", "谈固西1分公司", "谈固西2分公司", "白佛分公司"], 321 "address": ["中山路与谈固大街交口北行200米路东", "和平路翟营大街东行50米路北", "null", "null", "建明北路与谈固西大街交口南行30米路西", "建明北路与谈固西大街交口南行30米路西", "中山东路与东二环交叉口瑞景华庭底商"], 322 "src": ["null", "null", "null", "null", "null", "null", "null"] 323 }, 324 "裕华一区": { 325 "gsname": ["尚东绿洲2分公司", "雅清分公司", "尚东绿洲1分公司", "尚东绿洲3分公司", "彩虹源分公司", "豪景丽园分公司"], 326 "address": ["null", "null", "null", "null", "null", "null"], 327 "src": ["null", "null", "null", "null", "null", "null"] 328 }, 329 "桥西二区": { 330 "gsname": ["顺美华庭分公司", "联邦名都2分公司", "恒大城1分公司", "恒大城2分公司", "恒大城3分公司", "联邦名都1分公司", "西里1分公司", "西里2分公司", "海棠湾1分公司", "海棠湾2分公司", "顺美华庭2分公司", "红旗分公司"], 331 "address": ["null", "联邦名都", "槐安路与维明大街交口南行200米路西", "槐安路与维明大街交口南行200米路西", "null", "联邦名都", "null", "null", "null", "null", "null", "null"], 332 "src": ["null", "null", "null", "null", "null", "null", "null", "null", "null", "null", "null", "null"] 333 }, 334 "裕华三区": { 335 "gsname": ["九里庭院2分公司", "九里庭院1分公司", "国际城3分公司", "国际城2分公司", "国际大道分公司", "水榭花都分公司", "国际城1分公司"], 336 "address": ["null", "null", "null", "null", "null", "null", "谈固南大街59-4号"], 337 "src": ["null", "null", "null", "null", "null", "null", "null"] 338 }, 339 "桥西三区": { 340 "gsname": ["春江花月1分公司", "春江花月2分公司", "新石1分公司", "旭芳园分公司", "都市晶华分公司", "新石2分公司", "都市晶华2分公司", "裕华西2分公司", "春江花月3分公司", "裕华西分公司"], 341 "address": ["null", "null", "null", "null", "null", "null", "null", "null", "null", "裕华西路与城角街交口东行100米路南"], 342 "src": ["null", "null", "null", "null", "null", "null", "null", "null", "null", "null"] 343 }, 344 "裕华二区": { 345 "gsname": ["塔北路1分公司", "塔北路2分公司", "碧水青园分公司", "翟营南2分公司", "东岗路分公司", "东岗路2分公司", "翟营南1分公司"], 346 "address": ["null", "null", "null", "null", "null", "null", "null"], 347 "src": ["null", "null", "null", "null", "null", "null", "null"] 348 }, 349 "桥西一区": { 350 "gsname": ["槐安西1分公司", "紫阁分公司", "槐安西分公司", "维明街2分公司", "维明街1分公司", "紫阁2分公司", "君晓家园2分公司", "鹿泉上庄分公司", "君晓家园1分公司"], 351 "address": ["null", "null", "红旗大街与槐安西路交口东行150米路北", "null", "null", "null", "null", "null", "null"], 352 "src": ["null", "null", "null", "null", "null", "null", "null", "null", "null"] 353 }, 354 "桥东区": { 355 "gsname": ["光华路2分公司", "胜利北3分公司", "青园北2分公司", "胜利北2分公司", "光华路1分公司", "胜利北1分公司", "青园北分公司"], 356 "address": ["null", "null", "健康路与青园街交口北行30米路东", "null", "null", "胜利北大街花香维也纳底商", "健康路与青园街交口北行30米路东"], 357 "src": ["null", "null", "null", "null", "null", "null", "null"] 358 } 359 } 360 } 361 return obj; 362 } 363 364 /* 365 * 日期格式化转换方法 366 * date：2017年5月9日 17:04:49 367 * new Date().format("yyyy/MM/dd"); //"2017/05/09" 368 * new Date().format("yyyy/MM/dd hh:mm:ss"); //"2017/05/09 17:01:04" 369 * new Date().format("hh:mm:ss"); //"17:01:10" 370 */ 371 Date.prototype.format = function(fmt) { 372 var o = { 373 "M+" : this.getMonth()+1, //月份 374 "d+" : this.getDate(), //日 375 "h+" : this.getHours(), //小时 376 "m+" : this.getMinutes(), //分 377 "s+" : this.getSeconds(), //秒 378 "q+" : Math.floor((this.getMonth()+3)/3), //季度 379 "S" : this.getMilliseconds() //毫秒 380 }; 381 if(/(y+)/.test(fmt)) { 382 fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 383 } 384 for(var k in o) { 385 if(new RegExp("("+ k +")").test(fmt)){ 386 fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length))); 387 } 388 } 389 return fmt; 390 }
事件のカゲに、やっぱり矢張...
浙公网安备 33010602011771号