zoukankan      html  css  js  c++  java
  • float label 提示

    很多时候,我们写input 都会添加 placeholder 属性,用于提示用户这里该输入什么,怎么输入,但是当用户一旦输入了字符串,该提示就会消失,相信会有人,输入内容后可能会忘记这里要输入的是什么东西(不排除这种可能)。

    那么,这个怎么解决呢?

    这里给介绍两种input提示的js插件:

    1、floatLabel.js 

    该js是基于jq的,所以,使用该插件前先引入jQuery 1.8+,用法如下:

    <script src="jquery.js" type="text/javascript"></script>
    <script src="floatlabels.js" type="text/javascript"></script>
    <script>
        $('input.floatlabel').floatlabel();
    </script>
    <input type="text"  class="floatlabel" placeholder="请输入姓名" />
    

    该插件是在用户输入的时候,将placeholder属性的值显示为提示。

    目前,上面的代码,用到的都是 floatlabel.js 的默认写法,我们还可以为该方法传入参数。

    <script>
        $('input.floatlabel').floatlabel({
            // Add Configuration Object here
        });
    </script>
    

    floatlabel方法属性:

    slideInput   Default:true
    如果值为true,输入内容下滑(高度),以适应浮动标签。
    
    labelStartTop    Default:"0px"
    浮动标签开始运动的位置,默认0px
    
    labelEndTop    Default:"0px"
    浮动标签结束运动的位置,默认 0px

    paddingOffset Defaule:"12px"
    浮动标签出现时input顶部填充大小
    transitionDuration Default:0.3 动画时长 transitionEasing Default:"ease-in-out" 动画运动方式 labelClass Default:"" 浮动标签添加的样式 typeMatches Default:/text|password|email|number|url/ 指定类型,元素其他类型触发无效。

    注意:floatlabel.js 还支持内联提示属性和样式属性 data-label  /  data-class

    floatlabel.js 默认使用 placeholder 属性的值做为提示,但如果有 data-label 属性,那么就会使用 data-label 属性值作为提示。

    data-class 则是给浮动提示标签添加class的。

    2、JVFloat.js   demo

    该js插件也是基于jquery的,因此引入该js之前也需要先引入jquery。

    还有点需要注意的就是,该插件需要引入标签浮动的样式,如:

    <link rel="stylesheet" href="css/jvfloat.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <script src="js/jvfloat.min.js"></script>

    使用方法:

    $('.testBox').jvFloat();
    
  • 相关阅读:
    叶落归根(hometown)
    设置(settings)
    文明距离(civil)
    计算机基础知识
    gojs插件使用教程
    编程语言分类
    dp优化简单总结
    Splay入门题目 [HNOI2002]营业额统计
    hdu3415:最大k子段和,单调队列
    hdu5072(鞍山regional problem C):容斥,同色三角形模型
  • 原文地址:https://www.cnblogs.com/ayseeing/p/4220982.html
Copyright © 2011-2022 走看看