手動觸發jQCloud2的自適應功能

2021-08-30 18:03:25 字數 1477 閱讀 3580

前幾天做專案(vue+jquery),發現了乙個問題:

通過v-show 指令隱藏包含 jqcloud的div 時,如果這時 碰巧 開啟了jqcloud的autoresize,並且在這時 碰巧 改變了視窗大小,div再次顯示後你會發現標籤雲會都擠在左上角。

會這樣的原因得從v-show說起。v-if跟v-show最大的區別就是,乙個是重新渲染,另乙個僅僅是通過將 display屬性設定為none。

相信各位已經看過了vue的相關文件了,使用v-show的好處也應該明白了(不必重新渲染,效能會有一定的提公升)。

的確,使用v-if替換掉v-show即可解決我遇到的這個問題,但有的時候我們還是向稍微提高一下效能的,對吧?特別是包含很複雜的元件(如圖表、動畫等)。

問題的根源在於,在元件處於display:none狀態時,jqcloud獲得的父div的長寬是不對的。通過修改jqcloud的**可以搞定這個問題,但略微麻煩。所以在不改變jqcloud**的情況下,如果我們能手動呼叫其自適應函式,那麼我們就可以實現在它被啟用的時候再進行自適應。

因為是公司的**,不能放出來,我大概說一下怎麼搞。

jqcloud.prototype = ,

resize: function() ;

if (new_size.width != this.options.width || new_size.height != this.options.height)

},};

但問題是,怎麼呼叫呢?

$.fn.jqcloud = function(word_array, option) 

if (!data) ;

$this.data('jqcloud', (data = new jqcloud(this, word_array, options)));

}else if (typeof word_array === 'string')

});};

最後一點,翻譯**話,就是,如果輸入的引數型別是 字串 ,那麼呼叫跟函式名等於字串的函式。

得出呼叫自適應函式的用法就是:

$('#***').jqcloud(words);

$('#***').jqcloud('resize');

很簡單。

這麼搞。

還是先看**。

jqcloud.prototype = 

},//其他**

……}

相信大家都明白了。這個namespace,如果大家有空看(一般沒空),會發現其代表的就是你div的id。

還是提供乙個例子吧。這個實現的就是自適應:

$(window).on('resize.' + div.id ,()=>`).jqcloud('resize');

};

先到這裡吧~

js手動觸發事件

doctype html en utf 8 js手動觸發事件 title window.onload function downloadevt.initevent click true false oa.dispatchevent downloadevt else if document.creat...

Jquery手動觸發事件

有時可能需要用 機械式的觸發乙個按鈕 文字框或網頁中其他控制項的一些事件,這個在登入的時候很常用,登入介面通常有三個文字框 使用者名稱 密碼和驗證碼,另外還有乙個登入按鈕,很多時候我們想實現每當乙個文字框失去焦點的時候和後台互動查詢使用者名稱是否存在 密碼是否正確以及驗證碼是否正確等,但同時會有另外...

js手動觸發事件dispatchEvent

如果大家將一張網頁看成乙個form的話,大致上就成了乙個web form的模型。在win form 下要想手動觸發某乙個物件的事件是很簡單的,只要傳送一條訊息即可達成。postmessage 但是網頁並不是基於訊息機制的,如果我們想在一張網頁上寫出乙個類似於按鍵精靈的功能該如何實現呢?為大家介紹js...