从后台过来的大字段,好几万字,我这边显示的时候要在一个弹出框分页显示,控制每页显示1300字,
在这个基础上分页显示,现在问题是如果内容全是中文就刚好填满,如果内容是英文就每页只填满一半,
我现在需要一个方法来判断一个固定长宽的TD是不是被文字填满了,这种方法应该有的吧,我看见div的高度会随着内容填充自动增加。
计算你 文字的字节数 比较容易 超过1300就换页
function getBt(str){
var char = str.replace(/[^\x00-\xff]/g, '**');
return char.length;
}
把是中文的替换成“**”之后再算长度,就能得到字节数
其实你可以不用去考虑是否给占满的问题,因为不同的浏览器或不同的显示分辨率都带来很多麻烦。你就直接设置字体在弹出页面的占宽比就好了,这样无论在哪个情况下都按显示器的宽度比来自动调节
谢谢a7412369gordon的回答,你考虑的很全面 但我不懂设置占宽比怎么能实现分页啊 我现在做的是在js里把一个文本按照每页字数分割成一个数组,然后分页显示
<script>
var font_size = 1300;
var pageIndex=0; //弹出框页面初始下标
if(isIE){
font_size = 1600; //IE浏览器下每页显示1600
}
function showDis(ele){ //显示个人简介
var span = $(ele).parent();
var dis1 = span.find("input.dis_val").val();
var name = span.find("input.name_val").val();
dis1 = $.trim(dis1);
if(dis1.length==0){
dis1 = "他很懒,这里什么也没写...";
}
var arry_1 = subStringFunc(dis1,font_size); //将长字符串按指定规格分割成几段,存放在数组中
// alert(arry_1.length);
// alert(arry_1[5]);
var diag = new Dialog();
pageIndex = 0; //初始页
diag.Width = 800;
diag.Height = 600;
diag.Title = name+"的个人简介";
diag.OKEvent = function(){
}
diag.CancelEvent = function(){ //点击取消后调用的方法(取消原有的事件绑定)
}
diag.InnerHtml=arry_1[0];
diag.show();
diag.okButton.value="上一页";
diag.cancelButton.value="下一页";
diag.okButton.disabled="true";
diag.cancelButton.disabled="true";
var k = pageIndex+1;
$("#_DialogButtons_0").css({"text-align":"center"}); //更改按钮使其居中
$("#_myMsgTd_")[0].align="left"; //更改文字对齐方式为左对齐
//$("#_myMsgTd_").css({"word-break":'break-all'}); //以字符为单位换行 (解决长串英文不换行问题)
$("#_ButtonOK_0").after("<span id='_myPageIndex_'>"+k+"</span>"); //显示当前页下标
$("#_ButtonCancel_0").after("<span id='_myTotalPage_'>共"+arry_1.length+"页</span>"); //显示当总页数
if(arry_1.length>1){
$("#_ButtonCancel_0").removeAttr("disabled");
}
$("#_ButtonCancel_0").click(function(){//下一页
pageIndex++;
updateText(arry_1);
});
$("#_ButtonOK_0").click(function(){ //上一页
pageIndex--;
updateText(arry_1);
});
$("#_myCloseDiv_").click(function(){ //添加关闭事件
diag.close();
});
}
function updateText(arry_1){
$("#_Container_0").empty().text(arry_1[pageIndex]);
$("#_myPageIndex_").empty().text(pageIndex+1);
if(pageIndex>0){
$("#_ButtonOK_0").removeAttr("disabled");
}else{
$("#_ButtonOK_0").attr("disabled","true");
}
if(arry_1.length>pageIndex+1){
$("#_ButtonCancel_0").removeAttr("disabled");
}else{
$("#_ButtonCancel_0").attr("disabled","true");
}
}
function subStringFunc(str,size){
var array = Array();
var length = str.length;
if(length<=size){
array[0] = str;
}else{
var num =1;
if(length%size==0)
num = parseInt(length/size);
else
num = parseInt(length/size)+1;
var temp = '';
// alert("共有"+num+"页");
for(var i=0;i<num;i++){
temp = str.substr(i*size,size);
array[i]=temp; //截取的字符串存放在数组中
}
}
return array;
}
这是我的代码
<br> var font_size = 1300;<br> var pageIndex=0; //弹出框页面初始下标</p> <p>if(isIE){<br> font_size = 1600; //IE浏览器下每页显示1600<br> }</p> <p>function showDis(ele){ //显示个人简介<br> var span = $(ele).parent();<br> var dis1 = span.find("input.dis_val").val();<br> var name = span.find("input.name_val").val();<br> dis1 = $.trim(dis1);<br> if(dis1.length==0){<br> dis1 = "他很懒,这里什么也没写...";<br> }<br> var arry_1 = subStringFunc(dis1,font_size); //将长字符串按指定规格分割成几段,存放在数组中<br> // alert(arry_1.length);<br> // alert(arry_1[5]);<br> var diag = new Dialog();<br> pageIndex = 0; //初始页<br> diag.Width = 800;<br> diag.Height = 600;<br> diag.Title = name+"的个人简介";<br> diag.OKEvent = function(){<br><br> }<br> diag.CancelEvent = function(){ //点击取消后调用的方法(取消原有的事件绑定)<br> }<br> diag.InnerHtml=arry_1[0];<br> diag.show();<br> diag.okButton.value="上一页";<br> diag.cancelButton.value="下一页";<br> diag.okButton.disabled="true";<br> diag.cancelButton.disabled="true";<br> var k = pageIndex+1;<br> $("#_DialogButtons_0").css({"text-align":"center"}); //更改按钮使其居中<br> $("#_myMsgTd_")[0].align="left"; //更改文字对齐方式为左对齐<br> //$("#_myMsgTd_").css({"word-break":'break-all'}); //以字符为单位换行 (解决长串英文不换行问题)</p> <pre><code>$("#_ButtonOK_0").after("<span id='_myPageIndex_'>"+k+"</span>"); //显示当前页下标 $("#_ButtonCancel_0").after("<span id='_myTotalPage_'>共"+arry_1.length+"页</span>"); //显示当总页数 if(arry_1.length>1){ $("#_ButtonCancel_0").removeAttr("disabled"); } $("#_ButtonCancel_0").click(function(){//下一页 pageIndex++; updateText(arry_1); }); $("#_ButtonOK_0").click(function(){ //上一页 pageIndex--; updateText(arry_1); }); $("#_myCloseDiv_").click(function(){ //添加关闭事件 diag.close(); }); </code></pre> <p>}</p> <p>function updateText(arry_1){<br> $("#_Container_0").empty().text(arry_1[pageIndex]);</p> <p>$("#_myPageIndex_").empty().text(pageIndex+1);<br> if(pageIndex>0){<br> $("#_ButtonOK_0").removeAttr("disabled");<br> }else{<br> $("#_ButtonOK_0").attr("disabled","true");<br> }<br> if(arry_1.length>pageIndex+1){<br> $("#_ButtonCancel_0").removeAttr("disabled");<br> }else{<br> $("#_ButtonCancel_0").attr("disabled","true");<br> }<br><br> }</p> <p>function subStringFunc(str,size){<br> var array = Array();<br> var length = str.length;<br> if(length<=size){<br> array[0] = str;<br> }else{<br> var num =1;<br> if(length%size==0)<br> num = parseInt(length/size);<br> else<br> num = parseInt(length/size)+1;<br> var temp = '';<br> // alert("共有"+num+"页");<br> for(var i=0;i<num;i++){<br> temp = str.substr(i*size,size);<br><br> array[i]=temp; //截取的字符串存放在数组中<br> }<br> }<br> return array;<br> }</p> <p>这是我现在的代码 </p> <pre><code> </code></pre>