jquery表单浮动标签说明

jquery表单浮动标签说明
 点击预览  点击下载

jQuery的标签更好的为你的表单的输入域创建一个漂亮的不显眼的标签。在关于这个插件的唯一性是你需要添加一个占位符文本,我们将显示标签,只有当用户需要它。  

使用步骤

要添加到您的网站,只需包括最新的jQuery库连同jquery.label_better.js到文档中的<HEAD> ,并简单地调用这样的功能:

  1. $("input.label_better").label_better({ 
  2.    position: "top"  
  3.    animationTime: 500  
  4.    easing: "ease-in-out"  
  5.    offset: 20  
  6.    hidePlaceholderonfocus: true  
  7.  }); 

有了这个插件,你可以使用一个标记覆盖在上面的函数中定义的全局选项。这里有所有你可以用你的经验定制自己的喜好的标记:

数据的位置

此标记将让你单独定义每个输入字段的位置。

  1. <input type="text" class="label_better" data-new-placeholder="Type your username" placeholder="Username"> 
  2. <input type="text" class="label_better" data-new-placeholder="Type your email address" placeholder="Email Address"> 

数据新的占位符

有时候,你希望你的占位符文本是由标签文本不同。你可以做到这一点通过如下定义新的占位符文本,该值将被显示,而不是作为标签。

  1. <input type="text" class="label_better" data-new-placeholder="Type your username" placeholder="Username"> 
  2. <input type="text" class="label_better" data-new-placeholder="Type your email address" placeholder="Email Address"> 

转载请注明:代码家园 » jquery表单浮动标签说明

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)