EasyUI Demo(主页面)

最新推荐文章于 2019-05-22 14:00:00 发布
最新推荐文章于 2019-05-22 14:00:00 发布
阅读量2.3k 收藏
点赞数 1
分类专栏： 前端框架 文章标签： easyui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_40900884/article/details/84136548
版权

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="copyright" content="All Rights Reserved, Copyright (C) 2013, Wuyeguo, Ltd." />
<title>EasyUI Web Admin Power by Wuyeguo</title>
<link rel="stylesheet" type="text/css" href="easyui/1.3.4/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="css/wu.css" />
<link rel="stylesheet" type="text/css" href="css/icon.css" />
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="easyui/1.3.4/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/1.3.4/locale/easyui-lang-zh_CN.js"></script>
</head>
<body class="easyui-layout">
    <!-- begin of header -->
    <div class="wu-header" data-options="region:'north',border:false,split:true">
        <div class="wu-header-left">
            <h1>EasyUI Web Admin</h1>
        </div>
        <div class="wu-header-right">
            <p><strong class="easyui-tooltip" title="2条未读消息">admin</strong>，欢迎您！</p>
            <p><a href="#">网站首页</a>|<a href="#">支持论坛</a>|<a href="#">帮助中心</a>|<a href="#">安全退出</a></p>
        </div>
    </div>
    <!-- end of header -->
    <!-- begin of sidebar -->
    <div class="wu-sidebar" data-options="region:'west',split:true,border:true,title:'导航菜单'"> 
        <div class="easyui-accordion" data-options="border:false,fit:true"> 
            <div title="快捷菜单" data-options="iconCls:'icon-application-cascade'" style="padding:5px;">      
                <ul class="easyui-tree wu-side-tree">
                    <li iconCls="icon-chart-organisation"><a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="temp/layout-2.html" iframe="0">菜单导航</a></li>
                    <li iconCls="icon-users"><a href="javascript:void(0)" data-icon="icon-users" data-link="temp/layout-3.html" iframe="0">用户管理</a></li>
                    <li iconCls="icon-user-group"><a href="javascript:void(0)" data-icon="icon-user-group" data-link="temp/layout-3.html" iframe="0">角色管理</a></li>
                    <li iconCls="icon-book"><a href="javascript:void(0)" data-icon="icon-book" data-link="temp/layout-3.html" iframe="0">数据字典</a></li>
                    <li iconCls="icon-cog"><a href="javascript:void(0)" data-icon="icon-cog" data-link="temp/layout-3.html" iframe="0">系统参数</a></li>
                    <li iconCls="icon-application-osx-error"><a href="javascript:void(0)" data-icon="icon-application-osx-error" data-link="temp/layout-3.html" iframe="0">操作日志</a></li>
                </ul>
            </div>
            <div title="内容管理" data-options="iconCls:'icon-application-form-edit'" style="padding:5px;">      
                <ul class="easyui-tree wu-side-tree">
                    <li iconCls="icon-chart-organisation"><a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="layout-3.html" iframe="0">导航标题</a></li>
                    <li iconCls="icon-users"><a href="javascript:void(0)" data-icon="icon-users" data-link="temp/layout-3.html" iframe="0">导航标题</a></li>
                    <li iconCls="icon-user-group"><a href="javascript:void(0)" data-icon="icon-user-group" data-link="temp/layout-3.html" iframe="0">导航标题</a></li>
                    <li iconCls="icon-book"><a href="javascript:void(0)" data-icon="icon-book" data-link="temp/layout-3.html" iframe="0">导航标题</a></li>
                    <li iconCls="icon-cog"><a href="javascript:void(0)" data-icon="icon-cog" data-link="temp/layout-3.html" iframe="0">导航标题</a></li>
                    <li iconCls="icon-application-osx-error"><a href="javascript:void(0)" data-icon="icon-application-osx-error" data-link="temp/layout-3.html" iframe="0">导航标题</a></li>
                </ul>
            </div>
            <div title="商品管理" data-options="iconCls:'icon-creditcards'" style="padding:5px;">      
                <ul class="easyui-tree wu-side-tree">
                    <li iconCls="icon-chart-organisation"><a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="layout-3.html" iframe="0">导航标题</a></li>
                    <li iconCls="icon-users"><a href="javascript:void(0)" data-icon="icon-users" data-link="temp/layout-3.html" iframe="0">导航标题</a></li>
                    <li iconCls="icon-user-group"><a href="javascript:void(0)" data-icon="icon-user-group" data-link="temp/layout-3.html" iframe="0">导航标题</a></li>
                    <li iconCls="icon-book"><a href="javascript:void(0)" data-icon="icon-book" data-link="temp/layout-3.html" iframe="0">导航标题</a></li>
                    <li iconCls="icon-cog"><a href="javascript:void(0)" data-icon="icon-cog" data-link="temp/layout-3.html" iframe="0">导航标题</a></li>
                    <li iconCls="icon-application-osx-error"><a href="javascript:void(0)" data-icon="icon-application-osx-error" data-link="temp/layout-3.html" iframe="0">导航标题</a></li>
                </ul>
            </div>
            <div title="订单管理" data-options="iconCls:'icon-cart'" style="padding:5px;">      
                <ul class="easyui-tree wu-side-tree">
                    <li iconCls="icon-chart-organisation"><a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="layout-3.html" iframe="0">导航标题</a></li>
                    <li iconCls="icon-users"><a href="javascript:void(0)" data-icon="icon-users" data-link="temp/layout-3.html" iframe="0">导航标题</a></li>
                    <li iconCls="icon-user-group"><a href="javascript:void(0)" data-icon="icon-user-group" data-link="temp/layout-3.html" iframe="0">导航标题</a></li>
                    <li iconCls="icon-book"><a href="javascript:void(0)" data-icon="icon-book" data-link="temp/layout-3.html" iframe="0">导航标题</a></li>
                    <li iconCls="icon-cog"><a href="javascript:void(0)" data-icon="icon-cog" data-link="temp/layout-3.html" iframe="0">导航标题</a></li>
                    <li iconCls="icon-application-osx-error"><a href="javascript:void(0)" data-icon="icon-application-osx-error" data-link="temp/layout-3.html" iframe="0">导航标题</a></li>
                </ul>
            </div>
            <div title="广告管理" data-options="iconCls:'icon-bricks'" style="padding:5px;">      
                <ul class="easyui-tree wu-side-tree">
                    <li iconCls="icon-chart-organisation"><a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="layout-3.html" iframe="0">导航标题</a></li>
                    <li iconCls="icon-users"><a href="javascript:void(0)" data-icon="icon-users" data-link="temp/layout-3.html" iframe="0">导航标题</a></li>
                    <li iconCls="icon-user-group"><a href="javascript:void(0)" data-icon="icon-user-group" data-link="temp/layout-3.html" iframe="0">导航标题</a></li>
                    <li iconCls="icon-book"><a href="javascript:void(0)" data-icon="icon-book" data-link="temp/layout-3.html" iframe="0">导航标题</a></li>
                    <li iconCls="icon-cog"><a href="javascript:void(0)" data-icon="icon-cog" data-link="temp/layout-3.html" iframe="0">导航标题</a></li>
                    <li iconCls="icon-application-osx-error"><a href="javascript:void(0)" data-icon="icon-application-osx-error" data-link="temp/layout-3.html" iframe="0">导航标题</a></li>
                </ul>
            </div>
            <div title="报表中心" data-options="iconCls:'icon-chart-curve'" style="padding:5px;">      
                <ul class="easyui-tree wu-side-tree">
                    <li iconCls="icon-chart-organisation"><a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="layout-3.html" iframe="0">导航标题</a></li>
                    <li iconCls="icon-users"><a href="javascript:void(0)" data-icon="icon-users" data-link="temp/layout-3.html" iframe="0">导航标题</a></li>
                    <li iconCls="icon-user-group"><a href="javascript:void(0)" data-icon="icon-user-group" data-link="temp/layout-3.html" iframe="0">导航标题</a></li>
                    <li iconCls="icon-book"><a href="javascript:void(0)" data-icon="icon-book" data-link="temp/layout-3.html" iframe="0">导航标题</a></li>
                    <li iconCls="icon-cog"><a href="javascript:void(0)" data-icon="icon-cog" data-link="temp/layout-3.html" iframe="0">导航标题</a></li>
                    <li iconCls="icon-application-osx-error"><a href="javascript:void(0)" data-icon="icon-application-osx-error" data-link="temp/layout-3.html" iframe="0">导航标题</a></li>
                </ul>
            </div>
            <div title="系统设置" data-options="iconCls:'icon-wrench'" style="padding:5px;">      
                <ul class="easyui-tree wu-side-tree">
                    <li iconCls="icon-chart-organisation"><a href="javascript:void(0)" data-icon="icon-chart-organisation" data-link="layout-3.html" iframe="0">导航标题</a></li>
                    <li iconCls="icon-users"><a href="javascript:void(0)" data-icon="icon-users" data-link="temp/layout-3.html" iframe="0">导航标题</a></li>
                    <li iconCls="icon-user-group"><a href="javascript:void(0)" data-icon="icon-user-group" data-link="temp/layout-3.html" iframe="0">导航标题</a></li>
                    <li iconCls="icon-book"><a href="javascript:void(0)" data-icon="icon-book" data-link="temp/layout-3.html" iframe="0">导航标题</a></li>
                    <li iconCls="icon-cog"><a href="javascript:void(0)" data-icon="icon-cog" data-link="temp/layout-3.html" iframe="0">导航标题</a></li>
                    <li iconCls="icon-application-osx-error"><a href="javascript:void(0)" data-icon="icon-application-osx-error" data-link="temp/layout-3.html" iframe="0">导航标题</a></li>
                </ul>
            </div>
        </div>
    </div>    
    <!-- end of sidebar -->    
    <!-- begin of main -->
    <div class="wu-main" data-options="region:'center'">
        <div id="wu-tabs" class="easyui-tabs" data-options="border:false,fit:true">  
            <div title="首页" data-options="href:'temp/layout-1.html',closable:false,iconCls:'icon-tip',cls:'pd3'"></div>
        </div>
    </div>
    <!-- end of main --> 
    <!-- begin of footer -->
    <div class="wu-footer" data-options="region:'south',border:true,split:true">
        &copy; 2013 Wu All Rights Reserved
    </div>
    <!-- end of footer -->  
    <script type="text/javascript">
        $(function(){
            $('.wu-side-tree a').bind("click",function(){
                var title = $(this).text();
                var url = $(this).attr('data-link');
                var iconCls = $(this).attr('data-icon');
                var iframe = $(this).attr('iframe')==1?true:false;
                addTab(title,url,iconCls,iframe);
            });    
        })
        
        /**
        * Name 载入树形菜单 
        */
        $('#wu-side-tree').tree({
            url:'temp/menu.php',
            cache:false,
            onClick:function(node){
                var url = node.attributes['url'];
                if(url==null || url == ""){
                    return false;
                }
                else{
                    addTab(node.text, url, '', node.attributes['iframe']);
                }
            }
        });
        
        /**
        * Name 选项卡初始化
        */
        $('#wu-tabs').tabs({
            tools:[{
                iconCls:'icon-reload',
                border:false,
                handler:function(){
                    $('#wu-datagrid').datagrid('reload');
                }
            }]
        });
            
        /**
        * Name 添加菜单选项
        * Param title 名称
        * Param href 链接
        * Param iconCls 图标样式
        * Param iframe 链接跳转方式（true为iframe，false为href）
        */    
        function addTab(title, href, iconCls, iframe){
            var tabPanel = $('#wu-tabs');
            if(!tabPanel.tabs('exists',title)){
                var content = '<iframe scrolling="auto" frameborder="0"  src="'+ href +'" style="width:100%;height:100%;"></iframe>';
                if(iframe){
                    tabPanel.tabs('add',{
                        title:title,
                        content:content,
                        iconCls:iconCls,
                        fit:true,
                        cls:'pd3',
                        closable:true
                    });
                }
                else{
                    tabPanel.tabs('add',{
                        title:title,
                        href:href,
                        iconCls:iconCls,
                        fit:true,
                        cls:'pd3',
                        closable:true
                    });
                }
            }
            else
            {
                tabPanel.tabs('select',title);
            }
        }
        /**
        * Name 移除菜单选项
        */
        function removeTab(){
            var tabPanel = $('#wu-tabs');
            var tab = tabPanel.tabs('getSelected');
            if (tab){
                var index = tabPanel.tabs('getTabIndex', tab);
                tabPanel.tabs('close', index);
            }
        }
    </script>
