LigerUI初学篇---使用LigerUI制作简洁清爽的界面

开始在公司实习,呆了刚好五天,按公司要求看了LigerUI,看了一天半的文档!代码这东西光看没有用,是在忍不住,今天下午将脑子里所想的那些功能合在一起,制作了一个我很久以前就像制作的一个后台管理界面如图:

简单的介绍一下:左边是个可隐藏菜单栏,里面的菜单可以根据后台传来的数据动态生成,右边是操作区间,我只是搭了个框架,数据写好,自动形成!这一点我很喜欢,样式什么的都是现成的!!!!表格菜单的“增加”“修改”“删除”都可以根据用户点击的数据进行操作。最下面底部就可以添加一些版权声明什么的,最上面可以添加标志或者其他功能。之前尝试过用纯css来制作,可惜的是,本人css很菜,没有完成之后就放弃了,到现在用了LigerUI很轻松的就制作出来!感叹LigerUI的方便快捷简单!

制作步骤:

1、确定布局;

2、制作菜单树;

3、添加数据Grid;

4、添加Toolbar;

5、对Toolbar的每一项绑定处理事务。

布局:

使用最普遍的上中(左右)下布局

代码:

$(function() {
			$("#container").ligerLayout({
				leftWidth : 200,
				isScroll:true,
				isLeftCollapse:false,
				allowLeftResize:false,
				allowRightResize:false,
				allowTopResize:false,
				allowBottomResize:false
			});
		});
<div id="container">
		<div position="top" ><center><h1>LigerUI基本功能界面</h1></center></div>
		<div position="left">
		</div>
		<div position="center" title="标题">
		</div>
		<div position="bottom" title="底部">
	</div>

到此,布局就搭建了好了,body里只需要一个DIV即可

然后是菜单:

代码:

$("#tree1").ligerTree({
		data: [
               { text: '节点1', children: [
                   { text: '节点1.1' },
                   { text: '节点1.2' },
                   { text: '节点1.3', children: [
                        { text: '节点1.3.1' },
                        { text: '节点1.3.2' ,children:[
                          {text:'节点1.3.2.1'},
                          {text:'节点1.3.2.2'}
                                                     ]}
                   ]
                   },
                   { text: '节点1.4' }
                ]
               },
               { text: '节点2' },
               { text: '节点3' },
               { text: '节点4' }
           ],
			checkbox : false,
			parentIcon : 'folder',
			childIcon : 'leaf',
			isExpand:false
		});
		//checkbox: 是否显示复选框
		//parentIcon: 非叶节点的图标
		//childIcon: 叶节点的图标
		//isexpand:是否展开
		//treeLine:是否显示节点连接线  有点小bug
	});

上面的data是JSON格式,可以从后台的数据获取也可以从本地文件获取,看你怎么发送数据了

<ul id="tree1">
					<li><span>节点1</span>
						<ul>
							<li url="http://www.baidu.com"><span>节点1.1</span>
								<ul>
									<li><span>节点1.1.2</span></li>
									<li><span>节点1.1.2</span></li>
								</ul></li>
						</ul></li>
					<li><span>节点2</span></li>
					<li isexpand="false"><span>节点3</span>
						<ul>
							<li><span>节点3.1</span></li>
							<li><span>节点3.2</span></li>
						</ul></li>
				</ul>

将这段代码放在那个left的DIV里,防止data没有数据而显示出来的代码,你也可以直接这样写:

<ul id="tree1"></ul>

紧接着表格(与toolbar一起)

