论怎么样在小叔子大端web前端落成自定义原生控件的体制,Jquery完成自定义窗口随意的拖拽

by admin on 2019年2月22日

论怎样在小叔子大端web前端达成自定义原生控件的样式

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

初稿出处:
卖烧烤夫斯基   

手机开发webapp的校友肯定碰着过那样难点,怎么样为丑极了的手机元素采用自定义的体裁。首先,要弄精晓为何要定义手机原生控件的体制,就需要探视手机的那三个原生框样式的丑陋摸样:

android:

必发88 1

ios:

必发88 2

查了须臾间jq的合法插件编写文档()以及文档中援引的迈克Alsup写的一篇A Plugin Development
Pattern。爱尔兰语不是很好,但要么努力看下去(既学习到文化又能陶冶保加雷克雅未克语,何乐不为),生搬硬套的写了1个处女作——tabBox。

查了一下jq的法定插件编写文档(
Alsup写的一篇A Plugin Development
Pattern。加泰罗尼亚语不是很好,但要么努力看下去(既学习到文化又能磨练乌Crane语,何乐而不为),照猫画虎的写了三个处女作——tab博克斯。

在网页上大家平时看到,当点击多少个按钮时,弹出一个自定义窗口,并且可以随意的拖拽,从而改变其地点

迫于的取舍

看完了那几个丑陋的界面成分,大家就足以知道当我们把她们暴光在产品同学的眼中时,那种层层的杀气了。可以看来,界面成分13分其貌不扬,产品兄弟是迟早不会接受的。然而,不得不说这一个控件在触及后的功效比pc机上的要炫酷。那之中以apple机的滚筒采用最好杰出.以下是它们触发后调用原生控件的意义:

android:

必发88 3必发88 4必发88 5

ios:

必发88 6必发88 7必发88 8

只可以说那几个样式原生弹出样式是吻合我们规划的基准的,因为它即反映了UI界面的祥和和体验度,又不损耗任何web质量,关键是我们怎么着都不要求做。产品BZJ君看到了,指明要在apple机下要滚筒的意义用来抉择日期或许下来单。假设大家无法缓解掉界面文本框的体制难题,那么不论后边的效能多炫酷,始终使无法令人接受的。或许你会想花时间写类似的功效?作者不否定你可以写出来,不过必要多少日子的工作量吗?也不在少数人摘取了插件的格局。通过jq插件(即使您的序列中没在应用jq,为了那些功用无奈下载jq和其插件)来完毕,其实是很是吃力不讨好的事体。壹个是插件那种事物出了难点要么转移了须求后它会变得那多少个的不得了增加,第1个自然是考虑到能源加载,在手机端尤其需求考虑。由此,采纳插件是下下策!

  顾名思义,那一个插件就是方便的发出负有tab选项卡功用“盒子”的。看图一下就精通
必发88 9
那般效果在网页上是万分肠炎宁个的,不论前台后台。

  顾名思义,这些插件就是造福的爆发负有tab选项卡效能“盒子”的。看图一下就精晓
必发88 10
如此效果在网页上是格外肠炎宁个的,不论前台后台。

拔取jquery达成拖拽,则必须求jquery的文件了,完结步骤:

消除措施

题材来了,既想要弹出层的炫酷效果,又想自定义控件在界面显示的体制。如何做吧?露珠曾经尝试过最简便易行的措施去重写css去改变它们的样式,不过就是在google若干时辰,也不曾找到如意的结果。露珠也尝尝过-webkit-appearance属性,但它也体现不顺畅。况且大家还亟需万分多机型(安卓,苹果,wp?)。无论如何,走改变原来样式的路是无效的。露珠经过一番考虑,找到了自认为万分好的解决方式,也是那篇博文的主题:既然控件在页面的样式不得以更改,那就暗藏它,可是!不是用display:none隐藏,也不是把width和height设置为0,大家盼望的是看不到它们的原有样式,而愿意保留对它们的tap和focus事件。可是除此之外上述的法子,还有哪些能使它们看不见呢?聪明的您早晚想到了,对,就是opacit:0,
通过将控件的不发光度设置为0,大家得以让要素继续让它留在界面上,并且保持随时响应focus事件的情事。大家要做的,是为该控件设置为相对定位,覆盖在大家自定义样式的3个element上。那样,用户观看的是上边的element,但当他的手去触碰此element时,他骨子里触碰的是一心透明显留在界面上的原生控件!如下图所示:

必发88 11

那还是第3步,接下去咱们要求为控件绑定响应事件,半数以上气象下大家需求绑定的轩然大波都以onchange,一旦采用成功,就把值复制到自定义的element上去。那样水到渠成了!不管你是由此表单或然post提交,你取到的值还是是控件的值,自定义的element只担负突显,不担当作业!

必发88 12

  在那,小编先是提供了一个参数用于自定义插件,

  在那,作者先是提供了壹个参数用于自定义插件,

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脚本

结束语

必发88,出品B君看到了猥琐的事物消失了,ios下的滚筒又炫酷滚起来了,肯定会拍拍你的肩膀说兄弟干得不错。那篇博文也不仅仅是关于化解控件样式的难题,在此外类似的情况下,用遮罩层的章程掩盖你不大概的地方是值得借鉴的。其实在支付中类似的的小花招很多,只要找到了门道和办法,一行代码抵得上30000行代码(借用姜伟的小说名)。固然是个很小的小花招,大篇幅的用一篇博客来讲课是过分夸张和麻烦,可是前端开发事无巨细,希望对遇到类似题材可能未来亟待缓解的同桌有资助。

论怎么样在小叔子大端web前端落成自定义原生控件的体制,Jquery完成自定义窗口随意的拖拽。 1 赞 收藏
评论

必发88 13

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

论怎么样在小叔子大端web前端落成自定义原生控件的体制,Jquery完成自定义窗口随意的拖拽。$.fn.tabBox.defaults = {
width : 260,
height : 200,
basePath : “tabBox/”
};

切实代码:

width和height定义“盒子”的幅度和中度,base帕特h用于定义使用插件的页面对插件文件夹的相对路径。这么些选项的出现时不得已而为之,因为选项卡的样式中用到了图片,而必需求有2个标准化路径才能科学找到图片的路线。那也是参照了三个叫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”,
“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脚本:

写完之后的有个别思维:

写完以往的一些考虑:

复制代码 代码如下:

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

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

<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的稿子中照搬过来的。照他的说教,好像是可以自定义整个插件的选项,还足以定义某一个特定成分的选项,可自身试了须臾间,似乎不得以~。难道是自个儿没看懂她说的?

复制代码 代码如下:

贰 、如今tab是捕捉click事件的,我想增强一下,可以自定义是捕捉click仍然mouseover,是的,可以写五个事件处理函数。但如何来通过布置决定调用哪个处理程序呢?
包装下载

二 、方今tab是捕捉click事件的,小编想增强一下,能够自定义是捕捉click依旧mouseover,是的,可以写七个事件处理函数。但什么来通过布署决定调用哪个处理程序呢?
包裹下载

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

)以及文档中推介的迈克Alsup写的一篇 A Plugin Development Pattern 。阿尔巴尼亚语不是很…

你大概感兴趣的文章:

  • JQuery
    UI的拖拽成效完毕格局小结
  • 差不多的jquery拖拽排序效果落到实处代码
  • jQuery拖拽div达成思路
  • JQuery之拖拽插件落实代码
  • jquery完结简单的拖拽效果实例兼容全部主流浏览器
  • jQuery手机浏览器中拖拽动作的辛苦性分析
  • 基于jquery的1个拖拽到内定区域内的效应
  • jquery
    可拖拽的窗体控件完结代码
  • Jquery拖拽并简要保存的落到实处代码
  • 依据jquery达成的鼠标拖拽成分复制并写入效果
  • jQuery拖拽插件gridster使用指南
  • jQuery 版元素拖拽原型代码
  • jQuery达成的简练拖拽功用示例

发表评论

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

网站地图xml地图