zoukankan      html  css  js  c++  java
  • ligerui_实际项目_001:利用ligerLayout、ligerAccordion实现可折叠的菜单效果

    效果:利用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="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
  • 相关阅读:
    sql中生成随机字符串的function
    postgresql中uuid的使用
    sql中循环的存储过程
    java发送http的get、post请求
    data:image/png;base64
    Matcher和Pattern总结
    OPENXML解析sp_xml_preparedocument获取的XML句柄
    SqlServer性能优化
    python的2D绘图库matplotlib
    sift&surf检测关键点及描述子
  • 原文地址:https://www.cnblogs.com/zjsy/p/4386359.html
Copyright © 2011-2022 走看看