Web App 前端构建（纯净版）
asp.net 母版页：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <title>@ViewBag.Title</title> @Styles.Render("~/Css") @RenderSection("css", false) </head> <body class="@(Device.isWeb?"web":"noWeb")"> <div class="mask"></div> <div class="app"> <div></div> <div class="A-bg-body">@RenderBody()</div> <div></div> </div> @Scripts.Render("~/Js") @RenderSection("js", required: false) </body> </html>
asp.net 首页：
@{ ViewBag.Title = "首页"; } @section css { <style> .app > :last-child, .footer { height:2.5rem } .city-btn { width: 5.5rem;text-indent:2.3rem; } .filter-btn,.user-btn{ width:3.2rem;} </style> } <div class="header A-bg"> <a class="city-btn A-icon-arrow-down A-btn"></a> <h1></h1> <a class="filter-btn A-icon-filter A-btn"></a> <a class="user-btn A-icon-user A-btn"></a> </div> <div class="body"> //... </div> <div class="footer A-bg"></div> @section js { <script> //... </script> }
公共样式：
@charset 'utf-8'; *{margin:0;padding:0; font-family: \5FAE\8F6F\96C5\9ED1,\5B8B\4F53;-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-text-size-adjust:none; } /* highlight equal to outline,only dose it has a effect in google chrome lite browser */ *:focus,*:active {outline:none;} html, body { height:100%;} body{ width: 100%; -webkit-user-select:none;} p,a,span,textarea,b,input,dt,dd { color: #666;font-size: 0.9rem;word-break:break-word;} ul, ol{list-style:none;} img{border:none;} a { text-decoration:none;cursor:pointer;} textarea {display:block;width: 100%; height: 100%; padding: 1rem; line-height: 1.3rem; background-color: white;letter-spacing: 1px; border: none;resize:none;} /* 在外围加个标签,宽高设为100%可实现无缺口100% */ input[type=button],button{ text-align: center; cursor:pointer; background:none;border: none; border-radius: .3rem; letter-spacing: 1px;} input { background-color: white; border: none;} input[type=file]{cursor:pointer;} /*占位符*/ input[type=file]::-webkit-file-upload-button { font-size: 0; } /* 清除webkit浏览器文件上传控件隐性占位符 */ input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color:#ccc; } input:-moz-placeholder, textarea:-moz-placeholder { color:#ccc; } input::-moz-placeholder, textarea::-moz-placeholder { color: #ccc; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #ccc; } /* 浮动 */ .fl,.flc { float: left !important; } .fr,.frc { float: right !important; } .flc:after,.frc:after {display:block; content:"."; height:0; clear:both; overflow:hidden; visibility:hidden;} /* 功能 */ .hide { display:none !important; }/*隐藏*/ .ellipsis-1 { overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;word-break:keep-all;white-space:nowrap; } /*单行省略，需固定宽度*/ .ellipsis{ position:relative;overflow:hidden; }.ellipsis:after{position:absolute;bottom:0;right:0;content:"..."} /* 字数省略 需设置line-height及属性data-ellipsis="2",属性值表示行数 */ .keep { position:fixed !important;border-bottom: #ccc 1px solid !important; } /*滚动保持*/ .empty{}.empty-active:after{ display:block;width:100%;content:'暂无任何数据！';padding:1rem 0;font-size:.9rem;text-indent:1rem;letter-spacing:.1rem;} /*列表空提醒*/ .mask {display: none;opacity:0;position: fixed;left: 0;z-index: 10;width: 100%; height: 100%;background-color:rgba(0, 0, 0, 0.4); -moz-transition: all 0.25s linear; -o-transition: all 0.25s linear; -webkit-transition: all 0.25s linear; transition: all 0.25s linear;}/*遮罩层*/ .mask-show{display:block;opacity:1;} .pop {position: fixed;left: 0;top:0; z-index: 11;width: 100%;background-color:white; } .web .pop { top: 2.5rem; } /*移动App的web弹出框需要添加header的高值作为top*/ .close-pop{} /* 效果 */ .shadow,.all-shadow * {box-shadow: 0 0 .3rem #ddd !important;} .gradient,.all-gradient * {background: -webkit-linear-gradient(top, #fff4f4,#fff);} .radius,.all-radius * { border-radius: .2em;} .left-radius {border-top-left-radius: .2em;border-bottom-left-radius: .2em;} .right-radius {border-top-right-radius: .2em;border-bottom-right-radius: .2em;} .top-radius {border-top-left-radius: .2em;border-top-right-radius: .2em;} /*动画*/ .transform-top { -moz-transition: transform 0.3s ease-out; -o-transition: transform 0.3s ease-out; -webkit-transition: transform 0.3s ease-out; transition: transform 0.3s ease-out; -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); -webkit-transform: translateY(-100%); transform: translateY(-100%); } .transform-down { -moz-transition: transform 0.3s ease-out; -o-transition: transform 0.3s ease-out; -webkit-transition: transform 0.3s ease-out; transition: transform 0.3s ease-out; -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } .zoomIn {-webkit-animation-duration: .5s; animation-duration: .5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: zoomIn; animation-name: zoomIn; } .bounceIn { -webkit-animation-duration: .75s; animation-duration: .75s; -webkit-animation-fill-mode: both; animation-fill-mode: both;-webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } /* ---------------------------------- 主题A开始 ---------------------------------- */ /* 母版样式 */ .app{display:table;width:100%;height:100%;} .app>* { display: table-row; } .app>:nth-child(2) { width: 100%;height:100%; } .app>:first-child,.header{ top:0; width: 100%;height: 2.5rem;line-height:2.5rem;box-shadow: 0 0 .3rem #ccc;} .noWeb .app>:first-child,.noWeb .header{display:none;} /*手机APP隐藏header*/ .app>:last-child,.footer{ bottom:0;width: 100%; /*height: 4rem;*/}/*height:无定义高度，当需要页脚时可在当前页定义页脚，并添加标签<div class="footer"></div>即可*/ .header,.footer{ position:fixed;display:table;z-index:100;} .header>*{display:table-cell;font-size:.9rem;color:white;font-weight:normal;letter-spacing:1px;} .header .back-btn { width: 3rem; } .A-color{ color: #00c1d9 } .A-color-gray {color: #ccc} .A-color-error { color: #ff8181 } .A-color-success { color:green } .A-color-disabled { color: #999 } .A-border { border-color: #ccc } .A-border-top{ border-top:1px solid #ccc} .A-border-bottom {border-bottom:1px solid #ccc } .A-border-left { border-left:1px solid #ccc } .A-border-right{ border-right:1px solid #ccc } .A-border-none{border:none !important;} .A-bg {background-color:#00c1d9 !important } /* 主题点击效果 */ .A-bg-body { background-color: #d9d9d9; } /* 主题body背景 */ .A-bg-bar {background-color:#e6e6e6 !important } /* 主题点击效果 */ .A-bg-oval{background: #F09819; background: -webkit-radial-gradient(#00d2ff, #3a7bd5); background: radial-gradient(#00d2ff, #3a7bd5);} .A-icon-filter{ background: url(/Image/Ico/filter.png) center no-repeat;background-size:1.3rem;} .A-icon-user{ background: url(/Image/Ico/user.png) center no-repeat;background-size:1.4rem;} .A-icon-close{ background: url(/Image/Ico/close.png) center no-repeat;background-size:1.8rem;} .A-icon-location-blue{ background: url(/Image/Ico/location_blue.png) left no-repeat;background-size:1.4rem;} .A-icon-save-white{ background: url(/Image/Ico/save_white.png) center no-repeat;background-size:1.4rem;} .A-icon-upload-white{ background: url(/Image/Ico/upload_white.png) center no-repeat;background-size:1.3rem;} .A-icon-delete-white{ background: url(/Image/Ico/delete_white.png) center no-repeat;background-size:1.4rem;} .A-icon-arrow-down{ background: url(/Image/Ico/arrow_down.png) 1rem center no-repeat;background-size:.8rem .4rem;} .A-icon-arrow-left{ background: url(/Image/Ico/arrow_left.png) 1rem center no-repeat;background-size:.5rem;} .A-icon-arrow-right-black { background: url(/Image/Ico/arrow_right_black.png) right no-repeat; background-size: 0.6rem;} .A-icon-agree-black{ background: url(/Image/Ico/agree_black.png) left top no-repeat; background-size: 1.1rem;text-indent:1.3rem;} .A-btn-red { display: block; margin: 1rem auto; padding: .4rem 2.5rem; text-align: center; border-radius: .3rem; color: white; font-size: .9rem; letter-spacing: 1px; background-color: #f98c54; } .A-btn-red.active,.A-btn-red:active{background-color: #F17434;} .A-btn-red[disabled]{background-color: #ccc;} .A-active-none{ cursor:auto!important;}.A-active-all,.A-active,.A-active-general-all-second,.A-active-general-all,.A-active-general {} /* 点击效果索引 */ .A-active-effect {background-color:#00b5cb !important } /* 主题点击效果 */ .A-active-general-effect {background-color:#e5e5e5 !important } /* 普通点击效果 */ /* ---------------------------------- 主题A结束 ---------------------------------- */
公共脚本：
var Regex = { phone: /^(((\+86)|(86))?1[3|5|7|8|][0-9]{9})$/, email:/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/, vcode: /^\d{4}$/, nickName: /^[a-zA-Z0-9\u4e00-\u9fa5]{2,18}$/, userName: /^[a-z][a-z0-9_]{4,18}$/, password: /^[a-zA-Z0-9]{6,18}$/, name: /^[\u4e00-\u9fa5]{2,8}$/, search: /^[a-zA-Z0-9\u4e00-\u9fa5]{2,20}$/, }; //跳转url function go(_href, _time) { setTimeout(function () { location.href = _href; }, _time ? _time : 130); } //Cookie Operation function setCookie(name, value, days) { var exp = new Date(); exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000); document.cookie = name + "=" + escape(value) + ";path=/;expires=" + exp.toGMTString(); } function getCookie(name) { var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)")); if (arr != null) { return unescape(arr[2]); } else { return null; } } function delCookie(name) { var exp = new Date(); exp.setTime(exp.getTime() - 1); var cval = getCookie(name); if (cval != null) document.cookie = name + "=" + cval + ";path=/;expires=" + exp.toGMTString(); } //dependent on Cookie Operation function GPS() { /*4413: setCookie("lng", 114.422921, 1);setCookie("lat", 23.124245, 1);*/ if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( function (position) { setCookie("lng", position.coords.longitude, 1); setCookie("lat", position.coords.latitude, 1); }, function (err) { var tip = [ "未知错误！", "没有权限！", "网络故障或位置的卫星无法联系！", "获取地理位置超时！" ]; try { tip = tip[err.code]; } catch (e) { tip = "未知错误！"; } }, { enableHighAccuracy: false, maximumAge: 1000, timeout: 15000 }); } } //canvas.toDataURL('image/jpeg'), and convert to blob,blob is a File Object. but UC don't support function dataURLtoBlob(dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) u8arr[n] = bstr.charCodeAt(n); window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder; if (window.BlobBuilder) { var bb = new BlobBuilder(); bb.append([u8arr]); return bb.getBlob(mime); } else return new Blob([u8arr], { type: mime }); } //html image src convert to dataUrl function imageToDataURL(url, callback, mime) { var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), img = new Image; img.crossOrigin = 'Anonymous'; img.onload = function () { canvas.height = img.height; canvas.width = img.width; ctx.drawImage(img, 0, 0); var dataURL = canvas.toDataURL(mime || 'image/jpeg'); callback.call(this, dataURL); canvas = null; }; img.src = url; } function asciiHexToStr(str) { var symbols = " !\"#$%&'()*+,-./0123456789:;<=>?@" + "ABCDEFGHIJKLMNOPQRSTUVWXYZ" + "[\\]^_`" + "abcdefghijklmnopqrstuvwxyz" + "{|}~"; str = str.toLowerCase(); var hex = "0123456789abcdef"; var text = ""; var i = 0; for (i = 0; i < str.length; i = i + 2) { var char1 = str.charAt(i); if (char1 == '') {//分隔符char1== ":"; i++; char1 = str.charAt(i); } var char2 = str.charAt(i + 1); var num1 = hex.indexOf(char1); var num2 = hex.indexOf(char2); var value = num1 << 4; value = value | num2; var valueInt = parseInt(value); var symbolIndex = valueInt - 32; var ch = '?'; if (symbolIndex >= 0 && value <= 126) { ch = symbols.charAt(symbolIndex) } text += ch; } return text; } function strToAsciiHex(str) { var symbols = " !\"#$%&'()*+,-./0123456789:;<=>?@" + "ABCDEFGHIJKLMNOPQRSTUVWXYZ" + "[\\]^_`" + "abcdefghijklmnopqrstuvwxyz" + "{|}~"; var hexChars = "0123456789abcdef"; var text = ""; for (i = 0; i < str.length; i++) { var oneChar = str.charAt(i); var asciiValue = symbols.indexOf(oneChar) + 32; var index1 = asciiValue % 16; var index2 = (asciiValue - index1) / 16; if (text != "") text += "";//分隔符text += ":"; text += hexChars.charAt(index2); text += hexChars.charAt(index1); } return text; } //jQuery初始化 $(function () { //android 触摸延迟，4.2+ webview穿透bug修复 (function AndroidBug() { var userAgent = navigator.userAgent; var index = userAgent.indexOf("Android"); var isAndroid = index > -1; if (!isAndroid || (isAndroid && parseFloat(userAgent.slice(index + 8)) > 4.2)) $.getScript("/Scripts/fastclick.js", function () { FastClick.attach(document.body); }); })(); //监听所有元素的点击状态 $(document).on('click', function (e) { var func = function ($node, classStr) { $node.addClass(classStr); setTimeout(function () { $node.removeClass(classStr); }, 130); } var $obj = $(e.target); func($obj, 'active');; //主题点击效果监听 $.each(['A-active', 'A-active-general'], function (i, v) { if ($obj.hasClass(v)) func($obj, v + '-effect'); else { func($obj.closest('.' + v), v + '-effect'); $.each($obj.closest('.' + v + '-all').find('>*'), function (j, o) { if (!$(o).hasClass('A-active-none') && ($(o).hasClass('active') || $(o).find('.active').length > 0)) func($(o), v + '-effect'); }) $.each($obj.closest('.' + v + '-all-second').find('>* :first-child'), function (j, o) { if (!$(o).hasClass('A-active-none') && ($(o).hasClass('active') || $(o).find('.active').length > 0)) func($(o), v + '-effect'); }) } }) //后退事件 排除同时为弹出框事件，如返回弹出是否放弃当前编辑 if ($obj.hasClass('back-btn') && $obj[0].className.indexOf('pop-') == -1) setTimeout(function () { history.go(-1); }, 130); //弹出框显示触发按钮(btn:class='pop-xxx',dialog:class='pop pop-xxx-dialog')事件 var firstClass = $obj[0].className.split(' ')[0]; if (firstClass.indexOf('pop-') > -1) { var $dlg = $('.' + firstClass + '-dialog'); if ($dlg.hasClass('transform-top')) $dlg.toggleClass('transform-down'); //若有动画 else $dlg.toggleClass(); $('.mask').toggleClass('mask-show'); if ($obj.hasClass('pop-filter')) $obj.toggleClass('A-icon-filter A-icon-close'); } //弹出框关闭触发事件，遮罩层mask与pop-close按钮事件 if ($obj.hasClass('mask') || $obj.hasClass('close-pop')) { $('.mask').removeClass('mask-show'); var $pop = $(".pop"); if ($pop.hasClass('transform-top')) $pop.removeClass('transform-down'); else $pop.hide(); if ($pop.hasClass('pop-filter-dialog')) $('.pop-filter').toggleClass('A-icon-filter A-icon-close'); } }); //文字省略 $('*[data-ellipsis]').width(function () { return $(this).width(); }).height(function () { if ($(this).attr('data-ellipsis') == 1) { $(this).removeAttr('data-ellipsis').addClass('ellipsis-1'); return $(this).height(); } var maxHeight = $(this).attr('data-ellipsis') * parseInt($(this).css('line-height')); if ($(this).height() > maxHeight) $(this).removeAttr('data-ellipsis').addClass('ellipsis'); return maxHeight; }) //列表空提醒 $('.empty').each(function (i, o) { if ($(o).find('>*').length == 0) $(o).removeAttr('empty').addClass('empty-active'); }) //屏蔽滚动：移动端弹出框时，禁止滚动 if (navigator.userAgent.indexOf("Mobile") > -1) document.addEventListener('touchmove', function (event) { if ($(".mask").is(":visible")) event.preventDefault(); }); //override alert alert = function (content) { $('.alert').remove(); $('body').append("<p class='alert'>" + content + "</p>"); var $alert = $('.alert'); $alert.css({ 'display': 'none', 'position': 'fixed', 'z-index': '200', 'padding': '10px', 'background-color': 'rgba(0, 0, 0, 0.60)', 'color': 'white', 'border-radius': '.8rem', 'top': arguments[1] ? $(arguments[1]).offset().top + 100 : $(document.body).height() - 100 }).css('left', $(document).width() / 2 - $alert.width() / 2 - 10).fadeIn(function () { setTimeout(function () { $('.alert').fadeOut(500); setTimeout(function () { $('.alert').remove(); }, 500); }, 2000); }); } //滚动加载(请求地址，页面参数对象{cur:当前页面序号，total:总页面数，time:分页时间}，url参数对象，请求成功回调，触发滚动加载的距离，相对于document.body,范围为0-1) function ScrollLoad(_url, _pages, _callback, _distance) { return { 'load': function (_params) { $(document).scroll(function () { if (_pages.cur < _pages.total && $(this).height() - $(this).scrollTop() < $(document.body).height() * (1 + (_distance ? _distance : 1))) { _params.page = _pages.cur + 1; _params.time = _pages.time; $.post(_url, _params, function (_response) { _callback(_response); _pages.cur++; });//请求时自动添加page、time参数 } }) } }; }; //元素滚动显隐 function scrollHideShow() { var xy; $(window).scroll(function () { var sTop = $(this).scrollTop(); if (xy < sTop) { $(".box-fixed").hide(); } else if (xy > sTop) { $(".box-fixed").show(); } xy = sTop; }); } //元素滚动保持,相对于header function scrollKeep() { var actionbarHeight = $('.header').height(); var distance = $('.box-fixed')[0].getBoundingClientRect().top; $(window).scroll(function () { if ($(window).scrollTop() >= distance) { $('.box-fixed').css('top', actionbarHeight); $('.box-fixed').addClass('keep'); } else $('.box-fixed').removeClass('keep') }); } }) //------------母版页逻辑------------- if (getCookie("lng") == null) GPS(); if (getCookie("gps_city") == null) setCookie("gps_city", escape("惠州"), 30);
显示结果：
