Ligerui首页的快速搭建
一、目录
1、多层架构+MVC+EF+AUTOFAC+AUTOMAPPER;
2、MVC中验证码的实现(经常用,记录备用)
3、Ligerui首页的快速搭建
4、Ligerui Grid组件--学生信息列表。
二、正文
(嘿,写完了才发现这篇文章挺水。本来还想说说那些JS代码的,想想还是不继续水了……但是写都写了,凑个数,哈哈)
大多数信息管理系统首页都是ligerui官网首页这个模样,左边导航,右边一个iframe。高级点的带选项卡。
在这个首页中,包含了ligerui很多组件:ligerLayout(布局)、Tab(选项卡)、ligerAccordion(面板)、ligerTree(树)。ligerLayout将页面划分块,一般就是上下左右中(有的控件,如easyui是东南西北中),主要菜单那一块就是左,右边内容就是右,也可能是中(隐藏右边)。Tab对应图中“我的主页”,操作观感和浏览器顶部选项卡一样。ligerAccordion在图中对应的是主要菜单、功能列表、应用场景、实验室,点击可以展开或者隐藏。ligerTree嘛就是功能列表下面那一堆喽。
那我们的标题是“快速构建”,那咋个算快呢?Follow me:
First Step:先去这下载ligerui源码:http://git.oschina.net/ligerui/LigerUI/,下载来的文件把Source文件夹拷贝进我们的VS解决方案当中;
Second Step:第一篇文章说过,我们UI层是基于MVC的,那自然需要在任意Controller下新建一个action,比如我们是这样的:
![](/assets/blank.gif)
![](/assets/blank.gif)
1 public classLigerUIController : Controller2 {3 //
4 //GET: /Admin/LigerUI/
5
6 publicActionResult Index()7 {8 returnView();9 }10
11
12 }
LigerUIController
接着,在Index action方法体内右键添加视图Index。
Third Step:来到我们的ligerui官网首页鼠标右键:
点击过后框架的代码就出来喽,全部复制到我们第二步新建的Index视图当中。到这,已经成功一大半。
Fourth Step:MVC里头因为引入了路由机制,所以我们所复制代码中引入的JS文件路径:
需要修改:
上图有展现了引入的两种常用方式,第一种是MVC自带的方法,第二种是使用绝对路径。上图路径是在我项目当中相关文件的路径。CSS样式引入和JS一致。
Fifth Step:第四步修改完成后,把我们的项目运行起来,在浏览器地址栏输入刚才我们新建的action路径,比如我的就是:http://localhost:6273/ligerui/index ,哈,效果出来了:
是不是和官网的不太一样,这是为啥呢?如果你是谷歌浏览器,按下F12快捷键,点击Console:
看到木,错误全在这!前五个错误告诉我们哪些文件找不到,你只需要在index视图当中找到相应代码,并修改其路径(Source文件夹当中)就能达到和官网一致效果!
可以看到我们就是复制源码,小小修改。
还有就是左侧功能列表下的树控件的数据来自一个JS文件,从这里看出来:
![](/assets/blank.gif)
![](/assets/blank.gif)
1 //树
2 $("#tree1").ligerTree({3 //注意这里indexdata
4 data: indexdata,5 checkbox: false,6 slide: false,7 nodeWidth: 120,8 attribute: ['nodename', 'url'],9 onSelect: function (node) {10 if (!node.data.url) return;11 var tabid = $(node.target).attr("tabid");12 if (!tabid) {13 tabid = newDate().getTime();14 $(node.target).attr("tabid", tabid)15 }16 f_addTab(tabid, node.data.text, node.data.url);17 }18 });
ligerTree
source文件夹找到indexdata.js文件,按需修改节点名称即可。
这种“查看网页源代码”对于学习前端控件挺有用的,看官网demo时候,右键“查看网页源代码”,仿照官网例子小改动来满足自己的需求。
下几篇,用一个学生信息列表来看看ligerui中的grid组件。
2013-12-03
转载于:https://www.cnblogs.com/Jnw-qianxi/p/3456492.html
Ligerui首页的快速搭建相关推荐
- 使用 Blazor 开发内部后台(四):基于Card组件快速搭建导航首页
James: 本系列为大家介绍如何使用 Blazor 来开发管理后台,有兴趣的朋友欢迎跟着实验,体验 Blazor 开发的高效与乐趣. 本系列目录: 使用 Blazor 开发内部后台(一):认识Bla ...
- Chapter 1 快速搭建-服务的注册与发现(Eureka)
Chapter 1 快速搭建-服务的注册与发现(Eureka) 一.Spring Cloud简介 为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智能路由,微代 ...
- Jenkins+Maven+SVN快速搭建持续集成环境
Jenkins是一个可扩展的持续集成引擎,Jenkins非常易于安装和配置,简单易用,下面看看我们是如何几分钟就快速搭建一个持续集成环境吧. 假设我们目前已经有2个maven项目:entities(J ...
- python 爬虫系统_实战干货:从零快速搭建自己的爬虫系统
近期由于工作原因,需要一些数据来辅助业务决策,又无法通过外部合作获取,所以使用到了爬虫抓取相关的数据后,进行分析统计.在这个过程中,也看到很多同学爬虫相关的文章,对基础知识和所用到的技术分析得很到位, ...
- 如何快速搭建开放、多租户的电商云平台
起源于20世纪70年代的电子商务,如今在全世界的发展可以说如火如荼,不断推陈出新;当下国内家居.零售.餐饮等传统行业也相继搭建自己的电商平台,凭借着多年积累的扎实的资金与地面部队.线下运营推广的实力, ...
- 如何快速搭建一个免费的,无限流量的Blog
转载自 如何快速搭建一个免费的,无限流量的Blog 喜欢写Blog的人,会经历三个阶段. 第一阶段,刚接触Blog,觉得很新鲜,试着选择一个免费空间来写. 第二阶段,发现免费空间限制太多,就自己购 ...
- 利用Android Studio快速搭建App
大家好,我是烤鸭: 给大家分享一个简单的用Android Studio快速搭建app 工具: Android Studio 64位 专业版 插件: Datepicker Timepicker okht ...
- Spring-Data-JPA尝鲜:快速搭建CRUD+分页后台实例
戳蓝字"CSDN云计算"关注我们哦! 简书ID:@我没有三颗心脏 github:wmyskxz 欢迎关注公众微信号:wmyskxz 前言:由于之前没有接触过Hibernat ...
- 快速搭建论坛系统看这里,社交系统ThinkSNS助你快人一步!!!
2019独角兽企业重金招聘Python工程师标准>>> 什么是ThinkSNS ? ThinkSNS(简称TS),一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研 ...
最新文章
- EVEREST Corporate Edition 使用SQL保存数据的简易方法
- Learning Rate--学习率的选择(to be continued)
- redis cluster集群模式总结
- LINQ从方法中返回查询
- 操作系统课设——吃水果问题
- Property 'submit' of object #HTMLFormElement is not a function
- sqlserver服务启动后停止,传递给数据库 'master' 中的日志扫描操作的日志扫描号无效...
- Linux Crontab内环境变量与Shell环境变量的关系及解决问题的办法
- network怎么断点调试_pycharm 调试一些小技巧
- 苹果笔记本怎么安装python_MAC中怎么安装python
- 十大笔记本电脑排行_2020双十一,十大高性价比游戏笔记本电脑值得买排行榜之搭载144Hz电竞屏机型(配置推荐)福利放送...
- android nexus 6尺寸,谷歌Nexus 6详细配置曝光 原生Android大杀器
- [转载]VHDL的testbench的编写
- python飞机大战游戏素材_python实现飞机大战小游戏
- Maven 教程:IDEA开发环境中maven 项目配置JDK9,JDK10,JDK11,JDK12..等EA版本的配置方法 系列教程二
- Netbean8.2初次运行Mavn的初始配置
- XXX团队邮件工作制与日常工作原则V1.0
- 微信推出网页版传输助手,真的好用吗?
- php http请求 返回数据包太大 499,http错误码原理及复现 - 499,500,502,504
- 使用HM NIS Edit制作软件安装包