//初始化数据
	var jsonObj = {};
	jsonObj.Rows= [
	    { id: 1, name: "林三", sex: "男", birthday: "1989/01/12",score:63.3 },
	    { id: 2, name: "陈丽", sex: "女", birthday: "1989/01/12", score: 72.2 },
	    { id: 3, name: "啊群", sex: "男", birthday: "1981/12/12", score: 43.4 },
	    { id: 4, name: "表帮", sex: "男", birthday: "1983/01/12", score: 73.2 },
	    { id: 5, name: "陈丽", sex: "女", birthday: "1989/01/12", score: 74.5 },
	    { id: 6, name: "成钱", sex: "男", birthday: "1989/11/13", score: 73.3 },
	    { id: 7, name: "都讯", sex: "女", birthday: "1989/04/2", score: 83.2 },
	    { id: 8, name: "顾玩", sex: "男", birthday: "1999/05/5", score: 93.2 },
	    { id: 9, name: "林会", sex: "男", birthday: "1969/02/2", score: 73.4 },
	    { id: 10, name: "王开", sex: "男", birthday: "1989/01/2", score: 33.3 },
	    { id: 11, name: "刘盈", sex: "女", birthday: "1989/04/2", score: 53.3 },
	    { id: 12, name: "鄂韵", sex: "男", birthday: "1999/05/5", score: 43.5 },
	    { id: 13, name: "林豪", sex: "男", birthday: "1969/02/21", score: 83.6 },
	    { id: 14, name: "王开", sex: "男", birthday: "1989/01/2", score: 93.7 },
	    { id: 15, name: "鄂酷", sex: "男", birthday: "1999/05/5", score: 61.1 },
	    { id: 16, name: "林豪", sex: "男", birthday: "1969/02/21", score: 73.3 },
	    { id: 17, name: "王开", sex: "男", birthday: "1989/01/2", score: 41.6 }
	];
	var columns =
	    [
	        { display: '主键', name: 'id', type: 'int', mintWidth: 40, width: 100 },
	        { display: '名字', name: 'name' },
	        { display: '性别', name: 'sex' },
	        { display: '生日', name: 'birthday', type: 'date' }
	     ];
	     //初始化布局与表格
		$(f_initGrid);
		var manager, g;
		function f_initGrid() {
			g = manager = $("#maingrid").ligerGrid({
				checkbox: true,
				columns : columns,
				data : jsonObj,
				 rownumbers:true,
				 //添加toolbar
				toolbar: { items: [
				                    { text: '增加', click: f_open, icon: 'add' },
				                    { line: true },
				                    { text: '修改', click: getSelected, icon: 'modify' },
				                    { line: true },
				                    { text: '删除', click: itemclick, icon: 'delete' }
				                    ]
				                    },
				width: '100%',
				height: 478//注意使用“%”的区别
				});
		};
		function getSelected()
        {
            var gmanager = $("#maingrid").ligerGetGridManager();
            var row = gmanager.getSelectedRow();
            if (!row) { alert('请选择行'); return; }
            alert(JSON.stringify(row));
        }
		function itemclick(item)
        {
            alert(item.text);
        }

上面的data依然是JSON格式的数据,这里要注意

jsonObj.Rows和下面调用的jsonObj

同样的,只需要在centen的DIV里添加代码、

<div id="maingrid"></div>

表格就充满了界面

因为我用的是Linux系统制作的,项目结构和windows的不一样

完整的代码是放在LigerLayout下面的index.jsp页面中大家可以下载看一看下载

顺便说一下LigerUI的官方Demo与API

DEMO-----API

先看DEMO,很全面很简单(就是样式用的太多)、

在看API具体使用的时候可以查看参数,两者的界面做的非常的简洁

时间: 2024-10-07 16:40:21

LigerUI初学篇---使用LigerUI制作简洁清爽的界面的相关文章

java第四章编程题(初学篇)

