Jquery完毕自定义窗口随意的拖拽,tabBox落成代码

论如何在手机端web前端已毕自定义原生控件的体裁

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

原文出处:
卖烧烤夫斯基   

手机支付webapp的同学肯定境遇过这么问题,如何为丑极了的无绳电话机元素运用自定义的体裁。首先,要弄明白为啥要定义手机原生控件的样式,就须要探视手机的那个原生框样式的丑陋摸样:

android:

亚洲必赢官网 1

ios:

亚洲必赢官网 2

查了一下jq的官方插件编写文档()以及文档中援引的迈克Alsup写的一篇A Plugin Development
Pattern。乌克兰语不是很好,但要么努力看下来(既学习到知识又能训练阿尔巴尼亚语,为什么高兴还不去做),画虎不成反类犬的写了一个处女作——tabBox。

查了须臾间jq的合法插件编写文档(
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
这么效果在网页上是至极肠炎宁个的,不论前台后台。

  顾名思义,那个插件就是福利的发出负有tab选项卡作用“盒子”的。看图一下就精晓
亚洲必赢官网 10
如此效果在网页上是分外肠炎宁个的,不论前台后台。

选取jquery已毕拖拽,则必要求jquery的文件了,完成步骤:

化解措施

题目来了,既想要弹出层的炫酷效果,又想自定义控件在界面显示的体裁。如何是好呢?露珠曾经尝试过最不难易行的措施去重写css去改变它们的体制,不过就是在google若干钟头,也未尝找到如意的结果。露珠也尝试过-webkit-appearance属性,但它也体现不如愿。况且大家还亟需卓殊多机型(安卓,苹果,wp?)。无论怎么着,走改变原来样式的路是没用的。露珠经过一番思维,找到了自认为万分好的缓解措施,也是那篇博文的宗旨:既然控件在页面的样式不可以转移,那就隐藏它,但是!不是用display:none隐藏,也不是把width和height设置为0,我们希望的是看不到它们的固有样式,而期望保留对它们的tap和focus事件。不过除了以上的不二法门,还有什么能使它们看不见呢?聪明的您肯定想到了,对,就是opacit:0,
通过将控件的不透明度设置为0,大家得以让要素继续让它留在界面上,并且保持随时响应focus事件的情事。大家要做的,是为该控件设置为相对定位,覆盖在我们自定义样式的一个element上。那样,用户看到的是上边的element,但当她的手去触碰此element时,他实在触碰的是全然透明确留在界面上的原生控件!如下图所示:

亚洲必赢官网 11

那如故率先步,接下去大家必要为控件绑定响应事件,大部分场馆下大家必要绑定的事件都是onchange,一旦拔取成功,就把值复制到自定义的element上去。这样水到渠成了!不管您是经过表单或者post提交,你取到的值仍然是控件的值,自定义的element只承担突显,不担负作业!

亚洲必赢官网 12

  在那,我第一提供了3个参数用于自定义插件,

  在那,我第一提供了3个参数用于自定义插件,

1、引入jquery文件

代码完结

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>

 

复制代码 代码如下:

复制代码 代码如下:

2、编写js脚本

结束语

出品B君看到了猥琐的东西消失了,ios下的滚筒又炫酷滚起来了,肯定会拍拍你的肩膀说兄弟干得科学。那篇博文也不只是关于化解控件样式的问题,在其它类似的情景下,用遮罩层的章程掩盖你不可能的地方是值得借鉴的。其实在付出中类似的的小花招很多,只要找到了门槛和措施,一行代码抵得上一万行代码(借用刘震云的随笔名)。即便是个很小的小花招,大篇幅的用一篇博客来教学是矫枉过正浮夸和麻烦,可是前端开发事无巨细,希望对蒙受类似问题依旧未来亟需缓解的同窗有赞助。

1 赞 收藏
评论

亚洲必赢官网 13

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

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

实际代码:

width和height定义“盒子”的小幅和冲天,basePath用于定义使用插件的页面对插件文件夹的绝对路径。那些选项的面世时不得已而为之,因为选项卡的体制中用到了图片,而必须要有一个尺度路径才能科学找到图片的门路。那也是参照了一个叫jqtransform()的插件的做法,他也有个参数用于指定图片文件夹所在的地方。当然还有一种做法,就是想WebUI()一样,样式写到css文件里,那样图片的引用就是先对与css文件的不二法门了,而这五个都是插件的组成部分,相对路劲是不变的。所以不用提供那个路子了。只是由于那几个插件用到的样式比较少,所以并未接纳这些点子。

width和height定义“盒子”的大幅度和惊人,basePath用于定义使用插件的页面对插件文件夹的相对路径。那些选项的出现时不得已而为之,因为选项卡的样式中用到了图片,而必须求有一个标准化路径才能正确找到图片的路线。那也是参考了一个叫jqtransform(

html代码:

  插件的法则很简短,大旨的函数就是一个render(),用于渲染出tab的体制:

  插件的原理很粗略,焦点的函数就是一个render(),用于渲染出tab的样式:

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

<button id=”show”>显示</button>
<div class=”win”>
<div class=”wTop”><p style=”float:right;margin:5px 5px 0px
0px;color:white” id=”hidden”>X</p></div>
<div class=”content”></div>
</div>

$.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”,
Jquery完毕自定义窗口随意的拖拽,tabBox落成代码。”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”
});
};

