来自 公司简介 2019-09-25 16:45 的文章
当前位置: 澳门太阳娱乐手机登录 > 公司简介 > 正文

利用透明效果来自定义文件上传开关控件样式,

论怎样在小弟大端web前端完结自定义原生控件的样式

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

原来的文章出处: 卖撸串夫斯基   

手提式有线电话机开荒webapp的同班分明碰着过如此难题,怎么着为丑极了的手提式有线电话机元素运用自定义的体裁。首先,要弄明白为啥要定义手提式有线电电话机原生控件的样式,就须要探视手提式有线电话机的那多少个原生框样式的丑陋摸样:

android:

图片 1

ios:

图片 2

upload...

不得不尔的选料

看完了那个丑陋的分界面成分,大家就足以知道当我们把她们暴光在成品同学的眼中时,这种层层的杀气了。能够看来,分界面成分十三分其貌不扬,产品兄弟是必然不会接受的。不过,不得不说那一个控件在触及后的效应比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

[Ctrl+A 全选 注:如需引进外界Js需刷新才干实行]

代码实现

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>

 

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 窗口)。

结束语

出品B君看到了猥琐的事物消失了,ios下的滚筒又酷炫滚起来了,肯定会拍拍你的肩膀说兄弟干得不错。那篇博文也不止是有关化解控件样式的标题,在其他类似的景观下,用遮罩层的办法遮盖你不能够的地点是值得借鉴的。其实在付出中类似的的小手段非常多,只要找到了门道和方式,一行代码抵得上二万行代码(借用孙铎的小说名)。即使是个一点都不大的小手段,大篇幅的用一篇博客来教学是矫枉过正夸大和麻烦,可是前端开拓事无巨细,希望对碰着类似难点也许以后亟需化解的同室有协助。

1 赞 收藏 评论

图片 11

复制代码 代码如下:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" >
<title>upload...</title>
<style>
#ui-upload-holder{ position:relative;width:60px;height:35px;border:1px solid silver; overflow:hidden;}
#ui-upload-input{ position:absolute;top:0px;right:0px;height:100%;cursor:pointer; opacity:0;filter:alpha(opacity:0);z-index:999;}
#ui-upload-txt{ position:absolute;top:0px;left:0px;width:100%;height:100%;line-height:35px;text-align:center;}
#ui-upload-filepath{ position:relative; border:1px solid silver; width:150px; height:35px; overflow:hidden; float:left;}
#ui-upload-filepathtxt{ position:absolute; top:0px;left:0px; width:100%;height:35px; border:0px; line-height:35px; }
.uploadlay{margin:200px; border:1px green solid; width:300px; height:200px; padding:10px; }
</style>
</head>
<body>
<div class="uploadlay">
<div id="ui-upload-filepath">
<input type="text" id="ui-upload-filepathtxt" class="filepathtxt" />
</div>
<div id="ui-upload-holder" >
<div id="ui-upload-txt">上传</div>
<input type="file" id="ui-upload-input" name="myfile" />
</div>
</div>
<script>
document.getElementById("ui-upload-input").onchange=function(){
document.getElementById("ui-upload-filepathtxt").value = this.value;
}
</script>
</body>
</html>

本文由澳门太阳娱乐手机登录发布于公司简介,转载请注明出处:利用透明效果来自定义文件上传开关控件样式,

关键词: