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. IntelliJ IDEA导包快捷键

    IntelliJ IDEA导包快捷键 Alt+Enter

  2. UICollectionView中的cell 左对齐

    项目中使用UICollectionView做布局,会发现当某个section只有一个cell的时候cell会居中显示,而项目中都是居左显示,这就需要对UICollectionView的布局做些处理,首 ...

  3. （web）个人项目(挖宝网)

    前台:使用bootstrap. 后台:使用layui. 数据库:mysql 下载地址:https://github.com/oukele/wabaowangDemo(数据库文件忘记上传,我在展示功能结 ...

  4. RestTemplate响应值乱码

    @Bean public RestTemplate getRestTemplate(){ RestTemplate restTemplate = new RestTemplate(); //解决中文乱 ...

  5. [学习笔记] 平衡树——Treap

    前置技能:平衡树前传:BST 终于学到我们喜闻乐见的平衡树啦! 所以我们这次讲的是平衡树中比较好写的\(Treap\). (以后会写splay的先埋个坑在这) 好了,进入正题. step 1 我们知道 ...

  6. SuperSocket框架的系列博文

    官方文档 http://docs.supersocket.net/v1-6/zh-CN 对于我等小白,此系列博文,受益匪浅,慢慢看 https://www.cnblogs.com/fly-bird/c ...

  7. 在Ubuntu 18.04系统中蓝牙鼠标连接失败问题的解决

    2018-08-22 16:00:35作者:谖瓞稿源:linux站 如果你在Ubuntu 18.04操作系统中有蓝牙鼠标连接失败问题,那就参考下面的解决方法处理. 解决方法 首先在系统终端下输入: b ...

  8. JVM（八），垃圾回收标记算法

    八.垃圾回收标记算法 1.对象被判定成垃圾的标准 没有被其他对象引用 2.判断对象是否为垃圾的算法 (1)引用计数法 优点and缺点 (2)可达性分析算法

  9. maven报错1

    错误1 错误2 缺少mapper文件 错误3 缺少映射文件 <!-- 如果不添加此节点mybatis的mapper.xml文件都会被漏掉. --> <build> <re ...

  10. 2019icpc南京网络赛 F 主席树

    题意 给一个\(n\)的全排列数组\(a\),求一个递推数组每一项的值:\(ans[i]=ans[j]+1\),\(j\)为\(a[pos[i]-k]到a[pos[i]+k],(pos[i]为i在数组 ...