菜单

论如何在哥哥大端web前端完结自定义原生控件的样式

2019年3月22日 - 金沙前端

万般无奈的选项

看完了那一个难看的界面成分,大家就能够掌握当咱们把她们暴光在成品同学的眼中时,那种层层的杀气了。能够看出,界面成分十三分猥琐,产品兄弟是毫无疑问不会经受的。可是,不得不说那么些控件在接触后的功用比pc机上的要炫酷。那当中以apple机的滚筒采纳最好非凡.以下是它们触发后调用原生控件的功力:

android:

www.js55.com 1www.js55.com 2www.js55.com 3

www.js55.com,ios:

www.js55.com 4www.js55.com 5www.js55.com 6

只可以说那些样式原生弹出样式是顺应大家布署的规格的,因为它即反映了UI界面包车型客车亲善和体验度,又不损耗任何web质量,关键是大家怎么样都不须求做。产品BZJ君看到了,指明要在apple机下要滚筒的遵守用来选拔日期或然下来单。假若大家无法消除掉界面文本框的体裁难点,那么不论是前面包车型地铁效应多炫酷,始终使不可能令人承受的。只怕你会想花时间写类似的意义?作者不否定你能够写出来,可是必要有些日子的工作量吗?也不在少数人挑选了插件的办法。通过jq插件(假若您的种类中没在应用jq,为了这一个意义无奈下载jq和其插件)来落到实处,其实是非常吃力不讨好的工作。2个是插件那种事物出了难点依然转移了须求后它会变得要命的不佳扩充,第二个自然是考虑到财富加载,在手提式有线电话机端特别必要考虑。由此,接纳插件是下下策!

① 、对插件自定义选项的做法看不太懂

  插件的规律很不难,宗旨的函数正是3个render(),用于渲染出tab的体制:

2、编写js脚本

消除措施

题目来了,既想要弹出层的炫酷效果,又想自定义控件在界面展现的体裁。怎么做呢?露珠曾经尝试过最简易的格局去重写css去改变它们的体制,可是尽管在google若干小时,也远非找到如意的结果。露珠也尝尝过-webkit-appearance属性,但它也展现白璧微瑕。况且我们还须求般配多机型(安卓,苹果,wp?)。无论怎么着,走改变原来样式的路是低效的。露珠经过一番盘算,找到了自认为拾分好的化解方法,也是这篇博文的大旨:既然控件在页面包车型客车体制不能改变,那就暗藏它,但是!不是用display:none隐藏,也不是把width和height设置为0,大家愿意的是看不到它们的原来样式,而愿意保留对它们的tap和focus事件。然而除了以上的办法,还有啥样能使它们看不见呢?聪明的你势必想到了,对,就是opacit:0,
通过将控件的不发光度设置为0,我们能够让要素继续让它留在界面上,并且维持随时响应focus事件的情形。我们要做的,是为该控件设置为相对定位,覆盖在我们自定义样式的3个element上。那样,用户观察的是底下的element,但当他的手去触碰此element时,他其实触碰的是一心透显明留在界面上的原生控件!如下图所示:

www.js55.com 7

那依旧第1步,接下去大家供给为控件绑定响应事件,当先百分之三十三状态下大家须求绑定的风云都是onchange,一旦选拔成功,就把值复制到自定义的element上去。那样马到成功了!不管您是因而表单可能post提交,你取到的值照旧是控件的值,自定义的element只担负呈现,不担当作业!

www.js55.com 8

澳门金沙游戏,// build main options before element iteration
var opts = $.extend({}, $.fn.tabBox.defaults, options);
澳门金沙国际娱乐场,// iterate and reformat each matched element
return this.each(function() {
$this = $(this);
// build element specific options
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

width和height定义“盒子”的增加率和中度,basePath用于定义使用插件的页面对插件文件夹的相对路径。那几个选项的出现时不得已而为之,因为选项卡的体裁中用到了图片,而需求求有两个标准化路径才能正确找到图片的路线。那也是参考了二个叫jqtransform(

1、引入jquery文件

论怎么着在手提式无线电话机端web前端达成自定义原生控件的体裁

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

初稿出处:
卖烧烤夫斯基   

手提式有线电话机支付webapp的同室肯定碰到过如此难题,怎么着为丑极了的手提式有线电话机成分选取自定义的样式。首先,要弄驾驭怎么要定义手提式有线电电话机原生控件的体制,就要求探视手提式无线电话机的那多少个原生框样式的丑陋摸样:

android:

www.js55.com 9

ios:

www.js55.com 10

复制代码 代码如下:

)以及文书档案中援引的MikeAlsup写的一篇 A Plugin Development Pattern 。英语不是很…

复制代码 代码如下:

结束语

出品B君看到了猥琐的事物消失了,ios下的滚筒又炫酷滚起来了,肯定会拍拍你的肩头说兄弟干得正确。那篇博文也不仅仅是有关解决控件样式的题材,在其他类似的气象下,用遮罩层的点子掩盖你无法的地点是值得借鉴的。其实在支付中类似的的小花招很多,只要找到了门槛和艺术,一行代码抵得上二万行代码(借用刘頔的随笔名)。固然是个一点都不大的小花招,大篇幅的用一篇博客来上课是矫枉过正夸大其辞和麻烦,不过前端开发事无巨细,希望对碰着类似难题恐怕现在亟需化解的同室有帮带。

1 赞 收藏
评论

www.js55.com 11

查了一晃jq的官方插件编写文书档案()以及文书档案中推介的MikeAlsup写的一篇A Plugin Development
Pattern。泰语不是很好,但要么努力看下去(既学习到知识又能练习塞尔维亚共和国(Republic of Serbia)语,何乐而不为),里丑捧心的写了一个处女作——tabBox。

复制代码 代码如下:

html代码:

代码实现

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>

 

$(“.tabBox h2”).click(function(){
$(“.tabBox h2”).removeClass(“curTab”);
$(this).addClass(“curTab”);
$.fn.tabBox.render();
});

复制代码 代码如下:

js脚本:

相关文章

发表评论

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

网站地图xml地图