继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

前端框架 jQuery EasyUi 学习笔记一(框架的配置与第一个效果实现)

玄鉴
关注TA
已关注
手记 96
粉丝 237
获赞 4217
Bootstrap

Bootstrap,诞生于2011年,非常年轻,来自 Twitter,也得益于此,成为目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。
描述:简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。
**

jQueryEasyUI

**
jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。

诞生较早,大型web开发移动开发仍然使用jQueryEasyUI。

jQuery EasyUI 框架提供了创建网页所需的一切,帮助您轻松建立站点。
easyui 是一个基于 jQuery 的框架,集成了各种用户界面插件。
easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能。
使用 easyui,您不需要写太多 javascript 代码,一般情况下您只需要使用一些 html 标记来定义用户界面。
HTML 网页的完整框架。
easyui 节省了开发产品的时间和规模。
easyui 非常简单,但是功能非常强大

以上多是来自百科。

接下来进入正题。
需要说明的是这两款最受欢迎的前端框架都是基于jquery,而jquery又都是基于JavaScript,所以你懂得。
所以使用EasyUi就先下载jquery文件,明显的好处就是基本上可以摆脱css了,这一点对于后端开发者来说更是一大利好。可以摆脱前段的短板,集中精力用于后端的制作,而且即使如此你的前端制作出来的效果也不必前端中手差多少。

因为jsp一般放在webroot目录下,所以为了方便调用支持文件,也放在近处的目录下。

先来熟悉一下文件目录

图片描述

接下来第一步:

下载程序。
您可以从 http://www.jeasyui.com/download/index.php 上下载您需要的 jQuery EasyUI 版本。

第二步:正常创建web 项目。
第三步:

导入EasyUI的CSS和Javascript文件到您的项目和jsp页面中。

图片描述

第四步,

直接从api中复制代码。粘贴到body标签下。稍作修改。这个api网上基本都有,如果实在找不到,可以私信联系。

1.一旦你导入了EasyUI必须的文件,你就可以通过标记或Javascript定义一个EasyUI组件。例如:定义一个带可折叠功能的面板,你需要写的HTML代码如下:

 <div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"   
        title="My Panel" iconCls="icon-save" collapsible="true">   
    The panel content    
</div>  

2.当通过标记创建一个组件的时候从1.3版开始'data-options'属性可以用来支持HTML5兼容属性名称。所以你可以改写上面的代码为:

<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"   
        title="My Panel" data-options="iconCls:'icon-save',collapsible:true">   
    The panel content    
</div>  

3.直接在 HTML 声明组件。

<div class="easyui-dialog" style="width:400px;height:200px"
    data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}">
        dialog content.
</div>

效果如下:

图片描述

001.jsp的页面如下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>EasyUi</title>
    <!--引入JQuery文件 -->
    <script type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script>
    <!--引入EasyUI文件 -->  
    <script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
    <!--引入EasyUI本地化汉语支持文件 -->   
    <script type="text/javascript" src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>
    <!--引入默认CSS文件 -->
    <link type="text/css" rel="stylesheet" href="jquery-easyui-1.4.4/themes/default/easyui.css" />
    <!--引入默认图片CSS文件 -->
    <link type="text/css" rel="stylesheet" href="jquery-easyui-1.4.4/themes/icon.css" />

    <script type="text/javascript">

    </script>

  </head>

  <body>

  <div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"   
        title="My Panel" iconCls="icon-save" collapsible="true">   
    The panel content    
</div>  

  <div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"   
        title="My Panel" data-options="iconCls:'icon-save',collapsible:true">   
    The panel content    
</div>  

<div class="easyui-dialog" style="width:400px;height:200px"
    data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}">
        dialog content.
</div>

  </body>
</html>
打开App,阅读手记
13人推荐
发表评论
随时随地看视频慕课网APP

热门评论

想学习这个,请问有视频教程吗?

查看全部评论