2、谷歌中只要是input的区域单击可弹出窗口,但

作者: 前端  发布:2019-08-28

file类型的上传按钮美化样式,file上传美化样式

首先我们先要了解一下各浏览器的浏览按钮的共同特性:

    1、都可以设置整体的宽度和高度,但在IE、火狐、Opera中设置宽度不影响浏览按钮的宽度;

    2、谷歌中只要是input的区域单击可弹出窗口;IE(IE6中没试)中,单击浏览按钮可以弹出窗口,双击文本框区域可以弹出窗口;火狐和Opera中,单击input任何区域都可以弹出窗口;

    3、设置input字体大小,IE、火狐、Opera的流量按钮都变大了(宽与高)。(这点很重要);

从上面的共同特性来看,只要第三条是我们最需要的。

 

现在我们可以开始美化了:

        思路:先用a标签做一个按钮,定好宽度并要加上overflow:hidden;属性,然后将<input type="file" />放在a标签里面,通过定位,将input相对于a的右上角对齐,最后将input的透明度设为0即可。

        为何要右上角对齐?

                之所以右上角对齐是因为在IE、火狐、Opera中,鼠标放在文本框上鼠标呈文本状态,还有一个原因是IE中在文本区域中需要双击才能弹出窗口,这也是我利用上面提到的共同特性的第三点的原因。

        示例代码如下:

<style>
a{display:inline-block; width:100px; height:40px; background:red; position:relative; overflow:hidden;}
a:hover{background:green;}
input{position:absolute; right:0; top:0; font-size:100px; opacity:0; filter:alpha(opacity=0);}
</style>

<a href="#">
    <input type="file" value="浏览" />
</a>

  

这样各个浏览器的input浏览按钮的样式就达到了一致的效果,file按钮样式美化搞定。

首先我们先要了解一下各浏览器的浏览按钮的共同特性: 1、都可以设置整体的宽度和高度...

首先我们先要了解一下各浏览器的浏览按钮的共同特性:

点评:最近在使用file上传控件,发现了file上传控件的两个兼容性问题:一个是file上传控件在火狐下无法通过css改变width,另一个是file上传控件在不同的浏览器下的外观和行为都不一样,本文将提供详细的解决方案

第一组:杨昊 微信公众号与小程序数据互通

最近开始做小程序,然而公众号模块与小程序之间的数据互通算是个问题。

我们知道需要实现两块登录:1、官网扫码二维码登录;2、用户直接进小程序实现登录。要实现两块登录且要求用户从任意一个入口登录都需要确定为同一个用户,所以需要打通公众号与小程序的用户数据。幸运的是微信公众平台提供了unionid机制:

如果开发者拥有多个移动应用、网站应用、和公众帐号(包括小程序),可通过unionid来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号(包括小程序),用户的unionid是唯一的。换句话说,同一用户,对同一个微信开放平台下的不同应用,unionid是相同的。

因此,第一步需要申请微信开放平台的开发者资质,成为开发者资质之后,可以在微信开放平台绑定需要打通数据的公众号和小程序,让他们拥有相同的unionid,那么接下来的工作就是实现扫码登录与小程序登录后数据互通。


1、都可以设置整体的宽度和高度,但在IE、火狐、Opera中设置宽度不影响浏览按钮的宽度;

最近在使用画布处理图像像素时用到了file上传控件,发现了file上传控件的两个兼容性问题。一个是file上传控件在火狐下无法通过css改变width,另一个是file上传控件在不同的浏览器下的外观和行为都不一样。
下面是file上传控件在IE10,firefox16,chrome22,opera12,safari5.1.7里的截图:

第二组:赵彩凤 AngularJS-下拉框-必选

9159.com 1

很多下拉框首项是”请选择”,我们需要的是,如果选择项是这个,默认没有选择,不予提交
实现:

9159.com 2

Js:

9159.com 3

取消默认

效果:

9159.com 4


2、谷歌中只要是input的区域单击可弹出窗口;IE(IE6中没试)中,单击浏览按钮可以弹出窗口,双击文本框区域可以弹出窗口;火狐和Opera中,单击input任何区域都可以弹出窗口;

