更改基於屏幕尺寸的jQuery

我目前正在使用一個小插件（jTruncate），當它超過了字母的某個閾值時截斷文本 - 我想知道，我可以將該字母閾值與屏幕大小綁定嗎？更改基於屏幕尺寸的jQuery

例如

如果下< 320像素屏幕尺寸 - 顯示45快報
如果500屏幕尺寸下<像素 - 顯示60快報

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

來源

2012-12-10 Ollie

只是作爲替代JavaScript中，你可以使用CSS媒體查詢，並在其中隱藏在小分辨率的跨度包裹在過去的15個字符。

來源

2012-12-10 22:09:11

這似乎是TBH做事情的一個令人難以置信的「哈克」的方式，而可悲的是，我不認爲那將是合適的（雖然略有巧妙）作爲被被截斷的內容將是動態 - 謝謝你的建議，儘管:) – Ollie

@Ollie不，這實際上是更好的方式來做到這一點。 CSS渲染的速度將比JS能做的任何事情都快（爭論點），而媒體查詢對於這種類型的操作來說非常好。另外，它的'動態'沒有什麼區別，因爲CSS將適用於容器而不是內容。 – rlemon

我收回我剛纔說的話！如果你還沒有注意到，我是新來的 - 我已經在噴出垃圾了:) 非常抱歉 - 非常感謝你的幫助，我會看看我是否可以在媒體上做到這一點 - 查詢 – Ollie

-3

只需使用window。

var win_width = $(window).width(); 
var win_height = $(window).height();

來源

2012-12-10 21:58:12 Neal

http://jsfiddle.net/EwNxR/8/這是一個演示與js。然而，我確實建議使用媒體查詢作爲Jimbo在他的答案中指出的。

代碼中要注意的重要事項：
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-11 15:12:06 rlemon

可悲的是，這些小片段並不適合我，謝謝你嘗試 - 儘可能比我能做的更好。有無論如何你可以寫一個css環繞/隱藏的例子嗎？我找不到任何東西（雖然，公平地說，我很可能看完全是錯誤的地方） http://jsfiddle.net/zvHwq/3/ – Ollie

@Ollie那個小小的謝謝你最後很煩人。抱歉。 [here]（http://jsfiddle.net/wHcxk/）是一個非常短暫的非常有限的純CSS示例。注意：您應該爲此使用CSS和JavaScript的混合。 javascript主要是爲了在一個元素上應用一個css類規則而被點擊的時候更多，並且當被點擊的時候刪除該類。 – rlemon

更改基於屏幕尺寸的jQuery

回答

相關問題