jquery easyui,Accordion的使用 (二)

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jquery easy ui 学习之——Accordion</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="Css/default.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="js/themes/icon.css" />
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.pack.js"></script>
    <script type="text/javascript">
        $(
        function () {
            $('#myaccrdion').accordion();
        }
        );
    </script>
</head>
<body>
    <div style="width: 200px; height: 300px; overflow: hidden;" id="myaccrdion" border="true"
        fit="falase" class="easyui-accordion">
        <div title="控件使用" icon="icon-sys">
            <ul>
                <li>
                    <div class="selected">
                        <a href="http://hxling.cnblogs.com" target="mainFrame"><span class="icon-nav icon"></span>
                            菜单管理</a></div>
                </li>
                <li>
                    <div class="">
                        <a href="demo.html" target="mainFrame"><span class="icon-add icon"></span>添加用户</a></div>
                </li>
                <li>
                    <div class="">
                        <a href="demo2.html" target="mainFrame"><span class="icon-users icon"></span>用户管理</a></div>
                </li>
                <li>
                    <div class="">
                        <a href="demo2.html" target="mainFrame"><span class="icon-role icon"></span>角色管理</a></div>
                </li>
                <li>
                    <div class="">
                        <a href="demo.html" target="mainFrame"><span class="icon-set icon"></span>权限设置</a></div>
                </li>
                <li>
                    <div class="">
                        <a href="demo.html" target="mainFrame"><span class="icon-log icon"></span>系统日志</a></div>
                </li>
            </ul>
        </div>
        <div title="员工管理" icon="icon-sys">
            员工管理
        </div>
        <div title="部门管理" icon="icon-sys">
            部门管理
        </div>
        <div title="质量管理" icon="icon-sys">
            质量管理
        </div>
    </div>
    这个控件是有点类似menu控件,也需指定class="easyui-accordion"。另外我们要注意一下fit属性,<br />如果将fit属性指定为true,那么它的大小将自适应它的父容器。其他的到没有什么了?如果你自己觉<br />得还有疑问可以查阅官方文档。
</body>
</html>

欢迎进入我的衣橱》》

posted on 2010-07-13 12:59  senly  阅读(27769)  评论(9编辑  收藏  举报

导航