伸縮導航及頁面伸縮
提要：在咱們寫項目的時候，每每會涉及到伸縮導航這麼一個操做，相似下圖javascript
本功能是基於html+jquery實現的css
HTML代碼以下：html
<div class="map-nav">
<div class="map-change-side"><i class="iconfont icon-view-list-o map-change-sideIcon"></i></div>
<ul class="map-nav-list">
<li class="map-treeview">
<a class="map-sidebar-toggle" href="javascript:;" showId="" flexShow="0">
<i class="iconfont icon-diqiu1 map-sidebar-icon"></i>
<span>基礎</span>
<i class="iconfont icon-jiantou map-sidebar-Ricon"></i>
</a>
<ul class="map-second-nav">
<!--<li>初始加載</li>-->
<!--<li>mapBox底圖</li>-->
<li ui-sref='map'>Arcgis</li>
<li ui-sref='mapgaode'>高德</li>
<!--<li>superMap底圖</li>-->
</ul>
</li>
<li class="map-treeview">
<a class="map-sidebar-toggle" href="javascript:;" showId="" flexShow="0">
<i class="iconfont icon-tuceng map-sidebar-icon"></i>
<span>Layer控制</span>
<i class="iconfont icon-jiantou map-sidebar-Ricon"></i>
</a>
<ul class="map-second-nav">
<li ui-sref='basemapchange'>底圖切換</li>
<li ui-sref='mapchange'>圖層切換</li>
</ul>
</li>
<li class="map-treeview">
<a class="map-sidebar-toggle" href="javascript:;" showId="" flexShow="0">
<i class="iconfont icon-xiazai18 map-sidebar-icon"></i>
<span>地圖要素</span>
<i class="iconfont icon-jiantou map-sidebar-Ricon"></i>
</a>
<ul class="map-second-nav">
<li ui-sref='mapinfo'>彈出層</li>
<li ui-sref='mapinfocustom'>自定義彈出層</li>
<li ui-sref='mapfeature'>基礎要素</li>
<li ui-sref='maplonlat'>獲取經緯度</li>
<!--<li ui-sref='mapmarker'>自定義Marker</li>-->
</ul>
</li>
<li class="map-treeview">
<a class="map-sidebar-toggle" href="javascript:;" showId="" flexShow="0">
<i class="iconfont icon-sousuo map-sidebar-icon"></i>
<span>搜索</span>
<i class="iconfont icon-jiantou map-sidebar-Ricon"></i>
</a>
<ul class="map-second-nav">
<li ui-sref='basemapsearch'>基礎搜索</li>
</ul>
</li>
<li class="map-treeview">
<a class="map-sidebar-toggle" href="javascript:;" showId="" flexShow="0">
<i class="iconfont icon-icon map-sidebar-icon"></i>
<span>統計分析</span>
<i class="iconfont icon-jiantou map-sidebar-Ricon"></i>
</a>
<ul class="map-second-nav">
<li ui-sref="mappath">路徑規劃</li>
<li ui-sref="mapheat">熱點統計</li>
<li>地圖圖表</li>
<li ui-sref="maprender">屬性分析</li>
<li ui-sref='maprectsearch'>框選分析</li>
<li ui-sref='mappointsearch'>點選分析</li>
</ul>
</li>
<li class="map-treeview">
<a class="map-sidebar-toggle" href="javascript:;" showId="" flexShow="0">
<i class="iconfont icon-shezhigongjutianjia map-sidebar-icon"></i>
<span>工具</span>
<i class="iconfont icon-jiantou map-sidebar-Ricon"></i>
</a>
<ul class="map-second-nav">
<li ui-sref='mapgraphic'>繪製矢量要素</li>
<li ui-sref='maptools'>地圖量算</li>
<li ui-sref='mapprint'>地圖打印(web)</li>
<li ui-sref='mapprintser'>地圖打印(server)</li>
</ul>
</li>
<li class="map-treeview">
<a class="map-sidebar-toggle" href="javascript:;" showId="" flexShow="0">
<i class="iconfont icon-changyongshili map-sidebar-icon"></i>
<span>業務操做</span>
<i class="iconfont icon-jiantou map-sidebar-Ricon"></i>
</a>
<ul class="map-second-nav">
<li ui-sref="mappoint">封裝數據畫點</li>
<!--<li ui-sref="mapconstructor">封裝版框選查詢</li>-->
<li ui-sref="mapmarkerinfo">封裝版繪點彈窗</li>
<li ui-sref="mapattrsearch">屬性查詢</li>
<!--<li ui-sref="mapfeaturelayer">圖層屬性點擊</li>-->
<!--<li ui-sref="mapconstructor">封裝代碼測試</li>-->
</ul>
</li>
</ul>
</div>
css代碼以下：java
.map-treeview {
position: relative;
}
.map-sidebar-toggle {
display: block;
height: 40px;
line-height: 40px;
text-align: left;
padding-left: 17px;
box-sizing: border-box;
overflow: hidden;
}
.map-sidebar-toggle:hover {
background: rgba(255,255,255,.1);
}
.map-sidebar-icon {
margin-right: 10px;
}
.map-sidebar-Ricon {
float: right;
margin-right: 10px;
transform: rotate(90deg);
}
.map-sidebar-RiconChange {
transform: rotate(180deg);
transition: all .3s;
}
.map-sidebar-active {
/**/
background: rgba(255,255,255,.1);
}
.map-second-nav {
display: none;
background-color: #26303C;
z-index: 9999;
}
.map-second-smallNav {
position: absolute;
top:0;
left:50px;
width:200px;
}
.map-second-nav>li {
min-height: 40px;
line-height: 40px;
cursor: pointer;
}
.map-second-nav>li:hover {
background: rgba(255,255,255,.1);
}
.viewWrap {
height: 100%;
}
JS代碼以下：jquery
/*左側導航部分*/
var flag = true;
var flexFlag = true;
$(".map-sidebar-toggle").click(function(){
var slideWidth = $(".map-aside").width();
if(Number(slideWidth) != 50){
$(".map-treeview").unbind("mouseenter").unbind("mouseleave");
$(".map-second-nav").removeClass("map-second-smallNav").unbind("mouseenter").unbind("mouseleave");
$(this).children(".map-sidebar-Ricon").addClass("map-sidebar-RiconChange").parent().parent().siblings().children(".map-sidebar-toggle").children(".map-sidebar-Ricon").removeClass("map-sidebar-RiconChange");
$(this).attr("showId",1).addClass("map-sidebar-active").parent().siblings().children(".map-sidebar-toggle").attr("showId",0).removeClass("map-sidebar-active");
// $(this).siblings(".map-second-nav").slideDown().parent().siblings().children(".map-second-nav").slideUp();
// $(this).siblings(".map-second-nav").children("li").removeClass("map-sidebar-active");
if(flexFlag){
$(this).siblings(".map-second-nav").stop().slideDown().parent().siblings().children(".map-second-nav").stop().slideUp();
$(this).siblings(".map-second-nav").children("li").removeClass("map-sidebar-active");
$(this).attr("flexShow","1");
$(this).parent().siblings().children(".map-sidebar-toggle").attr("flexShow","0");
flexFlag = false;
return;
}else{
$(this).parent().siblings().children(".map-sidebar-toggle").attr("flexShow","0");
if($(this).attr("flexShow") == "1"){
$(this).siblings(".map-second-nav").stop().slideUp();
$(this).children(".map-sidebar-Ricon").removeClass("map-sidebar-RiconChange");
}else{
$(this).attr("flexShow","1");
$(this).parent().siblings().children(".map-sidebar-toggle").attr("flexShow","0");
$(this).siblings(".map-second-nav").stop().slideDown().parent().siblings().children(".map-second-nav").stop().slideUp();
$(this).siblings(".map-second-nav").children("li").removeClass("map-sidebar-active");
flexFlag = false;
return;
};
flexFlag = true;
return;
};
};
});
$(".map-change-side").click(function () {
var sideWidth = $(".map-aside").width();
var clientWidth = $(".mapView").width();
if(sideWidth == 230){
$("#leafletMap").css("width",(clientWidth+180)+"px");
}else{
$("#leafletMap").css("width",(clientWidth-180)+"px");
};
// m.invalidateSize(true);//重載地圖；
/*更改地圖大小代碼(兼容IE)*/
var event = document.createEvent('Event');
event.initEvent('resize', true, false);
window.dispatchEvent(event);
/*更改地圖大小代碼(不兼容IE)*/
// ev = new Event("resize", {"bubbles":true, "cancelable":false});
// setTimeout(function(){
// document.dispatchEvent(new Event("resize", {"bubbles":true, "cancelable":false}));
// },1000);
$(".map-second-nav").removeClass("map-second-smallNav").unbind("mouseenter").unbind("mouseleave");
$(".map-treeview").unbind("mouseenter").unbind("mouseleave");
$(".map-second-nav").stop().slideUp();
$(".map-sidebar-toggle").children(".map-sidebar-Ricon").removeClass("map-sidebar-RiconChange");
if(flag){
$(".map-aside").animate({width:"50px"},500);
$(".map-mainWrap").animate({left:"50px"},500);
$(".map-sidebar-toggle").siblings(".map-second-nav").stop().slideUp();
$(".map-treeview").bind("mouseenter",function(){
var sideWidth = $(".map-aside").width();
if(Number(sideWidth) == 50){
$(this).children(".map-second-nav").css("display","block").addClass("map-second-smallNav")
.parent().siblings().children(".map-second-nav").css("display","none").removeClass("map-second-smallNav");
$(this).children(".map-second-nav").bind("mouseenter",function(){
$(this).siblings(".map-sidebar-toggle").addClass("map-sidebar-active");
});
$(this).children(".map-second-nav").bind("mouseleave",function(){
$(this).siblings(".map-sidebar-toggle").removeClass("map-sidebar-active");
$.each($(".map-sidebar-toggle"),function(i,v){
var judgeShow = $(".map-sidebar-toggle").eq(i).attr("showId");
if(judgeShow == 1){
$(".map-sidebar-toggle").eq(i).addClass("map-sidebar-active");
};
})
});
}else{
$.each($(".map-sidebar-toggle"),function(i,v){
if(v.className.indexOf("map-sidebar-active")> -1){
$(v).siblings(".map-second-nav").show();
};
});
};
})
$(".map-treeview").bind("mouseleave",function(){
$(".map-second-nav").hide();
})
flag = false;
}else{
$(".map-aside").animate({width:"230px"},500);
$(".map-mainWrap").animate({left:"230px"},500);
$.each($(".map-sidebar-toggle"),function(i,v){
if(v.className.indexOf("map-sidebar-active")> -1){
$(v).attr("flexShow","1");
$(v).parent().siblings().children(".map-sidebar-toggle").attr("flexShow","0");
$(v).siblings(".map-second-nav").stop().slideDown();
$(v).children(".map-sidebar-Ricon").addClass("map-sidebar-RiconChange");
};
});
flag = true;
flexFlag = false;
};
});
/*子菜單操做*/
$(".map-second-nav>li").click(function(){
$(this).siblings().removeClass("map-sidebar-active");
$(this).addClass("map-sidebar-active").parent().siblings(".map-sidebar-toggle").attr("showId",1)
.addClass("map-sidebar-active").parent().siblings()
.children(".map-sidebar-toggle").attr("showId",0).removeClass("map-sidebar-active").siblings(".map-second-nav").children("li").removeClass("map-sidebar-active");
});
注意：web
咱們但願在左側導航變化的時候，右側主體內容部分大小也要隨之改變，在響應式佈局時，不用設置具體參數，主體部分天然會進行收縮，但涉及到例如地圖變化，這類沒有主動變化的內容時，咱們須要對右側部分進行處理，能夠在操做時加入如下代碼：（該代碼的主要功能是主動監聽主題內容的變化，並重置resize）api
/*更改主題內容大小代碼(不兼容IE)*/
var ev = new Event("resize", {"bubbles":true, "cancelable":false});
setTimeout(function(){
document.dispatchEvent(new Event("resize", {"bubbles":true, "cancelable":false}));
},1000);
/*更改主體內容大小代碼(兼容IE)*/var event = document.createEvent('Event');event.initEvent('resize', true, false);window.dispatchEvent(event);
相關文章
- 1. QML側邊伸縮導航欄
- 2. js實現水平伸縮導航欄
- 3. css作導航欄伸縮菜單
- 4. JQuery練習——伸縮的導航
- 5. 伸縮自如的導航欄
- 6. flex伸縮盒子如何伸縮
- 7. 伸縮位圖
- 8. 可伸縮性
- 9. 伸縮屬性
- 10. 伸縮佈局
- 更多相關文章...
- • ionic 導航 - ionic 教程
- • jQuery Mobile 導航欄 - jQuery Mobile 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Flink 數據傳輸及反壓詳解
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 升級Gradle後報錯Gradle‘s dependency cache may be corrupt (this sometimes occurs
- 2. Smarter, Not Harder
- 3. mac-2019-react-native 本地環境搭建(xcode-11.1和android studio3.5.2中Genymotion2.12.1 和VirtualBox-5.2.34 )
- 4. 查看文件中關鍵字前後幾行的內容
- 5. XXE萌新進階全攻略
- 6. Installation failed due to: ‘Connection refused: connect‘安卓studio端口占用
- 7. zabbix5.0通過agent監控winserve12
- 8. IT行業UI前景、潛力如何？
- 9. Mac Swig 3.0.12 安裝
- 10. Windows上FreeRDP-WebConnect是一個開源HTML5代理，它提供對使用RDP的任何Windows服務器和工作站的Web訪問
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. QML側邊伸縮導航欄
- 2. js實現水平伸縮導航欄
- 3. css作導航欄伸縮菜單
- 4. JQuery練習——伸縮的導航
- 5. 伸縮自如的導航欄
- 6. flex伸縮盒子如何伸縮
- 7. 伸縮位圖
- 8. 可伸縮性
- 9. 伸縮屬性
- 10. 伸縮佈局