帮衬同页面七个上传按钮,tabBox实现代码

论如何在手提式无线电话机端web前端完成自定义原生控件的体裁

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

原稿出处:
卖烧烤夫斯基   

手机支付webapp的校友肯定境遇过这么难题,如何为丑极了的无绳电话机成分运用自定义的体制。首先,要弄通晓怎么要定义手提式有线电话机原生控件的体裁,就必要探视手提式有线电电话机的那多少个原生框样式的丑陋摸样:

android:

皇家赌场手机版 1

ios:

皇家赌场手机版 2

查了一下jq的官方插件编写文书档案()以及文书档案中引进的迈克Alsup写的一篇A Plugin Development
Pattern。藏语不是很好,但照旧努力看下来(既学习到文化又能练习塞尔维亚共和国(Republic of Serbia)语,何乐不为),亦步亦趋的写了三个处女作——tabBox。

查了一下jq的官方插件编写文书档案(
Alsup写的一篇A Plugin Development
Pattern。克罗地亚共和国(Republic of Croatia)语不是很好,但依然努力看下来(既学习到文化又能练习希腊语,甘心情愿),生搬硬套的写了多个处女作——tabBox。

用jQuery File Upload做的上传控件demo,援助同页面五个上传按钮,jquerydemo

帮衬同页面七个上传按钮,tabBox实现代码。迫不得已的取舍

看完了这么些丑陋的界面成分,大家就能够掌握当大家把她们暴露在成品同学的眼中时,那种层层的杀气了。能够见到,界面成分拾叁分其貌不扬,产品兄弟是迟早不会接受的。不过,不得不说这一个控件在触及后的机能比pc机上的要炫酷。那中间以apple机的滚筒选拔最棒特出.以下是它们触发后调用原生控件的功效:

android:

皇家赌场手机版 3皇家赌场手机版 4皇家赌场手机版 5

ios:

皇家赌场手机版 6皇家赌场手机版 7皇家赌场手机版 8

只得说这个样式原生弹出样式是契合我们规划的规范的,因为它即反映了UI界面包车型地铁投机和体验度,又不损耗任何web质量,关键是我们怎么着都不需求做。产品BZJ君看到了,指明要在apple机下要滚筒的功效能来选拔日期大概下来单。借使大家不可能解决掉界面文本框的体裁难题,那么不论是前边的功效多炫酷,始终使不只怕令人收受的。或者你会想花时间写类似的作用?作者不否认你能够写出来,可是急需多少日子的工作量吗?也不在少数人摘取了插件的点子。通过jq插件(若是您的品种中没在应用jq,为了那一个成效无奈下载jq和其插件)来完成,其实是充足吃力不讨好的事情。1个是插件这种事物出了难题可能更换了须要后它会变得不行的不得了增添,第③个自然是考虑到能源加载,在手提式有线电话机端尤其需求考虑。由此,选择插件是下下策!

  顾名思义,那个插件正是便于的产生负有tab选项卡成效“盒子”的。看图一下就知晓
皇家赌场手机版 9
这么效果在网页上是非常肠炎宁个的,不论前台后台。

  顾名思义,这几个插件便是福利的发生负有tab选项卡功能“盒子”的。看图一下就知晓
皇家赌场手机版 10
如此那般效果在网页上是万分肠炎宁个的,不论前台后台。

需求

有那般一个必要,一个form有多少个公文要上传,但又不是观念的图片批量上传那种,是近似下图那种须要,一开头是用的swfupload做的上传,不过难题是假使有八个按钮的话,就要写过多双重的代码,于为了代码的不难所以就起来寻求其余的不二法门,时期试过uploadify,可是出于体制始终调不出来,最终就放弃了,直到发现这么个精美的东西,jQuery
File Upload。

 

正文包罗了upload的js完结,html的剖析,css的落到实处等剧情,小说最终有git地址

皇家赌场手机版 11

 

涸泽而渔办法

问题来了,既想要弹出层的炫酷效果,又想自定义控件在界面展现的体裁。怎么做呢?露珠曾经尝试过最简便的办法去重写css去改变它们的体制,不过正是在google若干钟头,也不曾找到如意的结果。露珠也尝试过-webkit-appearance属性,但它也显得不顺手。况且大家还亟需卓殊多机型(安卓,苹果,wp?)。无论怎么样,走改变原有样式的路是低效的。露珠经过一番想想,找到了自认为格外好的化解办法,也是那篇博文的大旨:既然控件在页面包车型大巴样式不得以变动,那就暗藏它,不过!不是用display:none隐藏,也不是把width和height设置为0,我们盼望的是看不到它们的原本样式,而愿意保留对它们的tap和focus事件。但是除了这些之外上述的法门,还有啥能使它们看不见呢?聪明的你势必想到了,对,正是opacit:0,
通过将控件的不光滑度设置为0,我们能够让要素继续让它留在界面上,并且维持随时响应focus事件的情景。大家要做的,是为该控件设置为相对定位,覆盖在咱们自定义样式的贰个element上。那样,用户观察的是上边的element,但当他的手去触碰此element时,他其实触碰的是完全透明显留在界面上的原生控件!如下图所示:

皇家赌场手机版 12

这如故率先步,接下去大家必要为控件绑定响应事件,第一次全国代表大会半场地下我们供给绑定的事件都是onchange,一旦采纳成功,就把值复制到自定义的element上去。那样马到成功了!不管你是透过表单只怕post提交,你取到的值依然是控件的值,自定义的element只承担显示,不担当作业!

皇家赌场手机版 13

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

帮衬同页面七个上传按钮,tabBox实现代码。  在这,作者先是提供了2个参数用于自定义插件,

最简运行时

官网下载的demo有N多js文件,一大堆js文件中唯有多少个才是供给的,其余的公文都是有个别用不到的机能,唯有在你需求的时候才需求引用。

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
    <script src="JS/jquery/jquery.iframe-transport.js"></script>
    <script src="JS/jquery/jquery.ui.widget.js"></script>
    <script src="JS/jquery/jquery.xdr-transport.js"></script>
    <script src="JS/jquery/jquery.fileupload.js"></script>

 

个中iframe那多少个文件是为着拓展iframe上传,ui文件是能选完文件自动上传的必不可少文件,xdr这一个是在ie下才必要的,最终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>

 

复制代码 代码如下:

复制代码 代码如下:

后台代码

新建多个ashx的文本,那里创建三个uploadHandler.ashx,然后写入如下代码,用于保存。

    public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Charset = "utf-8";

            HttpPostedFile file = context.Request.Files["files"];
            string uploadPath =
                HttpContext.Current.Server.MapPath(@context.Request["folder"]) + "\\";

            if (file != null)
            {
                if (!Directory.Exists(uploadPath))
                {
                    Directory.CreateDirectory(uploadPath);
                }
                file.SaveAs(uploadPath + file.FileName);
                //下面这句代码缺少的话,上传成功后上传队列的显示不会自动消失
                string newName = file.FileName;
                string oldName = file.FileName;
                context.Response.Write("{\"newName\": \"" + newName + "\", \"oldName\": \"" + oldName + "\"}");
            }
            else
            {
                context.Response.Write("0");
            }
        }

 

 

