1

商品詳細ページの商品説明の一部のテキストを表示/非表示にする必要があるという問題があります。説明は必要な行数まで短縮する必要があり、[詳細] をクリックすると完全な説明が表示されます。以下のjQueryリンクに示すように実装することを考えました：

http://viralpatel.net/blogs/demo/jquery/jquery.shorten.1.0.js

コードは次のとおりです。

jQuery.fn.shorten = function (settings) {
    var config = {
        showChars: 100,
        ellipsesText: "...",
        moreText: "more",
        lessText: "less"
    };

    if(settings) {
        $.extend(config, settings);
    }

    $('.morelink').live('click', function () {
        var $this = $(this);
        if($this.hasClass('less')) {
            $this.removeClass('less');
            $this.html(config.moreText);
        } else {
            $this.addClass('less');
            $this.html(config.lessText);
        }
        $this.parent().prev().toggle();
        $this.prev().toggle();
        return false;
    });

    return this.each(function () {
        var $this = $(this);
        var content = $this.html();
        if(content.length > config.showChars) {
            var c = content.substr(0, config.showChars);
            var h = content.substr(config.showChars, content.length - config.showChars);
            var html = c + '<span class="moreellipses">' + config.ellipsesText + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="javascript://nop/" class="morelink">' + config.moreText + '</a></span>';
            $this.html(html);
            $(".morecontent span").hide();
        }
    });
};

次のコードをbase.tplに挿入しました

<script type="text/javascript"> 
$(document).ready(function () {
    $(".comment").shorten();
}); 
</script>

対応する html ファイルに次のクラスを指定しました。 

<div class="comment">  
   <!-- Link for getting the description from backend -->
</div >

詳細はバックエンドから取得されているため、基になる動的 div とその中の順序付けられていないリストは影響を受けていません。この機能を実装する方法をいくつか提案してください。

4

1 に答える 1

0

ポータルで行うことの 1 つは、text-overflow css プロパティを使用することです。説明ボックスの高さを定義してから、これに似たクラスを使用して、読むべき項目があることを示す省略記号を表示できます。

.flo
{
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

次に、[続きを読む] ボタンを追加するか、クリックして取引の種類を展開し、コンテンツを展開して完全に表示することができます。頭の中で考えているだけですが、html を正しくレイアウトすれば、CSS を使用して :hover の説明ボックスのサイズを拡大することもできます。または、説明をチェックボックスのタグにして、ラベルをクリックするとチェックボックスが設定されます。 :checked 状態により、css で説明を拡張できます。

あなたの問題にアプローチするための他のいくつかの方法。ご不明な点がございましたらコメントしてください..

于 2012-11-15T14:32:57.043 に答える