zoukankan      html  css  js  c++  java
  • web项目中引入jquery easyui

    jQuery easyui是一个基于jquery的用户界面插件集合,可以做出各种炫酷页面效果,大中型项目都可以使用些框架,非常好用,而且它有中文网,提供了大量的demo.下面我们看怎么将它引入到项目中

    一:下载地址

    http://www.jeasyui.com/download/index.PHP

    二:下载解压,将下面红圈中的考到项目的webapp下面,因为它提供了说明文档,demo,这些不需要考到项目中

    三:页面引入下面几个文件即可使用jquery easyui的的所有功能了

    <link rel="stylesheet" type="text/css" href="<c:url value="/themes/default/easyui.css"/>">
    <link rel="stylesheet" type="text/css" href="<c:url value="/themes/icon.css"/>">
    <script type="text/JavaScript" src="<c:url value="/jquery.min.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/jquery.easyui.min.js"/>"></script>

    也可以将这个放到一个公共的页面中,因为所有页面都要引用这四句话。其它页面引用这个公共页面即可

    <%@ include file="./commonpage/easyuisupport.jsp" %>

    来源:http://blog.csdn.net/whh743/article/details/53809793

    实例:

    <%@ 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>My JSP '01.jsp' starting page</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <!-- 引入JQuery -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5.2/jquery.min.js"></script>
    <!-- 引入EasyUI -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5.2/jquery.easyui.min.js"></script>
    <!-- 引入EasyUI的中文国际化js,让EasyUI支持中文 -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5.2/locale/easyui-lang-zh_CN.js"></script>
    <!-- 引入EasyUI的样式文件-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.5.2/themes/default/easyui.css" type="text/css"/>
    <!-- 引入EasyUI的图标样式文件-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.5.2/themes/icon.css" type="text/css"/>

    <script type="text/javascript">
    $(function(){
    //console.info($('#dd2'));
    /*使用JavaScript动态创建EasyUI的Dialog的步骤:
    1、定义一个div,并给div指定一个id
    2、使用Jquery选择器选中该div,然后调用dialog()方法就可以创建EasyUI的Dialog
    */
    $('#dd2').dialog();//使用默认的参数创建EasyUI的Dialog
    //使用自定义参数创建EasyUI的Dialog
    $('#dd3').dialog({
    title: '使用JavaScript创建的Dialog',
    400,
    height: 200,
    closed: false,
    cache: false,
    modal: true
    });
    });
    </script>

    </head>

    <body>
    This is my JSP page. <br>

    <div class="easyui-dialog" id="dd1" title="EasyUI Dialog" style=" 500px;height: 300px;">
    Hello World!
    </div>
    <div id="dd2">Dialog Content</div>
    <div id="dd3">Dialog Content</div>
    </body>
    </html>

     ps:jquery引入路径解释:jquery/jquery-1.8.3.min.js以当前页面test.jsp为坐标在当前文件夹中查找,由于test.jsp和jquery文件夹都在webroot目录下所以不需要

     '/',如果加'/'意思是从项目根目录查找

     参考:http://blog.csdn.net/luofeixiongsix/article/details/49882925

  • 相关阅读:
    JS闭包
    js Date日期对象的扩展
    python通过post提交数据的方法
    python通过post提交数据的方法
    在Python中操作文件之truncate()方法的使用教程
    在Python中操作文件之truncate()方法的使用教程
    大数据将使安全产品爆发式增长
    大数据将使安全产品爆发式增长
    Python中内置数据类型list,tuple,dict,set的区别和用法
    Python中内置数据类型list,tuple,dict,set的区别和用法
  • 原文地址:https://www.cnblogs.com/manmanlu/p/7158700.html
Copyright © 2011-2022 走看看