Question

我在页面加载时显示应用程序名称。如果应用程序名称太大，我想部分用点显示它，并希望在mousehover上显示完整的应用程序名称。我试图这样做，但没有得到确切的解决方案。任何人都可以帮助我。我正在使用带有jquery的asp.net 4.0。

由于阿斯马贾

Answer 1

使用如下

<span title="long name">long...</span>

使用title显示全名。鼠标悬停在显示屏上

如果你想设置工具提示的样式，请使用以下插件。

http://twitter.github.com/bootstrap/javascript.html#tooltips

Answer 2

你可以像这样生成HTML

<li class="someclass" data-short="app..." data-full="application">app...</li>

假设您使用li标签，因此jq代码将

$(function () {
    $(".someclass").mouseover(function() {
        $(this).html($(this).data('full'));
    });
    $(".someclass").mouseout(function() {
        $(this).html($(this).data('short'));
    });
});

Answer 3

尝试使用字符串类的子字符串函数和该控件的title属性

Answer 4

<!-- make sure you have the jquery library loaded !-->

<div class="application_name">My Long Application Name</div>
<div class="application_name">My Long Application Name</div>
<div class="application_name">My Long Application Name</div>

<script type="text/javascript">

    // on page load

    var max_characters = 10;

    $(document).ready(function(){

        // iterate all application names

        $('.application_name').each(function(){

            // establish if they contain more than your desired number of characters

            if($(this).html().length > max_characters){

                // attach nesting divs to the DOM to work with later

                var html = '';

                html += '<div class="long_application_name" style="display:none;">';
                html += $(this).html();
                html += '</div>';
                html += '<div class="short_application_name">'
                html += $(this).html().substring(0, max_characters) + '...';
                html += '</div>';

                $(this).html(html);

            }

            $(this).mouseover(function(){

                // show hide the appropriate nested divs

                $(this).find('.long_application_name').show();
                $(this).find('.short_application_name').hide();

            })

            $(this).mouseout(function(){

                // show hide the appropriate nested divs

                $(this).find('.long_application_name').hide();
                $(this).find('.short_application_name').show();

            })
        })
    });

</script>

用点隐藏文本并在鼠标悬停时显示它

4 个答案: