Web プロジェクトに jquery EasyUI を導入する方法-jsチュートリアル-php.cn

Web プロジェクトに jquery EasyUI を導入する方法

coldplay.xixi

リリース： 2020-12-21 10:38:28

オリジナル

2609 人が閲覧しました

jQuery EasyUI を Web プロジェクトに導入する方法: まず、jQuery easyui プラグインをダウンロードし、次に関連ドキュメントをプロジェクトの Web アプリに追加します。最後に、次のファイルをページに導入して、Web プロジェクトのすべての機能を使用します。 jQuery easyui。

Web プロジェクトに jquery EasyUI を導入する方法

このチュートリアルの動作環境: Windows7 システム、jquery3.2.1&&web2.0 バージョンこの方法は、すべてのブランドのコンピューターに適しています。

推奨: jquery ビデオチュートリアル

jquery EasyUI を Web プロジェクトに導入する方法:

jQuery easyui は、jquery ベースのユーザーインターフェイスプラグインのコレクションで、さまざまなクールなページ効果を作成できます。大規模および中規模のプロジェクトでは、いくつかのフレームワークを使用でき、非常に使いやすいです。さらに、中国語の Web サイトがあり、プロジェクトに導入する方法を見てみましょう

1: ダウンロードアドレス

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

2: 関連するファイルをダウンロードして解凍します。ドキュメントは、プロジェクトに取り込む必要のないドキュメントとデモを提供するため、プロジェクトの Web アプリで考慮されます。

3: すべて使用できます。次のファイルをページにインポートすることで 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>

ログイン後にコピー

すべてのページでこれら 4 つの文を引用する必要があるため、これを公開ページに置くこともできます。他のページはこの公開ページを参照できます

<%@ include file="./commonpage/easyuisupport.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>My JSP &#39;01.jsp&#39; 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($(&#39;#dd2&#39;));
/*使用JavaScript动态创建EasyUI的Dialog的步骤：
1、定义一个div，并给div指定一个id
2、使用Jquery选择器选中该div，然后调用dialog()方法就可以创建EasyUI的Dialog
*/
$(&#39;#dd2&#39;).dialog();//使用默认的参数创建EasyUI的Dialog
//使用自定义参数创建EasyUI的Dialog
$(&#39;#dd3&#39;).dialog({
title: &#39;使用JavaScript创建的Dialog&#39;,
width: 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="width: 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 ディレクトリにあるため、

'/' は必要ありません。'/' を付けると、プロジェクトから検索することになります。ルートディレクトリ