您的位置：首页 > Web前端 > JQuery

jquery esay ui学习

2015-12-03 21:16 696 查看
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>


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航