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>

Views\Shared\_Layout.cshtml

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>

}

Views\Home\Index.cshtml

公共样式：

@charset 'utf-8';

*{margin:;padding:; 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:; } /* 清除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:; 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:;right:;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:;position: fixed;left:;z-index:;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:;}

.pop {position: fixed;left:;top:; z-index:;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:; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); }

50% { opacity:; }

}

@keyframes zoomIn {

from { opacity:; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); }

50% { opacity:; }

}

@-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:; -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:; -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:; -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:; -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:; -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:; -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:; 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:;width: 100%; /*height: 4rem;*/}/*height:无定义高度，当需要页脚时可在当前页定义页脚，并添加标签<div class="footer"></div>即可*/

.header,.footer{ position:fixed;display:table;z-index:;}

.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结束 ---------------------------------- */

Css\public.css

公共脚本：

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);

Scripts\public.js

显示结果：

巴特西

Web App 前端构建（纯净版）

最新文章

热门文章