jQuery調整大小功能只能在窗口上工作？

我想知道jQuery .resize()函數是否只適用於（a）窗口？我不能使用此功能來檢測某個元素是否調整大小？jQuery調整大小功能只能在窗口上工作？

例如，以下JSFiddle現在沒有工作嗎？但是有可能真正實現它的工作嗎？

$(document).ready(function() { 
 
    /* Does not work for me: */ 
 
    $(".foo").resize(function() { 
 
    alert("yes!"); 
 
    }); 
 

 
    /* Does work for me: */ 
 
    $(window).resize(function() { 
 
    alert("yes!"); 
 
    }); 
 
});

.foo { 
 
    border: 2px solid; 
 
    padding: 20px; 
 
    width: 100px; 
 
    ; 
 
    resize: both; 
 
    overflow: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<p><b>Note:</b> Internet Explorer does not support the resize property.</p> 
 

 
<div class="foo"> 
 
    Drag the corner(s) around. 
 
</div>

來源

2016-05-12 Barrosy

你只需要自己建立一些東西。你抱怨不存在的功能，然後抗議使用jQuery UI，因爲你只需要調整大小功能？建立一些東西來監控它自己然後，它不難 – QBM5

@ QBM5這不是我的觀點。我的觀點是，我正在尋找一個答案，可以使用jQuery來檢測調整大小的元素，這就是它的全部。我知道這個元素可以調整大小，因爲它默認包含'height：auto;'，並且當它中的內容改變時，高度會改變。如果你使用圖片作爲內容，你可能會知道我在說什麼。 – Barrosy

沒有使用jquery（base）或純javascript的事件，當元素更改大小時將觸發事件，resize事件僅適用於窗口 – QBM5

是其能夠利用這個插件JqueryUI Resizable，代碼將是簡單的

$(".foo").resizable();

示例演示以下

$(document).ready(function() { 
 
\t $("#resize-me").resizable(); 
 
});

#resize-me 
 
{ 
 
    height: 150px; 
 
    width: 150px; 
 
    border:2px solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js" integrity="sha256-55Jz3pBCF8z9jBO1qQ7cIf0L+neuPTD1u7Ytzrp2dqo=" crossorigin="anonymous"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<div id="resize-me"> 
 
Resize me 
 
</div>

來源

2016-05-12 13:47:20

但是它需要包含JqueryUI，否則此解決方案將無法工作？用普通的jQuery，CSS和HTML是不可能的？它看起來像添加這個可調整大小的功能會添加自己的樣式元素或僅僅是例子？ – Barrosy

@Barrosy是的，這將需要你添加這個plguin，否則如果你不想使用插件，那麼你最終會寫出他們寫的相同的代碼，可能重新發明輪子。風格是由其CSS文件添加..只需通過使用js文件，你會沒事的... –

而我將如何確定它的元素調整大小呢？ – Barrosy

你是正確的，它只能與窗口。如果窗口大小發生變化（或者如果您在某些手機上滾動過多），瀏覽器將觸發resize事件。你將不得不創建一些能夠監控單個元素的大小並激發自定義事件的東西。

Trigger page在他們的API中有一些關於觸發定製事件的信息。

來源

2016-05-12 14:10:48 cngodles

jQuery調整大小功能只能在窗口上工作？

回答

相關問題