1.accordion（可折叠的）：

　　

<!doctype html>

<html lang="zh">

 <head>

  <title>easyUI鐨勯潰鏉跨粍浠�</title>

    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">

    <script type="text/javascript" src="easyui/jquery.min.js"></script>

    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

 </head>

 <body>

      <div id="aa" class="easyui-accordion" style="width:300px;height:200px;">

        <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">

            <h3 style="color:#0099FF;">Accordion for jQuery</h3>

            <p>Accordion is a part of easyui framework for jQuery.

            It lets you define your accordion component on web page more easily.</p>

        </div>

        <div title="Title2" data-options="iconCls:'icon-reload'" style="padding:10px;">

            content2

        </div>

        <div title="Title3" data-options="selected:true">

            content3

        </div>

    </div>

 </body>

</html>

2.datagrid（数据表格）：

<!doctype html>

<html lang="zh">

 <head>

  <title>easyUI的window组件</title>

    <meta charset="UTF-8">

    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">

    <script type="text/javascript" src="easyui/jquery.min.js"></script>

    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

    <script type="text/javascript">

    </script>

 </head>

 <body>

    <table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"

            data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get',pagination:true,

                pageSize:10">

        <thead>

            <tr>

                <th data-options="field:'itemid',width:80">Item ID</th>

                <th data-options="field:'productid',width:100">Product</th>

                <th data-options="field:'listprice',width:80,align:'right'">List Price</th>

                <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>

                <th data-options="field:'attr1',width:250">Attribute</th>

                <th data-options="field:'status',width:60,align:'center'">Status</th>

            </tr>

        </thead>

    </table>

 </body>

</html>

3.dialog（会话）：

<!doctype html>

<html lang="zh">

 <head>

  <title>easyUI的window组件</title>

    <meta charset="UTF-8">

    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">

    <script type="text/javascript" src="easyui/jquery.min.js"></script>

    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

    <script type="text/javascript">

    </script>

 </head>

 <body>

     <div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;"

            data-options="iconCls:'icon-save',resizable:true,modal:true,collapsible:true,maximizable:true,buttons:[{

                text:'保存',

                handler:function(){

                    alert('save...');

                }

            },{

                text:'关闭',

                handler:function(){

                    $('#dd').dialog('close');

                }

            }]">

        Dialog Content.

    </div>

 </body>

</html>

4.form（表格）：

　　

<!doctype html>

<html lang="zh">

 <head>

  <title>easyUI的面板组件</title>

    <meta charset="UTF-8">

    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">

    <script type="text/javascript" src="easyui/jquery.min.js"></script>

    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

 </head>

 <body>

        <form id="ff" method="post">

        <div>

            <label for="name">Name:</label>

            <input class="easyui-validatebox" type="text" name="name" data-options="required:true" />

        </div>

        <div>

            <label for="email">Email:</label>

            <input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'" />

        </div>

         <div>

            <label for="email">Password:</label>

            <input class="easyui-passwordbox" type="text" name="password" />

        </div>

        <div>

            <label for="email">Birthday:</label>

            <input id="dd" type="text" class="easyui-datebox" required="required">

        </div>

        <div>

            <label for="email">Birthday2:</label>

            <input id="dd" type="text" class="easyui-datetimebox" required="required">

        </div>

       <div>

            <label for="email">Age:</label>

            <input id="dd" type="text" class="easyui-numberbox" required="required" data-options="min:1,max:150">

        </div>

    </form>

 </body>

</html>

5.layout（布局）：

<!doctype html>

<html lang="zh">

 <head>

  <title>easyUI鐨刲ayout</title>

    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">

    <script type="text/javascript" src="easyui/jquery.min.js"></script>

    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

 </head>

 <body>

     <div id="cc" class="easyui-layout" style="width:100%;height:700px">

        <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>

        <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>

        <div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>

        <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>

        <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>

    </div>

 </body>

</html>

6.layout2（布局2）:

<!doctype html>

<html lang="zh">

 <head>

  <title>easyUI鐨刲ayout</title>

    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">

    <script type="text/javascript" src="easyui/jquery.min.js"></script>

    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

    <script type="text/javascript">

         function addTabs(id){

            if ($('#tt').tabs('exists', id)){

                $('#tt').tabs('select', id);

            } else {

                $("#tt").tabs('add',{

                    title:id,

                        content:'Tab Body',

                        closable:true

                });

            }

         }

    </script>

 </head>

 <body>

     <div id="cc" class="easyui-layout" style="width:100%;height:700px">

        <div data-options="region:'north',title:'North Title',split:true" style="height:100px;">

            <h1>WELCOME!</h1>

        </div>

        <div data-options="region:'west',title:'MENU',split:true" style="width:200px;">

                <div id="aa" class="easyui-accordion" style="width:192px;height:200px;">

                    <div title="USER MANAGER" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">

                        <ul>

                            <li><span id="addUser" onclick="addTabs('addUser')">ADD USER</span></li>

                            <li><span id="listUser" onclick="addTabs('listUser')">LIST USER</span></li>

                        </ul>

                    </div>

                    <div title="ROLE MANAGER" data-options="iconCls:'icon-reload'" style="padding:10px;">

                        content2

                    </div>

                    <div title="RIGHT MANAGER">

                        content3

                    </div>

                </div>

        </div>

        <div data-options="region:'center'" id="tt" class="easyui-tabs" style="padding:5px;background:#eee;">

                    <div title="index" style="padding:20px;display:none;">

                        tab1

                    </div>

        </div>

         <div data-options="region:'south',title:'South Title',split:true" style="height:100px;">

                     <h2>Copyright</h2>

        </div>

    </div>

 </body>

