1

現在、テキストが特定の文字のしきい値を超えたときにテキストを切り捨てる小さなプラグイン（jTruncate）を使用していますが、その文字のしきい値を画面サイズに関連付けることはできますか？

例えば

画面サイズが320ピクセル未満の
場合-45文字を表示画面サイズが500ピクセル未満の場合-60文字を表示 

$().ready(function() {  
    $('#recent').jTruncate
    ({  
        length: 45,
        moreText: [""],
    });
});
4

3 に答える 3

2

Javascriptの代わりに、CSSメディアクエリを使用して、小さい解像度で非表示になっているスパンで最後の15文字をラップすることができます。

于 2012-12-10T22:09:11.393 に答える
2

http://jsfiddle.net/EwNxR/8/これはjsを使ったデモです。ただし、Jimboが回答で指摘したように、メディアクエリを使用することをお勧めします。

コードで注意すべき重要なこと：
1）ページのサイズ変更とそのアクションをリッスンすることをお勧めします。ユーザーがブラウザウィンドウのサイズを変更したときではなく、ページの読み込み時にコードを1回実行しても意味がありません。
2）IE6が問題にならない場合は、jQuery $（window）.height（）を使用する必要はありません。window.innerHeightを使用します。

window.onresize = resizer;
function resizer() {
    if (window.innerWidth < 960) {
        $('#recent').jTruncate({
            length: 45,
            moreText: [""],
        });
    }
}

私はプラグインに100％精通していませんが、オプションがjQueryプラグインのように構造化されている場合は、通常、ページの読み込み時にプラグインを初期化してから、長さの値を変更するだけです。

var recent = $('#recent'),
    defaultLength = 256; // default, can be whatever.
window.onresize = resizer;
recent.jTruncate({ length: defaultLength, moreText: [""] });
function resizer() {
    if (window.innerWidth < 960) {
        recent.jTruncate("length", 45); // don't re-init the plugin, just change the option.
    } else {
        recent.jTruncate("length", defaultLength); // page resized and truncating is no longer needed to be shorter.
    }
}
于 2012-12-11T15:12:06.937 に答える
-3

を使用するだけwindowです。

var win_width = $(window).width();
var win_height = $(window).height();
于 2012-12-10T21:58:12.527 に答える