使用 EasyUI 写一些后台常用的界面

一、前言

EasyUI是比较早接触的 UI 框架,使用的时间也较长,主要是用来做后台管理界面的,减少开发成本、时间、难度,但是界面也是相当简陋的。下面列举一些常用的界面,如主页、CRUD、登录界面等

二、代码与效果

1、主页:

① 代码

<html>

    <head>
        <meta charset="utf-8">meta>
        <title>larger5title>
        <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/default/easyui.css" />
        <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/icon.css" />
        <script type="text/javascript" src="jquery-easyui-1.3.3/jquery.min.js">script>
        <script type="text/javascript" src="jquery-easyui-1.3.3/jquery.easyui.min.js">script>
        
        <script type="text/javascript" src="jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js">script>
        <script type="text/javascript">
            function openTab(text, url, iconCls) {
                if($("#tabs").tabs("exists", text)) {
                    //如果已经存在,则使之处于选中的状态
                    $("#tabs").tabs("select", text);
                } else {
                    //如果不存在则新增加一个
                    var content = "";
                    $("#tabs").tabs("add", {
                        title: text, //标题
                        iconCls: iconCls, //图标
                        closable: true, //可以关闭
                        content: content //内容,内嵌一个 iframe!
                    });
                }
            }
        script>
    head>

    <body class="easyui-layout">

        <div region="north" style="height: 107px;background-color: #F0F0F0">
            <table style="padding: 5px" width="100%">
                <tr>
                    <td width="50%">
                        <img alt="logo" src="images/logo.png" />
                    td>
                    <td valign="bottom" align="right" width="50%">
                        <font size="3">  <strong>欢迎:strong><span>xxspan>font>
                    td>
                tr>
            table>
        div>

        <div region="center">
            <div class="easyui-tabs" fit="true" border="false" id="tabs">
                <div title="首页" data-options="iconCls:'icon-help'">
                    <div align="center" style="padding-top: 100px"> 
                        <font color="green" size="10">欢迎使用font>
                    div>
                div>
            div>
        div>

        <div region="west" style="width: 200px" title="导航菜单" split="true">
            <div style="padding-top: 10px;padding-left: 10px;">
                <a href="javascript:openTab('添加','https://www.baidu.com','icon-add')" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" style="width: 150px;">添加a>
                <a href="javascript:openTab('修改','https://www.360.cn','icon-edit')" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-edit'" style="width: 150px;">修改a>
                <a href="javascript:openTab('删除','https://www.csdn.net','icon-remove')" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" style="width: 150px;">删除a>
                <a href="javascript:openTab('保存','http://edu.51cto.com','icon-ok')" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-ok'" style="width: 150px;">保存a>
                <a href="javascript:openTab('导出','http://www.people.com.cn/','icon-save')" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-save'" style="width: 150px;">导出a>
                <a href="javascript:logout()" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-no'" style="width: 150px;">退出a>
            div>
        div>

        <div region="south" style="height: 30px;padding: 5px" align="center">
            Copyright © 2016-2018 larger5
        div>

    body>

html>
②效果

使用 EasyUI 写一些后台常用的界面_第1张图片

2、CRUD

① 代码

<html>

    <head>
        <meta charset="UTF-8">meta>
        <title>CRUDtitle>
        <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/default/easyui.css" />
        <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.3.3/themes/icon.css" />
        <script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.min.js">script>
        <script type="text/javascript" src="../jquery-easyui-1.3.3/jquery.easyui.min.js">script>
        
        <script type="text/javascript" src="../jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js">script>
    head>
    <table id="dg" title="用户 CRUD 管理" class="easyui-datagrid" fitColumns="true" pagination="true" rownumbers="true" url="/user/list" fit="true" toolbar="#tb">
        <thead>
            <tr>
                <th field="cb" checkbox="true" align="center">th>
                <th field="id" width="100" align="center">编号th>
                <th field="name" width="200" align="center">用户名th>
                <th field="word" width="200" align="center">密码th>
            tr>
        thead>
    table>

    
    <div id="tb">
        
        <a href="javascript:openLinkAddDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加a>
        <a href="javascript:openLinkModifyDialog()" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改a>
        <a href="javascript:deleteLink()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除a>
    div>

    
    <div id="dlg" class="easyui-dialog" style="width: 500px;height: 200px;padding: 10px 20px" closed="true" buttons="#dlg-buttons">
        <form id="fm" method="post">
            <table cellspacing="8px">
                <tr>
                    <td>用户名:td>
                    <td>
                        <input type="text" id="name" name="name" class="easyui-validatebox" required="true" />
                    td>
                tr>
                <tr>
                    <td>密码:td>
                    <td>
                        <input type="text" id="word" name="word" class="easyui-validatebox" required="true" />
                    td>
                tr>
            table>
        form>
    div>

    
    <div id="dlg-buttons">
        <a href="javascript:saveLink()" class="easyui-linkbutton" iconCls="icon-ok">保存a>
        <a href="javascript:closeLinkDialog()" class="easyui-linkbutton" iconCls="icon-cancel">关闭a>
    div>

    <body>
    body>

html>
② 效果

使用 EasyUI 写一些后台常用的界面_第2张图片

其他的再慢慢更新…

三、小结

1、EasyUI 中文参考文档,相当不错

你可能感兴趣的:(使用 EasyUI 写一些后台常用的界面)