rule.html 6.96 KB
<style>
    .clear{width:100%;height:0;clear:both;}
    .alert{margin:1px 0;padding:10px 15px;background:#F5F5F5;}
    .item-show .reply-news-list-cover{width:30%;height:100px;float:right;overflow:hidden;}
    .item-show .reply-news-list-cover img{width:100%;height:auto;}
    .item-show .reply-news-list-detail{width:65%;float:left;overflow:hidden;height:auto}
    .item-show .reply-news-list-detail .help-block{margin:5px 0}
    .item-list-first .reply-news-list-cover{width:100%;height:200px;;overflow:hidden;}
    .item-list-first .reply-news-list-cover img{width:100%;height:auto;}
    .item-list-first .reply-news-list-detail{width:100%;position:absolute;bottom:0;left:0;overflow:hidden;height:50px;color:#FFF;filter:Alpha(opacity=70);background:#000;background:rgba(0, 0, 0, 0.7);text-shadow:none;font-family:arial,宋体b8b\4f53,sans-serif;}
    .item-list-first .help-block{padding:0 10px}
    .item-list-first .pull-right{position:absolute;bottom:10px;right:0}
</style>
<div class="panel panel-default">
    <div class="panel-heading">
        选择要展示的相册
    </div>
    <div class="panel-body" id="new-reply">
        <div class="row">
            {if !empty($reply)}
            {php $i = 0;}
            {loop $reply $li}
            <div class="reply-item">
                <input type="hidden" name="albumid[]" value="{$li['albumid']}"/>
                <div class="col-sm-12 item-show {if $i < 1}item-list-first{/if}" id="item-show-{$li['id']}">
                    <div class="alert">
                        <div style="position:relative">
                            <div class="reply-news-list-cover">
                                <img src="{php echo toimage($album[$li['albumid']]['thumb'])}"/>
                            </div>
                            <div class="reply-news-list-detail">
                                <span class="help-block title"><strong>{$album[$li['albumid']]['title']}</strong></span>
                                <span class="help-block content">{php echo cutstr($album[$li['albumid']]['content'], 30, '...')}</span>
                                <span class="help-block pull-right">
                                    <a href="javascript:;" onclick='albumHandler.doDeleteItem("item-show-{$li['id']}")'>删除</a> 
                                </span>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </div>
            </div>
            {php $i++;}
            {/loop}
            {/if}
        </div>
        <div class="col-sm-12">
            <div class="alert" style="text-align:center;">
                <a href="javascript:;" class="btn btn-default" onclick="albumHandler.buildForm();"><i class="fa fa-plus"></i> 添加要展示的相册</a>
            </div>
        </div>
    </div>
    <script id="news-form-html" type="text/html">
        <div class="reply-item">
            <input type="hidden" name="albumid[]" value="(item-add-id)"/>
            <div class="col-sm-12 item-show (item-add-first)"  id="(item-add-show)">
                <div class="alert">
                    <div style="position:relative">
                        <div class="reply-news-list-cover">
                            <img src="(item-add-thumb)"/>
                        </div>
                        <div class="reply-news-list-detail">
                            <span class="help-block title"><strong>(item-add-title)</strong></span>
                            <span class="help-block content">(item-add-content)</span>
                            <span class="help-block pull-right">
                                <a href="javascript:;" onclick='albumHandler.doDeleteItem("(item-add-show)");'>删除</a> 
                            </span>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
            </div>
        </div>
    </script>
    
    <div id="modal-module-menus"  class="modal fade" tabindex="-1">
    <div class="modal-dialog" style='width: 920px;'>
        <div class="modal-content">
             <div class="modal-header"><button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button><h3>选择要展示的项目</h3></div>
            <div class="modal-body" >  
                <div class="row">
                    <div class="input-group">
                        <input type="text" class="form-control" name="keyword" value="" id="search-kwd" placeholder="请输入相册名称" />
                         <span class='input-group-btn'><button type="button" class="btn btn-default" onclick="search_entries();">搜索</button></span>
                    </div>
                </div>
                <div id="module-menus" style="padding-top:5px;"></div>
                </div>
               <div class="modal-footer"><a href="#" class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</a></div>
            </div>
             
        </div>
    </div>

<script type="text/javascript">
	var attachurl = "{php echo $_W['attachurl'];}";
	var albumHandler = {
		'buildForm' : function(){
			if ($('#new-reply .reply-item').size() >= 8) {
				require(['util'], function(u){
					u.message('单条图文信息最多添加八条内容!', '', 'error');
				});
				return false;
			}
			popwin = $('#modal-module-menus').modal();
		},
		'updateList' : function(){
			$('#new-reply .reply-item:first').find('.item-show').addClass('item-list-first')
		},
		'doEditItem' : function(showid, formid){
			this.updateList();
			$('#' + showid).hide();
			$('#' + formid).show();
		},
		'doDeleteItem' : function(itemid){
			$('#' + itemid).parent().remove();
			this.updateList();
		}
	};

	var popwin;
	function search_entries() {
		var kwd = $.trim($('#search-kwd').val());
		$("#module-menus").html("正在查询, 请稍后...");
		$.post('{php echo $this->createWebUrl('query');}', {keyword: kwd}, function(dat){
			$('#module-menus').html(dat);
		});
	}
	function select_entry(o) {
		if ($('.reply-item').size() >= 8) {
		popwin.modal('hide');
		require(['util'], function(u){
			u.message('单条图文信息最多添加八条内容!', '', 'error');
		});
		return false;
	}
	var size = $('.reply-item').size();
	var html = $('#news-form-html').html();
	html = html.replace(/\(item-add-first\)/gm, size<=0?' item-list-first':'');
	html = html.replace(/\(item-add-show\)/gm, 'item-show-' + (++size));
	html = html.replace(/\(item-add-form\)/gm, 'item-form-' + (size));
	html = html.replace(/\(item-add-id\)/gm, o.id);
	html = html.replace(/\(item-add-content\)/gm, o.content);
	html = html.replace(/\(item-add-thumb\)/gm, o.thumb);
	html = html.replace(/\(item-add-title\)/gm, o.title);
	$('#new-reply .row').append(html);
}
</script>


<script type="text/javascript">
	$('form').submit(function() {
		if ($('.reply-item').size() <= 0) {
			require(['util'], function(u){
				u.message('至少选择一个相册!', '', 'error');
			});
			return false;
		}
		return true;
	})
</script>