HTML——eeasyUi界面学习笔记

最新推荐文章于 2022-05-06 15:02:58 发布
最新推荐文章于 2022-05-06 15:02:58 发布
阅读量649 收藏
点赞数 1
分类专栏： HTML HTML 学习专栏 文章标签： html 实例 android webview 界面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangyufeng0126/article/details/52833142
版权

HTML——eeasyUi界面学习笔记


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/easyui.css">
    <link rel="stylesheet" href="../css/icon.css">
    <script src="../js/jquery-1.7.2.min.js"></script>
    <script src="../js/jquery.easyui.min.js"></script>
    
    <script>
        $(function () {
            
        })
    </script>


</head>
<body>
<div id="p" class="easyui-panel" title="My Panel"
     style="width:500px;height:150px;padding:10px;background:#fafafa;"
     data-options="iconCls:'icon-save',closable:true,
                collapsible:true,minimizable:true,maximizable:true">
    <p>panel content.</p>
    <p>panel content.</p>
</div>
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
    <div title="Tab1" style="padding:20px;display:none;">
        tab1
    </div>
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
        tab2
    </div>
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
        tab3
    </div>
</div>
<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
    <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
        <h3 style="color:#0099FF;">Accordion for jQuery</h3>
        <p>Accordion is a part of easyui framework for jQuery.
            It lets you define your accordion component on web page more easily.</p>
    </div>
    <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
        content2
    </div>
    <div title="Title3">
        content3
    </div>
</div>
</body>
<!--<body class="easyui-layout">-->
<!--<div data-options="region:'north'" style="height:100px"></div>-->
<!--<div data-options="region:'center'">-->
<!--<div class="easyui-layout" data-options="fit:true">-->
<!--<div data-options="region:'west',collapsed:true" style="width:180px"></div>-->
<!--<div data-options="region:'center'"></div>-->
<!--</div>-->
<!--</div>-->
<!--</body>-->
</html>





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/easyui.css">
    <link rel="stylesheet" href="../css/icon.css">
    <script src="../js/jquery-1.7.2.min.js"></script>
    <script src="../js/jquery.easyui.min.js"></script>
<script>



        function addTabs(title,url) {
            if($('#tt').tabs("exists",title)){
                return
            }
        var content="<iframe src='"+url+"'width='100%'height='100%'frameborder='0'/>";
            $('#tt').tabs('add',{
                title:title,
                content:content,
                closable:true

            });
        }
$(function () {

})
</script>


</head>
<body class="easyui-layout">
<div data-options="region:'north',title:'杰瑞教育',split:true" style="height:100px;"></div>
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
<div data-options="region:'west',title:'West',split:true" style="width:200px;">
    <div id="aa" class="easyui-accordion"  fit="true">
        <div title="人事管理" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
            <h3 style="color:#0099FF;">Accordion for jQuery</h3>
            <p>Accordion is a part of easyui framework for jQuery.
                It lets you define your accordion component on web page more easily.</p>
        </div>
        <div  title="财务管理" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
            <div>
                <a href="#"  οnclick="addTabs('往来单位管理','comp.html')"><img src="../css/images/datebox_arrow.png"
                                                                          height="16" width="16"/>往来单位管理</a>
            </div>
            <div>
                <a href="#" οnclick="addTabs('折旧管理','../../jquery/html/j08.html')"><img src="../css/images/searchbox_button.png"
                                                                     height="16" width="16"/>折旧管理</a>
            </div>
        </div>
        <div title="生产管理">
            <div>
                <a href="#"  οnclick="addTabs('往来单位管理2','comp2.html')"><img src="../css/images/datebox_arrow.png"
                                                                          height="16" width="16"/>往来单位管理2</a>
            </div>
            <div>
                <a href="#" οnclick="addTabs('折旧管理2','zj2.html')"><img src="../css/images/searchbox_button.png"
                                                                     height="16" width="16"/>折旧管理2</a>
            </div>
        </div>
    </div>
</div>
<div id="zyf" data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
    <div id="tt" class="easyui-tabs"  fit="true" >
        <div data-options="title:'主界面'">
            <iframe src="main.html"  style="width:100%;height: 100%" scrolling="no"frameborder="0"></iframe>
        </div>

     </div>
    </div>
</body>

<!--<body class="easyui-layout">-->
<!--<div data-options="region:'north'" style="height:100px"></div>-->
<!--<div data-options="region:'center'">-->
    <!--<div class="easyui-layout" data-options="fit:true">-->
        <!--<div data-options="region:'west',collapsed:true" style="width:180px"></div>-->
        <!--<div data-options="region:'center'"></div>-->
    <!--</div>-->
<!--</div>-->
<!--</body>-->
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/easyui.css">
    <link rel="stylesheet" href="../css/icon.css">
    <script src="../js/jquery-1.7.2.min.js"></script>
    <script src="../js/jquery.easyui.min.js"></script>


</head>
<body>
折旧管理
<table class="easyui-datagrid">
    <thead>
    <tr   >
        <th  data-options="field:'code'">编码</th>
        <th data-options="field:'name'">名称</th>
        <th data-options="field:'price'">价格</th>
    </tr>
    </thead>
    <tbody>
    <tr >
        <td>001</td><td>name1</td><td>2323</td>
    </tr>
    <tr>
        <td>002</td><td>name2</td><td>4612</td>
    </tr>
    </tbody>
</table>

</body>
</html>

zhangyufeng0126
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
easyui前端界面编写
XiaoZJun的博客
07-01 355
前端界面编写主界面登录界面:注册界面购物车界面总结： 主界面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>首页</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <link rel="stylesheet" type="
easyui简介
weixin_45355397的博客
07-28 2831
什么是easyui? jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签 外文名 jQueryEasyUI 定义 基于jQuery的UI插件...
EasyUI的基本使用&布局
weixin_62270300的博客
05-06 3035
目录 一、什么是easyui？ 二、easyui能带给我们什么好处？ 三、easyui如何使用？ 1️⃣.将从官网上下载的EasyUI的资源压缩包解压 然后复制到项目中 2️⃣.引入必要的js和css样式文件 3️⃣.easyui文档网站 布局搭建和菜单搭建 index.jsp tree-data.json 一、什么是easyui？ easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。 easyui为创建现代化，互动，JavaScript...
EasyUI
nickel369的博客
07-29 125
1.拖动的框 代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>EasyUI-拖动</title> <!--引入jquery的js，EasyUI的执行需要依赖于jQuery --> <script type="text/javascript" src="/js/jquery-easyui-1.4.1/jquery.min.js">.
easyUI详解教程
woaini886353的博客
05-06 3310
教程 概述 这个教程的目的是说明如何使用easyui框架容易的创建网页。首先，你需要包含一些js和css文件： <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <script type="text/javascript" src="../jquery-1.4.2.min.js"></script> <script type="text/javascrip
JQuery EeasyUI中文版ApI文档
11-15
aja教程API，HtmlHelp的API文档，w3c标准html5手册，W3school离线手册,ecplise使用教程
学习标准——笔记
10-31
学习标准——笔记
数据库——甲骨文学习笔记.doc
06-05
数据库——甲骨文学习笔记
Python——理论学习笔记
01-20
Python学习笔记第1章 程序设计基本方法第2章 Python语言基本语法元素第3章 基本数据类型第4章 程序的控制结构第5章 函数和代码复用第6章 组合数据类型第7章 文件和数据格式化第8章 Python计算生态第9章 Python标准库...
Python学习笔记——运算符
12-10
Python学习笔记——运算符 运算符: 赋值运算符 算术运算符 关系运算符 逻辑运算符 位运算
Solidworks学习笔记——随形变化.docx
07-13
Solidworks学习笔记——随形变化.docxSolidworks学习笔记——随形变化.docxSolidworks学习笔记——随形变化.docxSolidworks学习笔记——随形变化.docxSolidworks学习笔记——随形变化.docxSolidworks学习笔记——...
easyui1.7中文api
03-13
easyui1.7中文api
EasyUI1.3中文文档HTML版
08-21
EasyUI1.3中文文档(HTML版)，提供大家参考
漂亮easyui皮肤组件html模板下载 B 最新 最全
04-03
漂亮easyui皮肤组件html模板下载 B 最新 最全
EasyUI(前端框架)
热门推荐
wyy的博客
07-10 1万+
第一节 EasyUI的介绍和常用组件 [1]EasyUI的介绍 介绍: EasyUI是一个前端开发的框架，其将常用的页面开发使用的组件进行了 封装，前端开发人员只需将EasyUI的资源导入项目后使用即可，快速 提升开发效率。 使用： ① 导入EasyUI的资源 ② 查阅API文档使用EasyUI的组件完成页面开发 注意： 使用EasyUI，其实就是在使用别人已经封装好的代码来完成自己的页面开发。 所以必须按照EasyUI的文档说明来使用。所以我们学习EasyUI，其实就是在 学习如何按
什么是EasyUI，如何使用EasyUI？--easyui的十二种用法
XING_Gou的博客
03-17 5428
简单说明 1.easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。 2.easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。 3.使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。 4.easyui是个完美支持HTML5网页的完整框架。 5.easyui节省您网页开发的时间和规模。 6....
XXX系统开发小结（SSH+Jquery EasyUI）
sheen口开河
08-21 4125
一、项目总体介绍 前一段时间的工作中，笔者大概用了两三个月开发了一个Web管理信息系统，使用的框架集为Struts2.3.1+Spring3.0+Hibernate3+Jquery EasyUI1.3.5，系统业务逻辑并不复杂，完成数据的采集（以问卷的形式）、计算处理和形成报告发布。EasyUI是一个很优秀的JS UI框架，使用简单方便，效果也还可以，是UI效果和带宽速度之间的一个折中之选。系统
EeasyUI常用组件（一）Datagrid
szyly的博客
07-06 310
常用查询地址： http://www.jeasyui.com/     官方demo和api http://www.jeasyuicn.com/api/ 中文api http://www.runoob.com/jeasyui/jeasyui-mb-linkbutton.html  中文demo 内容不全 Datagrid   数据表格   使用方法（Usage Examp
HTML5—————— 自定义(滑动条)input[type="range"]样式
zhangyufeng0126的博客
03-16 1万+
HTML5—————— 自定义(滑动条)input[type="range"]样式 1、如何使用滑动条？ 用法很简单，如下所示： type="range" value="0">11 各浏览器原始样式如下：  Chrome:   Firefox:    IE 9+:        常用（部分）属性如下： 属性 描述 max
Java学习笔记之三——Java用户登陆界面
最新发布
06-12
另外，关于Java用户登录界面，我可以为你提供一些简单的指导。首先，你需要使用Java Swing库来创建GUI界面，然后使用JDBC连接数据库，验证用户输入的用户名和密码是否正确。具体实现方法可以参考Java官方文档或者...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值