UI 使用说明 ####1.富文本编辑器 富文本编辑器u-editor的使用说明 的使用说明 1.引用JS ``` <script type="text/javascript" charset="utf-8" src="$!{basePath}/content/plug-in/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="$!{basePath}/content/plug-in/ueditor/ueditor.all.min.js"></script> <script type="text/javascript" charset="utf-8" src="$!{basePath}/content/plug-in/ueditor/lang/zh-cn/zh-cn.js"></script> ``` 2.使用 ``` <textarea name="content" id="content" style="width: 880px;height:300px"></textarea> <script type="text/javascript"> var editor = UE.getEditor('content'); </script> ``` ueditor上传的图片、视频等资源文件的保存地址:webapp/upload/ueditor 参考使用文档:http://fex.baidu.com/ueditor/ --- ####2.上传插件的引用说明 1.引用js和css文件 ``` <script src="$!{basePath}/content/plug-in/uploadify/jquery.uploadify.min.js" type="text/javascript"></script> <link href="$!{basePath}/content/plug-in/uploadify/uploadify.css" rel="stylesheet" /> ``` 2.使用 ``` <!-- 页面文件--> <div style="float:left"> <div id="fileQueue" style="width: auto;"></div> <input type="file" name="imageUploadify" id="imageUploadify" /> </div> <div id="file_name_div" style="width:auto; height:auto; display:none;float:left; padding-left: 10px; padding-top: 3px;"> <img id="file_path" style="width:200px;" /> <span id="file_name"></span> </div> <!-- js --> <script type="text/javascript"> jQuery(function() { //封面图片上传 jQuery("#imageUploadify").uploadify({ 'swf':'$!{basePath}/content/plug-in/uploadify/uploadify.swf', 'uploader':'$!{basePath}.......do?doUpload',//文件上传的路径 'queueID':'fileQueue',//文件队列的ID,该ID与存放文件队列的div的ID一致 'auto':true,//是否自动上传 'multi':true,//设置为true时可以上传多个文件 'buttonCursor':'hand',// 'dataType':'json', 'fileObjName':'file', 'buttonText':'上传封面图片', 'height':'25', 'progressData':'percentage', 'fileTypeDesc':'支持格式: 图片文件', 'fileTypeExts':'*.jpg;*.png;*.jpeg;*.gif', 'onUploadSuccess': function(file, data, response){ var parsedJson = jQuery.parseJSON(data); jQuery("#imagePath").val(parsedJson.obj.path); jQuery("#file_name_div").show(); jQuery('#file_path').attr('src', '../' + parsedJson.obj.path); } }); }); </script> ``` 参考API:http://www.cnblogs.com/yangy608/p/3915349.html --- ####3.content/base/back/common/head.vm 当中包含的内容 1.引入css文件 ``` <link href="$!{basePath}/plug-in-ui/css/bootstrap.css" rel="stylesheet"> <link href="$!{basePath}/plug-in-ui/css/style.css" rel="stylesheet"> <link href="$!{basePath}/plug-in-ui/css/zTreeStyle/zTreeStyle.css" type="text/css" rel="stylesheet"/> <link href="$!{basePath}/plug-in-ui/css/mycss/kongjian.css" rel="stylesheet"> ``` 2.引入JS文件 ``` <script type="text/javascript" src="$!{basePath}/plug-in-ui/js/iFrameResize.js"></script> <script type="text/javascript" src="$!{basePath}/plug-in-ui/js/jquery-1.9.1.js"></script> <script type="text/javascript" src="$!{basePath}/plug-in-ui/js/respond.min.js"></script> <script type="text/javascript" src="$!{basePath}/plug-in-ui/js/bootstrap.js"></script> <script type="text/javascript" src="$!{basePath}/plug-in-ui/js/common.js"></script> <script type="text/javascript" src="$!{basePath}/plug-in-ui/js/jquery.form.js"></script> <script type="text/javascript" src="$!{basePath}/plug-in-ui/js/scrollNav.js"></script> <script type="text/javascript" src="$!{basePath}/plug-in-ui/js/My97DatePicker/WdatePicker.js" language="javascript"></script> ``` --- ####4.jquery文件 ``` <script src="$!{basePath}/plug-in-ui/js/jquery-1.9.1.min.js"></script> ``` --- ####5.表单验证JS Validform ``` <script type="text/javascript" src="$!{basePath}/plug-in-ui/js/Validform_v5.3.2.js"></script> ``` 参考API:http://validform.rjboy.cn/document.html --- ####6.jQuery树表插件 树表插件(treeTable)的使用 1.css文件 ``` <link href="$!{basePath}/plug-in-ui/css/treetable/default/treeTable.css" rel="stylesheet" type="text/css" /> ``` 2.js文件 ``` <script type="text/javascript" src="$!{basePath}/plug-in-ui/js/treetable/jquery.treeTable.js"></script> ``` 参考使用文档:http://www.cnblogs.com/hongyuniu/archive/2012/07/04/2575929.html --- ####7.zTree树形展示的使用 树形展示的使用 1.css文件 ``` <link href="$!{basePath}/plug-in-ui/css/zTreeStyle/zTreeStyle.css" type="text/css" rel="stylesheet"/> ``` 2.js文件 ``` <!-- 核心资源包 --> <script type="text/javascript" src="$!{basePath}/plug-in-ui/js/zTree/jquery.ztree.core-3.5.min.js"></script> <!-- 扩展包 --> <script type="text/javascript" src="$!{basePath}/plug-in-ui/js/zTree/jquery.ztree.excheck-3.5.min.js"></script> <script type="text/javascript" src="$!{basePath}/plug-in-ui/js/zTree/jquery.ztree.exedit-3.5.min.js"></script> <script type="text/javascript" src="$!{basePath}/plug-in-ui/js/zTree/jquery.ztree.exhide-3.5.min.js"></script> ``` 参考使用文档:http://www.treejs.cn/v3/faq.php#_206 --- ####8.My97DatePicker的使用 ``` <!-- WdatePicker--> <script type="text/javascript" src="$!{basePath}/plug-in-ui/js/My97DatePicker/WdatePicker.js" language="javascript"></script> <!-- 语言JS资源包 --> <script type="text/javascript" src="$!{basePath}/plug-in-ui/js/My97DatePicker/lang/zh-cn.js" language="javascript"></script> <script type="text/javascript" src="$!{basePath}/plug-in-ui/js/My97DatePicker/lang/zh-tw.js" language="javascript"></script> <script type="text/javascript" src="$!{basePath}/plug-in-ui/js/My97DatePicker/lang/en.js" language="javascript"></script> ``` 参考使用文档:http://www.my97.net/dp/demo/resource/2.1.asp --- ####9.bootstrap包含的JS和对应的css文件 1.css文件 ``` <link href="$!{basePath}/plug-in-ui/css/bootstrap.css" rel="stylesheet"> ``` 2.js文件 ``` <!-- 基础js文件 --> <script type="text/javascript" src="$!{basePath}/plug-in-ui/js/bootstrap.js"></script> <!-- bootstrap时间选择器js --> <script type="text/javascript" src="$!{basePath}/plug-in-ui/js/bootstrap-datetimepicker.min.js"></script> ``` --- ####10.json2文件 ``` <script type="text/javascript" src="$!{basePath}/plug-in-ui/ui/json2.js"></script> ``` 首页风格 首页风格hplus ![输入图片说明](https://static.oschina.net/uploads/img/201804/23195448_TrDk.png "在这里输入图片标题") ![输入图片说明](https://static.oschina.net/uploads/img/201804/23195458_VM33.png "在这里输入图片标题") 资源目录:$!{basePath}/plug-in-ui/hplus 目录结构如下图: ![输入图片说明](https://static.oschina.net/uploads/img/201804/23195534_fNpe.png "在这里输入图片标题") hplus在线示例:http://www.zi-han.net/theme/hplus/ --- ####11.统计图表(echarts)的使用 1.js文件 ``` <script src="$!{basePath}/plug-in-ui/hplus/js/plugins/echarts/echarts-all.js"></script> ``` 2.示例图: ![输入图片说明](https://static.oschina.net/uploads/img/201804/23195714_GCjb.png "在这里输入图片标题") 参考使用文档:http://echarts.baidu.com/tutorial.html#ECharts%20%E7%89%B9%E6%80%A7%E4%BB%8B%E7%BB%8D