Maison > Article > interface Web > Comment introduire jquery EasyUI dans les projets Web
Comment introduire jquery EasyUI dans un projet web : téléchargez d'abord le plug-in jQuery easyui ; puis ajoutez les documents pertinents à la webapp du projet ; enfin, introduisez les fichiers suivants sur la page pour utiliser toutes les fonctions de ; jquery easyui.
L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.2.1&&web2.0 Cette méthode convient à toutes les marques d'ordinateurs.
Recommandé : Tutoriel vidéo jquery
Comment introduire jquery EasyUI dans les projets Web :
jQuery easyui
est un jquery -based Une collection de plug-ins d'interface utilisateur qui peuvent créer une variété d'effets de page sympas. Les projets de grande et moyenne taille peuvent utiliser certains frameworks, qui sont très faciles à utiliser. De plus, il dispose d'un site Web chinois et en fournit un grand nombre. de démos. Voyons comment l'introduire dans le projet.中
Un : Adresse de téléchargement
http://www.jeasyui.com/download/index.PHP
Deux : Téléchargez et décompressez, et ajoutez les documents pertinents au projet. Sous la webapp, car elle fournit de la documentation et des démos, celles-ci n'ont pas besoin d'être incluses dans le projet
Trois : Importez les fichiers suivants dans la page pour utiliser toutes les fonctions de 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>
Vous pouvez également mettre cela sur une page publique, car toutes les pages doivent citer ces quatre phrases. D'autres pages peuvent référencer cette page publique
<%@ include file="./commonpage/easyuisupport.jsp" %>
Exemple :
<%@ 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', 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 : explication du chemin d'introduction de jquery : jquery/jquery-1.8.3.min.js prend la page actuelle test.jsp comme coordonner Rechercher dans le dossier actuel. Étant donné que les dossiers test.jsp et jquery se trouvent tous deux dans le répertoire webroot,
'/' n'est pas nécessaire. Si vous ajoutez '/', cela signifie rechercher à partir de la racine du projet.
Recommandations d'apprentissage gratuites associées : Tutoriel vidéo js
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!