结束语

产品B君看到了猥琐的事物消失了,ios下的滚筒又炫酷滚起来了,肯定会拍拍你的肩膀说兄弟干得不错。那篇博文也不仅仅是有关解决控件样式的难点,在其余类似的动静下,用遮罩层的章程掩盖你不可能的地点是值得借鉴的。其实在付出中类似的的小花招很多,只要找到了门道和形式,一行代码抵得上两千0行代码(借用孙铎的小说名)。尽管是个相当小的小花招,大篇幅的用一篇博客来教学是矫枉过正夸大和麻烦,不过前端开发事无巨细,希望对遭遇类似难点只怕未来亟需消除的同桌有帮带。

1 赞 收藏
评论

皇家赌场手机版 14

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

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

前台HTML

width和height定义“盒子”的肥瘦和冲天,basePath用于定义使用插件的页面对插件文件夹的相对路径。那些选项的产出时不得已而为之,因为选项卡的体制中用到了图片,而必须求有1个规范路径才能科学找到图片的途径。那也是参照了二个叫jqtransform()的插件的做法,他也有个参数用于钦点图片文件夹所在的岗位。当然还有一种做法,正是想WebUI()一样,样式写到css文件里,那样图片的引用正是先对与css文件的门道了,而那三个都以插件的组成都部队分,相对路劲是不变的。所以不用提供那一个途径了。只是出于那一个插件用到的样式相比较少,所以没有使用那一个方法。

