jquery esay ui学习

来源:互联网 发布:网络销售需要什么条件 编辑:程序博客网 时间:2024/06/05 20:15

1.jquery框架自带了一个框架,直接有利于后台开发,下载最新版的jquery esay ui使用引用jshe css

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>EsayUI</title>    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/default/easyui.css">    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/icon.css">    <script type="text/javascript" src="jquery-easyui-1.4.3/jquery.min.js"></script>    <script type="text/javascript" src="jquery-easyui-1.4.3/jquery.easyui.min.js"></script>    <script type="text/javascript">        $(function(){            bindevent();        });        function bindevent()        {            $('.menuitem').click(function(){                var title=$(this).text();                //jquery esy ui中tabs带的判断方法,判断该tab项是否存在用,title来判断                var isExt=$('#tt').tabs('exists',title);                //给tab页添加上标签                if(isExt)                {                    <span style="font-size:18px;"></span><pre name="code" class="html">                   //jquery esy ui选中该tab,title参数
                    $('#tt').tabs('select',title);
                    return;
                }
                $('#tt').tabs('add',{
                    title: $(this).text(),
                    content: ShowContent($(this).data('url')),
                    closable: true
                    });
            });
        }                   
        function ShowContent(url)
        {
            var strhtml='<iframe src="'+url+'" border="no" scrolling="no" height="100%" width="100%" frameborder="0"></iframe>';
            alert(strhtml);
            return strhtml;
        }

    </script>
</head>

<body  class="easyui-layout">
    <div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">标题</div>
    <div data-options="region:'west',split:true,title:'菜单栏'" style="width:150px;padding:0px;">
        <div class="easyui-accordion" style="width:100%;height:100%">
            <div title="新闻管理" data-options="iconCls:'icon-no'" style="overflow:auto;padding:0px;">
                <ul>
                    <li>
                        <a href="javascript:void(0);" class="menuitem">新闻管理1</a>
                        <ul>
                            <li>
                                <a href="javascript:void(0);" class="menuitem" data-url="ttt.html">新闻管理11</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);" class="menuitem">新闻管理12</a>
                            </li>
                        </ul>

                    </li>
                    <li>
                        <a href="javascript:void(0);" class="menuitem">新闻管理2</a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" class="menuitem">新闻管理3</a>
                    </li>
                </ul>
            </div>
            <div title="评论管理" data-options="iconCls:'icon-help'" style="padding:10px;">
                <p>第二个菜单</p>
            </div>
        </div>
    </div>
    <!-- <div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
-->
<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">底部</div>

<div data-options="region:'center',title:'首页'">
    <div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:250px" fit="true"></div>

</div>
</body>
</html>



0 0