前端細節處理

1.打開新的標籤頁

 

var a = $('<a href="'+arr[1]+'" id="open-full" target="_blank"></a>').get(0)
var e = top.document.createEvent('MouseEvents');
e.initEvent('click', true, true);
a.dispatchEvent(e);

 

 

2。上下鍵切換

var index = -1
	$('#search-input').keydown(function(event){
		var lis , kw
		lis = $('.search-keyword ul li')
		kw = $(this).val()
		if(lis.length === 0){
			return
		}

		if(event.keyCode == 40){
			index++
			if(index > lis.length - 1){
				index = 0
			}
			lis.css({'background-color': ''}).eq(index).css('backgroundColor', '#eee')
			$(this).val(lis.eq(index).text())
		}
		if(event.keyCode == 38){
			event.preventDefault()
			index--
			if(index < 0){
				index = lis.length - 1
			}
			lis.css({'background-color': ''}).eq(index).css('backgroundColor', '#eee')
			$(this).val(lis.eq(index).text())
		}
	})

　　

3.全局請求默認處理，全局處理時須要注意就是api請求數據時使用$.get(url,param,callback), $.post(url,param,callback) 這樣請求的數據纔會使用ajaxSetup中complete

//設置AJAX的全局默認選項
$.ajaxSetup({
    contentType:"application/x-www-form-urlencoded;charset=utf-8",
    complete: function(XMLHttpRequest, textStatus) { // 出錯時默認的處理函數
        var status = XMLHttpRequest.status;
        var res = XMLHttpRequest.responseText;
         if(textStatus == 'parsererror') {     //處理解析錯誤
            window.location.reload();
            return;
        }
        if (res==undefined || res.indexOf("ret") == -1) {
            return;
        }
        try{
            var data = JSON.parse(res);
           if(data.ret && data.ret== 300) {        //    處理踢出異常
               window.location.href=ctx+"/login?kickout";
           } else if (data.ret && data.ret== 500) {        // 處理通常異步請求異常
               cicc_index.ciccModal({        
                    content:{
                        title:'<spring:message code="login.request-error"/>', 
                        body:data.msg,
                        suc_opt_text:'<spring:message code="login.determine"/>',
                        err_opt_text:''
                }});
           } else if (data.ret && data.ret== 310) {    // 帳戶服務過時
               cicc_index.ciccModal({        
                    content:{
                        title:'服務過時提醒', 
                        body:data.msg,
                        suc_opt_text:'<spring:message code="login.determine"/>',
                        err_opt_text:''
                }});
           }           
        } catch(e){
            console.log(e);
        }    
    } 
  });

 4.花樣 result 是一個list每次8條數據

