cxc
/
ifm


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
							<!DOCTYPE html>
<html lang="en">
<head>
    <title>tsxxList.htm</title>
    <style>
        .body {
            position: relative;
            margin: 10px 0 10px 20px;
        }
        .unread{
            font-weight:bolder;
        }
        .unread:before{
            content: "";
            background-color: #8dc82e;
            width: 10px;
            height: 10px;
            border-radius: 100%;
            left: -20px;
            top: 45%;
            position: absolute;
        }
        .mainbody {
            text-align: center;
        }

        .mainbody > div + div {
            margin: 10px 0 10px 20px;
        }

        .tssj {
            text-align: center;
        }

        .tssj > span {
            width: 180px;
            padding: 3px 10px 3px 10px;
        }

        .list-group-item > span + p {
            margin-top: 30px;
        }
        /* 滚动条样式 */
		.iScrollVerticalScrollbar {
			position: absolute;
			z-index: 9999;
			width: 3px;
			bottom: 2px;
			top: 2px;
			right: 2px;
			overflow: hidden;
		}
		.iScrollVerticalScrollbar.iScrollBothScrollbars {
			bottom: 18px;
		}
		.iScrollIndicator {
			position: absolute;
			right: 0;
			background: rgba(0, 0, 0);
			border: 2px solid rgba(0, 0, 0, 0.5);
			border-radius: 8px;
		}
    </style>
    <script type="text/javascript">
	    $(function(){
	    	myScroll = new IScroll("#context",{
			 	scrollbars: true,
				fadeScrollbars:true,
				scrollbars: 'custom',
				shrinkScrollbars:'clip',
				bounce:true,
				tap:true
			});
			setTimeout(function(){
				myScroll.refresh();
			}, 100);
	    	document.addEventListener('touchmove', function(e) {
	    		e.preventDefault();
	    	}, false);
	    });
        /**
         * 返回
         */
        function backUrl(from) {
            haifm.loadMobilePage("haifm", "haifmMain.htm");
        }
        ;
        /**
         * 查看
         */
        function viewXxtsxx(id, from) {
        	
            haifm.loadMobilePage("haifm", "viewGtxxtsxx.htm?xxid=" + id + "&from=" + from + "&mcid="+$("#mcid").val());
        }
        /**
         * 自动加载
         */
        $(document).ready(function () {
            var maxPage = $("#maxPage").val();
            $("#context").infinitescroll({
                navSelector: "#navigation",  //页面分页元素--本页的导航，意思就是一个可以触发ajax函数的模块
                nextSelector: "#navigation a",  //下一页的导航
                itemSelector: ".mainbody ",  //此处我用了类选择器，选择的是你要加载的那一个块（每次载入的数据放的地方）
                animate: false,  //加载时候时候需要动画，默认是false
                maxPage: maxPage,  //最大的页数，也就是滚动多少次停。这个页码必须得要你从数据库里面拿
                loading: {
                    msgText: "加载中...",
                    finishedMsg: '没有新数据了...',
                    selector: '.loading' // 显示loading信息的div
                },
                extraScrollPx: 150,    //离网页底部多少像素时触发ajax
                errorCallback: function () {
                },    //加载完数据后的回调函数，可选

            });
        });
    </script>
</head>
<body>
<div class="container">
    <input type="hidden" id="maxPage" value="$!maxPage">
    <input type="hidden" id="page" value="$!page">
    <div class="row">
        <div class="navbar-fixed-top">
            <span class="glyphicon glyphicon glyphicon-menu-left" aria-hidden="true"
                  onclick="javascript:backUrl('$!from')"></span>
            <h4>消息</h4>
            <span class="placeholder"></span>
        </div>
    </div>
    <div id="context" style="top:38px;position:absolute;width: 100%;height:100%;">
    	<div style="width: 92%;padding-bottom:50px;">
	        #foreach ($!obj in $!xxtsList)
	        <div class="mainbody">
	            <div class="tssj"><span class="h4"><small>$!dateTool.format('yyyy-MM-dd HH:mm:ss', $!obj.tssj)</small></span>
	            </div>
	            <div #if ("$!obj.ydzt" == "0") class="body unread" #else class="body" #end>
	                <div class="list-group" style="background-color:#ffffff;text-align:left;">
	                    <a class="list-group-item" href="#" onclick="viewXxtsxx('$!obj.id', 'list')">
	                        <span class="h5 list-group-item-heading">$!obj.bt<br><small>$!dateTool.format('yyyy-MM-dd HH:mm:ss', $!obj.fbsj)</small></span>
	                        <p class="list-group-item-text">&nbsp;&nbsp;&nbsp;&nbsp;$!obj.zw</p>
	                    </a>
	                </div>
	            </div>
	        </div>
	        #end
        </div>
    </div>
    <div id="navigation"><a href="viewXxlist.htm?page=1"></a></div>
    <div class="loading" style="text-align:center"></div>
</div>
</body>
</html>