前端细节处理
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" />
感谢您的阅读,如果文中有任何技术上的错误或不妥,烦请留言指出,我会尽快更正。