使用IE10和CSS Device Adaptation-js模仿html5 placeholder-jQuery：用方向键控制层的移动

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

本页文章导读:

▪使用IE10和CSS Device Adaptation 浏览器在不同的设备上大小布局不同，而且就算在相同设备上用户也会改变浏览器的大小，我们希望布局可以更好的适配用户的浏览器显示区域大小，可以采用CSS Device Adaptation，在IE10上进行.........

▪js模仿html5 placeholder html5原生支持placeholder，对于不支持的浏览器（ie），可用js模拟实现。js代码 1 (function(){ 2 //判断是否支持placeholder 3 function isPlaceholer(){ 4 var input = document.createElement('input'); 5 re.........

▪jQuery：用方向键控制层的移动题目：按下方向键时，使层向相应的方向平滑移动20像素；四个方向键的键码分别是37（左）、38（上）、39（右）和40（下）。然后我写了下面的代码：$div就是要移动的层，且它的position已在CS.........

[1]使用IE10和CSS Device Adaptation

来源: 互联网发布时间: 2013-11-06

浏览器在不同的设备上大小布局不同，而且就算在相同设备上用户也会改变浏览器的大小，我们希望布局可以更好的适配用户的浏览器显示区域大小，可以采用CSS Device Adaptation，在IE10上进行测试。

先最简单的HTML代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        .bigTiles {
            width: 691px;
            height: 336px;
            float:left;
        }

        .smallTiles {
            width: 159px;
            height: 159px;
             float:left;
        }

        .middleTiles {
            width: 336px;
            height: 336px;
             float:left;
        }
    </style>
</head>
<body>
    <div class="bigTiles" style=" background-color:yellow"></div>
    <div class="middleTiles" style=" background-color:blue"></div>
    <div class="smallTiles" style=" background-color: red"></div>
    <div class="smallTiles" style=" background-color:burlywood"></div>
</body>
</html>

在IE10上的运行结果

当屏幕宽1360的时候

[2]js模仿html5 placeholder

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

html5原生支持placeholder，对于不支持的浏览器（ie），可用js模拟实现。
js代码

1 (function(){
2 //判断是否支持placeholder
3 function isPlaceholer(){
4 var input = document.createElement('input');
5 return "placeholder" in input;
6 }
7 //不支持的代码
8 if(!isPlaceholer()){
9 //创建一个类
10 function Placeholder(obj){
11 this.input = obj;
12 this.label = document.createElement('label');
13 this.label.innerHTML = obj.getAttribute('placeholder');
14 this.label.style.cssText = 'position:absolute; text-indent:4px;color:#999999; font-size:12px;';
15 if(obj.value != ''){
16 this.label.style.display = 'none';
17 }
18 this.init();
19 }
20 Placeholder.prototype = {
21 //取位置
22 getxy : function(obj){
23 var left, top;
24 if(document.documentElement.getBoundingClientRect){
25 var html = document.documentElement,
26 body = document.body,
27 pos = obj.getBoundingClientRect(),
28 st = html.scrollTop || body.scrollTop,
29 sl = html.scrollLeft || body.scrollLeft,
30 ct = html.clientTop || body.clientTop,
31 cl = html.clientLeft || body.clientLeft;
32 left = pos.left + sl - cl;
33 top = pos.top + st - ct;
34 }
35 else{
36 while(obj){
37 left += obj.offsetLeft;
38 top += obj.offsetTop;
39 obj = obj.offsetParent;
40 }
41 }
42 return{
43 left: left,
44 top : top
45 }
46 },
47 //取宽高
48 getwh : function(obj){
49 return {
50 w : obj.offsetWidth,
51 h : obj.offsetHeight
52 }
53 },
54 //添加宽高值方法
55 setStyles : function(obj,styles){
56 for(var p in styles){
57 obj.style[p] = styles[p]+'px';
58 }
59 },
60 init : function(){
61 var label = this.label,
62 input = this.input,
63 xy = this.getxy(input),
64 wh = this.getwh(input);
65 this.setStyles(label, {'width':wh.w, 'height':wh.h, 'lineHeight':20, 'left':xy.left, 'top':xy.top});
66 document.body.appendChild(label);
67 label.onclick = function(){
68 this.style.display = "none";
69 input.focus();
70 }
71 input.onfocus = function(){
72 label.style.display = "none";
73 };
74 input.onblur = function(){
75 if(this.value == ""){
76 label.style.display = "block";
77 }
78 };
79 }
80 }
81 var inpColl = document.getElementsByTagName('input'),
82 textColl = document.getElementsByTagName('textarea');
83 //html集合转化为数组
84 function toArray(coll){
85 for(var i = 0, a = [], len = coll.length; i < len; i++){
86 a[i] = coll[i];
87 }
88 return a;
89 }
90 var inpArr = toArray(inpColl),
91 textArr = toArray(textColl),
92 placeholderArr = inpArr.concat(textArr);
93 for (var i = 0; i < placeholderArr.length; i++){
94 if (placeholderArr[i].getAttribute('placeholder')){
95 new Placeholder(placeholderArr[i]);
96 }
97 }
98 }
99 })()

html代码：

1 <div>
2 <input type="text" placeholder="提示1" /><br>
3 <textarea placeholder="提示2" /></textarea><br>
4 <input type="text" placeholder="提示3" /><br>
5 </div>

css代码：

1 div,input,textarea{ margin:0; padding:0;}
2 div{width:400px; margin:100px auto 0;}
3 input,textarea{width:200px;height:20px; margin-top:5px;line-height:20px;border:1px #666666 solid; background-color:#fff; padding-left:2px;}
4 textarea{ height:60px; font-size:12px; resize:none;}

本文链接

[3]jQuery：用方向键控制层的移动

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

题目：按下方向键时，使层向相应的方向平滑移动20像素；四个方向键的键码分别是37（左）、38（上）、39（右）和40（下）。

然后我写了下面的代码：

$div就是要移动的层，且它的position已在CSS中设为relative。瞄一眼好像没什么问题，运行之后发现下面的问题：

1.按了向下之后，再按向上没有反应。

2.按了向右之后，再按向左没有反应。

后来经一网友点拨，恍然大悟：

当按了向下的时候，top值为20px，这时候再按向上，从Firebug可以看出此时的bottom值也是20px，而层没有向上移动是因为浏览首先解析的是top，也就是说{top:20px;bottom:100px}和{top:20px}是一样的，不管bottom值是多少。按了向右之后，按向左没有反应也是这个原因，关键在left值。

于是将代码改了下：

运行之后如预期一样，上下左右都没问题。

体会：一直都知道在定位的时候，靠top和left两个属性就足够的，偏偏还写出了right/bottom，真是细节要人命啊。

本文链接