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>

<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="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初步学习(一)

时间： 2024-10-05 10:32:29

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

Jquery Easy UI初步学习(二)datagrid的使用

第一篇学的是做一个管理的外框,接着就是数据datagrid绑定了,这里我用asp.net mvc3来做的,主要就是熟悉属性.方法. 打开easyui的demo 就可以看到如下一段代码: 和上篇一样class="easyui-datagrid", data-options="...",这是一样的,其他我在网上查了查,并做了整理 DataGrid 属性 参数名 类型 描述 默认值 title string Datagrid面板的标题 null iconCls strin

Jquery Easy UI初步学习(三)数据增删改

第二篇只是学了加载用datagrid加载数据,数据的增删改还没有做,今天主要是解决这个问题了. 在做增删改前需要弹出对应窗口,这就需要了解一下EasyUi的弹窗控件. 摘自:http://philoo.cnblogs.com/ 我的理解,就是panel有的属性Window.dialog都有,同时保留自己的扩展属性方法 , 所以主要展示pannel的属性. Pannel 属性 名称 类型 说明 默认值 title string 显示在Panel头部的标题文字. null iconCls strin

jquery easy UI 的hello版

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Tree Node Icons - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="easyui.css"> <link r

Jquery Easy UI的初步使用

总的来说,easyUI是jquery的一个很好地扩展,大大的提高了代码的开发速度,是一个很好地插件,我在使用的过程中,总体的感觉还是很不错的. 虽然相对来说,文件包稍微的有点大,但是在现在的网络世界中,这点大小就显得微不足道了,所以,在前端设计方面还是有很多的优势. 下面是一个easyUI的初步实例: <!DOCTYPE html> <html> <head> <title>Jquery Easy UI</title> <meta char

jQuery Easy UI Panel(面板)组件

panel(面板)组件,跟前面的组件用法几乎都差不多,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 还有一点跟前面不同的就是面板内容可以请求远程数据. 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <s

jQuery Easy UI整理笔记目录

jQuery Easy UI整理笔记目录 ps:最近对Easy UI比较感兴趣,打算系统的学习一下,前面基础部分的东西很简单,都是参照API去写的,例子也就是随便举的,没有列举项目中的实际应用. 打算基础部分后面的知识多投入点时间,多与项目中的实际相结合一些,也尽量多想象出一些应用场景. 计划最慢每周更新一篇文章. 一.基础组件部分 1. jQuery Easy UI的使用 2. jQuery Easy UI Draggable(拖动)组件 3. jQuery Easy UI Droppable

jQuery Easy UI的使用

一.初步认识 1.什么是jQuery Easy UI jQuery Easy UI是一组基于jQuery的UI插件集合,而jQuery Easy UI 的目标就是帮助Web 开发者更轻松的打造出功能丰富并且美观的 UI 界面. 官方网站http://www.jeasyui.com 2.jQuery EasyUI有哪些特点 (1).基于 jquery 用户界面插件的集合: (2).源代码加密.商业版付费 (3).使用 EasyUI 你不需要写很多的 javascript 代码,通常只需要写 HTM

jquery easy ui 1.5最新版本 简单的权限分配

jquery easy 1.5 Maven+servlet+jsp+jdbc实现权限管理分配 首先,我先说明下,我只是一个菜鸟,我只是在编程道路上摸索的一个的小码农.做开发三年了,这好像是我第一次写博客.以前接触过类似于jquery easy  ui 的DWZ,是我第一家公司用的UI框架.所以用easy ui感觉很快能上手.都是基于jquery 的ui框架.好,废话少说.此次项目我是用最基础的jsp+servlet+jdbc写的,同时加入了maven管理jar包以及发布.应该很好理解的. 1.准

JQUERY EASY UI +TREE +SERVLET 显示菜单的例子

1.准备工作 (1)jquery easy ui (2)mysql数据 (3)eclipse开发环境等等 2.开发前端 <body class="easyui-layout"> <div data-options="region:'north',title:'header',split:true,noheader:true" style="height:60px;background:#666;"><div clas