轻松入门easyui（三）效果展示

最新推荐文章于 2021-09-20 20:41:13 发布

haoguiting

最新推荐文章于 2021-09-20 20:41:13 发布

阅读量2.2k

点赞数

分类专栏： J2EE进行时玩转easyUI之带你飞

本文链接：https://blog.csdn.net/small_baby01/article/details/42302901

版权

J2EE进行时同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

玩转easyUI之带你飞

9 篇文章 0 订阅

订阅专栏

上篇博客里介绍了三种常用的easyui框架效果： Accordion、 DataGrid、Dialog ，今天我们继续介绍剩下的几种easyui常用效果。

一、EasyUI---Tabs

效果：

代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Tabs</title>
    
    <script src="../jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="../jquery.easyui.min.js" type="text/javascript"></script>

    <link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../themes/icon.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
        <div title="Tab1" style="padding:20px;display:none;">
            <h1>Tab1 Content</h1>
        </div>
    
    
    <div title="Tab5" closable="true" style="padding:10px;display:none;">
            <div class="easyui-tabs" fit="true" plain="true" style="height:100px;width:300px;">
                <div title="Title1">Content 1</div>
                <div title="Title2">Content 2</div>
                <div title="Title3">Content 3</div>
            </div>
        </div>
    </div>
</body>
</html>

二、EasyUI---ValidateBox

效果：

代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>ValidateBox</title>
    
    <script src="../jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="../jquery.easyui.min.js" type="text/javascript"></script>

    <link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../themes/icon.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div>
    <table>
        <tr>
            <td>姓名:</td>
            <td><input class="easyui-validatebox" required="true" validType="length[1,3]"></td>
        </tr>
        <tr>
            <td>电子邮件:</td>
            <td><input class="easyui-validatebox" required="true" validType="email"></td>
        </tr>
        <tr>
            <td>URL:</td>
            <td><input class="easyui-validatebox" required="true" validType="url"></td>
        </tr>
        <tr>
            <td>说明:</td>
            <td><textarea class="easyui-validatebox" required="true" style="height:100px;"></textarea></td>
        </tr>
    </table>
    </div>
</body>
</html>

三、EasyUI---LayOut

效果：

代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>LayOut</title>
    <script src="../jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="../jquery.easyui.min.js" type="text/javascript"></script>

    <link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../themes/icon.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="easyui-layout" style="width:600px;height:400px;">
        <div region="north" border="false" style="overflow:hidden;height:60px;background:#A4BED4;">
            <h2>Border布局</h2>
        </div>
        <div region="south" split="true" style="height:50px;background:#efefef;">
        </div>
        <div region="east" icon="icon-reload" title="Menu2" split="true" style="width:180px;">
        </div>
        <div region="west" split="true" title="Menu1" style="width:100px;">
        </div>
        <div region="center" title="Main Form" style="background:#eee;">
        </div>
    </div>
</body>
</html>

四、EasyUI---Messager

效果：

代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Messager</title>
    <script src="../jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="../jquery.easyui.min.js" type="text/javascript"></script>

    <link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../themes/icon.css" rel="stylesheet" type="text/css" />
    <script>
        function show1() {
            $.messager.show({
                title: '提示信息1',
                msg: '信息1',
                showType: 'show'
            });
        }
        function show2() {
            $.messager.show({
                title: '提示信息2',
                msg: '信息5分钟后消失.',
                timeout: 5000,
                showType: 'slide'
            });
        }
        function show3() {
            $.messager.show({
                title: '渐进显示信息3',
                msg: '渐进显示信息3',
                timeout: 0,
                showType: 'fade'
            });
        }
    </script>
</head>
<body>
    <h1>信息提示</h1>
    <div>
        <a href="javascript:void(0)" οnclick="show1()">显示</a> |
        <a href="#" οnclick="show2()">滑动</a> |
        <a href="#" οnclick="show3()">渐进显示</a> |
    </div>
</body>
</html>

到今天为止，常用的easyui框架效果就介绍完了，从下篇博客开始我们将把easyui框架融入到实际项目中，给大家展示我们项目中的实际效果。

haoguiting

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
7
评论
轻松入门easyui（三）效果展示

上篇博客里介绍了三种常用的easyui框架效果：Accordion、DataGrid、Dialog，今天我们继续介绍剩下的几种easyui常用效果。一、jQuery EasyUI---Tabs效果：代码： Tabs Tab1 Content
复制链接

扫一扫