美高梅游戏平台网站论如何在手机端web前端实现

来源:http://www.sh-fengwen.com 作者: 营养排行 人气:141 发布时间:2019-11-07
摘要:论如何在手机端web前端实现自定义原生控件的样式 2015/10/30 · HTML5 ·原生控件 原文出处:卖烧烤夫斯基    手机开发webapp的同学一定遇到过这样问题,如何为丑极了的手机元素应用自定

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

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

原文出处: 卖烧烤夫斯基   

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

android:

美高梅游戏平台网站 1

ios:

美高梅游戏平台网站 2

方案1
注意一点: 貌似大漠今年(17)年推荐使用vhvw进行适配了。
https://github.com/amfe/lib-flexible/issues/154
方案2
大漠 使用Flexible实现手淘H5页面的终端适配
文章地址:
https://github.com/amfe/article/issues/17
参阅了大漠的文章
除了大段文字使用px来书写,其余基本使用rem 进行Flexible进行布局
由于现在一部分浏览器不支持 vw,所以我现在使用的是 master 的分支 版本0.3.2

无奈的选择

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

android:

美高梅游戏平台网站 3美高梅游戏平台网站 4美高梅游戏平台网站 5

ios:

美高梅游戏平台网站 6美高梅游戏平台网站 7美高梅游戏平台网站 8

不得不说这些样式原生弹出样式是符合我们设计的原则的,因为它即体现了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时,他实际触碰的是完全透明确留在界面上的原生控件!如下图所示:

美高梅游戏平台网站 9

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

美高梅游戏平台网站 10

物理像素(physical pixel)

一个物理像素是显示器(手机屏幕)上最小的物理显示物理单元,在操作系统的调度下,每一个设备都有自己的颜色值和亮度值。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。

美高梅游戏平台网站 11

image.png

代码实现

XHTML

<html> <head> <style> body{ position: relative; } .front { position: absolute; opacity: 0; height: 30px; width: 180px; } .back { height: 30px; width: 386px; border: 1px dashed #19a39e; line-height: 30px; text-align: center; font-size: 11px; } </style> </head> <body> <input type="date" onchange="document.getElementsByClassName('back')[0].innerHTML = this.value;"> <div class="back">我是自定义element,我上面覆盖着一层看不见的input</div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
   <head>
       <style>
           body{
               position: relative;
           }
           .front {
               position: absolute;
               opacity: 0;
               height: 30px;
               width: 180px;
           }
           .back {
                height: 30px;
                width: 386px;
                border: 1px dashed #19a39e;
                line-height: 30px;
                text-align: center;
                font-size: 11px;
           }
       </style>
   </head>
    <body>
        <input type="date" onchange="document.getElementsByClassName('back')[0].innerHTML = this.value;">
        <div class="back">我是自定义element,我上面覆盖着一层看不见的input</div>
    </body>
</html>

 

设备独立像素(density-independent pixel)

设备独立像素也称为密度无关像素,可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素),然后由相关系统转换为物理像素。

结束语

产品B君看到了丑陋的东西消失了,ios下的滚筒又炫酷滚起来了,肯定会拍拍你的肩膀说兄弟干得不错。这篇博文也不仅仅是关于解决控件样式的问题,在其他类似的情况下,用遮罩层的方法掩盖你无能为力的地方是值得借鉴的。其实在开发中类似的的小花招很多,只要找到了诀窍和方法,一行代码抵得上一万行代码(借用刘震云的小说名)。虽然是个很小的小花招,大篇幅的用一篇博客来讲解是过于夸张和繁琐,不过前端开发事无巨细,希望对遇到类似问题或者将来需要解决的同学有帮助。

1 赞 收藏 评论

美高梅游戏平台网站 12

CSS像素

CSS像素是一个抽像的单位,主要使用在浏览器上,用来精确度量Web页面上的内容。一般情况之下,CSS像素称为与设备无关的像素(device-independent pixel),简称DIPs。

本文由美高梅游戏平台网站发布于 营养排行,转载请注明出处:美高梅游戏平台网站论如何在手机端web前端实现

关键词:

上一篇:Label自适应中度/宽度 , 图片自适应

下一篇:没有了

最火资讯