【ca88网页登录】论如何在手机端web前端实现自定义原生控件的样式,手机端样式调用适配web端的代码

论怎样在三哥伦比亚大学端web前端完结自定义原生控件的样式

2015/10/30 · ca88网页登录,HTML5 ·
原生控件

原作出处:
卖烧烤夫斯基【ca88网页登录】论如何在手机端web前端实现自定义原生控件的样式,手机端样式调用适配web端的代码。   

手提式有线电电话机开发webapp的同室肯定蒙受过如此难题,怎样为丑极了的无绳电话机成分运用自定义的体裁。首先,要弄驾驭为何要定义手提式有线电话机原生控件的体制,就需求探视手提式有线电话机的那多少个原生框样式的丑陋摸样:

android:

ca88网页登录 1

ios:

ca88网页登录 2

方案1
瞩目一点: 貌似大漠今年(1柒)年推荐使用vhvw开展适配了。
https://github.com/amfe/lib-flexible/issues/154
方案2
大漠 使用Flexible达成手淘H伍页面包车型大巴极限适配
小说地址:
https://github.com/amfe/article/issues/17
参阅了大漠的文章
除了大段文字应用px来书写,别的基本使用rem 进行Flexible进展示公布局
出于现行反革命有的浏览器不扶助 vw,所以小编后天应用的是 master
的分支 版本0.3.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: \5FAE\8F6F\96C5\9ED1,\5B8B\4F53;-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>
}

来得结果:

ca88网页登录 3

@charset ‘utf-8’;* { margin : 0 ; padding : 0 ; -moz-box-sizing :
border-box ; -webkit…

代码:/Files/cappuccino/Compass.rar

无法的挑选

看完了这一个丑陋的界面成分,我们就足以通晓当大家把他们揭发在产品同学的眼中时,那种层层的杀气了。可以看到,界面成分1贰分丑陋,产品兄弟是必然不会承受的。然而,不得不说那个控件在触发后的效劳比pc机上的要炫酷。那里面以apple机的滚筒选用最为优异.以下是它们触发后调用原生控件的功效:

android:

ca88网页登录 4ca88网页登录 5ca88网页登录 6

ios:

ca88网页登录 7ca88网页登录 8ca88网页登录 9

不得不说这么些样式原生弹出样式是符合大家设计的口径的,因为它即反映了UI界面包车型大巴和睦和体验度,又不损耗任何web品质,关键是大家怎么着都不需求做。产品BZJ君看到了,指明要在apple机下要滚筒的效应用来摘取日期大概下来单。如若我们不能消除掉界面文本框的体制难题,那么不论是后边的意义多炫酷,始终使无法令人接受的。恐怕你会想花时间写类似的机能?作者不否认你能够写出来,不过急需多少日子的工作量吗?也不少人采纳了插件的方法。通过jq插件(若是您的品类中没在运用jq,为了那几个意义无奈下载jq和其插件)来落实,其实是十分吃力不讨好的作业。一个是插件那种事物出了难点也许转移了急需后它会变得老大的不得了扩张,第四个自然是思索到能源加载,在手机端尤其要求思量。由此,选用插件是下下策!

几个的概念定义:

竭泽而渔办法

标题来了,既想要弹出层的炫酷效果,又想自定义控件在界面呈现的体制。如何做呢?露珠曾经尝试过最简便易行的方法去重写css去改变它们的样式,不过就是在google若干时辰,也不曾找到如意的结果。露珠也尝尝过-webkit-appearance属性,但它也展现不顺手。况且大家还亟需万分多机型(安卓,苹果,wp?)。无论怎么着,走改变原来样式的路是无用的。露珠经过1番合计,找到了自以为不行好的缓解措施,也是那篇博文的主题:既然控件在页面包车型客车体裁不得以变更,那就隐藏它,但是!不是用display:none隐藏,也不是把width和height设置为0,大家希望的是看不到它们的本来面目样式,而希望保留对它们的tap和focus事件。但是除外上述的办法,还有何能使它们看不见呢?聪明的您肯定想到了,对,正是opacit:0,
通过将控件的不反射率设置为0,大家得以让要素继续让它留在界面上,并且保持随时响应focus事件的景观。大家要做的,是为该控件设置为相对定位,覆盖在大家自定义样式的一个element上。那样,用户看到的是下边包车型客车element,但当她的手去触碰此element时,他实在触碰的是完全透显然留在界面上的原生控件!如下图所示:

ca88网页登录 10

那如故率先步,接下去大家必要为控件绑定响应事件,超越壹全场合下大家需求绑定的事件都以onchange,一旦选取成功,就把值复制到自定义的element上去。那样马到成功了!不管你是通过表单也许post提交,你取到的值依旧是控件的值,自定义的element只承担呈现,不承担作业!

ca88网页登录 11

物理像素(physical pixel)

1个物理像素是荧屏(手提式无线电话机显示器)上十分的小的物理突显物理单元,在操作系统的调度下,每三个配备都有投机的颜色值和亮度值。正是这个设备像素的微小距离诈骗了大家肉眼看到的图像效果。

ca88网页登录 12

image.png

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图