UU助手后台软文发布系统添加上拉加载更多效果

jpress-web-admin/src/main/webapp/WEB-INF/admin/content/_index_include.html

@@ -74,8 +74,8 @@
 						<thead>
 						<tr>
 							<th width="20"><input type="checkbox"></th>
-							<th width="340">标题</th>
-							<th width="195">日期</th>
+							<th width="300">标题</th>
+							<th width="135">日期</th>
 							<th width="110">作者</th>
 							<th width="110">版权</th>
 							<th width="110">类别</th>
@@ -87,7 +87,7 @@
 							<td><input name="dataItem" onclick="checkAll(this)" type="checkbox" value="0"></td>
 							<td></td>
 							<td class="chooseUas">
-								<select style="position: absolute;z-index: 1;"  class="choose choosePushTime"
+								<select style="position: absolute;z-index: 1; width: 110px;"  class="choose choosePushTime"
 										onmousedown="if(this.options.length>5){this.size=6}" onblur="this.size=0" onchange="this.size=0;choosePushTime()">
 									<option></option>
 									<#if push_time_list??>
@@ -98,7 +98,7 @@
 								</select>
 							</td>
 							<td class="chooseUas">
-								<select style="position: absolute;z-index: 1;"  class="choose chooseAuthor"
+								<select style="position: absolute;z-index: 1; width: 110px;"  class="choose chooseAuthor"
 										onmousedown="if(this.options.length>5){this.size=6}" onblur="this.size=0" onchange="this.size=0;chooseAuthor()">
 									<option></option>
 									<#if author_list??>
@@ -131,7 +131,7 @@
 								</select>
 							</td>
 							<td class="chooseUas">
-								<select style="position: absolute;z-index: 1;"  class="choose"
+								<select style="position: absolute;z-index: 1; width: 110px;"  class="choose"
 										onmousedown="if(this.options.length>5){this.size=6}" onblur="this.size=0" onchange="this.size=0">
 									<option></option>
 								</select>
@@ -353,7 +353,6 @@
 			</div>
 			<!-- /.box-body -->
 		</div>
-
 		<div class="cf">
 			<div class="pull-right " >
 
@@ -364,7 +363,6 @@
 
 			</div>
 		</div>
-
 		<!-- /.row -->
 	</section>
 	<!-- /.content -->

jpress-web-template-usoftchina/src/main/webapp/templates/usoftchina/content_uuhelper.html

@@ -21,7 +21,7 @@
         .main .container .header p{
             text-align: left;
             font-size: 18px;
-            color: #6c6a6b;
+            color: #000;
         }
         .main .container .header div{
             margin: 5px 0;
@@ -32,11 +32,10 @@
         .main .container .header div span:first-child{
             margin-right: 10px;
         }
-        .main .container .section .audio{
-            margin-top: 20px;
-        }
-        .main .container .section .video{
-            margin-bottom: 20px;
+        .main .container .section div{
+            font-size: 14px;
+            color: #000;
+            text-align: left;
         }
         .main .container .section p{
             font-size: 14px;
@@ -56,6 +55,7 @@
         .main .container .section div.readCount div span{
             font-size: 14px;
             margin-right: 10px;
+            cursor: pointer;
         }
         .main .container .section div.readCount div span em{
             color: #5f9ac6;
@@ -151,6 +151,7 @@
             color: #8c8c8c;
             font-size: 14px;
             float: right;
+            cursor: pointer;
         }
         .main .container .footer .footer-section .detail .title span:last-child em{
             margin-left: 10px;
@@ -186,7 +187,7 @@
             text-align: right;
             margin-top: -60px;
         }
-        .main .container .footer .footer-header .writeMessage a{
+        .main .container .footer .footer-header .writeMessage button{
             display: inline-block;
             width: 80px;
             height: 25px;
@@ -196,9 +197,10 @@
             background: #b4b5b9;
             border-radius: 5px;
             color: #333;
+            border: none;
             cursor: pointer;
         }
-        .main .container .footer .footer-header .writeMessage a:hover{
+        .main .container .footer .footer-header .writeMessage button:hover{
             border: none;
             background: #5078cb;
             color: #fff;
@@ -238,7 +240,6 @@
                     </div>
                 </form>
             </#if>
-
             <div class="footer-section">
                 <@jp.commentPage pageSize="2">
                 <#if page ??>
@@ -271,7 +272,8 @@
                 </#if>
             </@jp.commentPage>
             </div>
-            <div class="pull"><a>下拉加载更多</a></div>
+            <div class="pull"><a>上拉加载更多</a></div>
+            <!--<div class="pull"><a>没有更多数据了</a></div>-->
         </div>
     </div>
 </div>
@@ -311,30 +313,65 @@
         $(this).next('.writeMessage').toggle()
     })
 //    上拉加载更多
-    var page = 1, //分页码
-        timers = null; //定时器
+    var page = 1,
+        timers = null;
         //加载数据
         var LoadingDataFn = function() {
             var dom = '';
-            for (var i = 0; i < 10; i++) {
-                dom += '124944638709-67858';
-            }
+            dom += ` <@jp.commentPage pageSize="2">
+                <#if page ??>
+                    <#list page.getList() as comment>
+                        <div class="message">
+                            <div class="left">
+                                <div class="img" >
+                                    <img src="/jpress/static/jpress/admin/image/dot.png" alt="用户头像">
+                                </div>
+                            </div>
+                            <div class="right">
+                                <div class="detail">
+                                    <div class="title">
+                                        <span>${comment.author!} <em>${(comment.created?string("yyyy-MM-dd"))!}</em></span>
+                                        <span><img src="/jpress/static/jpress/admin/image/hands.png" alt=""><em>${(comment.vote_up)!'0'}</em></span>
+                                    </div>
+                                    <p>${comment.text!}</p>
+                                    <#if comment.qc_content ??>
+                                        <div class="title reply">
+                                            <span>作者回复： <em>${(comment.qc_created?string("yyyy-MM-dd"))!}</em></span>
+                                            <span><img src="/jpress/static/jpress/admin/image/hands.png" alt=""><em>${(comment.vote_up)!'0'}</em></span>
+                                        </div>
+                                        <p>${comment.qc_content!}</p>
+                                    </#if>
+                                </div>
+                            </div>
+                        </div>
+                    </#list>
+                </#if>
+            </@jp.commentPage>`;
             $('.footer-section').append(dom);
         };
         //初始化
         $(document).ready(function() {
             LoadingDataFn();
         });
-
         //滚动加载方法
-        $('.footer-section').scroll(function() {
-            if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {
-                clearTimeout(timers);
-                timers = setTimeout(function() {
-                    page++;
-                    LoadingDataFn(); //调用执行上面的加载方法
-                }, 300);
-            }
-        });
+//        $('.footer-section').scroll(function() {
+//            if (($(this)[0] + $(this).height() + 30) >= $(this)[0].scrollHeight) {
+//                console.log($(this)[0].scrollTop)
+//                clearTimeout(timers);
+//                timers = setTimeout(function() {
+//                    page++;
+//                    LoadingDataFn(); //调用执行上面的加载方法
+//                }, 300);
+//            }
+//        });
+    $(window).scroll(function() {
+        if (($(window).height() + $(window).scrollTop() + 60) >= $(document).height()) {
+            clearTimeout(timers);
+            timers = setTimeout(function() {
+                page++;
+                LoadingDataFn();
+            }, 300);
+        }
+    });
 </script>
 </html>