$.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”
});
};

css样式:

可以看看这么些函数全都是安装样式的代码,(也让自家体会了眨眼间间用jq设置css的快感,依旧记得e.style.backgroud的时期~),那个函数有限支持了展示当前被激活的竹签和对应的音讯。其它,通过捕捉tab选项卡的click事件来改变近年来的激活标签,再渲染一遍就足以了。

可以见见这几个函数全都是安装样式的代码,(也让自己感受了一晃用jq设置css的快感,依旧记得e.style.backgroud的一代~),那么些函数有限支撑了呈现当前被激活的标签和相应的新闻。别的,通过捕捉tab选项卡的click事件来改变方今的激活标签,再渲染四回就可以了。

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

<style type=”text/css”>
.win{width:500px;height:600px;background:#000000;border-radius:8px;box-shadow:0px
0px 5px 10px;opacity:0.8;position:absolute;left:0;top:0;display:none}
.win .wTop{height:30px;width:100%;cursor:move}
.win
.content{height:570px;width:100%;border-radius:5px;background:white}
</style>

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

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

js脚本:

写完未来的少数盘算:

写完之后的少数心想:

复制代码 代码如下:

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

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

<script language=”javascript” type=”text/javascript”>
$(function(){
//拖拽
dragAndDrop();
//起初化地方
initPosition();
//点击按钮
clickShowBtn();
});
//拖拽
function dragAndDrop(){
var _move=false;//移动标记
var _x,_y;//鼠标离控件左上角的相对地方
$(“.wTop”).mousedown(function(e){
_move=true;
_x=e.pageX-parseInt($(“.win”).css(“left”));
_y=e.pageY-parseInt($(“.win”).css(“top”));
//$(“.wTop”).fadeTo(20,0.5);//点击开头拖动并透显著示
});
$(document).mousemove(function(e){
if(_move){
var x=e.pageX-_x;//移动时鼠标地点统计控件左上角的断然地方
var y=e.pageY-_y;
$(“.win”).css({top:y,left:x});//控件新职分
}
}).mouseup(function(){
_move=false;
//$(“.wTop”).fadeTo(“fast”,1);//放手鼠标后终止运动并回复成不透明
});
}
//初叶化拖拽div的地方
function initPosition(){
//计算开端化地方
var itop=($(document).height()-$(“.win”).height())/2;
var ileft=($(document).width()-$(“.win”).width())/1.8;
//设置被拖拽div的职位
$(“.win”).css({top:itop,left:ileft});
}
//点击突显按钮
function clickShowBtn(){
$(“#show”).click(function(){
$(“.win”).show(1000);
});

复制代码 代码如下:

复制代码 代码如下:

$(“#hidden”).click(function(){
$(“.win”).hide(1000);
});
}
</script>

// 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;

// 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;

亚洲必赢官网 ,引入的js文件

那大概是从迈克Alsup的作品中照搬过来的。照他的传教,好像是足以自定义整个插件的选项,仍是可以定义某一个特定元素的选项,可自己试了一下,就如不可以~。难道是自身没看懂他说的?

那基本上是从MikeAlsup的篇章中照搬过来的。照他的传教,好像是可以自定义整个插件的选项,还足以定义某一个一定元素的选项,可我试了刹那间,就如不可以~。难道是自我没看懂他说的?

复制代码 代码如下:

2、近来tab是捕捉click事件的,我想提升一下,可以自定义是捕捉click仍然mouseover,是的,可以写八个事件处理函数。但哪些来经过配备决定调用哪个处理程序呢?
打包下载

2、近日tab是捕捉click事件的,我想进步一下,可以自定义是捕捉click依旧mouseover,是的,可以写八个事件处理函数。但什么来经过配备决定调用哪个处理程序呢?
包裹下载

<script type=”text/javascript”
src=”js/jquery-1.10.2.min.js”></script>

)以及文档中引进的迈克(Mike)Alsup写的一篇 A Plugin Development Pattern 。保加马拉加语不是很…

您或许感兴趣的文章:

  • JQuery
    UI的拖拽功效完成格局小结
  • 简言之的jquery拖拽排序效果已毕代码
  • jQuery拖拽div完成思路
  • JQuery之拖拽插件落到实处代码
  • jquery完结简单的拖拽效果实例包容所有主流浏览器
  • jQuery手机浏览器中拖拽动作的劳碌性分析
  • 据悉jquery的一个拖拽到指定区域内的职能
  • jquery
    可拖拽的窗体控件完成代码
  • Jquery拖拽并简短保存的已毕代码
  • 基于jquery完结的鼠标拖拽元素复制并写入效果
  • jQuery拖拽插件gridster使用指南
  • jQuery 版元素拖拽原型代码
  • jQuery完成的简约拖拽成效示例
网站地图xml地图