计算机教程

jQuery插件 tabBox实现代码必赢娱乐棋牌

27 3月 , 2019  

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

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

原文出处:
卖烧烤夫斯基   

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

android:

必赢娱乐棋牌 1

ios:

必赢娱乐棋牌 2

查了一下jq的官方插件编写文档(http://docs.jquery.com/Plugins/Authoring)以及文档中推荐的Mike
Alsup写的一篇A Plugin Development
Pattern
。英语不是很好,但还是努力看下来(既学习到知识又能练习英语,何乐不为),照猫画虎的写了一个处女作——tabBox。

无奈的选择

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

android:

必赢娱乐棋牌 3必赢娱乐棋牌 4必赢娱乐棋牌 5

ios:

必赢娱乐棋牌 6必赢娱乐棋牌 7必赢娱乐棋牌 8

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

  顾名思义,这个插件就是方便的产生具有tab选项卡功能“盒子”的。看图一下就明白
必赢娱乐棋牌 9
这样功能在网页上是非常肠炎宁个的,不论前台后台。

解决方法

问题来了,既想要弹出层的炫酷效果,又想自定义控件在界面显示的样式。怎么办呢?露珠曾经尝试过最简单的方法去重写css去改变它们的样式,但是即使在google若干小时,也没有找到满意的结果。露珠也尝试过-webkit-appearance属性,但它也显得不尽如人意。况且我们还需要兼容多机型(安卓,苹果,wp?)。无论如何,走改变原始样式的路是行不通的。露珠经过一番思考,找到了自认为非常好的解决方法,也是这篇博文的主题:既然控件在页面的样式不可以改变,那就隐藏它,但是!不是用display:none隐藏,也不是把width和height设置为0,我们希望的是看不到它们的原始样式,而希望保留对它们的tap和focus事件。但是除了以上的方法,还有什么能使它们看不见呢?聪明的你一定想到了,对,就是opacit:0,
通过将控件的不透明度设置为0,我们可以让元素继续让它留在界面上,并且保持随时响应focus事件的状态。我们要做的,是为该控件设置为绝对定位,覆盖在我们自定义样式的一个element上。这样,用户看到的是底下的element,但当他的手去触碰此element时,他实际触碰的是完全透明确留在界面上的原生控件!如下图所示:

必赢娱乐棋牌 10

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

必赢娱乐棋牌 11

  在这,我首先提供了3个参数用于自定义插件,

代码实现

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>

 

复制代码 代码如下:

结束语

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

1 赞 收藏
评论

必赢娱乐棋牌 12

$.fn.tabBox.defaults = {
width : 260,
height : 200,
basePath : “tabBox/”
};

width和height定义“盒子”的宽度和高度,basePath用于定义使用插件的页面对插件文件夹的相对路径。这个选项的出现时不得已而为之,因为选项卡的样式中用到了图片,而必须要有一个基准路径才能正确找到图片的路径。这也是参照了一个叫jqtransform(http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/)的插件的做法,他也有个参数用于指定图片文件夹所在的位置。当然还有一种做法,就是想WebUI(http://www.jqueryui.com/)一样,样式写到css文件里,这样图片的引用就是先对与css文件的路径了,而这两个都是插件的组成部分,相对路劲是不变的。所以不用提供这个路径了。只是由于这个插件用到的样式比较少,所以没有采用这个方法。

  插件的原理很简单,核心的函数就是一个render(),用于渲染出tab的样式:

复制代码 代码如下:

$.fn.tabBox.render = function() {
$(“.tabBox”).css({
width : $.fn.tabBox.defaults.width+”px”,
height : $.fn.tabBox.defaults.height+”px”,
position : “relative”,
border : “1px #ccc solid”,
background : “url(“+$.fn.tabBox.defaults.basePath+”tabHead.gif) top left
repeat-x”
});
$(“.tabBox h2”).each(function(i){
$(this).css({
width : “80px”,
height : “30px”,
position : “absolute”,
“border-top” : “none”,
cursor : “pointer”,
left : 10+(i*80),
background : “url(“+$.fn.tabBox.defaults.basePath+”tabNormal.gif) top
right no-repeat”,
“text-align” : “center”,
“font-size” : “12px”,
“font-weight” : “normal”,
color : “#06c”,
“line-height” : “22px”
});
});
$(“.tabBox div”).each(function(){
$(this).css({
width : $.fn.tabBox.defaults.width+”px”,
height : ($.fn.tabBox.defaults.height-30)+”px”,
display : “none”,
position : “absolute”,
top : “30px”
});
});
$(“.tabBox h2.curTab”).css({
background : “url(“+$.fn.tabBox.defaults.basePath+”tabCurTab.gif) top
center no-repeat”,
“font-weight” : “bolder”
});
$(“.tabBox h2.curTab + div”).css({
display : “block”
});
};


相关文章

发表评论

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

网站地图xml地图