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

来源：互联网发布：战争知乎编辑：程序博客网时间：2024/06/01 23:40

通过上篇博客《轻松入门easyui框架（一）概述》对easyui有了一个整体的认识，那么easyui究竟能给我们带来怎样的用户体验？下面为大家展示几种常用的easyui框架效果：

一、EasyUI---Accordion

效果：

代码：

<html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>Accordion</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 type="text/javascript"></script></head><body>    <div style="overflow:auto;width:600px;height:300px;padding:10px;border:1px solid #ccc;">        <div id="aa" class="easyui-accordion" fit="true" style="width:300px;height:200px;">            <div title="Title1" style="overflow:auto;padding:10px;">                <h3>Accordion1</h3>            </div>            <div title="Title2" style="padding:10px;">                <h3>Accordion2</h3>            </div>            <div title="Title3">                <h3>Accordion3</h3>            </div>        </div>    </div></body></html>

二、EasyUI---DataGrid

效果：

代码：

<html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>DataGrid</title>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <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 type="text/javascript">        $(function() {            $('#test').datagrid({                title: 'jQuery EasyUI---DataGrid',                iconCls: 'icon-save',                width: 500,                height: 350,                nowrap: false,                striped: true,                url: '../Data/datagrid_data.json',                sortName: 'ID',                sortOrder: 'desc',                idField: 'ID',                frozenColumns: [[                    { field: 'ck', checkbox: true },                    { title: 'ID', field: 'ID', width: 80, sortable: true }                ]],                columns: [[                    { title: '基本信息', colspan: 2 },                    { field: 'opt', title: '操作', width: 100, align: 'center', rowspan: 2,                        formatter: function(value, rec) {                            return '<span style="color:red">编辑 删除</span>';                        }                    }                ], [                    { field: 'name', title: 'Name', width: 120 },                    { field: 'addr', title: 'Address', width: 120, rowspan: 2, sortable: true }                ]],                pagination: true,                rownumbers: true,                singleSelect: false,                toolbar: [{                    text: '添加',                    iconCls: 'icon-add',                    handler: function() {                    alert('添加数据')                    }                }, '-', {                    text: '保存',                    iconCls: 'icon-save',                    handler: function() {                    alert('保存数据')                    }                }]                });            });                </script></head><body>    <table id="test"></table></body></html>

三、EasyUI---Dialog

效果：

代码：

<html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>Dialog</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(){            $('#dd').dialog({                toolbar:[{                    text:'添加',                    iconCls:'icon-add',                    handler:function(){                    alert('添加数据')                    }                },'-',{                    text:'保存',                    iconCls:'icon-save',                    handler:function(){                        alert('保存数据')                    }                }],                buttons:[{                    text:'提交',                    iconCls:'icon-ok',                    handler:function(){                    alert('提交数据');                    }                },{                    text:'取消',                    handler:function(){                    $('#dd').dialog('取消');                    }                }]            });        });            </script></head><body>    <div id="dd" style="padding:5px;width:400px;height:200px;">        <p>jQuery EasyUI---Dialog</p>    </div></body></html>

常用的easyui框架效果有很多种，今天介绍了常用的三种：Accordion、DataGrid、Dialog，在下篇博客里将继续介绍easyui常用效果。

0 0