長い文字を省略させて「続きを読む」みたいなリンクにする

Ads

Result

半角スペース等が無いと省略処理が行えない。日本語圏に最適化が必要

※代替案→jquery-expander

jQuery

/**
 * jquery.readmore - Substring long paragraphs and make expandable with "more" link
 * @date 7 July 2010
 * @author Jake Trent  http://www.jtsnake.com/
 * @version 1.1
 */
(function($) {
    $.fn.readmore = function(settings) {
        var opts = $.extend({}, $.fn.readmore.defaults, settings);

        this.each(function() {
            $(this).data("opts", opts);
            if ($(this).html().length > opts.substr_len) {
                abridge($(this));
                linkage($(this));
            }
        });
        //「続きを読む」のデフォルト処理
        function linkage(elem) {
            elem.append(elem.data("opts").more_link);
            elem.children(".more").click(function() {
                $(this).hide();
                $(this).siblings("span:not(.hidden)").hide().siblings("span.hidden").animate({
                    'opacity': 'toggle'
                }, 1000);
            });
        }
        //文字省略処理
        function abridge(elem) {
            var opts = elem.data("opts");
            var txt = elem.html();
            var len = opts.substr_len;
            var dots = "<span>" + opts.ellipses + "</span>";
            var charAtLen = txt.substr(len, 1);
            while (len < txt.length && !/\s/.test(charAtLen)) {
                len++;
                charAtLen = txt.substr(len, 1);
            }
            var shown = txt.substring(0, len) + dots;
            var hidden = '<span class="hidden" style="display:none;">' + txt.substring(len, txt.length) + '</span>';
            elem.html(shown + hidden);
        }
        return this;
    };
    //デフォルト値
    $.fn.readmore.defaults = {
        substr_len: 500,
        ellipses: '&#8230;',
        more_link: '<a class="more">Read&nbsp;More</a>'
    };

})(jQuery);
//セレクタとオプション指定
$(function() {
    $('#rm').readmore({
        substr_len: 10,
        more_link: '<a class="more" href="http://google.com">更に読む</a>'
    });
});​

css

.hidden { display:none; }​

html

<div id="rm">子供の時分の冬の夜の記憶の中に浮上がって来る数々の物象の中に「行燈」がある。
    自分の思い出し得られる限りその当時の夜の主なる照明具は石油ランプであった。</div>​

via

指定文字数以上を隠して、もっと読むボタンで表示させるJavaScript「Jquery.readmore」

タイトルとURLをコピーしました