width和height定义“盒子”的宽度和可观,basePath用于定义使用插件的页面对插件文件夹的绝对路径。这几个选项的产出时不得已而为之,因为选项卡的样式中用到了图片,而必供给有二个原则路径才能正确找到图片的门径。这也是参照了二个叫jqtransform(

预览效果

皇家赌场手机版 15

说到底的功力如上海体育场所所示,为了实现那一个大家一步一步来分析。

 

  插件的法则很简短,主题的函数便是2个render(),用于渲染出tab的体制:

  插件的原理相当粗略,大旨的函数便是三个render(),用于渲染出tab的体裁:

DIV结构

皇家赌场手机版 16

如上图

 

上海教室后多少个div遵照顺序写在最外层里面,然后考虑通过变更来消除地方的题材,当然也可以用相对定位等办法来兑现,这里选拔了变动。

因为要用到变化,那里差不多解释一下浮动的原理

率先设置0的幅度是280px

故而1的大幅正是70+margin-right:8 左边还有202大幅度,左浮动

2的上升幅度是150px,左浮动

3的大幅度不安装,右浮动

4的幅度是200+border:2 一共202肥瘦,左浮动

 

然后再设置上传按钮,假若不安装样式,上传按钮是那样的

皇家赌场手机版 17

如此备受瞩目是老套的体裁了,在网上找了一个消除方案是那样的

皇家赌场手机版 18

匹配那样的体裁

皇家赌场手机版 19

就足以做出那几个功效了

皇家赌场手机版 20

故此html的代码如下:

皇家赌场手机版 21
<style> body{padding:10px} /* 上传控件 */ .upload {
margin-top:10px; width:280px; height:30px; } .upload .uploadbtnBox {
float:left; height:30px; width:70px; margin-right:8px; } .upload
.progress { height:4px; line-height:4px; *zoom:1; background:#fff;
float:left; width:200px; border:1px #ccc solid; overflow:hidden;
text-overflow:ellipsis; white-space:nowrap; display:none; } .upload
.filestate { float:left; height:20px; text-align:left; width:150px;
line-height:20px; display:none; color:#333; overflow:hidden; } .upload
.progresspercent { float:right; padding-top:5px; height:15px;
text-align:right; font-size:9px; line-height:15px; color:#333; }
.upload .uploadbtnBox .a-upload { height:28px; background:#4090c0;
border:1px solid #dddddd;color:#ffffff; line-height:28px; padding:0
6px; font-size:0.9em; overflow: hidden; display: inline-block;
text-decoration:none; *display: inline; *zoom: 1 } .upload
.uploadbtnBox .a-upload input { position: absolute; width:70px;
height:30px; overflow:hidden; margin-left:-10px; opacity: 0; filter:
alpha(opacity=0); cursor: pointer } .upload .progress .bar { height:4px;
line-height:4px; background:#4090c0; *zoom:1; } .clearfix:after {
content: “.”; display: block; height: 0; visibility: hidden; clear:
both; } .clearfix { _zoom: 1; } .clearfix { *zoom:1; } </style>
<div class=”upload clearfix”> <div class=”uploadbtnBoxclearfix”> <a href=”javascript:;” class=”a-upload”> <input
type=”file” data-url=”uploadHandler.ashx” name=”files” value=””
id=”file7″ onchange=”CheckFile(this)” />点击上传 </a>
</div> <div class=”filestate”> 文件名</div> <div
class=”progresspercent”> </div> <div class=”progress”
style=”height: 4px;”> <div class=”bar” style=”width: 0%;”>
</div> </div> </div> View Code

 

 

复制代码 代码如下:

复制代码 代码如下:

JS部分

着力的upload直接那样就足以了,

$(“input[type=file]”).fileupload();

上传的后台页面通过input的data-url来安装,如下图

皇家赌场手机版 22

 

接下去要拍卖的是上传进度

透过计算上传的比重设置bar的急剧就足以了

此间运用的是放到的progressall的不二法门,传递2个参数,第四个是e正是sender,通过他找到触发的input,然后再用jquery去找此外的弟兄成分举办操作,那里是找到了progress和bar然后设置他们的上升幅度

其次个参数是data,里面含有两个放置的变量,叁个是total,二个是loaded,所以就能够测算出百分比了

皇家赌场手机版 23

 

上传完结后展现文件名,还有给隐藏input赋值,

选取的是放手的函数done,done会提供一个参数,第一个是e正是sender,大家通过他找到相应的input,然后找到任何因素进行操作

另三个参数便是result,在诠释里曾经证实了result如何使用了

皇家赌场手机版 24

皇家赌场手机版, 

就此最终的js便是那样

    <script type="text/javascript">

        function CheckFile(obj) {
            var array = new Array('gif', 'jpeg', 'png', 'jpg');  //可以上传的文件类型  
            if (obj.value == '') {
                alert("让选择要上传的图片!");
                return false;
            }
            else {
                var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //这个文件类型正则很有用:)  
                var isExists = false;
                for (var i in array) {
                    if (fileContentType.toLowerCase() == array[i].toLowerCase()) {
                        isExists = true;
                        return true;
                    }
                }
                if (isExists == false) {
                    obj.value = null;
                    alert("上传图片类型不正确!");
                    return false;
                }
                return false;
            }
        }
        $(function () {
            $("input[type=file]").fileupload({
                done: function (e, result) {
                    //done方法就是上传完毕的回调函数,其他回调函数可以自行查看api
                    //注意result要和jquery的ajax的data参数区分,这个对象包含了整个请求信息
                    //返回的数据在result.result中,假设我们服务器返回了一个json对象
                    //json对象{"newName": "sss", "oldName": "sdf"}

                    var resultJson = $.parseJSON(result.result)
                    $(e.target).attr("value", resultJson.newName);
                    var uploadDiv = $(e.target).parent().parent().parent();
                    uploadDiv.find(".filestate").show().text(resultJson.oldName);
                },
                progressall: function (e, data) {
                    var maxWidth = 200;
                    var percent = (data.loaded / data.total * 100).toFixed(2);
                    var progress = parseInt(data.loaded / data.total * maxWidth, 10);
                    var uploadDiv = $(e.target).parent().parent().parent();
                    uploadDiv.find(".progress").show();
                    uploadDiv.find(".bar").css("width", progress);
                    uploadDiv.find(".progresspercent").show().text(percent + "%");

                }
            })
        });

    </script>

 

git地址:

File
Upload做的上传控件demo,帮忙同页面八个上传按钮,jquerydemo 供给有这么三个要求,八个form有八个公文要上传,但又不是守旧的…

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

能够看来这些函数全都是设置样式的代码,(也让自己体会了弹指间用jq设置css的快感,依旧记念e.style.backgroud的一世~),那个函数保证了展示当前被激活的价签和相应的音信。别的,通过捕捉tab选项卡的click事件来改变近来的激活标签,再渲染三遍就可以了。

能够看到那一个函数全都以安装样式的代码,(也让我感受了一晃用jq设置css的快感,依旧记得e.style.backgroud的时期~),那些函数保险了呈现当前被激活的竹签和对应的消息。其它,通过捕捉tab选项卡的click事件来改变最近的激活标签,再渲染二遍就足以了。

复制代码 代码如下:

复制代码 代码如下:

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

写完之后的一点考虑:

写完未来的有些商量:

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

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

复制代码 代码如下:

复制代码 代码如下:

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

那基本上是从MikeAlsup的篇章中照搬过来的。照他的传道,好像是足以自定义整个插件的选项,还是能够定义某一个特定成分的选项,可自笔者试了一下,仿佛无法~。难道是自个儿没看懂他说的?

那基本上是从MikeAlsup的小说中照搬过来的。照他的传道,好像是可以自定义整个插件的选项,还足以定义某3个一定成分的选项,可自个儿试了弹指间,就像无法~。难道是自家没看懂他说的?

贰 、近期tab是捕捉click事件的,小编想增强一下,能够自定义是捕捉click仍然mouseover,是的,能够写三个事件处理函数。但怎样来经过配备决定调用哪个处理程序呢?
包装下载

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

)以及文书档案中援引的迈克Alsup写的一篇 A Plugin Development Pattern 。葡萄牙语不是很…

Leave a Comment.