代码: 1 /* 2 test.java 3 */ 4 package test; 5 public class test { 6 public static void main(String args[] ) 7 { 8 CPU ccp= new CPU(); 9 HardDisk hhd=new HardDisk(); 10 PC pc =new PC(); 11 ccp.setSpeed(2200); 12 hhd.setAmount(200); 13 pc.setCPU(ccp); 14

java学习之第五章编程题示例(初学篇)

1 /* 2 Animal.java 3 */ 4 package animal; 5 6 public abstract class Animal { 7 public abstract void cry(); 8 public abstract String getanimalName(); 9 } 1 //Dog.java 2 package animal; 3 4 public class Dog extends Animal 5 { 6 7 String aa="旺旺"; 8

初学JS——利用JS制作的别踩白块儿(街机模式) 小游戏

初学JS--利用JS制作的别踩白块儿(街机模式) 小游戏 这个是上个星期5写的了,当时是突然想写个游戏,就想到了别踩白块儿,当时的想法是 可能普通模式的别踩白块儿因为他的"块儿"是滚动的向上这种,以我目前会的技术想不出怎么写, 但是如果是街机模式,通过你每按一次按键之后他像下跳一格这样的就非常好实现了. 通过我目前会的知识,实现的步骤大概是这样的: 建一个4X4的表格,制作2张150X100的图片,一张全白色,一张全黑色,命名为0.JPG,1.JPG 就是说当文件名为0的时候就是白色的

Cocos2d-x3.0游戏实例之《别救我》第五篇——使用Cocostudio UI编辑器创建操作界面

这一篇内容其实很简单,已经对Cocostudio比较熟悉的朋友就可以随便扫一下了~(小若:熟悉Cocostudio的人谁还有空看你的基础教程呢) 笨木头花心贡献,啥?花心?不呢,是用心~ 转载请注明,原文地址:http://www.benmutou.com/blog/archives/892 文章来源:笨木头与游戏开发 下载Cocostudio 首先,去官网下载最新版的Cocostudio:http://www.cocos2d-x.org/download 我这篇教程使用的版本是V1.3.0.1

LigerUI视频教程_基于LigerUI前端技术实现的管理平台

基于LigerUI前端技术实现的管理平台(纯静态页面,json,工作流及权限管理)适合人群:初级课时数量:39课时用到技术:Liger UI.纯静态页面.万能数据处理后台涉及项目:企业进销存管理系统咨询QQ:1840215592 LigerUI视频教程详细查看:http://www.ibeifeng.com/goods-292.html课程简介:1.LigerUI视频教程是一套关于Web实战应用学习的教程,它主要讲述的是jQuery LigerUI这框架,它是基于jQuery的一系列UI控件组合

用神奇的currentColor制作简洁的颜色动画效果

先上一个兼容性总结图:老版本ie可以直接用复杂方法了,套用某表情包的话: 2016年了,做前端你还考虑兼容IE6?你这简直是自暴自弃! 好了,知道了兼容性,我们可以放心的使用了. 在CSS3中扩展了颜色值包含 currentColor 关键字,相当于元素color属性的计算值,让没有默认继承的子元素或者颜色属性可以继承. 用于所有接受颜色的属性上,相当于 color: inherit. 如:background,可以设置background:currentColor,这样背景颜色就和页面当前的颜

HttpClient 4.1.3 初学篇---使用Get和Post模拟登录简单页面(分别带参数)

最近需要解决的问题需要用到Httpclient,模拟登陆网站!成功之后就可以用代码的方式获取网站内容或者发送请求,类似网络爬虫. 但是在网上找了好多篇Blog,发现每一片的写法都不一样,也纠结了些时间,很纳闷,才发现Httpclient版本不一样...现在在这里说明我使用的版本是HttpClient 4.1.3,我已上传下载 看了些Blog,发现直接访问大型的网站不太容易,于是就自己写了小的站点,只有一个Servlet,来接受参数(用户名和密码)就ok了! 这个Servlet就只有get与pos

salt 初学篇(一)

salt 介绍: Salt,,一种全新的基础设施管理方式,部署轻松,在几分钟内可运行起来,扩展性好,很容易管理上万台服务器,速度够快,服务器之间秒级通讯. salt底层采用动态的连接总线, 使其可以用于编配, 远程执行, 配置管理等等. salt安装: master:192.168.31.231 mongo1.example.com minion:192.168.31.232 mongo2.example.com minion:192.168.31.233 mongo3.example.com

jQuery制作简洁的多级联动Select下拉框

今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这个Select下拉框也可以绑定下拉事件,并获取当前选中项的值. html代码: <div class="wrap">        <div class="nice-select" name="nice-select">