资源管理

  1. 统一的资源管理弹窗, id=media_icon
  2. 各个需要选择资源的入口

统一的资源管理弹窗, id=media_icon

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<div class="modal fade in" id="media_icon" data-backdrop="static" data-keyboard="false" data-position="5%" aria-hidden="false" style="display: block;">
    <div class="modal-dialog modal-lg" style="margin-top: 5%;">
        <div class="modal-content">
            <div class="modal-body">
                <ul id="myTab" class="nav nav-tabs">
                    <li class="" style="display: none;"><a href="#music" data-toggle="tab" id="music_tab">音乐</a></li>
                    <li class=""><a href="#pic" data-toggle="tab" class="img_tab">图片</a></li>
                    <li class="active"><a href="#upload" data-toggle="tab" id="upload_tab">上传</a></li>
                    <li class="find" style="display: none;"><input type="text" id="searchMediaInput" placeholder="输入文件名，快速搜素" class="form-control"></li>
                    <div class="btn_confirm">
                        <li>
                            <button class="btn btn-primary confirm-choose" type="button" onclick="chooseMediaResImg()" style="display: none;">确定选择</button>
                        </li>
                        <li>
                            <button class="btn" type="button" id="cancel_icon" data-dismiss="modal">取消
                            </button>
                        </li>
                    </div>
                </ul>
                <div id="myTabContent" class="tab-content" style="height:410px;overflow: auto;">
                    <div class="tab-pane fade clearfix" id="music"></div>
                    <div class="tab-pane fade clearfix" id="pic"></div>
                    <div class="tab-pane fade active in" id="upload">
                    <div class="file-input file-input-ajax-new"><div class="file-preview">
                    <div class="close fileinput-remove">×</div>
                    <div class=" file-drop-zone"><div class="file-drop-zone-title">拖拽文件/或者点击下方选择图片按钮 …</div>
                    <div class="file-preview-thumbnails"></div>
                    <div class="clearfix"></div>    <div class="file-preview-status text-center text-success"></div>
                    <div class="kv-fileinput-error file-error-message" style="display: none;"></div>
                </div>
        </div>
<div class="kv-upload-progress hide"><div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%;">
        100%
     </div>
</div></div>
<div tabindex="500" class="btn btn-primary btn-file"><i class="icon icon-file-o"></i>   <span class="undefined">选择图片文件</span><input id="imgUpload" name="file" type="file" class="" accept="image/jpeg,image/png"></div>
</div><div id="kvFileinputModal" class="file-zoom-dialog modal fade" tabindex="-1" aria-labelledby="kvFileinputModalLabel"><div class="modal-dialog modal-lg" role="document" style="margin-top: 5%;">
  <div class="modal-content">
    <div class="modal-header">
      <div class="kv-zoom-actions pull-right"><button type="button" class="btn btn-default btn-header-toggle btn-toggleheader" title="Toggle header" data-toggle="button" aria-pressed="false" autocomplete="off"><i class="icon icon-resize"></i></button><button type="button" class="btn btn-default btn-fullscreen" title="Toggle full screen" data-toggle="button" aria-pressed="false" autocomplete="off"><i class="icon icon-fullscreen"></i></button><button type="button" class="btn btn-default btn-borderless" title="Toggle borderless mode" data-toggle="button" aria-pressed="false" autocomplete="off"><i class="icon icon-resize-full"></i></button><button type="button" class="btn btn-default btn-close" title="Close detailed preview" data-dismiss="modal" aria-hidden="true"><i class="icon icon-remove"></i></button></div>
      <h3 class="modal-title">详细预览 <small><span class="kv-zoom-title"></span></small></h3>
    </div>
    <div class="modal-body">
      <div class="floating-buttons"></div>
      <div class="kv-zoom-body file-zoom-content"></div>
<button type="button" class="btn btn-navigate btn-prev" title="View previous file"><i class="icon icon-long-arrow-left"></i></button> <button type="button" class="btn btn-navigate btn-next" title="View next file"><i class="icon icon-long-arrow-right"></i></button>
    </div>
  </div>
</div>
</div>
                        <p id="mediaTyPrompt">上传文件格式：图片：png、jpg格式。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

  1. 各个需要选择资源的入口
    1
    2
    3
    4
    <div class="col-md-4">
        <a data-modalid="#media_icon" data-mediatype="1" data-imgtype="custom" href="javascript:void(0);" class="icon_media">个人媒体库音乐</a>&nbsp;&nbsp;
        <a data-modalid="#media_icon" data-mediatype="1" data-imgtype="system" data-subtype="def_msc" href="javascript:void(0);" class="icon_media">系统音乐</a>
    </div>
1
<div class="col-md-2" style="width:150px;"><a data-modalid="#media_icon" data-imgtype="custom" href="javascript:void(0);" class="icon_media">从媒体库选择图片</a></div>
  1. 绑定各入口的点击事件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    $(document).on("click", "[data-modalid]", function (e) {
        openMediaResObj = e.target;
        pauseAudioMusic();
        var mediaType = $(openMediaResObj).attr("data-mediatype");
        var imgType = $(openMediaResObj).attr("data-imgtype");
        $("#pic").html("");
        $("#music").html("");
        //查询图片媒体资源
        var sb = _U.getSubmit("/member/mediares", null, "ajax", false);
        sb.pushData("act", 'list');
        sb.pushData("type", imgType);
        if(imgType == 'system'){
            sb.pushData("media_type", $(openMediaResObj).data('subtype'));
        }else{
            sb.pushData("media_type", mediaType ? mediaType : '0');
        }
        sb.submit(function () {
        }, function (data) {
            if (mediaType == '1') {
                toggleMediaTab('music');
                addMusicMediaRes(data);
            } else {
                toggleMediaTab('image');
                if (imgType == 'system') {
                    addDefMediaRes(data);
                    $("#upload_tab").hide();
                } else if (imgType == 'custom') {
                    addImageMediaRes(data);
                    $("#upload_tab").show();
                }
            }
        });
        $("#searchMediaInput").val("");
        $($(this).attr('data-modalid')).modal('show');
    });