ui的一些认识


一般的jsp中加入这段就加载了ui,新的东西不知道问在哪,可以逐个注释排查,
新的不知道工作原理可以逐个注释从效果看每个的作用

<utility:base target="cui" themes="blue" packages="layout,crumb"
stylePath="${basePath}/resources/zwww/css" />


链接到,对传入参数加工:

<%@ include file="../common/include.jsp" %>
<%@ tag language="java" pageEncoding="UTF-8" body-content="tagdependent"%>
<%@ attribute name="target" type="java.lang.String" description="加载UI库"%>
<%@ attribute name="themes" type="java.lang.String" description="加载UI皮肤"%>
<%@ attribute name="patchs" type="java.lang.String" description="加载JS补丁"%>
<%@ attribute name="packages" type="java.lang.String" description="加载UI组件"%>
<%@ attribute name="stylePath" type="java.lang.String" description="样式路径"%>
<c:set var="stylePath" scope="request" value="<%=stylePath%>"/>

<!-- 引入公共样式 -->
<link href="${basePath}/resources/styles/common.css" rel="stylesheet" type="text/css"/>
<link href="${basePath}/resources/styles/ui/icons/icon.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
var basePath = '${basePath}';
var iconPath = '${iconPath}';
var stylePath = '${stylePath}';
</script>

<!-- basic js -->
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery-1.9.1.js"></script>
<script type="text/javascript" src="${basePath}/resources/scripts/basic/jquery.cookie.js"></script>
<script type="text/javascript" src="${basePath}/resources/scripts/basic/jquery.common.js" ></script>
<script type="text/javascript" src="${basePath}/resources/scripts/basic/jquery.constant.js" ></script>

<!--[if IE 6]>
<script type="text/javascript" src="${basePath}/resources/scripts/patch/jquery.ifixpng.js"></script>
<![endif]-->

<!-- 加载JS补丁 -->
<c:forEach var="patch" items='${fn:split(patchs,",")}'>
<c:if test="${!empty patch}">
<script type="text/javascript" src="${basePath}/resources/scripts/patch/jquery.${patch}.js"></script>
</c:if>
</c:forEach>

<!-- 加载UI库 -=======和target比较==============->
<c:choose>
<c:when test='${target eq "easyui"}'>
<link href="${basePath}/resources/styles/ui/easyui/${themes}/easyui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${basePath}/resources/styles/ui/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${basePath}/resources/styles/ui/easyui/locale/easyui-lang-zh_CN.js"></script>
</c:when>
<c:when test='${target eq "cui"}'>
<link href="${basePath}/jquery-cui/4.0.1/css/treeStyle/treeStyle.css" rel="stylesheet" type="text/css" />
<link href="${basePath}/jquery-cui/4.0.1/css/layout.css" rel="stylesheet" type="text/css" />
<link href="${basePath}/jquery-cui/4.0.1/css/jquery.coral.css" rel="stylesheet" type="text/css" />
<link href="${basePath}/jquery-cui/4.0.1/dev/themes/base/cui.all.css" rel="stylesheet" type="text/css" />

<!-- common resources
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery-1.9.1.js"></script>-->
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.coral.core.js"></script>
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.coral.component.js"></script>
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.parser.js"></script>
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.validate.js"></script>

<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.coral.mouse.js"></script>
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.coral.sortable.js"></script>
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.coral.draggable.js"></script>
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.coral.droppable.js"></script>
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.coral.resizable.js"></script>
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.coral.selectable.js"></script>
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.coral.position.js"></script>

<!-- grid resources -->
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.grid.locale-cn.js"></script>
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.grid.common.js"></script>
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.coral.gridbase.js"></script>
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.coral.grid.js"></script>
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.coral.grid.celledit.js"></script>
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.grid.inlinedit.js"></script>
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.fmatter.js"></script>

<!-- textbox resources -->
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.coral.textbox.js"></script>

<!-- toolbar resources -->
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.coral.toolbar.js"></script>

<!-- button resources -->
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.coral.button.js"></script>

<!-- combo resources -->
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.coral.panel.js"></script>
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.coral.combo.js"></script>
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.coral.combobox.js"></script>
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.coral.combotree.js"></script>
<!-- datepicker resources -->
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.coral.datepicker.js"></script>
<!-- checkbox resources -->
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.coral.checkbox.js"></script>
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.coral.checkboxlist.js"></script>
<!-- radio resources -->
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.coral.radio.js"></script>
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.coral.radiolist.js"></script>

<!-- progressbar resources -->
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.coral.progressbar.js"></script>

<!-- accordion resources -->
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.coral.accordion.js"></script>

<!-- dialog resources -->
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.coral.dialog.js"></script>
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.coral.messager.js"></script>

<!-- form resources -->
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.coral.form.js"></script>

<!-- tabs resources -->
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.coral.tabs.js"></script>

<!-- tree resources -->
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.coral.tree.js"></script>

<!-- layout resources -->
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.coral.layout.js"></script>

<!-- menu resources -->
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.coral.menu.js"></script>

<!-- config resources -->
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.config.js"></script>

<!-- easing resources -->
<script type="text/javascript" src="${basePath}/jquery-cui/4.0.1/dev/ui/jquery.easing.js"></script>

<link href="${basePath}/jquery-cui/4.0.1/dev/themes/${themes}/cui.theme.css" rel="stylesheet"/>
</c:when>
</c:choose>
<!--  -=======到这里也是和target比较==============->

<!-- 加载UI组件 -->
<c:forEach var="pack" items='${fn:split(packages,",")}'>
<c:if test="${!empty pack}">
<script type="text/javascript" src="${basePath}/resources/styles/ui/cesui/${pack}/${pack}.js"></script>
</c:if>
</c:forEach>

经过上述两步就把一套ui框架给加载进来了,但是至于这个<utility:base />
标签怎么会被识别到,怎么会链接到相应的base.tab这个待续。
target是什么就后面的控件前缀是什么

猜你喜欢

转载自yuhuiblog6338999322098842.iteye.com/blog/2149225