ligerui_实际项目_001:利用ligerLayout、ligerAccordion实现可折叠的菜单效果

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

ligerui_实际项目_001:利用ligerLayout、ligerAccordion实现可折叠的菜单效果

 

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

ligerui_实际项目_001:利用ligerLayout、ligerAccordion实现可折叠的菜单效果

第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="0" 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:200,topHeight:94});
     //将menu设置成可折叠(Acccordion) $(
"#menu").ligerAccordion(); }) </script> </head>

 代码下载地址:

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

 

你可能感兴趣的:(accordion)