今天在看smashing Magazine的 Newsletter Issues #1 其中介绍了sildding  label， 对于web form的一个改进。

http://www.csskarma.com/blog/sliding-labels-v2/

从上面这个图可以看到，这个表格因为省去了label的空间，所以显得更加的简洁。当你点击input区域的时候，label就滑动到inputbox的前端。不用担心自己不记得改填的这个框是什么内容。

sliding Labels, 是由Tim Wright一月初在他的blog中发布的，用Jquery实现的，demo在这里。Tim Wright采用的是Progeressive Enhancement (这个系列的文章有Understanding Progressive Enhancement,Progressive Enhancement with CSS和Progressive Enhancement with JavaScript
)的方式(lifesinger的blog里面有中文翻译版本， 理解渐进增强, css渐进增强和JavaScript渐进增强).  渐进增强关注于内容。进入渐进增强的思维方法很简单：只要从内容开始往外想。内容形成坚实的基石，在此之上才能添加样式和交互。

对于这个demo，那些禁用了javascript的人依然可以看到正确的内容。如下图。

下面从代码的角度来分析一下这个demo.

最朴实的页面内容，一个要提交的表单，包括了name, email, Url, comment, 和 提交按钮。 每一个field都用一个div包起来，并赋给slider的类。每个field又包括了一个label和一个input/textarea.

<form action="" method="post" id="info">
  <h2>Contact Information</h2>

    <div id="name-wrap" class="slider">
        <label for="name">Name</label>
        <input type="text" id="name" name="name">
    </div><!--/#name-wrap-->

    <div id="email-wrap"  class="slider">
        <label for="email">E&ndash;mail</label>
        <input type="text" id="email" name="email">
  </div><!--/#email-wrap-->

    <div id="url-wrap"  class="slider">
        <label for="url">URL</label>
        <input type="text" id="url" name="url">
  </div><!--/#url-wrap-->

    <div id="comment-wrap"  class="slider">
        <label for="comment">Comment</label>
        <textarea cols="53" rows="10" id="comment"></textarea>
  </div><!--/#comment-wrap-->

    <input type="submit" id="btn" name="btn" value="submit">
</form>

接下来看CSS代码, 一样的平凡无比，但是注意他给label的属性cursor付了个pointer的值，当鼠标移到label的时候，知道这个是“可点击的”。（注明：”可点击的说法并不准确“。 查阅了以一些资料，关于什么时候应该使用pointer，在CSS3 basic user interface module里面指出The cursor is a pointer that indicates a link.）当label被点击以后，相对应“for“的对象就得到焦点。可以看作是点击了label这个”link” 跳转到inputbox里面。《7 Quick CSS Enhancements for Better User Experience》这篇文章里面也提到了”New rule for you to live by: if the user is meant to click on any element, it should have the “pointer” cursor when the user mouses over it. Links, buttons, SELECT elements, etc.“

body                        { font:12px/1.3 Arial, Sans-serif; }
form                        { width:380px;padding:0 90px 20px;margin:auto;background:#f7f7f7;border:1px solid #ddd; }
div                         { clear:both;position:relative;margin:0 0 10px; }
label                       { cursor:pointer;display:block; }
input[type="text"],
textarea                    { width:300px;border:1px solid #999;padding:5px;-moz-border-radius:4px;-webkit-border-radius:4px; }
input[type="text"]:focus    { border-color:#777; }
input[name="zip"]           { width:150px; }

/* submit button */
input[type="submit"]        { cursor:pointer;border:1px solid #999;padding:5px;-moz-border-radius:4px;-webkit-border-radius:4px;background:#eee; }
input[type="submit"]:hover,
input[type="submit"]:focus  { border-color:#333;background:#ddd; }
input[type="submit"]:active { margin-top:1px; }

接下来就是要看一下js的代码是如何实现的了。首先我们分析一下逻辑关系

  1. 让label从input/textarwea的上方移到， input/textarea里面
  2. 如果input的value不为空的话，label就应该左移
  3. 当得到焦点时，value为空，label左移。value不为空的时候label在左面保持不动。
  4. 当失去焦点，value为空的时候，label归位，value不为空的时候，label在左边保持不动

然后看代码

/*
$(function(){
$('form#info .slider label').each(function(){
 var labelColor = '#999';
 var restingPosition = '5px';

 // style the label with JS for progressive enhancement
 $(this).css({
 'color' : labelColor,
 'position' : 'absolute',
 'top' : '6px',
 'left' : restingPosition,
 'display' : 'inline',
 'z-index' : '99'
 });

 var inputval = $(this).next().val();

 // grab the label width, then add 5 pixels to it
 var labelwidth = $(this).width();
 var labelmove = labelwidth + 5 +'px';

 //onload, check if a field is filled out, if so, move the label out of the way
 if(inputval !== ''){
 $(this).stop().animate({ 'left':'-'+labelmove }, 1);
 }

 // if the input is empty on focus move the label to the left
 // if it's empty on blur, move it back
 $('input, textarea').focus(function(){
 var label = $(this).prev('label');
 var width = $(label).width();
 var adjust = width + 5 + 'px';
 var value = $(this).val();

 if(value == ''){
 label.stop().animate({ 'left':'-'+adjust }, 'fast');
 } else {
 label.css({ 'left':'-'+adjust });
 }
 }).blur(function(){
 var label = $(this).prev('label');
 var value = $(this).val();

 if(value == ''){
 label.stop().animate({ 'left':restingPosition }, 'fast');
 }

 });
}); // End "each" statement
}); // End loaded jQuery

今天关于Sliding Label的学习到此结束！ n632