jQuery easyUI中的EasyLoader的使用
阿新 • • 發佈：2019-02-05
專案部署成功之後，在位址列輸入相應的地址就可看到如上圖的介面效果。<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="<c:url value='/js/jquery-easyui-1.4.1/themes/gray/easyui.css'/>"/> <link rel="stylesheet" type="text/css" href="<c:url value='/js/jquery-easyui-1.4.1/themes/icon.css'/>"/> <link rel="stylesheet" type="text/css" href="<c:url value='/js/jquery-easyui-1.4.1/demo/demo.css'/>"/> <link rel="stylesheet" type="text/css" href="<c:url value='/js/jquery-easyui-1.4.1/themes/default/easyui.css'/>"/> <script type="text/javascript" src="<c:url value='/js/jquery-easyui-1.4.1/jquery.min.js'/>"></script> <script type="text/javascript" src="<c:url value='/js/jquery-easyui-1.4.1/jquery.easyui.min.js'/>"></script> <script type="text/javascript" src="<c:url value='/js/jquery-easyui-1.4.1/easyloader.js'/>"></script> <script> function load1(){ using('calendar',function(){ $('#cc').calendar({ width:180, height:180 }); }); } function load2(){ using(['dialog','messager'],function(){ $('#dd').dialog({ title:'Dialog', width:300, height:200 }); $.messager.show({ title:'info', msg:'dialog created' }); }); } </script> </head> <body> <h1>EasyLoader</h1> <a href="#" class="easyui-linkbutton" onclick="load1()">Load Calendar</a> <span style="white-space:pre"> </span><a href="#" class="easyui-linkbutton" onclick="load2()">Load Dialog</a> <div id="cc"></div> <div id="dd"></div> </body> </html>