悠擇商城項目之涉及知識點二

 

1，頁面滾動實現方式一：（分頁加載內容）

　　

//有個小bug，滾動條滑動到底部，而後再往上滑動的時候也會加載數據，待優化，
jsp頁面A

<script>
        var page=1;
        
        $(document).ready(function () {
　　　　
　　　　　　　　$(window).scroll(function(){

var nowScrolledHeight = document.documentElement.scrollTop || document.body.scrollTop;
var docHeight = document.body.clientHeight;
var pageHeight = window.innerHeight;
var go = parseInt(docHeight) - parseInt(pageHeight);
if (nowScrolledHeight >= go) {
　　page++;
　　request_data={
　　　　page:page,
　　　　pageSize:pageSize,
　　}
　　$.post(request_url,request_data,function(back_data){
　　　　$("#scroll_load_merchantbasicDataList").append(back_data);
　　});
　　/* ajax_post(request_url,request_data,function(back_data){
　　　　$("#scroll_load_merchantbasicDataList").append(back_data);

　　}); */
}

 

});

        });
     </script>

jsp頁面B
　　　請求到頁面jsp頁面B後，B頁面會將整個頁面響應給頁面A的ajax請求

 2.頁面校驗

    <!-- 手機號碼校驗 -->    <script type="text/javascript">

 //傳入當前元素的jquery對象  function isPoneAvailable(ele) { var $ele=$(ele); //每次輸入一位進行校驗,只能輸入數字  var reg_num=/^[0-9]+$/; if(!reg_num.test($ele.val())){ //alert("請輸入有效的手機號");  layer.open({ content : '請輸入有效的手機號', area:["500px","400px"], skin : 'msg', time : 2 }); $ele.val(""); } var phone_num=$ele.val().trim(); var phone_num_length=phone_num.length; //長度爲11位校驗 if(phone_num_length ==11){ var myreg=/^[1][3,4,5,7,8][0-9]{9}$/; if (!myreg.test($ele.val())) { 
　　　　
　　　　　　　　　　　　　　alert("請輸入有效的手機號");  $ele.val(""); return false; } else { return true; } } }

 </script>

　　//元素中要添加
　　onkeyup="isPoneAvailable(this)"　　事件

 3.購物車點擊增長和勾選時價格的變化

 

　　//加商品到購物車
　　mui("body").on('tap','.add_product_to_shoppingCart_refresh',function(){　　//

mui在IOS下有時候會input會沒法聚焦，要給input加上type="text"

　　　　var pro_id = $(this).attr("pro_id");
　　　　var count = $(this).attr("count");
　　　　var count=parseInt(count);
　　　　var pro_num_ele = $(this).siblings(".pro_num");

　　　　//點擊加號或者減號後，頁面顯示的數量的顯示
　　　　pro_num_ele=$(pro_num_ele);
　　　　var pro_num=parseInt(pro_num_ele.html().trim());
　　　　//不爲零則顯示
　　　　

//不爲零則顯示
　　　　if(pro_num+count !=0){
　　　　　　pro_num_ele.html(pro_num+count);


　　　　}
　　　　else{

　　　　　　/*//爲一不能再減
　　　　　　pro_num_ele.html(1);*/


　　　　　　//一再減就刪除整個節點刪除整個節點
　　　　　　$(this).parent().parent().parent().detach();

　　　　　　//當購物車爲空的時候 從新點擊刷新本頁
　　　　　　if($(".ck_box").length==0){
　　　　　　location.reload(); //刷新頁面 true:無緩存刷新    頁面回退回從新加載js，其他有待擴展
　　　　　　}
　　　　}

mui("body").on('tap','.checkbox_tap_event',function(event){
　　//阻止冒泡事件
　　event.stopPropagation(); 　

　　//阻止默認事件

　　//event.preventDefault()
　　var checkboxinput=$(this).find("#checkboxinput");
　　var $checkboxinput=$(checkboxinput);
　　var checked=$checkboxinput.prop("checked");
　　$checkboxinput.prop("checked",!checked);
　　sum_total_price();
})

　　　　sum_total_price();

　　　　var request_url=basePath+"tradeFront/add_product_to_shoppingCart.do";

　　　　　　var request_data = {
　　　　　　productId:pro_id,
　　　　　　count:count,
　　　　};

　　　　　　ajax_post(request_url,request_data,function(back_data){
　　
　　　　　　// window.location.href=basePath+"shop/shop_gouwuche2.jsp";
　　　　　　});
　　　　})
　　}

//計算頁面上的被選中的商品的價格之和
function sum_total_price(){
        var sum=0;
     $(".ck_box").each(function(){
         
         var pro_price=$(this).attr("pro_price");
         
         pro_price=parseFloat(pro_price);
         //祖先節點
         var ele_tmp=$(this).parent().parent();
         
         //數量節點
         var pro_num_ele = $(ele_tmp).find(".pro_num");
         
         pro_num_ele=$(pro_num_ele);
         
         //數量節點的值
        var pro_num=parseInt(pro_num_ele.html().trim());
        
        //計算變化的總值
        var item_price=pro_num*pro_price;
        
         sum+=parseFloat(this.checked?item_price:0);//若是選中就加選中的那個複選框的值，不然就減去
         //固定兩位小數，，，這裏須要另一個變量接收，不然會報錯
        var  sum2=sum.toFixed(2);

         document.getElementById('total_price').innerHTML=sum2;
         
         }
     )
    }

 4，css相關小知識點

 

<!--    隱藏 -->
    style="visibility: hidden;"  :不可見但佔空間
    style="display: none;"      :不展現但不佔用空間         
    hidden="hidden"              :隱藏但佔用空間

/* 阻止長按圖片在微信端的默認事件*/
#speak_button img{ pointer-events: none; }

 5，jstl使用小知識點

jsp頁面

取list長度
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> 
<%-- ${fn:length(list)} 取得list的長度 --%>


根據奇偶性控制輸出的內容不一樣

　<c:if test="${not empty product_list }">　　
　　　　<c:forEach items="${product_list }" var="product" varStatus="status">
　　　　　　<c:if test="${status.index%2==0 }">

頁面顯示小數取整問題

　　<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

 <fmt:formatNumber type='number' value="${trade_dingdan.quantity/100}" maxFractionDigits='0'/> 

截取字符串

<!-- 商家可能含有（）也可能沒有 -->
<c:choose>
　　<c:when test="${fn:contains(merchant_showName,'（')}"> 　　　　<div class="shout_aa2 mui-row"> 　　　　　　我想去${merchant_showName.substring(0,merchant_showName.indexOf("（")) }吃霸王餐 　　　　</div> 　　</c:when> 　　<c:otherwise> 　　　　<div class="shout_aa2 mui-row"> 　　　　　　我想去${merchant_showName}吃霸王餐 　　　　</div> 　　</c:otherwise> </c:choose>