效果:利用ligerLayout、ligerAccordion实现可折叠的菜单效果

可能用到的js、css、images等,可到官网下载:

第01步:引入相应的文件

<head>
<link href="ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" />
<script type="text/javascript" src="jquery/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript" src="ligerUI/js/plugins/ligerLayout.js"></script>
<script type="text/javascript" src="ligerUI/js/plugins/ligerAccordion.js">
</head>

第02步:编写body

<body>
<div id="main">
<div position="top">
<iframe frameborder="" width="100%" src="4top.html"> </iframe>
</div>
<div position="left" title="导航栏" id="menu">
<div title="工程管理">
<ul><li>工程信息</li></ul>
<ul><li>查询管理</li></ul>
<ul><li>甲方档案</li></ul>
<ul><li>项目管理</li></ul>
</div>
<div title="本月工程管理">
<ul><li>月度产值</li></ul>
<ul><li>工程成本</li></ul>
<ul><li>资金占用</li></ul>
</div>
<div title="工资管理">
<ul><li>工程管理</li></ul>
<ul><li>查询统计</li></ul>
<ul><li>本月管理</li> </ul>
</div>
</div>
<div position="center"></div>
</div>
</body>

第03步:利用LigerUI对界面进行操作

<head>
<script type="text/javascript">
$(function(){
     //加入Layout
$("#main").ligerLayout({leftWidth:,topHeight:});
     //将menu设置成可折叠(Acccordion)
$("#menu").ligerAccordion();
})
</script>
</head>

代码下载地址:

http://download.csdn.net/detail/poiuy1991719/8556841

ligerui_实际项目_001:利用ligerLayout、ligerAccordion实现可折叠的菜单效果的更多相关文章

  1. 如何在我们项目中利用开源的图表(js chart)

            最近觉得应该把自己在技术上的一些心得记录在博客里面跟大家分享,一起讨论,一起成长!       这篇随笔主要为介绍chart在项目中的运用,因为在我们看到一些开源的chart时候,是使 ...

  2. GitHub Android 最火开源项目Top20 GitHub 上的开源项目不胜枚举,越来越多的开源项目正在迁移到GitHub平台上。基于不要重复造轮子的原则,了解当下比较流行的Android与iOS开源项目很是必要。利用这些项目,有时能够让你达到事半功倍的效果。

    1. ActionBarSherlock(推荐) ActionBarSherlock应该算得上是GitHub上最火的Android开源项目了,它是一个独立的库,通过一个API和主题,开发者就可以很方便 ...

  3. React项目打包并部署到 Github 展示预览效果

    React项目打包并部署到 Github 展示预览效果 当开发者模式结束,准备打包的时进行以下步骤: 在package.json配置文件中加一句: "homepage": &quo ...

  4. ligerui_实际项目_003:form中添加数据,表格(grid)里面显示,最后将表格(grid)里的数据提交到servlet

    实现效果: "Form"中填写数据,向本页"Grid"中添加数据,转换成Json数据提交,计算总和,Grid文本框可编辑,排序 图片效果: 总结: //disp ...

  5. 在项目中利用TX Text Control进行WORD文档的编辑显示处理

    在很多文档管理的功能模块里面,我们往往需要对WORD稳定进行展示.编辑等处理,而如果使用微软word控件进行处理,需要安装WORD组件,而且接口使用也不见得简单易用,因此如果有第三方且不用安装Offi ...

  6. 项目实战利用Python来看美国大选

    一.项目介绍 首先分析美国总统竞选这个项目是一个烂大街的项目,但是他的确是一个适合Python新手入门的数据处理项目. 本人在大二刚刚学习了Python数据处理,学习时间不超过5个小时,但是已经可以完 ...

  7. vue项目中利用popstate处理页面返回操作

    需求背景:项目中需要做一个返回确认,避免用户误触返回键而退出当前页面. 原理:利用history和浏览器刷新popstate状态 实现: 1.在mounted() 阶段判断并添加popstate事件监 ...

  8. Mac中如何搭建Vue项目并利用VSCode开发

    (一)部署Node环境 (1)下载适合Mac环境的Node包,点击进入下载页面 (2)安装Node环境:找到下载好的Node包,这里是node-v12.14.1.pkg,我们双击它,会进入Node.j ...

  9. 在Springboot + Mybaitis-plus 项目中利用Jackson实现json对java多态的(反)序列化

    Jackson允许配置多态类型处理,当JSON面对的转换对象是一个接口.抽象类或者一个基类的时候,可以通过一定配置实现JSON的转换.在实际项目中,Controller层接收入参以及在Dao层将对象以 ...

随机推荐

  1. LINQ延迟查询的例子

    //linq延迟查询.两次查询结果不同 List<string> l = new List<string>() { "aaa", "bbb&quo ...

  2. Block的简单使用

    代码块本质上是和其他变量类似.不同的是,代码块存储的数据是一个函数体.使用代码块是,你可以像调用其他标准函数一样,传入参数,并得到返回值. 代码块本质上是变量,只不过它存储的数据是一个函数体,因此名字 ...

  3. php--列表展示(小实训一月考)

    效果图:

  4. 行高不设单位的好处 line-height:1.8

    今天无意间看了到了line-height:1.8 感觉挺有意思的,然后翻了下行高的知识,发现还挺有文章的,不妨温故而知新. 先回顾下:顶线.中线.基线.底线 vertical-align是元素的垂直对 ...

  5. 实验 snort安装配置与规则编写

    1 实验目的 在linux或windows任意一个平台下完成snort的安装,使snort工作在NIDS模式下,并编写符合相关情景要求的snort规则. 2 实验环境 物理机:windows 8.1 ...

  6. Maven-002-eclipse 插件安装及实例

    因为平常编码的时候,习惯了使用 eclipse 进行编码,因而需要将 eclipse 安装 maven 的插件,安装步骤如下所示: 一.安装 选择菜单: help -> Install New  ...

  7. c# key event

    使用C#写ui时,希望能够读取到键盘输入的事件,用于快捷键或者其他操作.本文记录操作创建key event的方法. 参考链接: http://csharp.net-informations.com/g ...

  8. No mapping found for HTTP request with URI [] in DispatcherServlet with name 'appServlet'

    项目是使用SpringMVC (1)在浏览器中访问,后台总报错: No mapping found for HTTP request with URI [] in DispatcherServlet ...

  9. js数组判断是否含有某一个元素

    arr.indexOf('a')如果有则返回的a的下标位置,否则返回false.

  10. iOS:FFmpeg视频播放和直播框架

    视频直播和播放转码器框架 介绍: FFmpeg是一套可以用来记录.转换数字音频.视频,并能将其转化为流的开源计算机程序.采用LGPL或GPL许可证. 它提供了录制.转换以及流化音视频的完整解决方案.它 ...