0

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

谢谢阿斯玛

4

4 回答 4

2

Use like following

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

Use the title to display the full name. On mouse over it display's

If u want to style the tooltip use the following plugin.

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

于 2012-11-15T11:41:42.140 回答
0

you can generate html like this

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

assuming you use li tag and so jq code will be

$(function () {
    $(".someclass").mouseover(function() {
        $(this).html($(this).data('full'));
    });
    $(".someclass").mouseout(function() {
        $(this).html($(this).data('short'));
    });
});
于 2012-11-15T11:42:17.427 回答
0 
<!-- 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>
于 2012-11-15T12:09:22.623 回答
0

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

于 2012-11-15T11:45:25.457 回答