精华内容
下载资源
问答
  • 进销存主界面的创建,面板和布局的使用,图片、背景的插入
  • EasyUI:简单的界面设计框架,作用主要是用来设计网站的后台管理系统。帮助程序员快速的构建网站界面。 特点: 基于jQuery的一个UI插件 2、EasyUI官网: http://www.jeasyui.com 3、EasyUI使用目录介...

    EasyUI介绍

    1.EasuyUI介绍:
    EasyUI:简单的界面设计框架,作用主要是用来设计网站的后台管理系统。帮助程序员快速的构建网站界面。
    特点:
    基于jQuery的一个UI插件
    2、EasyUI官网:
    http://www.jeasyui.com
    3、EasyUI使用目录介绍:
    jeasyui:
    demo: easui的效果示例
    locale:easyui的语言文件
    plugins:easyUI的案例切割的js文件
    src:源码
    themes:easyUI提供的css样式
    jquery.easyui.min.js:easyUI的插件
    jquery.min.js:easyUI依赖额jquery文件

    EasyUI的使用

    1 导入EasyUI的支持
    2 将要使用的EasyUI加入到项目中
    导入css文件
    导入js文件
    3 EasyUI是通过class类选择器方式进行样式添加的
    在HTML标签上使用class属性直接引入EasyUI提供的样式支持
    4 使用data-options指定一些样式效果,例如:小图标
    使用此属性对样式的一些特效进行自定义修改
    5 同时可以使用style属性自定义
    示例:
    form登录

    EasyUI登录界面:

    1 优化登录页面
    登录界面居中
    form表单居中显示
    给登录和重置添加功能
    jQuery校验弹窗

    <html>
    
        <head>
            <title>登录</title>
            <meta charset="UTF-8" />
            <!--
                EasyUI使用:
                    1 将EasyUI提供的js文件和主题(themes)样式存放到项目的指定位置
                    2 在Html文档中引入EasyUI的插件
                    3在HTML文档标签上遵循EasyUI的文档规则使用EasyUI完成页面的开发
    
                面板使用(panel):
                    创建面板:
                        在创建一个div标签,并class属性值为:"easyui-panel"
                    面板属性:
                        title:添加面板标题
                        data-options:给面板添加常用的操作。具体参照API 
                        添加按钮
                    信息提示
                注意:
                    EasyUI的使用
                        通过标签的class属性添加基本EasyUI功能,包括样式和jQuery操作
                        data-options属性对标签的基本功能进行修改操作
            -->
            <!--引入主题样式-->
            <link rel="stylesheet" type="text/css" href="themes/default/easyui.css" />
            <!--引入图标样式-->
            <link rel="stylesheet" type="text/css" href="themes/icon.css" />
            <!--引入jQuery文件-->
            <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
            <!--引入EasyUi的js文件-->
            <script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
            <!--声明css代码域-->
            <style type="text/css">
                table{
                    margin: auto;
                    margin-top: 20px;
                }
                tr{
                    height: 40px;
                    text-align: center;
                }
            </style>
            <!--声明js代码域-->
            <script type="text/javascript">
                /*校验登录信息*/
                    $(function(){
    
                        //登录校验
                        $("#btnCon").click(function(){
                            //校验用户信息
                            if($(":text").val()==""){
                                //使用EasyUI的信息框进行提示
                                $.messager.alert('登录提示',"用户名不能为空!","warning");
                            }else if($(":password").val()==""){
                                //使用EasyUI的信息框进行提示
                                $.messager.alert('登录提示',"密码不能为空!","warning");
                            }else{
                                $("form").submit();
                            }
                        })
                        //重置
                        $("#btnCan").click(function(){
                            $("form").get(0).reset();
                        })
                    })
            </script>
        </head>
    
        <body>
            <div id="panel_login" style="margin: auto;width: 500px;margin-top: 100px;">
                <!--创建登录面板-->
                <div id="login" class="easyui-panel" title="登录" data-options="iconCls:'icon-mlogin',minimizable:true,maximizable:true
                    ,collapsible:true,closable:true" style="width: 500px;height: 200px;">
                    <form action="02_main.html" method="get">
                        <table>
                            <tr>
                                <td>用户名:</td>
                                <td>
                                    <input type="text" name="uname"/>
                                </td>
                            </tr>
                            <tr>
                                <td>密&nbsp;&nbsp;&nbsp;码:</td>
                                <td>
                                    <input type="password" name="pwd" />
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <a id="btnCon" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save'">登录</a>&nbsp; &nbsp;&nbsp;
                                    <a id="btnCan" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">重置</a>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
        </body>
    
    </html>

    EasyUI主页面布局

    EasyUI主页面布局:
    注意:先引入EasyUI相关组件
    1 body使用布局样式
    2 使用div进行东南西北的布局
    3 设置可以手动调节大小
    EasyUI主页布局(2):
    1 设置底部网站声明
    2 设置头部网站logo
    3 设置顶部用户退出提示框
    4 设置用户修改密码window窗口
    5 校验密码修改
    EasyUI主页布局(3):设置树状菜单和选项卡
    EasyUI主页布局 (4) :设置菜单和选项卡的联动操作

    <html>
    
        <head>
            <title>主页面</title>
            <meta charset="UTF-8" />
            <!--引入主题样式-->
            <link rel="stylesheet" type="text/css" href="themes/default/easyui.css" />
            <!--引入图标样式-->
            <link rel="stylesheet" type="text/css" href="themes/icon.css" />
            <!--引入jQuery文件-->
            <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
            <!--引入EasyUi的js文件-->
            <script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
            <!--
                主页面:
                    1 引入EasyUI插件
                    2 使用body布局方式
                    3 将布局后的每块区域完成内容填充
    
    
            -->
            <style type="text/css">
                #sdiv {
                    text-align: center;
                    font-size: 14px;
                    font-weight: bold;
                    line-height: 30px;
                    background-color: gray;
                }
                /*修改头部标题样式*/
    
                #n_title {
                    color: white;
                    font-size: 14px;
                    line-height: 40px;
                }
                /*修改标题超链接样式*/
    
                #n_title a {
                    text-decoration: none;
                    color: white;
                }
    
                #n_title a:hover {
                    color: orange;
                }
                /*修改密码样式*/
    
                #div_pwd table {
                    margin: auto;
                    margin-top: 10px;
                }
    
                #div_pwd table tr {
                    height: 40px;
                    text-align: center;
                }
            </style>
            <!--声明js代码域-->
            <script type="text/javascript">
                /*网页js功能*/
                $(function() {
                    //退出功能
                    $("#n_title_out").click(function() {
                            //提示用户是否确定退出
                            $.messager.confirm("确认对话框", "你真的要退出吗?", function(r) {
                                //退出
                                if (r) {
                                    window.location.href = "01_login.html";
                                }
                            })
                        })
                        //修改密码
                    $("#n_title_pwd").click(function() {
                            //打开修改密码窗口
                            $("#div_pwd").window("open");
                        })
                //确认修改密码
                    $("#btnCon").click(function() {
                        //校验原有密码
                        if ($(":password:eq(0)").val() == "") {
                            $.messager.alert("原有密码", "原有密码不能为空!", "warning");
                        } else if ($(":password:eq(1)").val() == "") {
                            //校验新密码
                            $.messager.alert("新密码", "新密码不能为空!", "warning");
                        } else if ($(":password:eq(2)").val() == "") {
                            //校验确认密码
                            $.messager.alert("确认密码", "确认密码不能为空!", "warning");
                        } else if ($(":password:eq(1)").val() != $(":password:eq(2)").val()) {
                            //校验两次密码
                            $.messager.alert("密码校验", "两次密码不一致!", "error");
                        } else {
                            //关闭密码窗口
                            $("#div_pwd").window("close");
                            //$.messager.alert("密码修改","密码修改成功!","info");
                            $.messager.show({
                                title: '密码修改',
                                msg: '密码修改成功,新密码为:'+$(":password:eq(2)").val(),
                                timeout: 3000,
                                showType: 'slide'
                            });
                        }
                    })
                //取消密码修改
                    $("#btnCan").click(function(){
                        $("#div_pwd").window("close");
                    })
                //树状菜单和选项卡的联动
                    //给菜单添加单击事件
                    $("#treeMenu").tree({
                        onClick:function(node){
                            //控制台打印node内容
                                //console.log(node);
                            //获取attributes属性,判断是菜单还是菜单描述
                            var attrs=node.attributes;
                            if(attrs==null || attrs.url==null){
                                return;
                            }
                            //判断选项卡是否存在
                            var has=$("#div_tabs").tabs("exists",node.text);
                            if(has){
                                //选中存在的选项卡
                                $("#div_tabs").tabs("select",node.text);
                            }else{
                                //创建新的选项卡面板
                                $("#div_tabs").tabs("add",{
                                    title:node.text,
                                    closable:true,
                                    content:"<iframe src="+attrs.url+" style='width:100%;height:98%' frameborder='0'/>"
                                })
                            }
    
    
                        }
                    })
    
    
    
                })
                /*
                    Json数据格式
                        {"键名":"值","键名":"值",...........}
    
                        {
                            "键名":"值",
                            "键名":"值",
                            ...........
                        }
                 * 
                 * 
                 * */
            </script>
        </head>
    
        <body class="easyui-layout">
            <!--布局:北-->
            <div data-options="region:'north'" style="height: 50%;background-image: url(img/layout-browser-hd-bg.gif);">
                <!--添加网站Logo-->
                <span id="n_logo" style="margin-left: 20px;">
                    <img src="img/blocks.gif" width="35px" style="margin-top: 5px;"/>
                    <font color="white" size="4px">506班级管理系统</font>
                </span>
                <span id="n_title" style="float: right;">
                    欢迎 admin登录&nbsp;&nbsp;&nbsp;
                    <a id="n_title_pwd" href="javascript:void(0)">修改密码</a>|
                    <a id="n_title_out" href="javascript:void(0)">退出</a>
                </span>
            </div>
            <!--布局:南-->
            <div id="sdiv" data-options="region:'south',border:false" style="height:35%;">
                &copy;2008-2018 506班级网站,仿冒必纠
            </div>
            <!--布局:西-->
            <div data-options="region:'west',title:'系统菜单',split:true" style="width: 200px;">
                <!--分类效果实现-->
                <div class="easyui-accordion" data-options="fit:true,border:false">
                    <div id="" title="常用网站" >
                        <!--创建菜单-->
                        <ul id="treeMenu" class="easyui-tree">
                            <li>
                                <span>购物网站</span>
                                <!--二级-->
                                <ul>
                                    <li data-options="attributes:{url:'http://www.taobao.com'}">淘宝网</li>
                                    <li data-options="attributes:{url:'http://www.jd.com'}">京东网</li>
                                    <li data-options="attributes:{url:'http://www.suning.com'}">苏宁易购</li>
                                </ul>
                            </li>
                            <li>
                                <span>学习网站</span>
                                <ul>
                                    <li data-options="attributes:{url:'http://www.bjsxt.com'}">北京尚学堂</li>
                                    <li data-options="attributes:{url:'http://www.baidu.com'}">百度一下</li>
                                    <li data-options="attributes:{url:'http://www.so.com'}">360搜索</li>
                                </ul>
                            </li>
                            <li>
                                <span>娱乐网站</span>
                                <ul>
                                    <li>斗鱼</li>
                                    <li>虎牙</li>
                                    <li>熊猫</li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <div id="" title="个人收藏">
                        菜单二
                    </div>
                    <div id="" title="系统信息">
                        菜单三
                    </div>
    
                </div>
    
            </div>
            <!--布局:中间-->
            <div data-options="region:'center'">
                <!--选项卡使用-->
                <div id="div_tabs" class="easyui-tabs" data-options="fit:true,border:false">
                    <!--首页-->
                    <div id="" title="首页" style="background-image:url(img/body.jpg) ;background-size: cover;">
    
                    </div>
                </div>
            </div>
            <!--创建修改密码窗口-->
            <div id="div_pwd" class="easyui-window" title="修改密码" style="width: 400px;height: 250px;" data-options="collapsible:false,minimizable:false,maximizable:false,closed:true,modal:true">
                <table>
                    <tr>
                        <td>原有密码:</td>
                        <td>
                            <input type="password" />
                        </td>
                    </tr>
                    <tr>
                        <td>新密码:</td>
                        <td>
                            <input type="password" />
                        </td>
                    </tr>
                    <tr>
                        <td>确认密码:</td>
                        <td>
                            <input type="password" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <a id="btnCon" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save'">确认修改</a> &nbsp;&nbsp;&nbsp;&nbsp;
                            <a id="btnCan" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">取消</a>
                        </td>
                    </tr>
                </table>
            </div>
    
        </body>
    
    </html>

    小结

    EasyUI介绍
    EasyUI的使用
    EasyUI登录界面

    小知识:

    1、javascript:void(0):使超链接失效,http://www.runoob.com/js/js-void.html
    2、json:
    JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。
    
    JSON 键/值对:
    JSON 键值对是用来保存 JS 对象的一种方式,和 JS 对象的写法也大同小异,键/值对组合中的键名写在前面并用双引号 "" 包裹,使用冒号 : 分隔,然后紧接着值:
    {"firstName": "Json"}
    这很容易理解,等价于这条 JavaScript 语句:
    {firstName : "Json"}
    
    JSON 和 JS 对象互转:
    要实现从对象转换为 JSON 字符串,使用 JSON.stringify() 方法:
    var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'
    要实现从 JSON 转换为对象,使用 JSON.parse() 方法:
    var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}
    3、行内元素居中:line-height:
    4、使用EasyUI给一般标签加样式  举例 class="easyui-linkbutton" data-options:"iconCls:'icon-save'";
    5&copy;生成网站底部C符号
    6.background-size: cover;,cover覆盖
    7.注意data-options=""  是等号
    8、modal:true"窗口置顶,别的窗口无法操作
    9、closed:true 设置窗口为隐身状态。

    源码下载:
    链接:https://pan.baidu.com/s/1L-bZT7kwu5CeWzcnqyBJvg 密码:w391
    资料:
    themes文件夹
    jquery.easyui.min.js
    jquery.min.js
    jEasyUI1.3.6版API中文版(Richie696).
    img:
    这里写图片描述
    这里写图片描述
    这里写图片描述

    展开全文
  • EasyUI:简单的界面设计框架,作用主要是用来设计网站的后台管理系统。帮助程序员快速的构建网站界面。 特点: 基于jQuery的一个UI插件 2、EasyUI官网: http://www.jeasyui.com 3、EasyUI使用目录介绍: ...

    EasyUI介绍

    1.EasuyUI介绍:
    EasyUI:简单的界面设计框架,作用主要是用来设计网站的后台管理系统。帮助程序员快速的构建网站界面。
    特点:
    基于jQuery的一个UI插件
    2、EasyUI官网:
    http://www.jeasyui.com
    3、EasyUI使用目录介绍:
    jeasyui:
    demo: easui的效果示例
    locale:easyui的语言文件
    plugins:easyUI的案例切割的js文件
    src:源码
    themes:easyUI提供的css样式
    jquery.easyui.min.js:easyUI的插件
    jquery.min.js:easyUI依赖额jquery文件

    EasyUI的使用

    1 导入EasyUI的支持
    2 将要使用的EasyUI加入到项目中
    导入css文件
    导入js文件
    3 EasyUI是通过class类选择器方式进行样式添加的
    在HTML标签上使用class属性直接引入EasyUI提供的样式支持
    4 使用data-options指定一些样式效果,例如:小图标
    使用此属性对样式的一些特效进行自定义修改
    5 同时可以使用style属性自定义
    示例:
    form登录

    EasyUI登录界面:

    1 优化登录页面
    登录界面居中
    form表单居中显示
    给登录和重置添加功能
    jQuery校验弹窗

    <html>
    
        <head>
            <title>登录</title>
            <meta charset="UTF-8" />
            <!--
                EasyUI使用:
                    1 将EasyUI提供的js文件和主题(themes)样式存放到项目的指定位置
                    2 在Html文档中引入EasyUI的插件
                    3在HTML文档标签上遵循EasyUI的文档规则使用EasyUI完成页面的开发
    
                面板使用(panel):
                    创建面板:
                        在创建一个div标签,并class属性值为:"easyui-panel"
                    面板属性:
                        title:添加面板标题
                        data-options:给面板添加常用的操作。具体参照API 
                        添加按钮
                    信息提示
                注意:
                    EasyUI的使用
                        通过标签的class属性添加基本EasyUI功能,包括样式和jQuery操作
                        data-options属性对标签的基本功能进行修改操作
            -->
            <!--引入主题样式-->
            <link rel="stylesheet" type="text/css" href="themes/default/easyui.css" />
            <!--引入图标样式-->
            <link rel="stylesheet" type="text/css" href="themes/icon.css" />
            <!--引入jQuery文件-->
            <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
            <!--引入EasyUi的js文件-->
            <script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
            <!--声明css代码域-->
            <style type="text/css">
                table{
                    margin: auto;
                    margin-top: 20px;
                }
                tr{
                    height: 40px;
                    text-align: center;
                }
            </style>
            <!--声明js代码域-->
            <script type="text/javascript">
                /*校验登录信息*/
                    $(function(){
    
                        //登录校验
                        $("#btnCon").click(function(){
                            //校验用户信息
                            if($(":text").val()==""){
                                //使用EasyUI的信息框进行提示
                                $.messager.alert('登录提示',"用户名不能为空!","warning");
                            }else if($(":password").val()==""){
                                //使用EasyUI的信息框进行提示
                                $.messager.alert('登录提示',"密码不能为空!","warning");
                            }else{
                                $("form").submit();
                            }
                        })
                        //重置
                        $("#btnCan").click(function(){
                            $("form").get(0).reset();
                        })
                    })
            </script>
        </head>
    
        <body>
            <div id="panel_login" style="margin: auto;width: 500px;margin-top: 100px;">
                <!--创建登录面板-->
                <div id="login" class="easyui-panel" title="登录" data-options="iconCls:'icon-mlogin',minimizable:true,maximizable:true
                    ,collapsible:true,closable:true" style="width: 500px;height: 200px;">
                    <form action="02_main.html" method="get">
                        <table>
                            <tr>
                                <td>用户名:</td>
                                <td>
                                    <input type="text" name="uname"/>
                                </td>
                            </tr>
                            <tr>
                                <td>密&nbsp;&nbsp;&nbsp;码:</td>
                                <td>
                                    <input type="password" name="pwd" />
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <a id="btnCon" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save'">登录</a>&nbsp; &nbsp;&nbsp;
                                    <a id="btnCan" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">重置</a>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
        </body>
    
    </html>

    EasyUI主页面布局

    EasyUI主页面布局:
    注意:先引入EasyUI相关组件
    1 body使用布局样式
    2 使用div进行东南西北的布局
    3 设置可以手动调节大小
    EasyUI主页布局(2):
    1 设置底部网站声明
    2 设置头部网站logo
    3 设置顶部用户退出提示框
    4 设置用户修改密码window窗口
    5 校验密码修改
    EasyUI主页布局(3):设置树状菜单和选项卡
    EasyUI主页布局 (4) :设置菜单和选项卡的联动操作

    <html>
    
        <head>
            <title>主页面</title>
            <meta charset="UTF-8" />
            <!--引入主题样式-->
            <link rel="stylesheet" type="text/css" href="themes/default/easyui.css" />
            <!--引入图标样式-->
            <link rel="stylesheet" type="text/css" href="themes/icon.css" />
            <!--引入jQuery文件-->
            <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
            <!--引入EasyUi的js文件-->
            <script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
            <!--
                主页面:
                    1 引入EasyUI插件
                    2 使用body布局方式
                    3 将布局后的每块区域完成内容填充
    
    
            -->
            <style type="text/css">
                #sdiv {
                    text-align: center;
                    font-size: 14px;
                    font-weight: bold;
                    line-height: 30px;
                    background-color: gray;
                }
                /*修改头部标题样式*/
    
                #n_title {
                    color: white;
                    font-size: 14px;
                    line-height: 40px;
                }
                /*修改标题超链接样式*/
    
                #n_title a {
                    text-decoration: none;
                    color: white;
                }
    
                #n_title a:hover {
                    color: orange;
                }
                /*修改密码样式*/
    
                #div_pwd table {
                    margin: auto;
                    margin-top: 10px;
                }
    
                #div_pwd table tr {
                    height: 40px;
                    text-align: center;
                }
            </style>
            <!--声明js代码域-->
            <script type="text/javascript">
                /*网页js功能*/
                $(function() {
                    //退出功能
                    $("#n_title_out").click(function() {
                            //提示用户是否确定退出
                            $.messager.confirm("确认对话框", "你真的要退出吗?", function(r) {
                                //退出
                                if (r) {
                                    window.location.href = "01_login.html";
                                }
                            })
                        })
                        //修改密码
                    $("#n_title_pwd").click(function() {
                            //打开修改密码窗口
                            $("#div_pwd").window("open");
                        })
                //确认修改密码
                    $("#btnCon").click(function() {
                        //校验原有密码
                        if ($(":password:eq(0)").val() == "") {
                            $.messager.alert("原有密码", "原有密码不能为空!", "warning");
                        } else if ($(":password:eq(1)").val() == "") {
                            //校验新密码
                            $.messager.alert("新密码", "新密码不能为空!", "warning");
                        } else if ($(":password:eq(2)").val() == "") {
                            //校验确认密码
                            $.messager.alert("确认密码", "确认密码不能为空!", "warning");
                        } else if ($(":password:eq(1)").val() != $(":password:eq(2)").val()) {
                            //校验两次密码
                            $.messager.alert("密码校验", "两次密码不一致!", "error");
                        } else {
                            //关闭密码窗口
                            $("#div_pwd").window("close");
                            //$.messager.alert("密码修改","密码修改成功!","info");
                            $.messager.show({
                                title: '密码修改',
                                msg: '密码修改成功,新密码为:'+$(":password:eq(2)").val(),
                                timeout: 3000,
                                showType: 'slide'
                            });
                        }
                    })
                //取消密码修改
                    $("#btnCan").click(function(){
                        $("#div_pwd").window("close");
                    })
                //树状菜单和选项卡的联动
                    //给菜单添加单击事件
                    $("#treeMenu").tree({
                        onClick:function(node){
                            //控制台打印node内容
                                //console.log(node);
                            //获取attributes属性,判断是菜单还是菜单描述
                            var attrs=node.attributes;
                            if(attrs==null || attrs.url==null){
                                return;
                            }
                            //判断选项卡是否存在
                            var has=$("#div_tabs").tabs("exists",node.text);
                            if(has){
                                //选中存在的选项卡
                                $("#div_tabs").tabs("select",node.text);
                            }else{
                                //创建新的选项卡面板
                                $("#div_tabs").tabs("add",{
                                    title:node.text,
                                    closable:true,
                                    content:"<iframe src="+attrs.url+" style='width:100%;height:98%' frameborder='0'/>"
                                })
                            }
    
    
                        }
                    })
    
    
    
                })
                /*
                    Json数据格式
                        {"键名":"值","键名":"值",...........}
    
                        {
                            "键名":"值",
                            "键名":"值",
                            ...........
                        }
                 * 
                 * 
                 * */
            </script>
        </head>
    
        <body class="easyui-layout">
            <!--布局:北-->
            <div data-options="region:'north'" style="height: 50%;background-image: url(img/layout-browser-hd-bg.gif);">
                <!--添加网站Logo-->
                <span id="n_logo" style="margin-left: 20px;">
                    <img src="img/blocks.gif" width="35px" style="margin-top: 5px;"/>
                    <font color="white" size="4px">506班级管理系统</font>
                </span>
                <span id="n_title" style="float: right;">
                    欢迎 admin登录&nbsp;&nbsp;&nbsp;
                    <a id="n_title_pwd" href="javascript:void(0)">修改密码</a>|
                    <a id="n_title_out" href="javascript:void(0)">退出</a>
                </span>
            </div>
            <!--布局:南-->
            <div id="sdiv" data-options="region:'south',border:false" style="height:35%;">
                &copy;2008-2018 506班级网站,仿冒必纠
            </div>
            <!--布局:西-->
            <div data-options="region:'west',title:'系统菜单',split:true" style="width: 200px;">
                <!--分类效果实现-->
                <div class="easyui-accordion" data-options="fit:true,border:false">
                    <div id="" title="常用网站" >
                        <!--创建菜单-->
                        <ul id="treeMenu" class="easyui-tree">
                            <li>
                                <span>购物网站</span>
                                <!--二级-->
                                <ul>
                                    <li data-options="attributes:{url:'http://www.taobao.com'}">淘宝网</li>
                                    <li data-options="attributes:{url:'http://www.jd.com'}">京东网</li>
                                    <li data-options="attributes:{url:'http://www.suning.com'}">苏宁易购</li>
                                </ul>
                            </li>
                            <li>
                                <span>学习网站</span>
                                <ul>
                                    <li data-options="attributes:{url:'http://www.bjsxt.com'}">北京尚学堂</li>
                                    <li data-options="attributes:{url:'http://www.baidu.com'}">百度一下</li>
                                    <li data-options="attributes:{url:'http://www.so.com'}">360搜索</li>
                                </ul>
                            </li>
                            <li>
                                <span>娱乐网站</span>
                                <ul>
                                    <li>斗鱼</li>
                                    <li>虎牙</li>
                                    <li>熊猫</li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <div id="" title="个人收藏">
                        菜单二
                    </div>
                    <div id="" title="系统信息">
                        菜单三
                    </div>
    
                </div>
    
            </div>
            <!--布局:中间-->
            <div data-options="region:'center'">
                <!--选项卡使用-->
                <div id="div_tabs" class="easyui-tabs" data-options="fit:true,border:false">
                    <!--首页-->
                    <div id="" title="首页" style="background-image:url(img/body.jpg) ;background-size: cover;">
    
                    </div>
                </div>
            </div>
            <!--创建修改密码窗口-->
            <div id="div_pwd" class="easyui-window" title="修改密码" style="width: 400px;height: 250px;" data-options="collapsible:false,minimizable:false,maximizable:false,closed:true,modal:true">
                <table>
                    <tr>
                        <td>原有密码:</td>
                        <td>
                            <input type="password" />
                        </td>
                    </tr>
                    <tr>
                        <td>新密码:</td>
                        <td>
                            <input type="password" />
                        </td>
                    </tr>
                    <tr>
                        <td>确认密码:</td>
                        <td>
                            <input type="password" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <a id="btnCon" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save'">确认修改</a> &nbsp;&nbsp;&nbsp;&nbsp;
                            <a id="btnCan" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">取消</a>
                        </td>
                    </tr>
                </table>
            </div>
    
        </body>
    
    </html>

    小结

    EasyUI介绍
    EasyUI的使用
    EasyUI登录界面

    小知识:

    1、javascript:void(0):使超链接失效,http://www.runoob.com/js/js-void.html
    2、json:
    JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。
    
    JSON 键/值对:
    JSON 键值对是用来保存 JS 对象的一种方式,和 JS 对象的写法也大同小异,键/值对组合中的键名写在前面并用双引号 "" 包裹,使用冒号 : 分隔,然后紧接着值:
    {"firstName": "Json"}
    这很容易理解,等价于这条 JavaScript 语句:
    {firstName : "Json"}
    
    JSON 和 JS 对象互转:
    要实现从对象转换为 JSON 字符串,使用 JSON.stringify() 方法:
    var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'
    要实现从 JSON 转换为对象,使用 JSON.parse() 方法:
    var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}
    3、行内元素居中:line-height:
    4、使用EasyUI给一般标签加样式  举例 class="easyui-linkbutton" data-options:"iconCls:'icon-save'";
    5&copy;生成网站底部C符号
    6.background-size: cover;,cover覆盖
    7.注意data-options=""  是等号
    8、modal:true"窗口置顶,别的窗口无法操作
    9、closed:true 设置窗口为隐身状态。

    源码下载:
    链接:https://pan.baidu.com/s/1L-bZT7kwu5CeWzcnqyBJvg 密码:w391
    资料:
    themes文件夹
    jquery.easyui.min.js
    jquery.min.js
    jEasyUI1.3.6版API中文版(Richie696).
    img:
    这里写图片描述
    这里写图片描述
    这里写图片描述

    展开全文
  • 继续上一节的项目,本节将实现主界面,按照下图创建类文件: 其中各个类文件的内容如下: AboutSoftDialog.java package bookManageSystem.view; ​ import javax.swing.*; import java.awt.event.ActionEvent...

    继续上一节的项目,本节将实现主界面,按照下图创建类文件:

    其中各个类文件的内容如下:

    AboutSoftDialog.java

    package bookManageSystem.view;
    ​
    import javax.swing.*;
    import java.awt.event.ActionEvent;
    import java.awt.event.ActionListener;
    import java.awt.event.MouseEvent;
    import java.awt.event.MouseListener;
    ​
    public class AboutSoftDialog extends JDialog implements ActionListener, MouseListener {
    ​
        @Override
        public void actionPerformed(ActionEvent e) {
    ​
        }
    ​
        @Override
        public void mouseClicked(MouseEvent e) {
    ​
        }
    ​
        @Override
        public void mousePressed(MouseEvent e) {
    ​
        }
    ​
        @Override
        public void mouseReleased(MouseEvent e) {
    ​
        }
    ​
        @Override
        public void mouseEntered(MouseEvent e) {
    ​
        }
    ​
        @Override
        public void mouseExited(MouseEvent e) {
    ​
        }
    }

    BookAddPanel.java

    package bookManageSystem.view;
    ​
    import javax.swing.*;
    import java.awt.event.ActionEvent;
    import java.awt.event.ActionListener;
    ​
    public class BookAddPanel extends JPanel implements ActionListener {
    ​
        @Override
        public void actionPerformed(ActionEvent e) {
    ​
        }
    }

    BookManagePanel.java

    package bookManageSystem.view;
    ​
    import javax.swing.*;
    import javax.swing.event.ListSelectionEvent;
    import javax.swing.event.ListSelectionListener;
    import java.awt.event.ActionEvent;
    import java.awt.event.ActionListener;
    ​
    public class BookManagePanel extends JPanel implements ActionListener, ListSelectionListener {
    ​
        @Override
        public void actionPerformed(ActionEvent e) {
    ​
        }
    ​
        @Override
        public void valueChanged(ListSelectionEvent e) {
    ​
        }
    }

    BookTypeAddPanel.java

    package bookManageSystem.view;
    ​
    import javax.swing.*;
    import java.awt.event.ActionEvent;
    import java.awt.event.ActionListener;
    ​
    public class BookTypeAddPanel extends JPanel implements ActionListener {
    ​
        @Override
        public void actionPerformed(ActionEvent e) {
    ​
        }
    }

    BookTypeManagePanel.java

    package bookManageSystem.view;
    ​
    import javax.swing.*;
    import javax.swing.event.ListSelectionEvent;
    import javax.swing.event.ListSelectionListener;
    import java.awt.event.ActionEvent;
    import java.awt.event.ActionListener;
    ​
    public class BookTypeManagePanel extends JPanel implements ActionListener, ListSelectionListener {
    ​
        @Override
        public void actionPerformed(ActionEvent e) {
    ​
        }
    ​
        @Override
        public void valueChanged(ListSelectionEvent e) {
    ​
        }
    }

    上面除了Main.java和LogupFrame.java这是第一节就写了的代码,不需要进行增删现阶段。

    然后就是MainFrame.java,该类是主界面类,其中代码如下:

    package bookManageSystem.view;
    ​
    import bookManageSystem.tools.ComponentTools;
    ​
    import javax.swing.*;
    import java.awt.*;
    import java.awt.event.ActionEvent;
    import java.awt.event.ActionListener;
    ​
    public class MainFrame extends JFrame implements ActionListener {
        private ComponentTools componentTools = new ComponentTools();
    ​
        private JMenuBar menuBar;
        private JMenu bookTypeManageMenu, bookManageMenu, otherMenu;
        private JMenuItem bookTypeAddMenuItem, bookTypeManageMenuItem, bookAddMenuItem, bookManageMenuItem, exitMenuItem,
                aboutSoftMenuItem;
    ​
        MainFrame() {
            this.setTitle("惰惰龟图书管理系统");
            this.setBounds(400, 400, 800, 700);
    ​
            // 为主界面添加菜单条
            this.setJMenuBar(this.createMenuBar());
            // 设置主界面的内容面板
            this.setContentPane(createMainPanel());
            this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
            // 设置默认不显示
            this.setVisible(false);
    ​
            // 为菜单条中的菜单项注册事件
            bookTypeAddMenuItem.addActionListener(this);
            bookTypeManageMenuItem.addActionListener(this);
            bookAddMenuItem.addActionListener(this);
            bookManageMenuItem.addActionListener(this);
            exitMenuItem.addActionListener(this);
            aboutSoftMenuItem.addActionListener(this);
        }
    ​
        /**
         * 为主界面创建一个菜单条
         *
         * @return 返回菜单条
         */
        private JMenuBar createMenuBar() {
            // 实例化一个菜单条对象
            menuBar = new JMenuBar();
    ​
            // 【图书类别管理】菜单
            bookTypeManageMenu = new JMenu("图书类别管理");
            bookTypeAddMenuItem = new JMenuItem("图书类别添加");
            bookTypeManageMenuItem = new JMenuItem("图书类别维护");
            bookTypeManageMenu.add(bookTypeAddMenuItem);
            bookTypeManageMenu.add(bookTypeManageMenuItem);
            menuBar.add(bookTypeManageMenu);
    ​
            // 【图书管理】菜单
            bookManageMenu = new JMenu("图书管理");
            bookAddMenuItem = new JMenuItem("图书添加");
            bookManageMenuItem = new JMenuItem("图书维护");
            bookManageMenu.add(bookAddMenuItem);
            bookManageMenu.add(bookManageMenuItem);
            menuBar.add(bookManageMenu);
    ​
            // 【其他】菜单
            otherMenu = new JMenu("其他");
            exitMenuItem = new JMenuItem("退出");
            aboutSoftMenuItem = new JMenuItem("关于软件");
            otherMenu.add(exitMenuItem);
            otherMenu.add(aboutSoftMenuItem);
            menuBar.add(otherMenu);
    ​
            // 批量为菜单项设置图标
            componentTools.setIcons(
                    new JMenuItem[]{bookTypeAddMenuItem, bookTypeManageMenuItem, bookAddMenuItem, bookManageMenuItem, exitMenuItem, aboutSoftMenuItem},
                    new String[]{"src/bookManageSystem/images/add.png", "src/bookManageSystem/images/edit.png", "src" +
                            "/bookManageSystem/images/add.png", "src/bookManageSystem/images/edit.png", "src" +
                            "/bookManageSystem/images/exit.png", "src/bookManageSystem/images/about.png"}
            );
    ​
            return menuBar;
        }
    ​
        /**
         * 为主界面创建内容面板
         *
         * @return 返回一个面板
         */
        private JPanel createMainPanel() {
            // 实例化一个面板
            JPanel panel = new JPanel();
            // 设置面板中的布局方式
            panel.setLayout(new BorderLayout());
            JLabel label = new JLabel();
            label.setHorizontalAlignment(SwingConstants.CENTER);
            label.setVerticalAlignment(SwingConstants.CENTER);
            ImageIcon ii = new ComponentTools().iconSize(new ImageIcon("src/bookManageSystem/images/bookmanagesystem.png"), 600, 400);
            // 设置一个图片标签
            label.setIcon(ii);
            // 将标签添加到面板中
            panel.add(label);
            return panel;
        }
    ​
        @Override
        public void actionPerformed(ActionEvent e) {
            // “图书类别添加”菜单项事件处理
            if (e.getSource() == bookTypeAddMenuItem) {
                // 将主界面的内容面板替换成图书类别添加面板
                this.setContentPane(new BookTypeAddPanel());
                // 并设置该面板显示
                this.setVisible(true);
            }
            // “图书类别维护”菜单项事件处理
            if (e.getSource() == bookTypeManageMenuItem) {
                // 将主界面的内容面板替换成图书类别维护面板
                this.setContentPane(new BookTypeManagePanel());
                // 并设置该面板显示
                this.setVisible(true);
            }
            // “图书添加”菜单项事件处理
            if (e.getSource() == bookAddMenuItem) {
                // 将主界面的内容面板替换成图书添加面板
                this.setContentPane(new BookAddPanel());
                // 并设置该面板显示
                this.setVisible(true);
            }
            // “图书维护”菜单项事件处理
            if (e.getSource() == bookManageMenuItem) {
                // 将主界面的内容面板替换成图书维护面板
                this.setContentPane(new BookManagePanel());
                // 并设置该面板显示
                this.setVisible(true);
            }
            // “退出”菜单项事件处理
            if (e.getSource() == exitMenuItem) {
                // 结束整个程序
                System.exit(0);
            }
            // “关于软件”菜单项事件处理
            if (e.getSource() == aboutSoftMenuItem) {
                // 设置关于软件提示框显示
                new AboutSoftDialog().setVisible(true);
            }
        }
    }

    虽然这里完成了代码,但是登录成功还是不会出现主界面的,因为在第一节中的登录里面是把这一行代码给注释了的,

    要做的即是取消改行注释,即代码如下:

    // 当登录成功后,跳转到主界面
    new MainFrame().setVisible(true);

    点击程序进行运行,登录成功后结果如下:

    img

    其中顶部的菜单项是可以点击的

    点击后主界面会变成如下,因为还没有为这些面板添加控件,就只有一片空白。

     

     

    可搜索微信公众号【Java实例程序】或者扫描下方二维码关注公众号获取更多。

    注意:在公众号后台回复【20200130】可获取本节的源码。

     

    展开全文
  • 1、制作点歌主界面窗体 制作效果: 前期准备:设计点歌主界面窗体FrmKtvMain 点歌主界面窗体FrmKtvMain控件属性设置 控件 命名(Name属性) 说明(其他属性设置) 窗体 FrmKtvMain Text:...

    1、制作点歌主界面窗体

    制作效果:

    前期准备:设计点歌主界面窗体FrmKtvMain

    点歌主界面窗体FrmKtvMain控件属性设置
    控件 命名(Name属性) 说明(其他属性设置)
    窗体 FrmKtvMain

    Text:KTV点歌系统

    StartPostion:CenterScreen

    FormBorderStyle:FixSingle

    用来显示当前歌曲信息的文本框控件TextBox txtPlayNow
    展开全文
  • 管理控制台 (一般在 /usr/share/dtc/admin,但也有一些系统, 例如bsd,在 /usr/local/share…)是你的服务器web界面。在这里,你可以可控制所有托管在你服务器上的站点. 客户目录 (一般在 /usr/share/dtc/client...
  • 常规功能和模块自定义系统 (cfcmms)—009主界面和菜单的展示和控制(1)  先从主界面和菜单、主tab标签以及一些附加的设置说起。  一个比较传统的管理软件中,一般会包括一个顶部区域、底部区域、菜单条(树状菜单...
  • Qt编写安防视频监控系统6-面板开关

    千次阅读 2019-05-28 14:10:08
    面板开关功能是整个系统最人性化的功能之一,可以对主界面中左侧右侧的各个小面板进行显示和隐藏,当隐藏的时候,另外的同级面板自动拉伸填充,这样就不会显得空洞,直接在每个面板的右上角提供了关闭按钮,也可以...
  • method=toTeacherListView"}, ] }, {"menuid":"5","icon":"","menuname":"系统管理", "menus":[ {"menuid":"51","menuname":"系统设置","icon":"icon-set","url":"SystemServlet?...
  • 常规功能和模块自定义系统 (cfcmms)—010主界面和菜单的展示和控制(2)  系统中设置了四种菜单类型,可以相互之间快速转换,分别为标准菜单、按钮菜单、树状菜单和折叠式菜单。各个菜单位置和转换方式如下图: ...
  • Linux系统宝塔面板安装教程

    万次阅读 2020-12-10 09:40:53
    下面稍微介绍一下如何使用阿里云服务器安装宝塔面板。 概述 如果还有不了解宝塔面板怎么使用的小伙伴,可以看下我总结的系列教程,保证从新手变老鸟: 【宝塔面板精选教程汇总】 宝塔面板教程(1)基于云服务器搭建...
  • Java 图形界面开发--图文并茂建立学生管理系统

    万次阅读 多人点赞 2016-03-19 19:52:28
    图形用户界面(Graphics User Interface,GUI)是用户与程序交互的窗口,比命令行的界面更加直观并且更好操作。 关注微信公众号(文强的技术小屋),学习更多技术知识,一起遨游知识海洋~ ...
  • Ext JS 6开发实例(三) :主界面设计

    万次阅读 热门讨论 2016-05-26 17:10:16
    在上文中,已经将CMD创建的应用程序导入到项目里了,而且也看到默认的主界面了,今天的主要工作就是修改这个主界面,以符合项目的需要。
  • 我们先来看看主界面: 左边的界面是用Swing编写的,右边的QQ的原界面,大致的界面已经很像了但qq的按钮的确很难做试了几种方法但效果都不好。还有就是QQ的发光文字用Swing挺难实现的,界面并没有细化。像搜索栏可以...
  • 2.选中标签【兼容性】,勾选“替代高DPI缩放行为”...3.重新启动程序,界面显示均正常。 ArcGIS 安装出现Mircrosoft .NET Framework 3.5 sp1问题的解决方案 1.打开控制面板,点击程序和功能 2.点击启用...
  • Qt编写安防视频监控系统界面很漂亮)

    万次阅读 多人点赞 2019-05-23 17:31:43
    视频监控系统在整个安防领域,已经做到了烂大街的程序,全国起码几百家公司做过类似的系统,当然这一方面的需求量也是非常旺盛的,各种定制化的需求越来越多,尤其是这几年借着人脸识别的东风,发展更加迅猛,人脸...
  • 微图APP主界面功能说明

    千次阅读 2017-10-09 16:38:31
    《微图App》是《水经微图》的移动端,是作为数据采集和数据云同步必不可少的应用,该APP支持在Android和iOS系统上运行,暂时仅推出了Andriod版,后续会推出iOS版。 《微图App》可以通过关注“水经注地图下载器”...
  • 几款国外主流虚拟主机控制面板介绍  控制面板可以说是站长们接触最多的东西之一,网站的各种后台操作都需要由控制面板来完成,不同的虚拟主机服务商可能所提供的虚拟主机控制面板不同...
  • Linux 系统电脑机箱前置面板插上耳机没有声音,但是 windows 环境却没问题。下面记录了针对这个问题的修复方法。我的系统是基于 ArchLinux 的 Manjaro 但是方法对于其他主流 Linux 比如 Ubuntu 应该也是适用的,因为...
  • (AMH为独立的一套LNMP/Nginx虚拟主机面板,安装请使用纯净系统。不要安装其它的环境包。) (需要使用AMH,请先检查你的系统是否支持,AMH面板已支持Centos、Debian、Ubuntu所有的系统版本环境中安装。) 首先进行AMH...
  • Android Studio的使用主界面的图 主界面主要划出了五个不同的区域,也可以拖动部分的功能块到你想要的位置。功能块可以自由的展示或者隐藏,点击后可以恢复显示。 菜单&工具栏(图一):常用的功能都可以在这里...
  • 第6期:智能家居主界面设计 配套例子: V6-910_STemWin提高篇实验_智能家居主界面设计(uCOS-III) V6-911_STemWin提高篇实验_智能家居主界面设计(FreeRTOS) 例程下载地址:...
  • 虚拟机vmware系统界面填充适应虚拟机大小 虚拟机: vmware 12 新安装的虚拟机以及创建的新系统,系统界面在虚拟机居中且只占了一半空间,其他多于部分全是黑色背景。每次要使用虚拟机系统都要全屏系统系统全屏后...
  • 如果认真留意的话会发现,正常情况下,安卓版本的微信打开表情面板的高度总是能保持和键盘的高度一致(IOS的好像不一致),这样用户在进行键盘和面板的切换时能得到较好的用户体验。此外,微信也做了一定的处理,...
  • java界面:JTabbedPane选项卡面板

    千次阅读 2019-07-27 09:49:07
    通常在写一个小东西时会创建许多的窗口,我觉得如果窗口一个一个跳出来看着不是很舒服,选项卡面板可以让他们放在一个窗口上。 JTabbedPane容器为中间容器,当用户向JTabbedPane容器添加一个组件时,JTabbedPane...
  • Java语言实现简单FTP软件------>FTP软件主界面的实现(四) 首先介绍程序的主入口FTPMain.java,采用了一个漂亮的外观风格。
  • java图书管理系统界面版本)

    千次阅读 多人点赞 2019-12-23 13:02:37
    登陆之后主界面如下 图书列表 项目说明: 关键代码: 源码获取: 如何运行: 运行效果: 注册登陆界面 注册存在的账户时 登陆之后主界面如下 点击图书管理-图书更新界面如下 图书列表 项目...
  • 跟我一起学extjs5(05--主界面上加入顶部和底部区域)

    万次阅读 多人点赞 2014-06-30 11:54:29
    跟我一起学extjs5(05--主界面上加入顶部和底部区域) 这一节为主界面加一个顶部区域和底部区域。一个管理系统的界面可以粗分为顶部标题部分、中间数据展示和处理的部分、底部备注和状态部分。 在增加这二个区域...
  • java学生成绩管理系统界面设计

    万次阅读 多人点赞 2018-06-29 10:35:40
    关于学生成绩管理系统界面设计:代码如下 1import&nbsp;javax.swing.*; 2import&nbsp;java.awt.*; 3import&nbsp;java.awt.event.*; 4import&nbsp;com.example.SqlHelper; 5class&nbsp;...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 51,031
精华内容 20,412
关键字:

系统主界面面板