插件使用总结

1、uploadify使用

1）、引入文件

<link rel='stylesheet' type="text/css" href='uploadify.css' />

<script type="text/javascript" src='jquery.uploadify.min.js'></script>

在jsp里面设置一个div

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

2）初始化上传控件

/**
 * 初始化图片上传
 */
function initValidate(){
    $('#ele').uploadify({
        formData: {
            filePath: '/assets/images'//需要配置
        },
        buttonClass:'btnclass',
        height:20,
        60,
        buttonText:'浏览',
        multi:false,
        swf: '/bizgame/js/jquery/plugins/uploadify/uploadify.swf?var='+(new Date()).getTime(),
        uploader: '/upload/imageUpload.action',//文件上传action
        fileObjName: 'file',
        cancelImg:'/bizgame/js/jquery/plugins/uploadify/cancel.png',
        auto: true,
        fileTypeExts: '*.png;',//配置上传文件类型（一般无文件类型限制）
        onUploadSuccess: function(file, r){
            r = $.parseJSON(r);
            if(!r.success) {
                $('#alertdiv').savehandle('setmsg',{msg:'提示，上传失败!'+r.result});
            } else {
               28             }
        }
    });
}

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

initValidate()//初始化控件

})

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

2、ueditor使用

1）、引入文件

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

2）、配置div

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

3）、初始化页面编辑器

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

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

$(fuction(){
InitUeditor();
})

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

解决方案：

introductionEditer.setContent(row.introduction);

3、模态框modal使用

1）、引入bootstrap css及js文件

2）、页面代码

<div class="modal fade" id='showVideo'>
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title">播放视频</h4>
                        </div>
                        <div class="modal-body">
                            <label>视频<span class='star'>&nbsp;*</span></label>
                            <video id="video" width="300" height="240" controls><source type="video/mp4"></video>
                        </div>
                        <div class='modal-footer'>
                            <button type="button" class="btn btn-default" data-dismiss="modal" onclick="close()">关闭</button>
                        </div>
                    </div>
                </div>
            </div>

3）、js代码

/**
 * 打开播放视频窗口
 * @param url
 */
function openVideo(url){
    $('#showVideo #video').attr("src",url);
    $('#showVideo').modal('show');
}

/**
 * 关闭播放视频窗口
 */
function close(){
    $('#showVideo').modal('hide');
}

 4、网页或WEB应用或PC端浏览器调用百度地图API

http://www.cnblogs.com/ACMxike20111726/p/3550021.html

5、在PC端或移动端应用中接入商业QQ

http://www.cnblogs.com/ACMxike20111726/p/3586859.html