9159.com 5 
在IE10里,双击输入框或者单击按钮都弹出文件选择框。在其他浏览器里单击输入框,按钮或文字都可以触发文件选择框。
鉴于这种混乱情况,有必要要统一样式和行为。下面是我的兼容性方案。
先看一下最终结果在各浏览器的截图:

第三组:胡耀淦 命运三部曲

今天继续推一套个人喜欢的书,杨显惠的命运三部曲。

《夹边沟记事》、《定西.孤儿院纪事》、《甘南纪事》(可直接点,带豆瓣链接)

作者杨显惠,1946年生于兰州。中国作家协会会员,现居天津。

1965年由兰州二中上山下乡赴甘肃省生产建设兵团安西县小宛农场。1971年入甘肃师范大学(现西北师范大学)数学系读书。1975年在甘肃省农垦局酒泉农垦中学做教师。1981年调往河北省大清河盐场工作。1988年入天津作家协会专职写作至今。 主要作品收入《这一片大海滩》、《夹边沟记事》、《告别夹边沟》等书。短篇小说曾获全国短篇小说奖、中国小说学会奖、《上海文学》奖。 《定西孤儿院纪事》、《夹边沟记事》是其著名作品,真实地还原了当年的历史场景,动人心魄又引人深思。

  • 夹边沟记事

当时看的每篇都触目惊心,买过实体书收藏,后来送人了,再想去买实体书收藏时,发现已全网下架。

分享里面的一篇文章
夹边沟记事:李祥年的爱情故事

下面是来自豆瓣的简介:

这是一段尘封四十年的历史,当年的幸存者散落在各个角落,没有人问过他们到底发生了什么,当年的死难者早已化为白骨,连他们的后代也不知道埋在何处。幸亏杨显惠这位有良知的作家,不辞辛劳,四处寻访,历经数载,终于揭开了历史的盖子。

本书是《定西孤儿院纪事》的姊妹篇,被誉为“中国的《古拉格群岛》”。书中所指的夹边沟,为甘肃酒泉一个羁押右派分子的劳改农场,从1957年开始关押的近三千人,至1960年底幸存者已不足一半,是一处充满了苦难、饥饿和死亡的伤痛之地。作者历经数年,大海捞针般搜寻和采访了近百名当事人,并在高度忠于历史事实的基础上,完成了这部极具震撼历的纪实性小说。全书通过近20个故事,对众多受难者命运的来龙去脉进行了深沉的揭示,对绝境中的人性有着十分出色的绘状,更直视了这一历史悲剧的精神本质和深刻教训。

9159.com 6

夹边沟记事

  • 定西.孤儿院纪事

豆瓣链接已被删

第一次听说定西,除了盛产土豆洋芋马铃薯,还有这些孤儿院的孩子, 题材与夹边沟记事类似,主角换成了孩子。

9159.com 7

定西.孤儿院纪事

  • 甘南纪事

这本题材相对轻松很多,主要是记事。

分享下豆瓣简介:

由传统转向现代的藏区,如何负载着文化转型的重负,经历时代的遽变。

本书是著名作家杨显惠先生最新的一部作品,也是关于甘肃的系列短篇小说集的第三部。

甘肃南部和北部的自然环境差异大,山清水秀,民风淳朴。作者近年4次踏进甘南,进行文学采风活动,收集了丰富的文学素材,终以书中的12个故事记录了在甘南藏区的所见所闻,展现了当地悠久而灿烂的文化、牧民特有的生活形态,以及他们从传统走向现代化的身影。

9159.com 8

甘南纪事

照惯例,分享资源链接:
链接: https://pan.baidu.com/s/1mkaLuY0 密码: 5pqe


3、设置input字体大小,IE、火狐、Opera的流量按钮都变大了(宽与高)。(这点很重要);

9159.com 9
基本思路:创建输入框和按钮模拟file上传控件。将file上传控件设置成透明。让file上传控件与用于模拟的按钮右对齐。修改元素的堆叠顺序,让按钮处于下面,file上传控件在中间,输入框在上面。在文件选择完毕后将file上传控件里的值赋给用于模拟的输入框。
原理:在不同的浏览器里,file上传控件的按钮的height都是可调的,而且file上传控件的右侧都是可以单击的。所以通过调节file上传控件的height,并调整file上传控件的位置(右对齐),可以让file上传控件的可单击区域与用于模拟的按钮完全覆盖。当file上传控件透明时用户单击用于模拟的按钮就触发了文件选择框。但同时file上传控件的堆叠顺序不能先于用于模拟的输入框,不然当用户将鼠标置于所见的输入框上时可能会看到光标不是指示文本而是为一个箭头(而且为一个箭头时单击会弹出文件选择框),用户将感到困惑。
实现:先看看html部分的代码。