</body>
</html>

李_lym
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Web开发之使用【easyui】快速搭建管理员主界面
yifei_345678的博客
05-06 1061
大家好呀，我是【小阿飞_】😜 今天来给大家分享如何使用easyui这个前端框架快速搭建管理员主界面 先介简单绍一下easyui 又叫Jquery EasyUI，是基于Jquery的界面框架插件，提供了丰富的界面功能，方便快速开发Web界面程序 easyui的主要结构： 目前easyui的官方网站已经下架，但是大家想使用easyui的话可以去搜官方文档之类的关键字 比如本期文章所使用的框架就是在【jQuery EasyUI 1.5API 中文版】中找到的👇 easyu...
easyui php demo,初试JqueryEasyUI（附Demo）
weixin_33806591的博客
03-12 300
写在前面关于easyui不多说，对于我们这样没有美术功底的程序员来说，简直是大大的福利，园里面也有不少人在用，自己在整理一个个站，后台管理要用，正好可以学习下。网上找了相关的教程什么的，但是发现还是官网上的demo讲的狠详细，还有就是下载后的demo示例，但都是某个控件示例，很遗憾，没有整个系统的demo。下面我们就一步一步来创建，在做的过程也有许多的问题，对于菜鸟的我们来说，享受其中才是最重要的...
Sidebar侧边工具栏
03-10
windowxp 侧边栏工具，一款模仿vista侧边栏的工具，用于xp系统
SideBarView实现侧边栏快速索引
王人冉的博客
11-07 3061
1、A~Z、#排序 自定义比较器，用于数组排序 获取需要排序的list集合，例如：按集合中的名称排序 public class ComparatorEx implements Comparator&amp;amp;amp;amp;amp;lt;String&amp;amp;amp;amp;amp;gt; { private static String TAG = &amp;amp;amp;amp;quot;ComparatorEx&amp;amp;amp
EasyUI实例小Demo(二)
零俗
10-31 1334
关于页面风格的改变： 一：于之前的
Jquery-EasyUi-demo.rar_DEMO_easyui_easyui demo_floatingg93_organ
09-20
在这个DEMO中，dialog被用作添加和编辑数据的界面，提供了一个独立的操作空间，避免了对主页面的干扰。 表单（form）则是用户输入数据的主要工具。EasyUI的form组件支持各种表单元素，并能很好地与datagrid结合，...
springboot+easyui demo
09-24
在 "springboot+easyui demo" 项目中，我们将看到如何将这两个技术结合在一起，构建一个功能完善的后台管理系统。以下是这个演示项目中可能包含的关键知识点： 1. **Spring Initializr**：Spring Boot 的初始化器，...
EasyUI使用的demo
03-25
在这个demo中，可能会展示如何在主窗口和弹出窗口之间传递数据，例如通过`dialog`的`options`参数设置初始值，或者通过事件监听来获取窗口关闭时的返回值。 4. **自定义列**：在数据展示中，有时需要根据业务需求...
EasyUI超实用的DEMO案例整理
08-13
- **index.html**：这是主入口文件，通常包含页面的基本结构和EasyUI组件的引用。它可能包含了对其他HTML文件或JavaScript文件的引用，以展示不同的EasyUI组件和功能。 - **easyui**：这是一个文件夹，可能包含...
easyui-crud-demo
01-07
首先，我们看到压缩包中的"index.html"是主页面文件，它是整个应用的入口。在这里，开发者通常会引入EasyUI的相关CSS和JS文件，并定义页面结构。"index.html"会包含一个表格，用于展示数据，以及添加、编辑和删除...
完整后台管理界面EasyUI.
03-22
完整后台管理界面EasyUI；完整后台管理界面EasyUI；完整后台管理界面EasyUI
easyui后台管理系统
10-25
easyui后台管理系统静态资源文件，要在服务器上才能正常运行，数据是在json文件中的
jquery-easyui完整demo演示
02-03
jquery-easyui完整demo演示
DbHelperSQL数据库访问通用类，非常强大！
04-01
DbHelperSQL，它是用代码生成器软件生成的，主要封装了一些对数据库数据的读取，存储；主要体现的是一种三层架构的思想。
EasyUI–树形控件tree详解
程序员大阳
03-14 2852
树形控件还是经常使用的，比如菜单、部门管理等涉及到有归属关系的功能经常在前端页面采用树形结构表示。EasyUI对树形控件的封装非常的Nice，尤其是对复选框的支持简直是漂亮异常。本篇就最常用的菜单数为例演示EasyUI中tree的使用。先看示意图： 具体代码如下，注意文字描述部分说明：<%@ page language="java" import="java.util.*" pageEncodin
把知乎丁香医生的文章及回答转pdf
CaiNiaoWuZui的专栏
10-18 3237
之前爬取了1800多万的知乎用户，因而想生成pdf方便保存和阅读，正好试试wkhtmltopdf+pdfkit是否好用。 1:pdfkit是wkhtmltopdf的python封装，因此需要先下载安装wkhtmltopdf，版本wkhtmltopdf-0.12.2.4_mingw-w64，下载地址为[这里写链接内容](http://download.csdn.net/download/cainiao
EasyUI动态展示用户信息
weixin_30381793的博客
05-22 157
　　业务需求：用户登录后展示用户名、用户对应的角色。EasyUI只不过是一个前端的框架，封装了一些组件和样式，你可以用jsp直接调后台获取到用户信息展示，但我这里想用html页面，用目前流行的说法：前后端分离。效果跟你现在看到的页面右上角差不多，当然功能不同，点击名字不会跳页，当鼠标放在名字可以展示当前用户的角色： 　　实现很简单，html通过easyUI的布局组件region:'nort...
easyUI与选择WebUI
weixin_34413103的博客
03-26 186
easyUI与选择WebUI 作者：sagahu@163.com，2013-03-25，太原 关键字：easyUI, 选择WebUI 一、前言 当今网上有了很多的WebUI库，也有很多的网页开发使用这些成套控件而得到了良好的表现与极高的生产效率，正有着很多以前缺乏Web控件积累的程序员/团队/公司在选用并定制最合适自己的WebUI套件。本人使用easyUI为例，向大家介绍自己在选用W...
easyUI的后台管理页面
做你想做的人，没有时间的限制，只要愿意，什么时候都可以start。
06-28 2676
   登录页: &lt;%@ page language="java" import="java.util.*" pageEncoding="utf-8"%&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" cont
easyui 图标库页面
最新发布
08-01
EasyUI图标库页面是一个用于展示和选择图标的网页界面，通过EasyUI框架实现了图标的分类、搜索和预览功能，方便用户在开发时使用合适的图标。 该页面通常由一个顶部导航栏、一个图标分类列表和一个图标展示区组成。导航栏上会有一些常用功能按钮，例如搜索、返回、收藏等，方便用户进行操作。图标分类列表将图标按照不同的类型进行分组，例如基本图标、文件图标、箭头图标等，用户可以根据需求选择不同的分类进行浏览。图标展示区则以网格的形式展示了当前分类下的所有图标，用户可以通过滚动查看更多图标。同时，页面还提供了搜索功能，用户可以根据关键字搜索具体的图标。搜索结果将会实时展示在图标展示区中，方便用户查找和选择。 在图标展示区中，用户可以点击某个图标，弹出一个预览框，显示该图标的名称和样式代码。用户可以通过复制代码按钮将图标的样式代码复制到自己的项目中使用。 EasyUI图标库页面的设计简洁、直观，易于使用。它提供了各种类型的图标供用户选择，满足了不同需求的开发者的需求。同时，页面还提供了搜索功能和预览功能，方便用户快速找到合适的图标并查看其样式。通过EasyUI图标库页面，用户可以在开发过程中轻松地使用各种图标，提升项目的美观性和用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值