</html>

7.message（消息）:

<!doctype html>

<html lang="zh">

 <head>

  <title>easyUI的window组件</title>

    <meta charset="UTF-8">

    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">

    <script type="text/javascript" src="easyui/jquery.min.js"></script>

    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

    <script type="text/javascript">

        $(function(){

                //$.messager.alert('Warning','The warning message');

                /*

                $.messager.alert({

                    title:'警告',

                    msg:'警告信息!',

                    icon:'warning'

                });

                */

                /*

                $.messager.confirm({

                    title: 'My Title',

                    msg: 'Are you confirm this?',

                    fn: function(r){

                        if (r){

                            alert('confirmed: '+r);

                        }

                    }

                });

                */

                $.messager.prompt({

                    title: 'Prompt',

                    msg: 'Please enter your name:',

                    fn: function(r){

                        if (r){

                            alert('Your name is:' + r);

                        }

                    }

                });

        })

    </script>

 </head>

 <body>

 </body>

</html>

8.panel（控制面板）:

<!doctype html>

<html lang="zh">

 <head>

  <title>easyUI鐨勯潰鏉跨粍浠�</title>

    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">

    <script type="text/javascript" src="easyui/jquery.min.js"></script>

    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

    <script type="text/javascript">

        //椤甸潰杞藉叆鍑芥暟(椤甸潰鍔犺浇瀹屾垚瑙﹀彂)

        $(function(){

            $('#p').panel({

                width:600,

                height:200,

                title:'My Panel',

                tools:[

                    {

                        iconCls:'icon-add',

                        handler:function(){

                            alert('new');

                        }

                    },

                    {

                        iconCls:'icon-save',

                        handler:function(){

                            alert('save');

                        }

                    }

                ]

            });

        })

    </script>

 </head>

 <body>

    <div id="p" style="padding:10px;">

        <p>panel content.</p>

        <p>panel content.</p>

    </div>

 </body>

</html>

9.panel2（控制面板2）:

<!doctype html>

<html lang="zh">

 <head>

  <title>easyUI鐨勯潰鏉跨粍浠�</title>

    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">

    <script type="text/javascript" src="easyui/jquery.min.js"></script>

    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

 </head>

 <body>

    <div style="margin:20px 0 10px 0;">

        <a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('open')">OPEN</a>

        <a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('close')">CLOSE</a>

    </div>

    <!--闈㈡澘-->

    <div id="p" class="easyui-panel" title="Basic Panel Title" style="width:700px;height:200px;padding:10px;left:200px;top:100px"

            data-options="iconCls:'icon-save',

                collapsible:true,minimizable:true,maximizable:true">

        <p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>

        <ul>

            <li>easyui is a collection of user-interface plugin based on jQuery.</li>

            <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>

            <li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</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>

 </body>

</html>

10.tabs（标签页）:

<!doctype html>

<html lang="zh">

 <head>

  <title>easyUI鐨勯€夐」鍗＄粍浠�</title>

    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">

    <script type="text/javascript" src="easyui/jquery.min.js"></script>

    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

    <script type="text/javascript">

        $(function(){

            $("#newBtn").click(function(){

                    $("#tt").tabs('add',{

                        title:'New Tab',

                        content:'Tab Body',

                        closable:true,

                        tools:[{

                            iconCls:'icon-mini-refresh',

                            handler:function(){

                                alert('refresh');

                            }

                        }]

                    });

            });

        });

    </script>

 </head>

 <body>

     <a href="#" id="newBtn" class="easyui-linkbutton">NEW TABS</a>

      <div id="tt" class="easyui-tabs" style="width:500px;height:250px;">

        <div title="Tab1" style="padding:20px;display:none;">

            tab1 Content

        </div>

        <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">

            tab2

        </div>

        <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="display:none;">

            tab3

        </div>

    </div>

 </body>

</html>

11.window（窗口）:

<!doctype html>

<html lang="zh">

 <head>

  <title>easyUI的window组件</title>

    <meta charset="UTF-8">

    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">

    <script type="text/javascript" src="easyui/jquery.min.js"></script>

    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

    <script type="text/javascript">

    </script>

 </head>

 <body>

    <div>

        <a href="#" class="easyui-linkbutton" onclick="javascript:$('#win').window('open'); ">打开</a>

        <a href="#" class="easyui-linkbutton" onclick="javascript:$('#win').window('close'); ">关闭</a>

    </div>

    <div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px;"

            data-options="iconCls:'icon-save',closed:true">

        Window Content

    </div>

 </body>