第四组:李俊 Dev GridControl 单元格输入数据的验证方法

在dev gridcongtrol输入单元格内容有效性的检测中,此处以不允许为空、该列的值不允许重复为例。(当然也可以使用别的方式,但别的方式不好实现:当该单元格值不满足条件时,锁定整个gridview,除该单元格之外的位置都不允许输入,即将焦点锁定在这一个单元格)。

1、首先将要验证的列设置为RepositoryItemTextEdit类型,或者别的控件类型(其余控件类型未测试),以下以RepositoryItemTextEdit类型为例
2、找到RepositoryItemTextEdit的Validating事件,具体代码如下:

[csharp] 
1.   private void TextEdit1_Validating(object sender, System.ComponentModel.CancelEventArgs e)  
2.          {  
3.              BaseEdit textEdit = sender as BaseEdit;  
4.              if (textEdit.Text.ToString().Trim().Length == 0)  
5.              {  
6.                  e.Cancel = true;  
7.                  //标识 错误提示  
8.                  errorReason = 0;  
9.                  return;  
10.             }  
11.             else  
12.             {  
13.                 //获取GridView中所有的选中的行号  
14.                 //此处不允许多选,故只有一行  
15.                 int[] iRowId = this.gViewActList.GetSelectedRows();  
16.                 for (int i = 0; i < gViewActList.DataRowCount; i  )  
17.                 {  
18.                     //重复检验时,不验证当前行  
19.                     if (i != iRowId[0])  
20.                     {  
21.                         //textEdit.EditValue  当前编辑的值  
22.                         //需要注意的是取当前单元格的值要用:textEdit.EditValue  
23.                         //GridView在TextEdit1_Validating执行时还未将你输入的值更新进去,但执行完该方法后,即使不满足条件,你所输入的值,也会更新到GridView中去  
24.                         //同时,也说明了,在Validating函数中排除重复值的时候,通过GridView获取当前行的值,不是最新的,即不是你最近一次输入的  
25.                         if (textEdit.EditValue.ToString().Trim() == gViewActList.GetDataRow(i)["GridView上绑定的列名"].ToString().Trim())  
26.                         {  
27.                             e.Cancel = true;  
28.                             //标识 错误提示  
29.                             errorReason = 1;  
30.                             return;  
31.                         }  
32.                     }  
33.                 }  
34.             }  

3、根据Validating事件中的标识,进行错误信息提示:

[csharp]  
1.  private void gViewActList_InvalidValueException(object sender, InvalidValueExceptionEventArgs e)  
2.          {  
3.              if (errorReason == 0)  
4.              {  
5.                  e.ErrorText = "动作名称不允许为空!";  
6.              }  
7.              else if (errorReason == 1)  
8.              {  
9.                  e.ErrorText = "动作名称不允许为重复!";  
10.             }  
11.             else  
12.             {  
13.                 e.ErrorText = "值无效!";  
14.             }  
15.         }  

具体效果如下:

9159.com 10

小注:
1、使用RepositoryItem.Validating事件,事件的"sender" 必须转换为BaseEdit类型,使用EditValue来获取当前输入的值并进行校验,如果校验不通过,把e.Cancel设置True。这种方法一般用来对内置控件的单元格进行数据验证。

2、使用 GridView.ValidatingEditor 事件  
事件的"sender"必须转换为GridView类型,当前列可以从GridView.FocusedColumn属性获得,值可以从e.Value获取,如果校验不通过,需要把e.Valid设置为False.。这种方法一般用于对整个Grid内的文本框进行数据验证。

具体错误提示信息可以在GridView.InvalidValueException事件中进行处理


从上面的共同特性来看,只要第三条是我们最需要的。

代码如下:

第五组:周倩宇 使用css自定义input file浏览按钮样式

来源:http://www.luxinzhi.com/web/251.html
http://www.cnblogs.com/jason-liu-blogs/archive/2013/06/13/3133377.html

文件上传用途非常广泛,浏览器自带文件控件不太美观,很多时候不能满足需求,需要自定义input [type=file]的样式。

现在我们可以开始美化了:

<div id="file">
<input type="text" value="未选择文件" /><input type="button" value="浏览" /><input type="file" />
</div>

不同浏览器的file控件表现形式不一样

火狐

9159.com 11

谷歌

9159.com 12

IE

9159.com 13

思路:先用a标签做一个按钮,定好宽度并要加上overflow:hidden;属性,然后将放在a标签里面,通过定位,将input相对于a的右上角对齐,最后将input的透明度设为0即可。

然后是css部分的代码。

不同浏览器的file控件基于鼠标点击的响应不一

IE11,谷歌,火狐中单击file控件文本区域可以弹出文件选择框,而ie10及以前版本则需要双击file控件的文本区域

9159.com,设置input的font-size属性,各个浏览器的控件大小均发生了变化

font-size : 该属性规定 input元素中文本的尺寸大小。

<!DOCTYPE html>
<html>
<head>
<title>input file按钮美化</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    #input-file input{
        font-size: 20px;
        border: 1px solid pink;
    }
