zoukankan      html  css  js  c++  java
  • Jquery Easy UI初步学习(一)

    Easy UI 1.3.2

    以前听说Easy UI很不错,当了一个dome,闲着没事就看了一下,也整理一下为了自己更好的记忆,也希望对象我这样小菜有帮助吧
    先从后台管理的主页面开始,如要要做主页需要了解以下几项

    data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性。通过这个属性,我们可以对easyui组件的实例化可以完全写入到html中,例如:

    <div class="easyui-dialog" style="400px;height:200px"    data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}"> dialog content.</div>

    属性,事件,都可以直接写在data-options里面,这样就方便多了。

    来自:http://easyui.btboys.com/the-use-of-easyui-data-options.html

     

    Layout Panel 

    名称 类型 说明 默认值
    title string Layout panel 的标题文字。 null
    region string 定义 layout panel 的位置,其值是下列之一:north、south、east、west、center。  
    border boolean True 就显示 layout panel 的边框。 true
    split boolean True 就显示拆分栏,用户可以用它改变panel 的尺寸。 false
    iconCls string 在panel 头部显示一个图标的CSS 类。 null
    href string 从远程站点加载数据的 URL 。 null

    然后找到EasyUi 中的Layout文件夹Full.html,打开代码如
    <head>
        <meta charset="UTF-8">
        <title>Full Layout - jQuery EasyUI Demo</title>
        <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
        <link rel="stylesheet" type="text/css" href="../demo.css">
        <script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
        <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    </head>
    <body class="easyui-layout">
        <div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
        <div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">west content</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',split:true,border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
        <div data-options="region:'center',title:'Center'"></div>
    </body>
    </html>
    看到以上就知道怎么去做了,直接copy就行了。
    之后我想在west中添加菜单栏,实现单击左边的菜单栏在center中显示指定页面,也就是往center中添加tabs
    首先了解一下tabs的属性:
    名称 类型 说明 默认值
    title string 该Tab的标题文字。 null
    content string 该Tab面板内容 null
    href string 一个URL,加载远程内容以填充Tab面板。 null
    cache boolean 当true时,缓存Tab面板,当href 属性设置后有效 true
    icon string 增加一个CSS class图标以显示在Tab面板的标题旁。 null
    closable boolean 当true时,该Tab面板将显示可关闭按钮,点击能关闭该Tab面板。 false
    selected boolean 当true时,该Tab面板将被选中。 false
    width int 面板宽度,自动列宽。 null
    height int 面板高度,自动列高。 null
    tabs的方法:
                     1)resize:重绘该Tab容器的布局。
                     2)add:新增加一个Tab面板,该选项参数是一个配置对象,看Tab面板属性可获取更多信息。
                     3)close:关闭该Tab面板,标题参数显示你要关闭的对象。
                     4)select:选择一个Tab面板。
                     5)exists:如果该Tab面板存在即显示。
    demo中代码如下:
        <div class="easyui-tabs" style="width:700px;height:250px">
            <div title="About" style="padding:10px">
                <p style="font-size:14px">jQuery EasyUI framework help you build your web page easily.</p>
                <ul>
                    <li>easyui is a collection of user-interface plugin based on jQuery.</li>
                    <li>complete framework for HTML5 web page.</li>
                    <li>easyui save your time and scales while developing your products.</li>
                    <li>easyui is very easy but powerful.</li>
                </ul>
            </div>
            <div title="My Documents" style="padding:10px">
                <ul class="easyui-tree" data-options="url:'../tabs/tree_data1.json',animate:true"></ul>
            </div>
            <div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
                This is the help content.
            </div>
        </div>
    步骤也不难,指定tabs的容器(设置class="easyui-tabs"),之后只要在该容器下放一个div就是一个tab,当然只是下面一级div有效
    例如在help后面加上一个test
    运行效果如下
    接下来就可以通过点击菜单栏创建tabs,在center显示
    // 增加一个新的 tab panel
    $('#tt').tabs('add', {
          title: 'New Tab',
          content: 'Tab Body',
          closable: true
    });
    加好菜单栏,就可以完成了,效果如下
     
    最后有个疑问:就是Layout Panel的herf属性,我试着给了一个网址,却一直在load...,询问下
     
    整个代码如下:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Full Layout - jQuery EasyUI Demo</title>
        <link href="../../Scripts/jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet"
            type="text/css" />
        <link href="../../Scripts/jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" type="text/css" />
        <script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
        <script src="../../Scripts/jquery-easyui-1.3.2/jquery.easyui.min.js" type="text/javascript"></script>
        <style type="text/css">
            .panel-header,.layout-expand
            {
                background: linear-gradient(to bottom,#abd5c0 0,#abd5c0 100%);
            }
            .layout-expand .panel-body
            {
                background: linear-gradient(to bottom,#abd5c0 0,#abd5c0 100%);
            }
            .panel-header,.panel-body
            {
                border-color: #95B8E7;
            }
            li{ list-style-type: none;}
            #menubar {
                width: 100%;
            }
            #menubar p
            {
                width: 100%;
                height: 35px;
                background-color: green;
                display: inline-block;
                line-height: 35px;
                padding: 0;
                margin: 0;
                text-align: center;
                cursor: pointer;
                }
            .lab_sidebar {
                display: none;
            }
        </style>
        <script type="text/javascript">
            $(function () {
                $("#menubar").find("p").click(function () {
                    $(this).next().toggle("lab_sidebar");
    
                });
            });
            function createFrame(url) {
                var s = '<iframe name="mainFrame" scrolling="auto" frameborder="0"  src="' + url + '" style="100%;height:99%;"></iframe>';
                return s;
            }
            //添加选项
            function addTab(subtitle, url) {
                if (!$('#tabs').tabs('exists', subtitle)) {
                    $('#tabs').tabs('add', {
                        title: subtitle,//标题
                        content: createFrame(url),
                        closable: true
                    });
                } else {
                    $('#tabs').tabs('select', subtitle);
                }
            }
            // 增加一个新的 tab panel
            function addDiv() {
                $('#tabs').tabs('add', {
                    title: 'New Tab',
                    content: 'Tab Body',
                    closable: true
                });
            }
        </script>
    </head>
    <body class="easyui-layout">
        <div data-options="region:'north',border:false" style="height: 60px; padding: 10px;background: linear-gradient(to bottom,#c4dabc 0,#abd5c0 100%);">
            System Admin
        </div>
        <div data-options="region:'west',split:true,iconCls:'edit'" style=" 150px; background-color:#abd5c0">
            <div id="menubar">
                <p>用户管理</p>
                <ul>
                    <li><input type="button" value="添加Tabs" onclick="addDiv()"/></li>
                    <li>新增用户</li>
                    <li>新增用户</li>
                    <li><a href="javascript:void(0)" onclick="addTab(this.innerText,'http://www.baidu.com/')">百度一下</a></li>
                </ul>
                <p>团队管理</p>
                <ul>
                    <li>用户管理</li>
                    <li>新增用户</li>
                    <li>新增用户</li>
                    <li><a href="javascript:void(0)" onclick="addTab(this.innerText,'http://www.cnblogs.com/')">博客园</a></li>
                </ul>
                <p>系统管理</p>
                <ul>
                    <li>用户管理</li>
                    <li>新增用户</li>
                    <li>新增用户</li>
                    <li>新增用户</li>
                </ul>
            </div>
        </div>
        <div data-options="region:'east',split:true,collapsed:true,title:'east'" style=" 100px;
            padding: 10px;">
            east region</div>
        <div data-options="region:'south',border:false" style="height: 50px; background: #abd5c0;
            padding: 10px;">
            south region</div>
        <div data-options="region:'center',border:false">
            <div class="easyui-tabs" id="tabs" fit="true">
                <div title="欢迎使用" style="padding: 20px; overflow: hidden;" id="home">
                    <h1>Welcome to jQuery UI!</h1>
                </div>
            </div>
        </div>
    </body>
    </html>
    View Code



  • 相关阅读:
    给你一个长度为 n 的数组,其中只有一个数字出现了大于等于 n/2 次,问如何使用优秀的 时空复杂度快速找到这个数字。
    给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现偶数次。找出那个只出现了一次的元素。
    python虚拟环境配置
    测试环境配置
    使用ELK Stack收集kubernetes集群内的应用日志
    vue 禁止遮罩层下的页面滑动
    vue 把 java 传过来的流文件 转成apk、xls等
    vue 中使用 webSocket 收发数据, 增加 " 心跳机制 " 保持连接.
    webstrom 根据当前编辑文件定位左侧目录
    MySQL 8.0新特性详解(转)
  • 原文地址:https://www.cnblogs.com/chen54/p/3772948.html
Copyright © 2011-2022 走看看