Limiter的简单demo--20131029 -

xjwolaile

浏览: 342137 次
性别:
来自: 杭州

最近访客更多访客>>

waylon33

Cyoooa

h06910101

androidHua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Limiter的简单demo--20131029

博客分类：

学习
demo
前端技术

1、效果及功能说明

在输入框内限定了数字数量后每写一个字符减少一个字符的位置并显示出还能写多少个字

2、实现原理

是首先判断输入的格式是否是UTF-8的格式格式正确下才能有效的进行计算，但后是定义一个限定的值后加进输入框内，后安装减法输入一个字符就少一个字符的位置并显示下面

3、主要的方法

//判断J_AucTitle里面的有多少个字 J_LimiterWrapper里面的显示出来多少个字
        S.use('gallery/limiter/1.4/index', function (S, Limiter) {
            var textLimiter = new Limiter('#J_AucTitle',{wrapper:'#J_LimiterWrapper'});
            textLimiter.render();
        })

4、代码

Html5代码

<!DOCTYPE html>
<html>
<head>
	<script src="http://a.tbcdn.cn/s/kissy/gallery/limiter/1.4/index-min.js?t=20130621173819"></script>
    <title>Limiter的简单demo</title>
    <script src="http://a.tbcdn.cn/s/kissy/1.3.0/kissy-min.js" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="http://a.tbcdn.cn/s/kissy/1.3.0/css/dpl/base-min.css">
</head>
<body>
    <div class="controls">
        <input type="text" id="J_AucTitle" name="item-title" value="明河">
        <div id="J_LimiterWrapper" style="margin-top:10px;"><span class="ks-letter-count">你还可以输入<em class="J_LetterRemain">50</em>个汉字</span></div>
    </div>

    <script>
    	//判断输入的格式是否是utf-8的格式，只有utf-8才可以识别清楚
        var S = KISSY;
        if (S.Config.debug) {
            var srcPath = "../../../";
            S.config({
                packages:[
                    {
                        name:"gallery",
                        path:srcPath,
                        charset:"utf-8",
                        ignorePackageNameInUri:true
                    }
                ]
            });
        }
		//判断J_AucTitle里面的有多少个字 J_LimiterWrapper里面的显示出来多少个字
        S.use('gallery/limiter/1.4/index', function (S, Limiter) {
            var textLimiter = new Limiter('#J_AucTitle',{wrapper:'#J_LimiterWrapper'});
            textLimiter.render();
        })
    </script>

</body>
</html>

分享到：

margin 属性学习--20131030 | KISSY文本diff工具--20131028

2013-10-29 23:24
浏览 657
评论(1)
分类:Web前端
查看更多

1 楼 hxp520520 2014-07-09

new Limiter() 这个对象是kissy API里面的。没看懂这个对象

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Limiter的简单demo--20131029

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Limiter的简单demo--20131029

评论

发表评论

相关推荐

Zepto

node.js的学习-20140611

node.js的学习-20140609

git的学习-20140604

PC和移动端的页面的一些差距-20140525

Bootstrap排版基础样式和响应式图片-20140521

Bootstrap特性、设计和组件-20140519

Bootstrap流式布局-20140515

Bootstrap的宽度和分辨率的差别-20140514

Bootstrap的认识-20140513

jquery初步认识-20140123

html5的特殊标签作用-20140114

ie下的指定样式-20140106

margin-left在IE6下左浮动加倍-20140102

浮动存在的问题-20131229

在ie6下同张图片不能外面包有a标签后在画热区-20131223

ie6下导航存在的问题和-2013-12-20

按比例展示的小js-20131217

定位需要注意-20131214

flash在Safari下的BUG-20131212

最近访客更多访客>>