Jquery Easy UI初步学习(一)

Easy UI 1.3.2

以前听说Easy UI很不错，当了一个dome，闲着没事就看了一下，也整理一下为了自己更好的记忆，也希望对象我这样小菜有帮助吧

先从后台管理的主页面开始，如要要做主页需要了解以下几项

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

<div class="easyui-dialog" style="width: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>

<title>Full Layout - jQuery EasyUI Demo</title>

</head>

<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>

</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中代码如下：

<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>

This is the help content.

</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="width: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="width: 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="width: 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>

来自为知笔记(Wiz)

Jquery Easy UI初步学习(一)的更多相关文章

Jquery Easy UI初步学习(三)数据增删改
第二篇只是学了加载用datagrid加载数据,数据的增删改还没有做,今天主要是解决这个问题了. 在做增删改前需要弹出对应窗口,这就需要了解一下EasyUi的弹窗控件. 摘自:http://philoo ...
Jquery Easy UI初步学习(二)datagrid的使用
第一篇学的是做一个管理的外框,接着就是数据datagrid绑定了,这里我用asp.net mvc3来做的,主要就是熟悉属性.方法. 打开easyui的demo 就可以看到如下一段代码: 和上篇一样cl ...
jQuery Easy UI Panel(面板)组件
panel(面板)组件,跟前面的组件使用方法差点儿都差点儿相同,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 另一点跟前面 ...
Jquery easy UI 上中下三栏布局分类： ASP.NET 2015-02-06 09:19 368人阅读评论(0) 收藏
效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
jQuery Easy UI 开发笔记
1.jQuery Easy UI主要的运行原理是通过核心的代码调用插件来实现UI效果的 2.jQuery Easy UI插件与插件之间的关系是: 一.独立式插件: 独立式插件是指:不与其他的插件具有相 ...
JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单
JQuery Easy Ui dataGrid 数据表格数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...
jQuery Easy UI (适应屏幕分辨率大小)布局(Layout)
一.jQuery Easy UI (适应屏幕分辨率大小)布局(Layout) 1.首先应用的是jquery-easyui-1.4 版本(版本不同,兼容性不同) 2.实现整个页面的布局( layout: ...
jQuery Easy UI Resizable(调整大小)组件
Resizable(调整大小)组件,easyui基础组件之中的一个.调整大小就是能够对元素能够拖着调整大小,这个组件不依赖于其它组件,使用比較简单,相关的属性.事件都在样例中介绍了. 演示样例: & ...
jQuery Easy UI Droppable(放置)组件
Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...

随机推荐

“全栈2019”Java异常第二十章：自定义异常详解
难度初级学习时间 10分钟适合人群零基础开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...
PHP一句话木马Webshell变形免杀总结
0×00 前言大部分Webshell查杀工具都是基于关键字特征的,通常他们会维护一个关键字列表,以此遍历指定扩展名的文件来进行扫描,所以可能最先想到的是各种字符串变形,下面总结了一些小的方法,各种不 ...
jQuery入门讲解
jQuery设计思想: (1)选择页面元素 css选择器: $(document) 选择整个文档对象, $("#myId") 选择id为myId的页面元素, $("div ...
1.2 Percona XtraDB Cluster Limitations
摘要: 出处:黑洞中的奇点的博客 http://www.cnblogs.com/kelvin19840813/ 您的支持是对博主最大的鼓励,感谢您的认真阅读.本文版权归作者所有,欢迎转载,但请保留该 ...
架构师养成记--26.vi/vim相关操作
vi/vim命令模式插入模式 aio编辑模式 : aio就是vi/vim的插入模式命令作用a 在光标后附加文本A 在本行末附加文本i 在光标钱插 ...
css左右布局，左侧固定，右侧自适应
实现布局的几种方法,见代码: <!DOCTYPE html> <html lang="cn"> <head> <meta charset= ...
PXE+Kickstart 批量安装CentOS 7
安装之前将需要安装 CentOS 的服务器与 PXE 服务器通过网络设备连接:PXE 服务器安装 CentOS,并且关闭firewalld.selinux,设置静态IP地址,本例设为10.0.0.1 ...
Mac 10.12安装网站圆形设计工具Axure RP Pro 7
下载: (链接: https://pan.baidu.com/s/1hsaTafi 密码: 855y)
Mac无法将自定义图标添加到Launchpad的替代方案（桌面双击Shell运行）
截止在几天之前的Mac OS版本都无法实现将自定义图标添加到Launchpad.我使用的是10.12. 替代的思路就是在桌面新建一个Shell文件,然后使软件在后台运行,最后就是双击Shell文件能自 ...
Mac下配置git环境和客户端SourceTree+Git常用命令大全（Mac 10.12）
前言: 如果不想折腾,直接下载GitHub桌面端,高度集成git,不需要学习git的任何命令. https://desktop.github.com/ 一.配置git环境 1.上官网https://g ...

Jquery Easy UI初步学习(一)

Layout Panel

Jquery Easy UI初步学习(一)的更多相关文章

随机推荐

热门专题