0

ページの読み込み時にアプリケーション名を表示しています。アプリケーション名が大きすぎる場合は、部分的にドットで表示し、マウスオーバー時に完全なアプリケーション名を表示したいと考えています。私はそれをやろうとしていますが、正確な解決策が得られません。誰でもこれで私を助けることができますか？jqueryでasp.net 4.0を使用しています。

ありがとうアスマ

4

4 に答える 4

2

次のように使用します

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

titleフルネームを表示するには、 を使用します。マウスオーバーすると、

ツールチップのスタイルを設定したい場合は、次のプラグインを使用してください。

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

于 2012-11-15T11:41:42.140 に答える
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

このような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'));
    });
});
于 2012-11-15T11:42:17.427 に答える
0

そのコントロールの文字列クラスとタイトル属性の部分文字列関数を使用してみてください

于 2012-11-15T11:45:25.457 に答える