function appendData(result) {
      var ret = "";
      for (var i = 0; i < Math.ceil(result.length / 8.0); i++) {
        console.log(i);
        var activitySearchVO = null;
        if (8 * i + 1 <= result.length) {
          activitySearchVO = result[8 * i];
          ret +=
              '<div class="activity-line img-left clearfix">' +
              '<div class="img-content my-box-shadow">'+
              ' <div class="ac-img img-left">'+
              '<a href="javascript:void(0)" onclick="viewDetail(' + activitySearchVO.id + ')">'+
              '<img src="'+ activitySearchVO.titlePic +'" alt="" class="img-responsive">'+
              '</a>'+
              '</div>'+
              '<div class="ac-text">'+
              '<div>'+
              '<h4 onclick="viewDetail(' + activitySearchVO.id + ')">'+ activitySearchVO.title + '</h4>'+
              '<span>'+ activitySearchVO.city +'</span><span>'+(ISEN ? new Date(activitySearchVO.startTime).Format("M dd, yyyy"):new Date(activitySearchVO.startTime).format("yyyy.MM.dd"))+'</span>'+
              '</div>'+
              '</div>'+
              '</div>'
        }
        if (8 * i + 2 <= result.length) {
          activitySearchVO = result[8 * i + 1];
          ret +=
              '<div class="ac-text ml20 my-box-shadow">'+
              '<div>'+
              '<h4 onclick="viewDetail(' + activitySearchVO.id + ')">'+ activitySearchVO.title +'</h4>'+
              '<span>'+ activitySearchVO.city +'</span><span>'+(ISEN ? new Date(activitySearchVO.startTime).Format("M dd, yyyy"):new Date(activitySearchVO.startTime).format("yyyy.MM.dd"))+'</span>'+
              '</div>'+
              '</div>'+
              '</div>'
        }
    
        if (8 * i + 3 <= result.length) {
          activitySearchVO = result[8 * i + 2];
          ret +=
              '<div class="activity-line img-left clearfix">'+
              '<div class="ac-text my-box-shadow">'+
              '<div>'+
              '<h4 onclick="viewDetail(' + activitySearchVO.id + ')">'+ activitySearchVO.title +'</h4>'+
              '<span>'+ activitySearchVO.city +'</span><span>'+(ISEN ? new Date(activitySearchVO.startTime).Format("M dd, yyyy"):new Date(activitySearchVO.startTime).format("yyyy.MM.dd"))+'</span>'+
              '</div>'+
              '</div>'
        }
        if (8 * i + 4 <= result.length) {
          activitySearchVO = result[8 * i + 3];
          ret +=
              '<div class="img-content ml20 my-box-shadow">'+
              '<div class="ac-img img-left">'+
              ' <a href="javascript:void(0)" onclick="viewDetail(' + activitySearchVO.id + ')">'+
              '<img src="'+ activitySearchVO.titlePic +'" alt="" class="img-responsive">'+
              '</a>'+
              '</div>'+
              ' <div class="ac-text">'+
              ' <div>'+
              ' <h4 onclick="viewDetail(' + activitySearchVO.id + ')">'+ activitySearchVO.title +'</h4>'+
              ' <span>'+ activitySearchVO.city +'</span><span>'+(ISEN ? new Date(activitySearchVO.startTime).Format("M dd, yyyy"):new Date(activitySearchVO.startTime).format("yyyy.MM.dd"))+'</span>'+
              ' </div>'+
              ' </div>'+
              '</div>'+
              ' </div>'
      
      
      
        }
    
        if (8 * i + 5 <= result.length) {
          activitySearchVO = result[8 * i + 4];
          ret +=
              '<div class="activity-line img-left clearfix">' +
              '<div class="ac-text my-box-shadow">' +
              '<div>' +
              '<h4 onclick="viewDetail(' + activitySearchVO.id + ')">'+ activitySearchVO.title +'</h4>' +
              '<span>'+ activitySearchVO.city +'</span><span>'+(ISEN ? new Date(activitySearchVO.startTime).Format("M dd, yyyy"):new Date(activitySearchVO.startTime).format("yyyy.MM.dd"))+'</span>' +
              '</div>' +
              '</div>'
      
      
      
        }
        if (8 * i + 6 <= result.length) {
          activitySearchVO = result[8 * i + 5];
          ret +=
              '<div class="img-content ml20 my-box-shadow">' +
              '<div class="ac-text">' +
              '<div>' +
              '<h4 onclick="viewDetail(' + activitySearchVO.id + ')">'+ activitySearchVO.title + '</h4>' +
              '<span>'+ activitySearchVO.city +'</span><span>'+(ISEN ? new Date(activitySearchVO.startTime).Format("M dd, yyyy"):new Date(activitySearchVO.startTime).format("yyyy.MM.dd"))+'</span>'+
              ' </div>' +
              '</div>' +
              '<div class="ac-img img-right">' +
              '<a href="javascript:void(0)" onclick="viewDetail(' + activitySearchVO.id + ')">' +
              '<img src="'+ activitySearchVO.titlePic +'" alt="" class="img-responsive">' +
              '</a>' +
              ' </div>' +
              ' </div>' +
              ' </div>'
      
      
      
        }
    
        if (8 * i + 7 <= result.length) {
          activitySearchVO = result[8 * i + 6];
          ret +=
              '<div class="activity-line clearfix">' +
              '<div class="img-content my-box-shadow">\n' +
              '                            <div class="ac-text">\n' +
              '                                <div>\n' +
              '                                    <h4 onclick="viewDetail(' + activitySearchVO.id + ')">'+ activitySearchVO.title + '</h4>\n' +
              '                                    <span>'+ activitySearchVO.city +'</span><span>'+(ISEN ? new Date(activitySearchVO.startTime).Format("M dd, yyyy"):new Date(activitySearchVO.startTime).format("yyyy.MM.dd"))+'</span>\n' +
              '                                </div>\n' +
              '                            </div>\n' +
              '                            <div class="ac-img img-right">\n' +
              '                                <a href="javascript:void(0)" onclick="viewDetail(' + activitySearchVO.id + ')">\n' +
              '                                    <img src="'+ activitySearchVO.titlePic +'" alt="" class="img-responsive">\n' +
              '                                </a>\n' +
              '                            </div>\n' +
              '                        </div>'
      
      
        }
        if (8 * i + 8 <= result.length) {
          activitySearchVO = result[8 * i + 7];
          ret +=  '<div class="ac-text ml20 my-box-shadow">' +
              '<div>' +
              '<h4 onclick="viewDetail(' + activitySearchVO.id + ')">'+ activitySearchVO.title + '</h4>' +
              '<span>'+ activitySearchVO.city +'</span><span>'+(ISEN ? new Date(activitySearchVO.startTime).Format("M dd, yyyy"):new Date(activitySearchVO.startTime).format("yyyy.MM.dd"))+'</span>' +
              '</div>' +
              '</div></div>'
      
      
      
        }
    
      }
      $("#activityList").append(ret); // todo append activity list
      cicc_index.clampString($('.topic-text a h4'), 4)
      pageNum = pageNum + 1;
      checkLoadMore();
    }

 

5.使用ie最高版本渲染頁面

<meta http-equiv="X-UA-Compatible" content="IE=edge" />