</style>
</head>
<body>
<div id="input-file">
    <input type="file" value="浏览" />
</div>
</body>
</html>

IE,谷歌,火狐浏览器,file控件大小均发生了变化,以谷歌为例:

9159.com 14

为何要右上角对齐?

代码如下:

input file按钮美化

思路:采用a标签自定义一个我们需要的按钮,然后包含一个真正起作用的input[type=file]控件。
要点:

  1. 为包含input元素的a标签设置overflow:hidden,用来隐藏超出此区域的控件内容
  2. input采用绝对定位,使input控件的右上和a标签的右上对齐(因为由上面内容可知,不管对于哪种浏览器,点击右侧内容,均单击就可以弹出文件选择框)
    代码如下
<!DOCTYPE html>
<html>
<head>
<title>input file按钮美化</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    #input-file a{
        display:inline-block; 
        width:100px; 
        height:40px; 
        margin: 100px 300px;
        background:green; 
        position:relative; 
        overflow:hidden;/*隐藏超出区域,此属性很重要*/
    }

    #input-file a:hover{
        background:pink;
    }

    #input-file input{
        position:absolute; 
        right:0; 
        top:0; 
                //要保证file控件大小大于a标签的大小
        font-size:40px; 
                /*设置为透明*/
                filter:alpha(opacity=0);     /* IE */
                -moz-opacity:0;              /* 老版Mozilla */
                -khtml-opacity:0;            /* 老版Safari */
                opacity: 0;
    }
</style>
</head>
<body>
<div id="input-file">
    <a href="javascript:;">浏览
        <input type="file" value="浏览" />
    </a>
</div>
</body>
</html>

之所以右上角对齐是因为在IE、火狐、Opera中,鼠标放在文本框上鼠标呈文本状态,还有一个原因是IE中在文本区域中需要双击才能弹出窗口,这也是我利用上面提到的共同特性的第三点的原因。

#file {
position:relative;
width:226px;
height:25px;
border:1px #99f solid;
}
#file input {
font-size:16px;
margin:0;
padding:0;
position:relative;
vertical-align:middle;
outline:none;
}
#file input[type="text"] {
border:3px none;
width:172px;
z-index:4;
}
#file input[type="button"] {
width:54px;
height:25px;
z-index:2;
}
#file input[type="file"] {
position:absolute;
right:0px;
height:25px;
opacity:0;
z-index:3;
}

示例代码如下:

最后javascript部分,用于把file上传控件获得的文件路径显示到可见的输入框里。


代码如下:

9159.com 15

window.onload=function(){
var file=document.querySelector("#file input[type='file']");
var text=document.querySelector("#file input[type='text']");
file.addEventListener("change",assign,false);
function assign(){
text.value=file.value;
}
}

欢迎留言交流或指正。

本文由9159.com发布于前端,转载请注明出处:2、谷歌中只要是input的区域单击可弹出窗口,但

关键词: 9159.com

上一篇:没有了
下一篇:没有了