wallimn
- 浏览: 5156852 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
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 18458编译（IDEA+Gradle）一个别人的工程，出现一个 ... -
netty心跳检查之UDP篇
2019-09-15 08:50 2375部分UDP通信场景中，需要客户端定期发送心跳信息，以获取终 ... -
解决tomcat部署两个SpringBoot应用提示InstanceAlreadyExistsException
2019-06-30 11:49 3378两个SpringBoot应用部署在一个Tomcat中，单独 ... -
Eclipse配置MyBatis代码自动化功能
2019-06-29 10:16 17641.安装插件 Eclipse中，Help->Ecli ... -
vue.js中使用qrcode生成二维码
2019-05-20 00:00 7653一、安装包 npm install qrcodejs2 --s ... -
MySQL插入数据报错： Incorrect string value: '\xFD\xDE'
2019-03-31 23:19 1226我MySQL数据库用的uft-8字符集，插入数据一直很正常 ... -
vue自定义组件并双向绑定属性
2019-03-08 22:46 3255做了两个子组件，原理基本一样，一个是使用原生的select ... -
vue-router简单示例
2019-03-05 00:32 1143写个基本完整、稍有借鉴意义的示例，防止自己忘记。 &l ... -
“联通充值系统繁忙”轻松应对
2019-02-06 11:03 3973大过年的，联通充个值一直报“充值系统繁忙”。昨天晚上试了几 ... -
electron.js数据库应用---导航菜单(element-ui+mysql)
2019-02-05 21:33 2361一、环境搭建 略， ... -
electron.js数据库应用---入门(mysql+element-ui)
2019-01-27 23:19 7482我的机器：Windows10，64 ... -
SpringMVC 在controller层中注入成员变量request，是否线程安全
2018-12-17 21:17 2743@RestController public class ... -
VueJS 组件参数名命名与组件属性转化
2018-12-03 00:00 2068转自：https://www.cnblogs.com/meiy ... -
vue-resource拦截器实现token发送及检验自动化
2018-11-16 22:38 3076用了很长时间vue-resource，最近思考$http发 ... -
element-ui试用手记
2018-10-29 20:25 1739element-ui、iviewui都以vue.js为基础 ... -
iviewui中表格控件中render的使用示例
2018-07-07 16:46 9780示例了如何在表格中显示按钮，如何将代码转化为文字。 i ... -
Tomcat错误“Alias name tomcat does not identify a key entry”解决
2018-07-05 21:39 6550申请到了阿里云的证书后，下载、按照说明生成jks格式证书、 ... -
阿里云免费证书“fileauth.txt内容配置错误”解决
2018-07-05 20:43 5292最近研究微信小程序开发，上阿里云申请了个证书，使用文件验证 ... -
springboot2.0跨域配置
2018-07-04 22:11 5282springboot2.0跨域配置： 一、代码 ... -
微信小程序使用code换openid的方法（JAVA、SpringBoot）
2018-07-01 21:52 10395微信小程序序的代码中提示，使用code换取openid，但 ...
相关推荐
**H+前端UI框架** H+是一款基于Bootstrap框架深度定制的高性能前端UI解决方案，专为开发者和设计师打造。它的设计风格简洁、现代，且高度可定制化，适用于各类企业级项目开发。H+提供了丰富的组件和示例，帮助...
**UI前端框架——Amaze UI深度解析** Amaze UI，这款优秀的前端框架，以其轻量级、高效且全面的特点，在国内UI设计领域中备受推崇。它不仅为开发者提供了丰富的组件和工具，还能够轻松实现PC与移动App端的适配，...
在IT行业中，前端开发是构建网站用户界面的关键环节，它主要涉及HTML、CSS、JavaScript以及各种前端框架。本文将深入探讨这些技术，并...通过学习和研究这个示例，开发者可以加深对前端开发的理解，提升自己的技能。
在现代网页设计和开发中，Layui作为一个流行的前端UI框架，它的使用日益广泛。它基于jQuery，提供了一整套的解决方案，包括模块化、可定制的界面组件，使得网页开发更加快捷、高效。Layui的tab组件是该框架中非常...
《基于H-ui前端框架构建的轻量级后台模板解析与应用》 在信息化时代，高效、易用且具有优秀用户体验的后台管理系统对于企业运营至关重要。本文将深入探讨以H-ui前端框架为基础开发的轻量级网站后台模板，帮助开发者...
【H+ 4.0前端框架后台主题UI框架】是一个专为现代Web应用程序设计的全面响应式界面框架，它基于Bootstrap 3的最新版本构建。H+致力于提供一个扁平化的设计风格，以适应各种屏幕尺寸，从桌面到移动设备都能提供一致的...
### 蚂蚁科技移动开发平台前端框架与UI组件使用指南关键知识点 #### 一、文档概述 **标题**：“蚂蚁科技移动开发平台前端框架与UI组件使用指南20230208.pdf” **描述**：此文档旨在提供关于蚂蚁科技前端框架和UI...
Ace+Admin前端框架是一款广泛应用在企业级Web应用中的开源UI框架，它结合了Ace和AdminLTE两个优秀的前端组件库，提供了丰富的界面元素、布局选项和交互设计，旨在为开发者提供一个高效、美观且易于定制的开发环境。...
h+ UI框架，全称为HPlus UI，是一款专为后台管理系统设计的前端界面框架。这款框架以简洁、高效、易用为设计理念，旨在为开发者提供一套完整的后台界面解决方案，帮助他们快速构建出美观且功能丰富的管理界面。在“h...
2. **CSS样式**：Ace Admin通常使用Bootstrap框架的CSS样式来美化Tab页，包括`nav-tabs`、`active`、`tab-pane`等类。你可以根据需要自定义这些样式，以符合项目的设计风格。 3. **JavaScript交互**：使用Ace Admin...
**H+前端框架详解** H+前端框架是专为现代Web设计和开发打造的一款高效、易用、功能丰富的工具集，其最新版本基于Bootstrap 3进行构建，旨在提供一个全面的解决方案，帮助开发者快速构建响应式和移动优先的网页项目...
EasyUI 是一个基于 jQuery 的 UI 框架，它提供了丰富的组件和易于使用的主题，用于快速构建美观且功能强大的 Web 应用程序。在“easyui页面布局示例”中，我们将探讨如何利用 EasyUI 实现高效且直观的页面布局，并...
【H+ UI框架详解】 H+ UI框架是一个专为后台设计的、全面响应式的界面框架，基于Bootstrap3的最新版本构建。它旨在提供一个简洁、扁平化的主题，以适应现代网页设计的需求。H+的设计理念是追求高效、易用和美观，其...
3. **易于使用**：Element UI 提供了详细的文档和示例，方便快速上手。 4. **高度可定制**：开发者可以根据需要调整主题颜色，甚至可以自定义每个组件的样式。 5. **兼容性和性能**：Element UI 对现代浏览器支持...
【H+ 后台主题UI框架 V4.1】是一个专为后台管理界面设计的UI框架，基于流行的前端开发框架Bootstrap 3.3.6构建。这个版本是V4.1，相较于之前版本，可能包含了性能优化、新功能的添加以及用户反馈的改进。其在官网的...
1.vue+elementui实现，完整的后台管理系统界面布局源码； 2.左边菜单、顶部菜单、右边显示页面内容，可自定义修改拓展； 3.无可挑剔的样式。 4.创建一个规范的vue项目目录，直接替换项目文件即可
UI框架是用户界面设计的重要工具，它为开发者提供了一套预先设计和编码的组件库，以便快速构建美观、响应式的应用程序界面。在这个“ui框架示例”中，我们可以看到几个关键部分，包括HTML结构、CSS样式和JavaScript...
《最新版H+UI前端模板框架深度解析》 在当今的Web开发领域，前端框架扮演着至关重要的角色，它们能够极大地提升开发效率，提供统一的设计风格，并为开发者提供丰富的组件库。本文将深入探讨“最新版H+UI前端模板...
总结来说，AdminLTE是一个基于Bootstrap的高性能前端框架，专为后台管理界面设计，具备响应式布局和丰富的UI组件。它简化了开发流程，提供了美观且功能齐全的界面，适用于多种项目需求。通过理解并利用AdminLTE的...