效果:利用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. Unicode与UTF8相互转化(使用MultiByteToWideChar)

    1.简述 最近在发送网络请求时遇到了中文字符乱码的问题,在代码中调试字符正常,用抓包工具抓的包中文字符显示正常,就是发送到服务器就显示乱码了,那就要将客户端和服务器设置统一的编码(UTF-8),而我们 ...

  2. 转NodeJS的npm模块版本号 模式解析

    npm 中的模块版本都需要遵循 semver 2.0 的语义化版本规则. 版本格式:主版本号.次版本号.修订号,版本号递增规则如下: 主版本号:当你做了不兼容的API 修改, 次版本号:当你做了向下兼 ...

  3. ADB not responding. If you'd like to retry, then please manually kill "adb.exe" and click 'Restart'

    ADB not responding. If you'd like to retry, then please manually kill "adb.exe" and click ...

  4. jQuery 遍历json数组的实现代码

    <script type="text/javascript"> "}]; $(d1).each(function(){ alert(this.text+&qu ...

  5. json的eval为什么要用msg.d

    在做一个关于搜索功能时用到了jquery autocomplete,发现返回数据时都用到了一个.d,比如: var datas = eval('(' + msg.d + ')'); 这个.d是什么呢, ...

  6. js判断是否为空火undefined是否给undefined加引号

    js判断是否为空为undefined如果判断的是类型则用typeof(),如果其本身就是“undefind”字符窜,则不能这样判断, 这样typeof之后是字符串类型就判断不出来了,这是需要去掉typ ...

  7. An unknown Subversion error occurred. (code = 155037)

    这是因为在svn更新时意外中断引起的. 我的解决办法:如果本地没有更改,只是单纯获取svn的项目,则另起一个文件夹,重新checkout: 如果是本地有更改,则复制到新的文件夹,重新update.

  8. 关于lnmp下搭thinkPHP无法找到指定静态页面

    我在lnmp 下架了一个thinkPHP框架,非常奇怪,在环境都配置好后,我在url里输入localhost:10007/index.php/member/login,正常来说应该显示login.ht ...

  9. 【转】Android Canvas绘图详解(图文)

    转自:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2012/1212/703.html Android Canvas绘图详解(图文) 泡 ...

  10. Oracle中的数据类型和数据类型之间的转换

    Oracle中的数据类型 /* ORACLE 中的数据类型: char 长度固定 范围:1-2000 VARCHAR2 长度可变 范围:1-4000 LONG 长度可变 最大的范围2gb 长字符类型 ...