图片 8

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

Posted by

无奈的选择

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

android:

图片 1图片 2图片 3

ios:

图片 4图片 5图片 6

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

1、在比较旧的浏览器中(比如IE9及以下,不支持 fileAPI,不支持
XMLHttprequest level2 只能用表单post文件)上传图片时,只能使用 表单
post,处于安全上的考虑,input[type=”file”]
的文件选择按钮样式并不能随意修改(不过可以修改input
的透明度),可能会跟设计师的设计格格不入,这时可以使用透明效果来自定义上传按钮。
2、控件宽度最好不要超过60px,因为file控件浏览按钮的宽度无法修改,在firefox下约为60px。如果超出60px,不要设置控件的鼠标样式,由于firefox下file控件的鼠标样式只在浏览按钮上生效,如果设置鼠标样式会造成控件左边和右边样式不一致。
3、控件文字显示层的行高与控件容器层的高度保持一致以保证文字垂直居中。
4、由于安全性问题,文件上传控件必须使用鼠标点击浏览按钮弹出文件选择窗并选择文件,才能向服务器上传文件(不支持
file API ),通过js触发file控件的click()
事件来弹出文件选择窗然后选择文件的方式是无法上传文件的,因此必须使file控件覆盖在文字显示层上面,将file控件样式设置为透明来显示下面的文字层。
5、xmlhttprequest组件(level1 , level
2已经支持二进制数据上传和跨域)是无法上传文件的,异步上传文件需要使用
iframe 引入上传控件使用 表单 post
数据,可以把文件上传功能单独放在iframe内实现,也可以仅仅把处理图片上传的服务器脚本指定在iframe内打开
(设置form表单的 target 指向 iframe 窗口)。

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

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

原文出处:
卖烧烤夫斯基   

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

android:

图片 7

ios:

图片 8

上传

代码实现

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>

 

upload…

相关文章

Leave a Reply

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