Js的封装和闭包-fixed定位，兼容不同系列不同...-为select添加样式

当前位置: 编程技术>WEB前端

本页文章导读:

▪Js的封装和闭包一直很怀疑自己是否真的懂Js，是不是用Js实现几个选项卡的切换，修改下html的css就算是会了，对于这点，自己都无法认可今天很想对之前写的Js做个提炼，但对于Js的封装和闭包一直理解不透.........

▪fixed定位，兼容不同系列不同版本的浏览器（IE6.0）现在很多门户网站页面内容庞大，都会往下拉很长，在以前我们想回顶部的时候要不断往上滚动鼠标的滚轮，直到滚到顶部为止，现在如果大家细心观察右下角是不是有一个点击回到顶部的.........

▪为select添加样式改变select默认的样式，一般情路情况下通过ul,li来模拟来实现。有很多Jquery插件就是通过这样的方式来改变select默认样式的。根据程序哥哥那边的反映，此种方式在form提交后无法获取数据，后.........

[1]Js的封装和闭包

来源: 发布时间: 2013-11-06

一直很怀疑自己是否真的懂Js，是不是用Js实现几个选项卡的切换，修改下html的css就算是会了，对于这点，自己都无法认可

今天很想对之前写的Js做个提炼，但对于Js的封装和闭包一直理解不透彻，没法理解，那就只有多写了

Js封装（即面向对象，不懂面向对象思想的同学不用向下看了）

js并不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样用class来定义类, 但可以利用js的闭包封装机制来实现js类, 封装一个简的CharlesObj类.

function CharlesObj() {

this.show = function()

{

alert("CharlesObj show");

};

this.init = function(){

alert("CharlesObj init");

};

}
这个类里定义了两个方法:show和init, 需要注意的是这里用到了this来声明, 而不是var, 因为用var是用来定义私有方法的.

以下是对封装的js类调用

var cj = new CharlesObj();

cj.show();

cj.init();

这样看来貌似封装也不过如此，但如果我们有在网上找过Js代码或者插件的话，经常会在代码中看到类似这样的代码

（function(){

alert("...");

......

});

这样的代码其实就是所谓的闭包了，那么闭包在js中究竟起个什么作用？

我们如果问朋友或查资料通常得到的都是：闭包就是指变量在某个作用域上的值，这个变量只在这个作用域上起作用。闭包对变量而言，闭包指某个作用域。

一直很奇怪，如果是作用域的问题，完全可以用全局变量和局部变量来解决，为何还专门要搞个闭包出来，这不是闲的蛋疼；

直到前面有次调用百度地图api的实现多覆盖物标注时遇到个问题：

百度地图api提供地图标注功能，但并没有提供根据赋值ID或某唯一标识来区分不同的覆盖物，这就存在一个问题，我们不可能永远在地图上只标一个点，当时第一个想法是创建多个全局变量保存覆

[2]fixed定位，兼容不同系列不同版本的浏览器（IE6.0）

来源: 发布时间: 2013-11-06

现在很多门户网站页面内容庞大，都会往下拉很长，在以前我们想回顶部的时候要不断往上滚动鼠标的滚轮，直到滚到顶部为止，现在如果大家细心观察右下角是不是有一个点击回到顶部的按钮呢，对，今天我要说的就这个按钮的布局，闲话不多说，直接上代码，在代码中我尽量的标注css样式，以方便大家阅读；

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5 <title>fixed定位，解决IE6闪动问题</title>
6 <style type="text/css">
7
8 *html{
9 background-image:url(about:blank);
10 background-attachment:fixed;
11 }/*此代码解决IE6.0下不会出现闪动*/
12
13 .backgroundBox {
14 border:1px solid orange;
15 width:100px;
16 height:2000px;
17 }
18
19 .fixedBox {
20 border:1px solid red;
21 width:100px;
22 height:100px;
23 position:fixed; /*支持实现w3c标准的浏览器*/
24 _position:absolute; /*单独针对IE6*/
25 left:200px; /*距离顶部200px*/
26 top:200px; /*距离右边200px*/
27 _top:expression(eval(document.documentElement.scrollTop+200)); /*+200是IE6.0下面距离浏览器窗口顶部的位置*/
28 /*IE6.0下面距离底部位置为0px*/
29 /*_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));*/
30 }
31 </style>
32 </

[3]为select添加样式

来源: 发布时间: 2013-11-06

改变select默认的样式，一般情路情况下通过ul,li来模拟来实现。

有很多Jquery插件就是通过这样的方式来改变select默认样式的。

根据程序哥哥那边的反映，此种方式在form提交后无法获取数据，后来经过实验，用了不同的JS/Jquery插件，都是同样的结果：无法获取数据。

后来看一篇外国人写的博客，用css的样式来实现

在select外面添加一个div，设置select的宽度小于父级div的宽度，然后通过设置div的background属性，改变select默认箭头的样式。

此种方法不失为一个好方法，不写脚本，只用单纯的css来实现。

不过这种方法也是有瑕疵的，就是在IE系列下，选中某个选项的时候会有背景色块，IE7-IE10都有此bug。

在Opera下，设置div的背景图不显示，也就是select的下拉箭头不显示，这个不知道是什么原因所致。

以下代码

<div >
<select name="select">
<option>AAAAAAAAAAA</option>
<option>BBBBBBBBBBB</option>
<option selected>CCCCCCCCCCC</option>
<option>DDDDDDDDDDD</option>
</select>
</div>

.select_style {width:240px; height:30px; overflow:hidden; background:url(/images/arrow.png) no-repeat 215px;
border:1px solid #ccc;
-moz-border-radius: 5px; /* Gecko browsers */
-webkit-border-radius: 5px; /* Webkit browsers */
border-radius:5px;
}
.select_style select { padding:5px; background:transparent; width:268px; font-size: 16px; border:none; height:30px;
-webkit-appearance: none; /*for Webkit browsers*/
}

本文链接