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

看了LigerUI,看了一天半的文档！代码这东西光看没有用，是在忍不住，今天下午将脑子里所想的那些功能合在一起，制作了一个我很久以前就像制作的一个后台管理界面如图：

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

制作步骤：

1、确定布局；

2、制作菜单树；

3、添加数据Grid；

4、添加Toolbar；

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

布局：

使用最普遍的上中（左右）下布局

代码：

[javascript] view plain copy

$(function() {
$("#container").ligerLayout({
leftWidth : 200,
isScroll:true,
isLeftCollapse:false,
allowLeftResize:false,
allowRightResize:false,
allowTopResize:false,
allowBottomResize:false
});
});

[java] view plain copy

<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即可

然后是菜单：

代码：

[javascript] view plain copy

$("#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格式，可以从后台的数据获取也可以从本地文件获取，看你怎么发送数据了

[java] view plain copy

<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没有数据而显示出来的代码，你也可以直接这样写：

[html] view plain copy

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

紧接着表格（与toolbar一起）

[javascript] view plain copy

//初始化数据
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里添加代码、

[html] view plain copy

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

表格就充满了界面

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

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

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

DEMO-----API

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

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

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

fireworks html制作,教你用Fireworks制作简洁清爽的网站页面
本教程是向大家介绍利用Fireworks制作简洁清爽的网站页面,制作出来的网站页面很不错,方法也很简单,希望大家通过这篇教程能学会如何设计一个好的网站. 1. 启动Fireworks,新建一个大小为1 ...
34个简洁清爽的网页设计案例欣赏
这篇文章收集了34个简洁清爽的网页设计案例,设计师们可通过这些网站收集的优秀网页设计作品获得灵感,进而设计出更新颖的网页作品,一起欣赏. humaan floridaafterseven jeremy ...
计算机专业海报加文字,PS制作简洁漂亮的文字主题海报 -电脑资料
这篇教程向的朋友们介绍PS制作简洁漂亮的文字主题海报的方法,效果图大致由主体文字及背景装饰两大部分构成, FEVTE编注:更多PS教程讨论交流和PS作品请到论坛PS交流区,地址:http://bbs. ...
清爽登录界面html,基于css3实现扁平简洁清爽的登录注册页面代码
今天给大家分享一款基于css3实现扁平简洁清爽的登录注册页面代码,使用浅色设计,兼容移动设备,加入了基本的表单验证,适合大部分网站. 代码很简单有css样式,index.html两部分代码.感兴趣的朋 ...
初学JS——利用JS制作的别踩白块儿（街机模式）小游戏
初学JS--利用JS制作的别踩白块儿(街机模式) 小游戏这个是上个星期5写的了,当时是突然想写个游戏,就想到了别踩白块儿,当时的想法是可能普通模式的别踩白块儿因为他的"块儿"是 ...
怎么用计算机做模型,如何运用ArcScene制作简洁的三维建模
如何运用 ArcScene 制作简洁的三维建模一.材料准备水经注万能地图下载器 ArcScene10.2 二.法 1.下载卫星影像图 1.1 新建下载任务二.法 1.下载卫星影像图 1.1 新建 ...
html正方形边框,HTML实战篇：html制作边框为1px的九宫格
原标题:HTML实战篇:html制作边框为1px的九宫格本篇文章主要给大家介绍一下如何使用html+css完成边框为1px的九宫格的制作:九宫格这个比较常用于购物网站的商品展示区域,商品图片一般存在 ...
php制作图片轮播_JavaScript_jQuery制作简洁的图片轮播效果，演示图：核心代码：$ - phpStudy...
jQuery制作简洁的图片轮播效果演示图: 核心代码: $(document).ready(function(){ var $iBox = $('.imgBox'), $iNum = $('.img ...
怎么用Android做登录界面,利用Android怎么制作一个APP登录界面
利用Android怎么制作一个APP登录界面发布时间:2020-12-02 17:09:10 来源:亿速云阅读:79 作者:Leah 这期内容当中小编将会给大家带来有关利用Android怎么制作一 ...
Atitit 使用h5技术( html css js)制作桌面程序gui界面解决方案attilax总结
Atitit 使用h5技术( html css js)制作桌面程序gui界面解决方案attilax总结 1.1. 理解Atwood定律 1 1.2. H5做出个html的ui是很方便的,跨平台 2 1 ...

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

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

最新文章

热门文章