插件使用总结

1、uploadify使用

1）、引入文件

1 <link rel=‘stylesheet‘ type="text/css" href=‘uploadify.css‘ />
2
3 <script type="text/javascript" src=‘jquery.uploadify.min.js‘></script>

在jsp里面设置一个div

1 <div id="ele"></div>

2）初始化上传控件

 1 /**
 2  * 初始化图片上传
 3  */
 4 function initValidate(){
 5     $(‘#ele‘).uploadify({
 6         formData: {
 7             filePath: ‘/assets/images‘//需要配置
 8         },
 9         buttonClass:‘btnclass‘,
10         height:20,
11         width:60,
12         buttonText:‘浏览‘,
13         multi:false,
14         swf: ‘/bizgame/js/jquery/plugins/uploadify/uploadify.swf?var=‘+(new Date()).getTime(),
15         uploader: ‘/upload/imageUpload.action‘,//文件上传action
16         fileObjName: ‘file‘,
17         cancelImg:‘/bizgame/js/jquery/plugins/uploadify/cancel.png‘,
18         auto: true,
19         fileTypeExts: ‘*.png;‘,//配置上传文件类型（一般无文件类型限制）
20         onUploadSuccess: function(file, r){
21             r = $.parseJSON(r);
22             if(!r.success) {
23                 $(‘#alertdiv‘).savehandle(‘setmsg‘,{msg:‘提示，上传失败!‘+r.result});
24             } else {
25                28             }
29         }
30     });
31 }

3）、页面初始化时初始化控件$(function(){

initValidate()//初始化控件

})

注意：使用该控件时出错，解决办法就是将上传模态框modal放在form表单之外。提交表时不能提交参数，需用js代码获取再以参数的方式提交。

2、ueditor使用

1）、引入文件

1 <script type="text/javascript" src="ueditor.config.js"></script>
2 <script type="text/javascript" src="ueditor.all.min.js"></script>

2）、配置div

1 <script  id ="editor" type="text" name="editor" validator="maxlength(2000)" style="width:100%;min-height:200px;"></script>
2 //或
3 <textare id ="editor" type="text" name="editor" validator="maxlength(2000)" style="width:100%;min-height:200px;"></textare >
4 //注意：首选第一种

3）、初始化页面编辑器

1 /**
2  * 初始化页面在线编辑器
3  */
4 function InitUeditor(){
5     introductionEditer=window.UE.getEditor(‘editor‘,{zIndex: 0});//editor为div内配置的编辑器id
6
7 }

4）、页面初始化时初始化控件

1 $(fuction(){
2 InitUeditor();
3 })

5)、注意：编辑框中数据可以随着表单提交而提交，但是加载表单数据时不能自动加载进编辑框

解决方案：

1 introductionEditer.setContent(row.introduction);

3、模态框modal使用

1）、引入bootstrap css及js文件

2）、页面代码

 1 <div class="modal fade" id=‘showVideo‘>
 2                 <div class="modal-dialog">
 3                     <div class="modal-content">
 4                         <div class="modal-header">
 5                             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 6                             <h4 class="modal-title">播放视频</h4>
 7                         </div>
 8                         <div class="modal-body">
 9                             <label>视频<span class=‘star‘>&nbsp;*</span></label>
10                             <video id="video" width="300" height="240" controls><source type="video/mp4"></video>
11                         </div>
12                         <div class=‘modal-footer‘>
13                             <button type="button" class="btn btn-default" data-dismiss="modal" onclick="close()">关闭</button>
14                         </div>
15                     </div>
16                 </div>
17             </div>

3）、js代码

 1 /**
 2  * 打开播放视频窗口
 3  * @param url
 4  */
 5 function openVideo(url){
 6     $(‘#showVideo #video‘).attr("src",url);
 7     $(‘#showVideo‘).modal(‘show‘);
 8 }
 9
10 /**
11  * 关闭播放视频窗口
12  */
13 function close(){
14     $(‘#showVideo‘).modal(‘hide‘);
15 }