你的位置:首页 > Java教程

[Java教程]jquery实现的文本自定义换行效果


jquery实现的文本自定义换行效果:
本章节介绍一下如何利用jquery实现文本的换行效果,当然这个换行效果比较粗糙,无法粉笔对应的位置是否该换行,不过希望能偶在代码中学到一定的只是和开阔响应的思路。
代码如下:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.content{ width:20%; margin:auto; padding:15px; border:10px solid #6CF; text-align:left; line-height:20px; font-size:12px; font-family:Arial, Helvetica, sans-serif; position:relative; margin:0px;}.content label{ display:inline-block; border:0; padding:0px; margin:0px;}</style><script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script><script type="text/javascript"> var o=""; $(function(){  o=$(".content").html();  $("#bt").click(function(){  change(); })}) function change(){  var lw=0;  var maxs=0;  var line=$("#line").val();  var h=o.split("");  var webh=""; for(var i=0;i<h.length;i++){   webh+='<label>'+h[i]+'</label>';  }  $(".content").html(webh);  $(".content label").each(function(){   if(maxs>$(this).position()['left']){    lw++;    maxs=0;    if(lw==line){     $(this).before('<br/><br/>');     lw = 0;    }   }   maxs = Math.max($(this).position()['left'],maxs);  }) } </script></head><body><center> <input id="line" type="text" value="1" /> <input type="button" id="bt" value="改变" /> <div class="content">蚂蚁部落欢迎您,只有努力奋斗才会有美好的明天,没有人一开始就是高手,分享互助</div></center></body></html>

上面的代码实现了我们的要求,文本框中是要进行换行的数字,如果是1,那么字符串每一行后面都会加空行,如果是2,那么没两行后面加空行,以此类推,下面介绍一下它的实现过程。
一.代码注释:
1.var o="",声明一个变量用来存储获取div下html内容。
2.$(function(){}),当文档结构完全加载完毕再去执行函数中的代码。
3.o=$(".content").html(),获取div中的内容赋值给变量o。
4.$("#bt").click(function(){change();}),点击按钮执行事件处理函数,并调用change()函数。
5.function change(){},此函数实现了换行效果。
6.var lw=0,声明一个变量并初始化为零,此变量用存储分行的数目。[/s
7.var maxs=0,声明一个变量用来存储label标签距离父元素的左边距。
8.var line=$("#line").val(),获取文本框值,也就是规定我们如何分行的数字。
9.var h=o.split(""),将字符串中的每一个字符进行分割。
10.var webh="",声明一个变量用来存储添加label标签的内容。
11.for(var i=0;i<h.length;i++),遍历数组中的每一个数组项,也就是每一个字符。
12.webh+='<label>'+h+'</label>',为原来字符串中的每一个字符外面包裹label标签。
13.$(".content").html(webh),将内容写入div中。
14.$(".content label").each(function(){}),遍历每一个label标签。
15.if(maxs>$(this).position()['left']){},判断的maxs的值是否大于当前label标签距离父div元素的左边距,如果不换行的话maxs的值不可能大于左边距的,但是如果遇到父元素的边缘出现换行就会大于左边距了。
16.lw++,行数加1。
17.maxs=0,将maxs的值重置为0。
18.if(lw==line){$(this).before('<br/><br/>');lw = 0;} ,如果达到换行的数目,那么就会添加换行标签进行换行,并重置lw。
19.maxs = Math.max($(this).position()['left'],maxs),将maxs的值设置两者较大的一个。
二.相关阅读:
1.split()函数可以参阅javascript的split()函数使用介绍一章节。 [
2.html()函数可以参阅jQuery的html()方法一章节。
3.each()函数可以参阅jQuery的each()方法一章节。
4.position()函数可以参阅jQuery的position()方法一章节。
5.before()函数可以参阅jQuery的before()方法一章节。
6.Math.max()函数可以参阅JavaScript的Math.max()方法一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13992

更多内容可以参阅:http://www.softwhy.com/jquery/