wallimn
- 浏览: 5181044 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
silence19841230：
先拿走看看
SpringBoot2.0开发WebSocket应用完整示例 -
wallimn：
masuweng 写道发下源码下载地址吧!三个相关文件打了个包 ...
SpringBoot2.0开发WebSocket应用完整示例 -
masuweng：
发下源码下载地址吧!
SpringBoot2.0开发WebSocket应用完整示例 -
masuweng：
SpringBoot2.0开发WebSocket应用完整示例 -
wallimn：
<div class="quote_title ...
前端框架iviewui使用示例之菜单+多Tab页布局
前言：
综合使用menu、tab实现菜单+Tab页的布局模式。学习调试作品，代码不是很严谨，但基本功能都实现了。
效果：
代码：
打开开发者工具，看看是不是有什么资源没有找到。再看看iviewui的代码有没有转化为正常的HTML代码。
综合使用menu、tab实现菜单+Tab页的布局模式。学习调试作品，代码不是很严谨，但基本功能都实现了。
效果：
代码：
<!DOCTYPE html>
<!--
作者：wallimn
博客：http://wallimn.iteye.com
时间：2017-11-22
-->
<html>
<head>
<meta charset="utf-8">
<title>iview示例</title>
<link rel="stylesheet" type="text/css" href="iview/styles/iview.css">
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="iview/iview.js"></script>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<style type="text/css">
body,html{
background: #f5f7f9;
}
.layout{
}
.layout-logo{
width: 100px;
height: 40px;
background: #5b6270;
border-radius: 3px;
float: left;
position: relative;
top: 15px;
left: 20px;
}
.layout-content{
position:absolute;
right:0;
left:0;
top:90px;
bottom:90px;
margin: 15px;
overflow: hidden;
background: #fff;
border-radius: 4px;
}
.layout-content-main{
min-height: 400px;
padding: 10px;
}
.layout-copy{
text-align: center;
padding: 5px 0 10px;
color: #9ea7b4;
position:absolute;
bottom:0;
right:0;
left:0;
width:100%;
height:90px;
}
.layout-top{
position:absolute;
top:0;
right:0;
left:0;
width:100%;
height:90px;
}
</style>
</head>
<body>
<div id="app">
<div class="layout">
<div class="layout-top">
<div class="layout-logo"></div>
</div>
<div class="layout-content">
<Row >
<i-col span="5">
<i-menu active-name="1-1" width="auto" accordion :open-names="[menuData[0].name]" @on-select="menuSelect" :style="{height:mainHeight+'px'}">
<Submenu v-for="item in menuData" :name="item.name">
<template slot="title">
<Icon type="ios-analytics"></Icon>{{item.label}}
</template>
<menu-item v-for="mi in item.menuitems" :name="mi.name">{{mi.label}}</menu-item>
</Submenu>
</i-menu>
</i-col>
<i-col span="19">
<div class="layout-content-main" >
<Tabs type="card" @on-tab-remove="removeTab" @on-click="clickTab" :animated="false" :value="activeTab">
<template v-for="(item,index) in mainTabs">
<tab-pane :label="item.label" closable :name="item.name" v-if="item.show">
<iframe frameborder="0" width="100%" :height="frameHeight" marginheight="0" scrolling="auto" marginwidth="0" :src="item.url"></iframe>
</tab-pane>
</template>
</Tabs>
</div>
</i-col>
</Row>
</div>
<div class="layout-copy">
2017-2018 © http://wallimn.iteye.com
</div>
</div>
</div>
<script type="text/javascript">
var vue = new Vue({
el:'#app',
data:function(){
return {
menuData:[
{ label:'菜单1',name:"m1",
menuitems:[
{name:'m1-1',label:'菜单1-1',url:'iview.html'},
{name:'m1-2',label:'菜单1-2',url:'grid.html'},
{name:'m1-3',label:'菜单1-3',url:'button.html'},
{name:'m1-4',label:'菜单1-4',url:'table.html'},
]
},
{ label:'菜单2',name:"m2",
menuitems:[
{name:'m2-1',label:'菜单2-1',url:'http://wallimn.iteye.com'},
{name:'m2-2',label:'菜单2-2',url:'m2-1.html'},
{name:'m2-3',label:'菜单2-3',url:'m2-1.html'},
{name:'m2-4',label:'菜单2-4',url:'m2-1.html'},
]
},
{ label:'菜单3',name:"m3",
menuitems:[
{name:'m3-1',label:'菜单3-1',url:'m3-1.html'},
{name:'m3-2',label:'菜单3-2',url:'m3-1.html'},
{name:'m3-3',label:'菜单3-3',url:'m3-1.html'},
{name:'m3-4',label:'菜单3-4',url:'m3-1.html'},
]
},
{ label:'菜单4',name:"m4",
menuitems:[
{name:'m4-1',label:'菜单4-1',url:'m4-1.html'},
{name:'m4-2',label:'菜单4-2',url:'m4-1.html'},
{name:'m4-3',label:'菜单4-3',url:'m4-1.html'},
{name:'m4-4',label:'菜单4-4',url:'m4-1.html'},
]
}
],
activeTab:null,
mainHeight: 0,
frameHeight: 0,
mainTabs:[]
};
},
mounted:function(){
this.setFrameHeight();
},
methods:{
clickTab:function(name){
var vm=this;
vm.frameHeight -= 1;
//解决chrome浏览器中tab切换滚动条消失的问题。
window.setTimeout(function(){
vm.frameHeight=vm.frameHeight+1;
},100);
},
//根据名称来查找对应的菜单条目
getMenuItem:function(name){
for(var sm=0; sm<this.menuData.length; sm++){
for(var mi=0; mi<this.menuData[sm].menuitems.length; mi++){
if(this.menuData[sm].menuitems[mi].name==name)return this.menuData[sm].menuitems[mi];
}
}
return {};//这个应该不可能发生
},
//根据名称查找对应的Tab页。
getTab:function(name){
for(var i=0; i<this.mainTabs.length; i++){
if(this.mainTabs[i].name==name)return this.mainTabs[i];
}
return null;//没有找到
},
//设置Tab页不可见。
removeTab:function (name) {
var tab = this.getTab(name);
if(tab!=null)tab.show=false;
console.log("mainTabRemove, name=",name,", label=",tab.label,", url=",tab.url);
},
setFrameHeight:function(){
//调整掉一些补白的值
this.mainHeight = (document.documentElement.scrollHeight || document.body.scrollHeight)-90-90;
this.frameHeight = this.mainHeight-90;
},
//菜单点击
menuSelect:function(name){
this.$Message.info(name);
var tab = this.getTab(name);
if(tab==null){
var mi = this.getMenuItem(name);
var mi = $.extend({},mi,{show:true});
this.mainTabs.push(mi);
}
else{
tab.show=true;
}
this.activeTab=name;
},
onAuthor:function(){
this.$Message.info("wallimn，http://wallimn.iteyey.com");
}
}
});
window.onresize=function(){
vue.setFrameHeight();
}
</script>
</body>
</html>
- 大小: 36.8 KB
分享到：
评论
2 楼
wallimn
2018-05-19
水淼火 写道
你好,我使用以后,图标不显示,应该怎么引用呢,谢谢
打开开发者工具，看看是不是有什么资源没有找到。再看看iviewui的代码有没有转化为正常的HTML代码。
1 楼
水淼火
2018-05-18
你好,我使用以后,图标不显示,应该怎么引用呢,谢谢
发表评论
-
gradle编译错误：Could not find method compile() for arguments
2020-09-19 10:50 18670编译（IDEA+Gradle）一个别人的工程，出现一个 ... -
netty心跳检查之UDP篇
2019-09-15 08:50 2494部分UDP通信场景中，需要客户端定期发送心跳信息，以获取终 ... -
解决tomcat部署两个SpringBoot应用提示InstanceAlreadyExistsException
2019-06-30 11:49 3494两个SpringBoot应用部署在一个Tomcat中，单独 ... -
Eclipse配置MyBatis代码自动化功能
2019-06-29 10:16 18451.安装插件 Eclipse中，Help->Ecli ... -
vue.js中使用qrcode生成二维码
2019-05-20 00:00 7695一、安装包 npm install qrcodejs2 --s ... -
MySQL插入数据报错： Incorrect string value: '\xFD\xDE'
2019-03-31 23:19 1285我MySQL数据库用的uft-8字符集，插入数据一直很正常 ... -
vue自定义组件并双向绑定属性
2019-03-08 22:46 3272做了两个子组件，原理基本一样，一个是使用原生的select ... -
vue-router简单示例
2019-03-05 00:32 1184写个基本完整、稍有借鉴意义的示例，防止自己忘记。 &l ... -
“联通充值系统繁忙”轻松应对
2019-02-06 11:03 4005大过年的，联通充个值一直报“充值系统繁忙”。昨天晚上试了几 ... -
electron.js数据库应用---导航菜单(element-ui+mysql)
2019-02-05 21:33 2405一、环境搭建 略， ... -
electron.js数据库应用---入门(mysql+element-ui)
2019-01-27 23:19 7558我的机器：Windows10，64 ... -
SpringMVC 在controller层中注入成员变量request，是否线程安全
2018-12-17 21:17 2782@RestController public class ... -
VueJS 组件参数名命名与组件属性转化
2018-12-03 00:00 2095转自：https://www.cnblogs.com/meiy ... -
vue-resource拦截器实现token发送及检验自动化
2018-11-16 22:38 3090用了很长时间vue-resource，最近思考$http发 ... -
element-ui试用手记
2018-10-29 20:25 1771element-ui、iviewui都以vue.js为基础 ... -
iviewui中表格控件中render的使用示例
2018-07-07 16:46 9803示例了如何在表格中显示按钮，如何将代码转化为文字。 i ... -
Tomcat错误“Alias name tomcat does not identify a key entry”解决
2018-07-05 21:39 6673申请到了阿里云的证书后，下载、按照说明生成jks格式证书、 ... -
阿里云免费证书“fileauth.txt内容配置错误”解决
2018-07-05 20:43 5348最近研究微信小程序开发，上阿里云申请了个证书，使用文件验证 ... -
springboot2.0跨域配置
2018-07-04 22:11 5300springboot2.0跨域配置： 一、代码 ... -
微信小程序使用code换openid的方法（JAVA、SpringBoot）
2018-07-01 21:52 10444微信小程序序的代码中提示，使用code换取openid，但 ...
相关推荐
**H+前端UI框架** H+是一款基于Bootstrap框架深度定制的高性能前端UI解决方案，专为开发者和设计师打造。它的设计风格简洁、现代，且高度可定制化，适用于各类企业级项目开发。H+提供了丰富的组件和示例，帮助...
H+框架充分利用jQuery的优势，为开发者提供了丰富的UI组件，如导航菜单、按钮、表单、数据表格、时间轴、图表等，这些组件均经过精心设计和优化，满足了后台管理界面的各种需求。 H+框架的另一个亮点在于其全面的...
Layui是一个轻量级的前端UI框架，它的特点是模块化、响应式、简洁且易于上手。"Layui前端框架"提供了丰富的组件，如表格、按钮、弹框、表单、图标等，用于构建美观的用户界面。通过与SpringBoot和Thymeleaf的结合，...
h+ UI框架，全称为HPlus UI，是一款专为后台管理系统设计的前端界面框架。这款框架以简洁、高效、易用为设计理念，旨在为开发者提供一套完整的后台界面解决方案，帮助他们快速构建出美观且功能丰富的管理界面。在“h...
在IT行业中，前端开发是构建网站用户界面的关键环节，它主要涉及HTML、CSS、JavaScript以及各种前端框架。本文将深入探讨这些技术，并...通过学习和研究这个示例，开发者可以加深对前端开发的理解，提升自己的技能。
在现代网页设计和开发中，Layui作为一个流行的前端UI框架，它的使用日益广泛。它基于jQuery，提供了一整套的解决方案，包括模块化、可定制的界面组件，使得网页开发更加快捷、高效。Layui的tab组件是该框架中非常...
EasyUI1.4.4 + zTree3.5.19 完美结合框架布局:tree+tab,zTree的使用（简单数据格式，标准数据格式）,我重新组织整理了：EasyUI1.4.4的使用示例，zTree的使用示例。
【H+ 4.0前端框架后台主题UI框架】是一个专为现代Web应用程序设计的全面响应式界面框架，它基于Bootstrap 3的最新版本构建。H+致力于提供一个扁平化的设计风格，以适应各种屏幕尺寸，从桌面到移动设备都能提供一致的...
Bootstrap是一个流行的前端开发框架，它的栅格系统、组件和JavaScript插件，为开发者提供了快速构建页面布局的工具。H+在此基础上进行了深度定制，使其更适合后台管理界面的需求。 配合官方提供的完整文档，开发者...
AmazeUI是一款优秀的前端开发框架，专为快速构建响应式和移动优先的Web项目而设计。这个框架结合了中国传统设计美学与现代Web技术，提供了一系列丰富的组件和工具，旨在简化前端开发过程，提升用户体验。 首先，...
“Iview前端项目框架”是一个基于Vue.js的UI组件库，专为开发高效、美观的Web应用界面而设计。Vue.js是目前非常流行的前端JavaScript框架，以其轻量级、易上手和灵活性受到开发者喜爱。Iview则是Vue.js生态系统中的...
Ace+Admin前端框架是一款广泛应用在企业级Web应用中的开源UI框架，它结合了Ace和AdminLTE两个优秀的前端组件库，提供了丰富的界面元素、布局选项和交互设计，旨在为开发者提供一个高效、美观且易于定制的开发环境。...
H+前端框架的核心特点在于其强大的布局系统，它采用了Flexbox模型，这使得在各种屏幕尺寸下都能实现灵活的布局。Flexbox允许开发者轻松调整元素的位置和大小，确保页面在不同分辨率下的自适应性。此外，H+还包含了...
**H+前端框架详解** H+前端框架是专为现代Web设计和开发打造的一款高效、易用、功能丰富的工具集，其最新版本基于Bootstrap 3进行构建，旨在提供一个全面的解决方案，帮助开发者快速构建响应式和移动优先的网页项目...
3. **易于使用**：Element UI 提供了详细的文档和示例，方便快速上手。 4. **高度可定制**：开发者可以根据需要调整主题颜色，甚至可以自定义每个组件的样式。 5. **兼容性和性能**：Element UI 对现代浏览器支持...
1.vue+elementui实现，完整的后台管理系统界面布局源码； 2.左边菜单、顶部菜单、右边显示页面内容，可自定义修改拓展； 3.无可挑剔的样式。 4.创建一个规范的vue项目目录，直接替换项目文件即可
《最新版H+UI前端模板框架深度解析》 在当今的Web开发领域，前端框架扮演着至关重要的角色，它们能够极大地提升开发效率，提供统一的设计风格，并为开发者提供丰富的组件库。本文将深入探讨“最新版H+UI前端模板...
总结来说，AdminLTE是一个基于Bootstrap的高性能前端框架，专为后台管理界面设计，具备响应式布局和丰富的UI组件。它简化了开发流程，提供了美观且功能齐全的界面，适用于多种项目需求。通过理解并利用AdminLTE的...
H-ui前端框架是一款广泛应用于网页开发的开源UI框架，它为开发者提供了丰富的组件和模板，以便快速构建美观、响应式的Web界面。H-ui的设计理念是简洁、易用，旨在提高开发效率，降低学习成本，同时保持高度的可定制...
【移动端UI框架示例】是针对手机和平板设备设计的一款名为"Hui"的框架的实践应用展示。这个框架提供了一套完整的解决方案，旨在简化移动端Web界面的布局与组件设计，从而提升开发效率和用户体验。 Hui框架的核心...