页面的友好性-操作方式

1.提交：用回车提交表单，而不是滚到页面最底（顶）端点击【提交】。

document.getElementById("myForm").addEventListener("submit", function(e) {
    e.preventDefault();
    //do something
    return false;
});

2.ctrl+左键=新窗口：不要迫使你的用户在你的网站上不停的点击后退键

document.getElementById("myLink").addEventListener("click", function(e) {
    // e.preventDefault();  
    if(e.meta || e.ctrlKey) return; // 用户想新开一个窗口，放开    
   e.preventDefault();
});

3.用"text-overflow: ellipsis" 时请配合上title标签
介绍下text-overflow : clip | ellipsis
参数：
clip : 　不显示省略标记（...），而是简单的裁切 - 不常用
ellipsis : 　当对象内文本溢出时显示省略标记（...）
说明：
设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。
text-overflow:ellipsis属性在FF(firefox)中是没有效果的。

我们可以用它代替我们通常所用的标题截取函数，而且这样做对搜索引擎更加友好，如：标题文件有50个汉字，而我们的列表可能只有300px的宽度。假如用标题截取函数，则标题不是完整的，假如我们用CSS样式text-overflow:ellipsis，输出的标题是完整的，只是受容器大小的局限不显示出来罢了。

另：text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示省略号的效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<style type="text/css">
ul {width:300px; margin:50px auto;}
li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
a {color:#03c; font-size:13px;}
a:hover {color:#000;}
</style>
</head>
<body>
<ul>
<li>使用text-overflow:ellipsis对溢出文本显示省略号有两个好处，一是不用通过程序<li>限定字数；二是有利于SEO。需要使用对对溢出文本显示省略号的通常是文章标题列表，这
<li>样处理对搜索引擎更友好，因为标题实际上并未被截字，而是局限于宽度而未被显示而已。
</ul>
    
</body>
</html>

FF并不支持，不过可以通过Jquery来实现类似的效果（jQuery ellipsis plugin）
调用方法：

1.$(document).ready(function() {
2.    $('.ellipsis').ellipsis();
3.}

使用text-overflow: ellipsis时，当我用鼠标悬停在这个元素上时，你最好用title属性显示出完整的信息：

<div class="ellipsizeMe lazy " title="I am some really, really long text that's going to be ellipsized">
I am some really, really long text that's going to be ellipsized
</div>

如果你不想把相同的内容输出两次，你可以使用Js动态的设置title。

4.善用focus和active

focus/blur（被动）：方法触发使元素获得（失去）焦点

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").focus(function(){
    $("input").css("background-color","#FFFFCC");
  });
  $("input").blur(function(){
    $("input").css("background-color","#D6D6FF");
  });
  $("#btn1").click(function(){
    $("input").focus();
  });  
  $("#btn2").click(function(){
    $("input").blur();
  }); 
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>
<p><button id="btn1">触发输入域的 focus 事件</button></p>
<p><button id="btn2">触发输入域的 blur 事件</button></p>
</body>
</html>

focus/blur：当元素获得（失去）焦点时触发

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").focus(function(){
    $("input").css("background-color","#FFFFCC");
  });
  $("input").blur(function(){
    $("input").css("background-color","#D6D6FF");
  });
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>
</body>
</html>

active: 选择器用于选择活动链接。（也就是点击）

<!DOCTYPE html>
<html>
<head>
<style>
a.ex1:hover,a.ex1:active {color:red;}
a.ex2:hover,a.ex2:active {font-size:150%;}
a.ex3:hover{background:red;}
a.ex3:active{font-size:150%;}
a.ex4:hover,a.ex4:active {font-family:'微软雅黑';}
a.ex5:visited,a.ex5:link {text-decoration:none;}
a.ex5:hover,a.ex5:active {text-decoration:underline;}
</style>
</head>

<body>
<p>请把鼠标指针移动到这些链接上。</p>

<p><a class="ex1" href="/index.html">这个链接改变颜色。</a></p>
<p><a class="ex2" href="/index.html">这个链接改变字体大小。</a></p>
<p><a class="ex3" href="/index.html">这个链接改变背景色。</a></p>
<p><a class="ex4" href="/index.html">这个链接改变字体。</a></p>
<p><a class="ex5" href="/index.html">这个链接会出现下划线。</a></p>
</body>

</html>

...待续

posted on 2014-04-25 16:02 |排骨阅读(501) 评论(0) 收藏举报