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. Python爬虫进阶之Scrapy框架安装配置

    Python爬虫进阶之Scrapy框架安装配置 初级的爬虫我们利用urllib和urllib2库以及正则表达式就可以完成了,不过还有更加强大的工具,爬虫框架Scrapy,这安装过程也是煞费苦心哪,在此 ...

  2. HttpServletResponse 返回的json数据不是json字符串，而是json对象

    今天在改一个bug 情况: 在spring boot中写了一个类Result ,用来统一封装 各个API响应结果 , 其中重写了toString()方法来返回 json字符串 . 在正常情况下,从其它 ...

  3. puppet 3+Unicorn+Nginx安装配置

    puppet 3+Unicorn+Nginx安装配置 2014-08-15 10:58 酒瓶不倒 酒瓶不倒的博客 字号:T | T 一键收藏,随时查看,分享好友! Unicorn 效率要比 Webri ...

  4. 详解 @MapperScan 注解和 @Mapper 注解

    实际上,这是一个非常简单的问题.我并没有一口回绝他,让他去百度.因为,新人都会经历这个过程.好不容易,问你一次,你直接让他百度,会打击到他的.而且,别人会觉得你摆架子. @Mapper 这个注解的定义 ...

  5. Python的f.seek(offset, whence)函数

    file.seek()方法标准格式是:seek(offset,whence=0)offset:开始的偏移量,也就是代表需要移动偏移的字节数whence:给offset参数一个定义,表示要从哪个位置开始 ...

  6. python爬虫添加请求头

    request import requests headers = { # 'Accept': 'application/json, text/javascript, */*; q=0.01', # ...

  7. Nowcoder的JS计时器题分析

    题目描述 实现一个打点计时器,要求1.从 start 到 end(包含 start 和 end),每隔 100 毫秒 console.log 一个数字,每次数字增幅为 12.返回的对象中需要包含一个 ...

  8. 小程序开发之后台mybatis逆向工程（二）

    上一节搭建好了SSM后台框架,这一节将根据表结构创建实体及映射文件以及mapper接口.如果表过多,会很麻烦,所以mybatis提供了逆向工程来解决这个问题. 上一节 SSM搭建后台管理系统 逆向工程 ...

  9. LibreOffice/Calc：带条件判断的求和

    本文适用于LibreOffice Calc 5.1.6.2 + Ubuntu 16.04,熊猫帮帮主@cnblogs 2018/3/7 以下图为例,假设要根据C列对D列中被选中单元进行求和,即对D列中 ...

  10. Confluence 6.15 博客页面（Blog Posts）宏

    博客页面宏允许你 Confluence 页面中显示博客页面.通过单击博客的标题将会把你链接到博客页面中. 使用博客页面宏 为了将博客页面宏添加到页面中:  从编辑工具栏中,选择 插入(Insert)  ...