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/

爱程序网

Tags：[db:关键字]