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. js栈和堆的区别

    一.  堆(heap)和栈(stack) 栈(stack)会自动分配内存空间,会自动释放.堆(heap)动态分配的内存,大小不定也不会自动释放. 二.  基本类型和引用类型 基本类型:简单的数据段,存 ...

  2. BZOJ1030 [JSOI2007]文本生成器[DP+AC自动机]

    我学到现在才是初三学弟的水平..哭 这里相当于求长度为$m$的,字符集$\{A...Z\}$的且不包含任一模式串的文本串个数.这是一个典型的AC自动机匹配计数问题. 设$f_{i,j}$表示在AC自动 ...

  3. ubuntu NAT dhcp

    说明: 1.在服务器版本中,没有想桌面版一样的NetworkManager工具,所以的一切都是在命令行上操作的. 2.本文只针对DHCP默认分配的IP进行查看. 方法: 1.如果要使用DHCP,那么需 ...

  4. Python文件查找

    #!/usr/bin/python   import os import string   def get_name(path_name, file_str):         dir_name = ...

  5. SparkSQL之UDF使用

    package cn.piesat.test import org.apache.spark.sql.SparkSession import scala.collection.mutable.Arra ...

  6. jQuery.getJSON(url, [data], [callback])

    jQuery.getJSON(url, [data], [callback]) 概述 通过 HTTP GET 请求载入 JSON 数据. 在 jQuery 1.2 中,您可以通过使用JSONP形式的回 ...

  7. 万能正则解析 json 数据 解析成键值对

    string txt = "{\"ip\": \"127.0.0.1\", \"port\": 80, \"status ...

  8. java+文件批量下载

    这篇文章主要介绍了Java实现批量下载选中文件功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下 1.在action中定义变量 private List<String> downLoa ...

  9. URAL 2092 Bolero 贪心

    C - Bolero Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit S ...

  10. HZOJ 20190727 T2 单（树上dp+乱搞？+乱推式子？+dfs？）

    考试T2,考试时想到了40pts解法,即对于求b数组,随便瞎搞一下就oxxk,求a的话,很明显的高斯消元,但考试时不会打+没开double挂成10pts(我真sb),感觉考试策略还是不够成熟,而且感觉 ...