</html>

java：easyui（重点示例）的更多相关文章

  1. [译]Java Thread Sleep示例

    Java Thread Sleep示例 java.lang.Thread sleep(long millis)方法被用来暂停当前线程的执行,暂停时间由方法参数指定,单位为毫秒.注意参数不能为负数,否则 ...

  2. [译]Java Thread join示例与详解

    Java Thread join示例与详解 Java Thread join方法用来暂停当前线程直到join操作上的线程结束.java中有三个重载的join方法: public final void ...

  3. 多线程Java Socket编程示例

    package org.merit.test.socket; import java.io.BufferedReader; import java.io.IOException; import jav ...

  4. Java基础重点指南

    Java基础重点指南 每个人都有自己的学习方法,下面是我学完Java后总结的一些要点: 一:(了解)Java诞生于1995年,由Sun公司开发.它把源代码编译成“中间码”,然后通过“Java虚拟机”把 ...

  5. Java开发Hbase示例

    Java开发Hbase示例 使用Hbase操作数据 package com.sunteng.clickidc.test; import java.io.IOException; import java ...

  6. Java代理模式示例程序

    Java代理模式示例程序 当然不是我想出来的,是我看的一个网上教程里的. 模拟的是一个对电脑公司的代理 真实类的接口: public interface SaleComputer { public S ...

  7. 从一个简单的Java单例示例谈谈并发

    一个简单的单例示例 单例模式可能是大家经常接触和使用的一个设计模式,你可能会这么写 public class UnsafeLazyInitiallization { private static Un ...

  8. 从一个简单的Java单例示例谈谈并发 JMM JUC

    原文: http://www.open-open.com/lib/view/open1462871898428.html 一个简单的单例示例 单例模式可能是大家经常接触和使用的一个设计模式,你可能会这 ...

  9. Java广度优先爬虫示例(抓取复旦新闻信息)

    一.使用的技术 这个爬虫是近半个月前学习爬虫技术的一个小例子,比较简单,怕时间久了会忘,这里简单总结一下.主要用到的外部Jar包有HttpClient4.3.4,HtmlParser2.1,使用的开发 ...

随机推荐

  1. BZOJ 1016 生成树计数

    现在给出了一个简单无向加权图.你不满足于求出这个图的最小生成树,而希望知道这个图中有多少个不同的最小生成树.(如果两颗最小生成树中至少有一条边不同,则这两个最小生成树就是不同的).由于不同的最小生成树 ...

  2. PHP-MYSQL中文乱码问题.

    从MySQL 4.1开始引入多语言的支持,但是用PHP插入的中文会出现乱码.无论用什么编码也不行. 解决这个问题其实很简单. 1.在建表的时候设置编码类型为gb2312_chinese_ci. 2.在 ...

  3. ASP.NET Core 基础知识（四） Startup.cs类

    ASP.NET Core应用程序需要一个启动类,按照约定命名为Startup.在 Program 类的主机生成器上调用 Build 时,将生成应用的主机, 通常通过在主机生成器上调用 WebHostB ...

  4. ionic使用CardIO实现扫描银行卡功能（只能扫描16位以下，并且是浮雕数字）

    在一些涉及支付功能的app,一般需要绑定银行卡,除了靠用户手动输入银行卡号,用手机扫描银行卡也是一种常用的手段,查阅了写资料,发现ionic有CardIO插件可以实现这个功能,就兴致冲冲去尝试,结果有 ...

  5. BZOJ 2119: 股市的预测 (Hash / 后缀数组 + st表)

    转博客大法好 自己画一画看一看,就会体会到这个设置关键点的强大之处了. CODE(sa) O(nlogn)→1436msO(nlogn)\to 1436msO(nlogn)→1436ms #inclu ...

  6. 浅谈Spring @Order注解的使用（转）

    注解@Order或者接口Ordered的作用是定义Spring IOC容器中Bean的执行顺序的优先级,而不是定义Bean的加载顺序,Bean的加载顺序不受@Order或Ordered接口的影响: 1 ...

  7. JavaScript中undefined和not defined 的区别

    参考:某个大佬的博客 以下原创: <script type="text/javascript"> console.log(a); a = 100; </scrip ...

  8. MessagePack Java 0.6.X 可选字段

    你可添加一个新的字段来保持可用性.在新字段中使用 @Optional 注解. @Message public static class MyMessage {     public String na ...

  9. cogs1355. 读书

    1355. 读书 ★   输入文件:reading.in   输出文件:reading.out   简单对比时间限制:1 s   内存限制:128 MB [题目描述] 放暑假了,CHH想趁假期提高一下 ...

  10. 在Windows下编译扩展OpenCV 3.1.0 + opencv_contrib 及一些问题

    一.准备工作: 1.下载OpenCV安装包:https://github.com/opencv/opencv 安装过程实际上就是解压过程,安装完成后得到(这里修改了文件名): 2.下载opencv_c ...