彩世界平台-彩世界时时app-彩世界开奖app苹果下载

热门关键词: 彩世界平台,彩世界时时app,彩世界开奖app苹果下载

您的位置:彩世界平台 > 学会党委 > 论如何在手机端web前端实现自定义原生控件的样

论如何在手机端web前端实现自定义原生控件的样

发布时间:2019-12-10 02:44编辑:学会党委浏览(178)

    论如何在手机端web前端实现自定义原生控件的样式

    2015/10/30 · HTML5 · 原生控件

    原文出处: 卖烧烤夫斯基   

    手机开发webapp的同学一定遇到过这样问题,如何为丑极了的手机元素应用自定义的样式。首先,要弄清楚为什么要定义手机原生控件的样式,就需要看看手机的那些原生框样式的丑陋摸样:

    android:

    图片 1

    ios:

    图片 2

    web移动端前端构建(含样式布局,纯净版不含其它样式框架),web样式

    @charset 'utf-8';
    *{margin:0;padding:0; -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%;font-family: 5FAE8F6F96C59ED1,5B8B4F53;-webkit-user-select:none;}
    p,a,span,textarea,b,input,dt,dd { color: #666;font-size: 0.9rem;}
    ul, ol{list-style:none;}
    img{border:none;}
    a { text-decoration:none;}
    textarea {resize:none;}
    input[type=button],button{text-align: center; background: none; border: 0; outline: none; }
    input { background: white; border: none; outline: none;}
    
    /*占位符颜色*/
    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 { float: left !important; }
    .fr { float: right !important; }
    .clear { clear: both; }
    
    /* 功能 */
    .hide { display:none !important; }/*隐藏*/
    .ellipsis { overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all; } /* 字数省略 */
    .keep { position:fixed !important;border-bottom: #ccc 1px solid !important; } /*滚动保持*/
    .mask {display: none;position: fixed;left: 0;z-index: 11;width: 100%; height: 100%;background-color:rgba(0, 0, 0, 0.4);}/*遮罩层*/
    
    /* 效果 */
    .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;}
    
    
    /* ---------------------------------- 主题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;}
    .app>:last-child,.footer{ bottom:0;width: 100%; /*height: 4rem;*/}/*height:无定义高度,当需要页脚时可在当前页定义页脚,并添加标签<div class="footer"></div>即可*/
    .header,.footer{ position:fixed;display:table;}
    .header>*{display:table-cell;font-size:1rem;color:white;}
    
    .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-bg {background-color:#00c1d9 !important } /* 主题点击效果 */
    .A-bg-body { background-color: #d9d9d9; } /* 主题body背景 */
    .A-bg-bar {background-color:#e6e6e6 !important } /* 主题点击效果 */
    
    .A-icon-filter{ background: url(/Image/Ico/filter.png) center no-repeat;background-size:1.4rem;}
    .A-icon-user{ background: url(/Image/Ico/user.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-btn-all,.A-btn {} /* 主题按钮 */
    .A-btn-click {background-color:#00b5cb !important } /* 主题点击效果 */
    /* ---------------------------------- 主题A结束 ---------------------------------- */
    

    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>
    <div class="app">
        <div></div>
        <div>@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>
    }
    

    显示结果:

    图片 3

    @charset 'utf-8';* { margin : 0 ; padding : 0 ; -moz-box-sizing : border-box ; -webkit...

    无奈的选择

    看完了这些丑陋的界面元素,我们就可以理解当我们把他们暴露在产品同学的眼中时,那种层层的杀气了。可以看到,界面元素十分丑陋,产品兄弟是肯定不会接受的。但是,不得不说这些控件在触发后的效果比pc机上的要炫酷。这其中以apple机的滚筒选择最为出色.以下是它们触发后调用原生控件的效果:

    android:

    图片 4图片 5图片 6

    ios:

    图片 7图片 8图片 9

    不得不说这些样式原生弹出样式是符合我们设计的原则的,因为它即体现了UI界面的友好和体验度,又不损耗任何web性能,关键是我们什么都不需要做。产品BZJ君看到了,指明要在apple机下要滚筒的效果用来选择日期或者下来单。如果我们不能解决掉界面文本框的样式问题,那么无论后面的效果多炫酷,始终使无法让人接受的。也许你会想花时间写类似的效果?我不否认你可以写出来,但是需要多少时间的工作量呢?也很多人选择了插件的方式。通过jq插件(如果你的项目中没在使用jq,为了这个效果无奈下载jq和其插件)来实现,其实是非常吃力不讨好的事情。一个是插件这种东西出了问题或者变换了需求后它会变得异常的不好扩展,第二个当然是考虑到资源加载,在手机端尤其需要考虑。因此,选择插件是下下策!

    解决方法

    问题来了,既想要弹出层的炫酷效果,又想自定义控件在界面显示的样式。怎么办呢?露珠曾经尝试过最简单的方法去重写css去改变它们的样式,但是即使在google若干小时,也没有找到满意的结果。露珠也尝试过-webkit-appearance属性,但它也显得不尽如人意。况且我们还需要兼容多机型(安卓,苹果,wp?)。无论如何,走改变原始样式的路是行不通的。露珠经过一番思考,找到了自认为非常好的解决方法,也是这篇博文的主题:既然控件在页面的样式不可以改变,那就隐藏它,但是!不是用display:none隐藏,也不是把width和height设置为0,我们希望的是看不到它们的原始样式,而希望保留对它们的tap和focus事件。但是除了以上的方法,还有什么能使它们看不见呢?聪明的你一定想到了,对,就是opacit:0, 通过将控件的不透明度设置为0,我们可以让元素继续让它留在界面上,并且保持随时响应focus事件的状态。我们要做的,是为该控件设置为绝对定位,覆盖在我们自定义样式的一个element上。这样,用户看到的是底下的element,但当他的手去触碰此element时,他实际触碰的是完全透明确留在界面上的原生控件!如下图所示:

    图片 10

    这还是第一步,接下来我们需要为控件绑定响应事件,大多数情况下我们需要绑定的事件都是onchange,一旦选择完成,就把值复制到自定义的element上去。这样大功告成了!不管你是通过表单或者post提交,你取到的值依然是控件的值,自定义的element只负责显示,不负责业务!

    图片 11

    本文由彩世界平台发布于学会党委,转载请注明出处:论如何在手机端web前端实现自定义原生控件的样

    关键词: