- 浏览: 5097469 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
silence19841230:
先拿走看看
SpringBoot2.0开发WebSocket应用完整示例 -
wallimn:
masuweng 写道发下源码下载地址吧!三个相关文件打了个包 ...
SpringBoot2.0开发WebSocket应用完整示例 -
masuweng:
发下源码下载地址吧!
SpringBoot2.0开发WebSocket应用完整示例 -
masuweng:
SpringBoot2.0开发WebSocket应用完整示例 -
wallimn:
水淼火 写道你好,我使用以后,图标不显示,应该怎么引用呢,谢谢 ...
前端框架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>
评论
2 楼
wallimn
2018-05-19
水淼火 写道
你好,我使用以后,图标不显示,应该怎么引用呢,谢谢
打开开发者工具,看看是不是有什么资源没有找到。再看看iviewui的代码有没有转化为正常的HTML代码。
1 楼
水淼火
2018-05-18
你好,我使用以后,图标不显示,应该怎么引用呢,谢谢
发表评论
-
gradle编译错误:Could not find method compile() for arguments
2020-09-19 10:50 18177编译(IDEA+Gradle)一个别人的工程,出现一个 ... -
netty心跳检查之UDP篇
2019-09-15 08:50 2101部分UDP通信场景中,需要客户端定期发送心跳信息,以获取终 ... -
解决tomcat部署两个SpringBoot应用提示InstanceAlreadyExistsException
2019-06-30 11:49 3162两个SpringBoot应用部署在一个Tomcat中,单独 ... -
Eclipse配置MyBatis代码自动化功能
2019-06-29 10:16 16351.安装插件 Eclipse中,Help->Ecli ... -
vue.js中使用qrcode生成二维码
2019-05-20 00:00 7555一、安装包 npm install qrcodejs2 --s ... -
MySQL插入数据报错: Incorrect string value: '\xFD\xDE'
2019-03-31 23:19 1168我MySQL数据库用的uft-8字符集,插入数据一直很正常 ... -
vue自定义组件并双向绑定属性
2019-03-08 22:46 3201做了两个子组件,原理基本一样,一个是使用原生的select ... -
vue-router简单示例
2019-03-05 00:32 1083写个基本完整、稍有借鉴意义的示例,防止自己忘记。 &l ... -
“联通充值系统繁忙”轻松应对
2019-02-06 11:03 3893大过年的,联通充个值一直报“充值系统繁忙”。昨天晚上试了几 ... -
electron.js数据库应用---导航菜单(element-ui+mysql)
2019-02-05 21:33 2290一、环境搭建 略, ... -
electron.js数据库应用---入门(mysql+element-ui)
2019-01-27 23:19 7298我的机器:Windows10,64 ... -
SpringMVC 在controller层中注入成员变量request,是否线程安全
2018-12-17 21:17 2686@RestController public class ... -
VueJS 组件参数名命名与组件属性转化
2018-12-03 00:00 2001转自:https://www.cnblogs.com/meiy ... -
vue-resource拦截器实现token发送及检验自动化
2018-11-16 22:38 3035用了很长时间vue-resource,最近思考$http发 ... -
element-ui试用手记
2018-10-29 20:25 1678element-ui、iviewui都以vue.js为基础 ... -
iviewui中表格控件中render的使用示例
2018-07-07 16:46 9707示例了如何在表格中显示按钮,如何将代码转化为文字。 i ... -
Tomcat错误“Alias name tomcat does not identify a key entry”解决
2018-07-05 21:39 6165申请到了阿里云的证书后,下载、按照说明生成jks格式证书、 ... -
阿里云免费证书“fileauth.txt内容配置错误”解决
2018-07-05 20:43 5188最近研究微信小程序开发,上阿里云申请了个证书,使用文件验证 ... -
springboot2.0跨域配置
2018-07-04 22:11 5229springboot2.0跨域配置: 一、代码 ... -
微信小程序使用code换openid的方法(JAVA、SpringBoot)
2018-07-01 21:52 10290微信小程序序的代码中提示,使用code换取openid,但 ...
相关推荐
JQ EasyUI1.4.4示例 + zTree3.5.19 完美的 tree +tab 框架布局(修正菜单) 看图介绍!http://blog.csdn.net/cyy11/article/details/50449918 之前下载过的与我联系。
Vue+element-ui添加自定义右键菜单的方法示例 1、在所编辑的页面,需要添加右键菜单的元素,绑定contextmenu事件 <template> @contextmenu.prevent.native="openMenu($event)"> ...... </template> 2、在...
EasyUI1.4.4 + zTree3.5.19 完美结合框架布局:tree+tab,zTree的使用(简单数据格式,标准数据格式),我重新组织整理了:EasyUI1.4.4的使用示例,zTree的使用示例。
二级树形菜单示例:CSS+TreeMenu 二级树形菜单示例:CSS+TreeMenu
本资源包“Android开发+UI组件+QQ侧滑菜单+项目实战示例:Android 超高仿 QQ5.0 侧滑菜单项目完整实例代码”为Android开发者提供了一个详尽的实例,展示如何创建一个与QQ5.0版本中的侧滑菜单高度相似的用户界面。...
ui框架示例及组件示例,各种图标展示示例。废话不多说直接上代码
新闻资讯网站源码示例 前端vue+js
1.vue+elementui实现,完整的后台管理系统界面布局源码; 2.左边菜单、顶部菜单、右边显示页面内容,可自定义修改拓展; 3.无可挑剔的样式。 4.创建一个规范的vue项目目录,直接替换项目文件即可
响应式css+兼容手机+平板+电脑PC 拼图跨屏响应式布局前端开发CSS框架-综合示例
Hui框架示例 一个移动端UI解决方案 布局很方便,组件都很优秀
electron+vue示例项目 + 官网示例,快速对electron以及vue环境中的搭建,增强对electron(nodejs桌面应用框架)的理解
前端
自己写的前端LayUI框架示例整合,适合小白学习(大神勿喷。谢谢)
Qt中多UI使用及布局示例
主要介绍了vue+iview框架实现左侧动态菜单功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
ligerUI框架示例程序
新SwiftUI框架的示例
使用GitHub API基于SwiftUI MVVM和Combine框架构建的iOS示例项目
H+是一个完全响应式,基于Bootstrap3最新版本开发的扁平化主题,她采用了主流的左右两栏式布局,使用了Html5+CSS3等现代技术。