`
y806839048
  • 浏览: 1107725 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

ui的一些认识

    博客分类:
  • ui
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是什么就后面的控件前缀是什么
分享到:
评论

相关推荐

    UI图标浅认识,作为自己学习笔记

    UI图标浅认识,作为自己学习笔记,大家可以参考,另外有问题请大家多多指出来哦,谢谢。

    对UI的认识和见解共2页.pdf.zip

    这篇名为“对UI的认识和见解共2页.pdf”的文档可能包含了作者对于UI设计的理解和经验分享,但具体内容由于未提供,我们只能根据一般UI设计的知识点进行深入讨论。 首先,UI设计的基本原则包括:一致性、反馈、简洁...

    开源DirectUI的相关资料+五六个源码例子

    通过阅读这份PDF,开发者可以对DirectUI有一个全面的认识,理解其核心概念和基本用法。 至于"源码例子",它们是实际的代码示例,涵盖了各种DirectUI的使用场景。这些例子可以帮助开发者直观地了解如何在项目中应用...

    DirectUI学习

    DirectUI是一种用户界面开发技术,主要应用于Windows平台,它允许开发者创建高效、高性能且具有现代感的图形用户界面...记住,实践是检验理解的最好方式,动手操作并尝试修改这些示例,会让你对DirectUI有更深的认识。

    UI设计体验课

    通过这个UI设计体验课程,你将逐步建立起对UI设计的认识,积累实践经验,为未来的职业发展打下坚实的基础。无论是想成为一名专业的UI设计师,还是希望提升个人项目的设计品质,这都是一个很好的起点。

    ui-router使用教程

    在深入探讨 UI-Router 的用法之前,我们需要先对 AngularJS 有一定的基础认识。 AngularJS 是一款由 Google 主导开发的前端 MVC(Model-View-Controller)框架,它通过双向数据绑定、指令系统和依赖注入等特性,极...

    H-ui.admin_v2.5bootstrap管理后台源码

    在深入理解这款源码之前,我们首先要对Bootstrap有一个基本的认识。 Bootstrap,由Twitter开发并开源,是目前最流行且广泛使用的前端框架之一。它提供了一套响应式布局、移动设备优先的Web开发工具,包括CSS样式表...

    UI知识点总结

    UI设计,全称为用户界面设计,是构建人与计算机交互体验的重要环节。...通过以上对UI设计知识点的深入讲解,初学者可以对这一领域有一个全面的认识。不断实践和学习,才能提升设计水平,创造出更优秀的用户体验。

    自学UI设计的有效步骤

    在开始自学之前,首先需要对UI设计有一个全面的认识。 #### 二、学习必要的基础知识 1. **软件工具**:Photoshop是UI设计师必备的技能之一,它可以帮助设计师创建高质量的视觉效果。除了Photoshop,还可以学习...

    基于Ligerui的新手学习控件库

    **基于Ligerui的新手学习控件库** ...无论是对前端框架有基础认识的开发者,还是初次接触LigerUI的新手,都能从中获益匪浅。通过深入学习和实践,开发者可以更好地利用LigerUI实现复杂功能,打造出色的用户体验。

    LigerUI框架

    ### LigerUI框架知识点 #### 一、框架简介 LigerUI是一款基于jQuery的轻量级用户界面库,...通过本文的介绍,希望能够让大家对LigerUI有一个初步的认识,并在未来的工作中考虑使用它来提升项目的开发效率和用户体验。

    H-ui.admin后台管理框架iframe版

    通过查看和学习源码,可以提升开发者对前端技术的理解,特别是对于前端框架的构建和组织方式有更深层次的认识。 "后台管理"是H-ui.admin的主要应用场景,它涵盖了日常网站后台操作的各种功能模块,如用户管理、权限...

    高德地图切换城市UI

    4. **热门城市推荐**:为了方便常用城市的快速访问,高德地图可能会在下拉列表的顶部展示一些热门城市,这些城市通常是根据用户的使用习惯和大数据分析得出的。 5. **滑动选择**:除了搜索和下拉列表,还可以通过...

    UiPath学院Level1习题集.docx

    通过这些基础知识的学习,学员能够建立起对 UiPath 平台的基本认识,并掌握如何使用 UiPath 进行简单的自动化流程设计和实现。对于进一步深入学习 UiPath 和 RPA 技术来说,这些知识点是非常重要的基础。

    UI设计感想 UI设计的定义以及定位

    在中国,UI设计的发展面临着一些挑战,包括业界对其定义的模糊认识,以及在企业中可能未得到充分重视。推动UI设计在中国的发展,需要从高层开始,改变对UI设计价值的认知,将其视为提升产品竞争力的关键要素。同时,...

    几款手机客户端UI素材.rar

    【描述】中的"很流行的手机客户端页面"提示我们,这个压缩包可能包含了当前设计趋势下的UI元素,可能涵盖了各种风格,如扁平化设计、渐变色、Material Design、以及一些创新的交互模式。流行的设计趋势往往体现在...

    认识韵母ai、ei、ui Flash课件.swf

    认识韵母ai、ei、ui Flash课件.swf

    88f72f-Native UI Menu Template_nat_

    4. **__PreviewImage.png**:预览图像,通常展示模板应用后的效果,帮助开发者在选择使用哪个模板时有一个直观的认识。 5. **MyTemplate.vstemplate**:这是一个Visual Studio模板文件,定义了如何在IDE中呈现和...

Global site tag (gtag.js) - Google Analytics