刚刚封装了一个标签.大家看看如何.-CSDN博客

在页面上经常遇到显示个文章标题什么的.
我以前用fn:substring.但是看不到全部.有时候感觉很不舒服..所以写了这么个标签..当鼠标移动到文字上的时候,把完整的信息给显示出来..大家看看如何?帮忙提提改进的建议~~


<%-- 
    Document   : subString
    Created on : 2008-5-21, 21:44:12
    Author     : XieLei
--%>

<%@ tag description="截断字符串显示.并在鼠标经过时提示完整信息!" pageEncoding="UTF-8"%>
<%@ tag body-content="scriptless" %>
<%@ attribute name="className" rtexprvalue="true" type="java.lang.String" description="指定提示信息的样式" %>
<%@ attribute name="width" rtexprvalue="true" type="java.lang.String" description="指定要显示的长度" %>
<%@ attribute name="text" rtexprvalue="true" type="java.lang.String" description="要显示的文本" %>
<%@ attribute name="newLine" rtexprvalue="true" type="java.lang.Boolean" description="提示完整信息是否换行,如果设置必须指定width属性" %>
<%@ attribute name="newLineClass" rtexprvalue="true" type="java.lang.String" description="设置提示信息的文本" %>
<%@ attribute name="newLineWidth" rtexprvalue="true" type="java.lang.Integer" description="长度达到width就自动换行" %>

<jsp:doBody var="content" scope="page" />
<%try{
Object xl_test_view_js_is_has = request.getAttribute("xl_test_view_js_is_has");
if(xl_test_view_js_is_has == null || !(Boolean)xl_test_view_js_is_has){ 
%>
<script type="text/javascript">
            //全局变量,标注是否创建了元素
            var xl_test_view_mp_js_has = false;
            //显示元素
            function xl_test_view_mp_showMp(newlineClass,event,obj,text,newline,width){
                var x = event.clientX+3 + "px";
                var y = event.clientY-30 + "px";
                var width = width;
                //如果没有创建过元素可以创建元素
                if(!xl_test_view_mp_js_has){
                    //创建新元素
                    var newSpan = document.createElement("span");
                    //设置个id.用来删除
                    newSpan.id = "xl_test_view_mp";
                    //设置元素内容
                    newSpan.innerHTML = text;
                    //设置元素样式.根据当前鼠标位置显示
                    newSpan.style.fontSize = '12px';
                    newSpan.style.fontStyle = 'normal';
                    newSpan.style.fontWeight = 'normal';
                    newSpan.style.textDecoration = 'none';
                    newSpan.style.overflow = '';
                    newSpan.style.color = '#000000';
                    newSpan.style.border = '1px solid #0c2b69';
                    newSpan.style.background = '#b5d5f0';
                    newSpan.style.position = 'absolute';
                    newSpan.style.width = 'auto';
                    newSpan.style.top = y;
                    newSpan.style.left = x;
                    newSpan.style.zIndex = '1000';
                    newSpan.style.whiteSpace = 'normal';
                    newSpan.style.wordWrap = 'break-word';
                    newSpan.style.wordBreak = 'normal'; 
                    //如果自动换行,进行处理
                    if(newline){
                        if(width==null){
                            width = 500;
                        }
                        newSpan.style.width = width+'px';
                    }

                    if(newlineClass != null && newlineClass != 'empty'){
                        newSpan.className = newlineClass;
                    }

                    //添加元素
                    obj.parentNode.appendChild(newSpan);
                    //全局变量,标注是否创建了元素
                    xl_test_view_mp_js_has = true;
                }
            }
            //删除元素
            function xl_test_view_mp_hideMp(obj){
                xl_test_view_mp_js_has = false;
                try{
                    var node = document.getElementById('xl_test_view_mp');
                    node.parentNode.removeChild(node);
                }catch(e){}
            }
        </script>
<%
request.setAttribute("xl_test_view_js_is_has",true);
}
}catch(Exception ex){}
%>

<div style='border:1px solid red;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width: ${width == null ? '100%' : width}' 
     ${className == null ? "" : "class='className'"}
     onmouseout="xl_test_view_mp_hideMp(this)" 
     onmousemove="xl_test_view_mp_showMp('${newLineClass == null ? "empty" : newLineClass}',event,this,'${text == null ? content : text}',${newLine == null ? false : true},${newLineWidth == null ? 100 : newLineWidth})">
    ${content}
</div>

[size=large]页面使用[/size]


<%@ taglib tagdir="/WEB-INF/tags/" prefix="xl" %>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <h2>Test NewLine</h2>
        <br/>
        <xl:subString width="100px" newLine="true" newLineWidth="300" text="指定提示的内容:四川的兄弟们努力!">生死不离，你的梦落在哪里。想着生活继续。天空失去美丽，你却等待明天站起。无论你在哪里，我都要找到你。血脉能创造奇迹。你的呼喊就刻在我的血液里</xl:subString>
        <br/>
        <xl:subString width="100px" newLine="true" newLineWidth="300">生死不离，你的梦落在哪里。想着生活继续。天空失去美丽，你却等待明天站起。无论你在哪里，我都要找到你。血脉能创造奇迹。你的呼喊就刻在我的血液里</xl:subString>
        <br/>
        <xl:subString width="100px">生死不离，你的梦落在哪里。想着生活继续。天空失去美丽，你却等待明天站起。无论你在哪里，我都要找到你。血脉能创造奇迹。你的呼喊就刻在我的血液里</xl:subString>
        <br/>
        <xl:subString width="100px" newLine="true">生死不离，你的梦落在哪里。想着生活继续。天空失去美丽，你却等待明天站起。无论你在哪里，我都要找到你。血脉能创造奇迹。你的呼喊就刻在我的血液里</xl:subString>
        <br/>
        <a href="#"><xl:subString width="100px" newLine="true">生死不离，你的梦落在哪里。想着生活继续。天空失去美丽，你却等待明天站起。无论你在哪里，我都要找到你。血脉能创造奇迹。你的呼喊就刻在我的血液里</xl:subString></a>
    </body>
</html>