Category Archives: jQuery

[jQuery] 怎麼在 submit 按下去的時候,出現一個 confirmation dialog?

要在 submit 按鈕被按下時,出現一個確認視窗,可以使用 jQuery UI。 HTML 部分程式:

如果上面的資料會被看到,嘗試做如下設定:

jQuery 部分程式:

參考資料: Using jquery ui dialog to confirm action for form submission jQuery UI Dialog When creating a dialog with jquery, how do I hide the dialog div?

Posted in Javascript, jQuery, 程式設計 | Tagged , | Leave a comment

[Web] 上傳圖片前,怎麼先 preview?

直接參考範例: HTML:

jQuery:

CSS:

參考 這裡 的執行結果! 資料來源: Preview an image before it is uploaded

Posted in jQuery, Web, 程式設計 | Tagged , , | Leave a comment

[jQuery] 如何取得特定標籤的 id 或 class?

使用 attr()!

資料來源: How can I get the ID of an element using jQuery? How can I get the current class of a div with jQuery?

Posted in jQuery, Web, 程式設計 | Tagged , | Leave a comment

[jQuery] 怎麼讓 table 的任一列點擊後連到特定網址?

請見下面連結中更詳細的說明! 資料來源: how to make a whole row in a table clickable as a link?

Posted in Javascript, jQuery, 程式設計 | Tagged , , | Leave a comment

[jQuery] 兩個將圖片排成像磁磚一樣的套件

最常用的兩個: wookmark masonry

Posted in Javascript, jQuery, 程式設計 | Tagged , , | Leave a comment

[jQuery] 另一個下載完前,先隱藏元件的作法

舉例說明,譬如說我使用 EasyUI 想要顯示樹狀結構,有時候資料讀進來當中會先出現醜醜的 ul list,之後才顯示出漂亮的樹狀圖。所以我想要先不要顯示資料,等完全讀完之後,再一次性的顯示樹狀圖。 方法一:

方法二:

資料來源(source): jQuery hide() div until fully loaded How do I hide an HTML element before the page loads

Posted in CSS, Javascript, jQuery, 程式設計 | Tagged , , | Leave a comment

wookmark 顯示出來的圖片會重疊!?

wookmark 是用來將圖片像磁磚一樣排列的套件。可以參考官網跟男丁格爾的介紹。 使用 wookmark 時,你有遇到圖片重疊的狀況嗎? 這個應該是因為圖片來不及載入的原因吧! stackoverflow 上面,網友建議的解法是:呼叫 wookmark() 兩次。 我覺得填入 image width 跟 height 應該可以解決問題。試看看之後,再來 update 這個 post!

Posted in Javascript, jQuery, 程式設計 | Tagged , , , | Leave a comment

[jqm] 怎麼用程式控制 radio button 的on/off?

我使用下面這行:

我一開始是使用參考連結裡面建議的方法,即:

但不知為何,就是沒辦法成功。所以換成最上面的方法。 參考資料: jQuery Mobile – Change radiobutton state programmatically

Posted in Javascript, jQuery, 程式設計 | Tagged , | Leave a comment

[jQuery] $(document).ready() 跟 $(document).on(‘pagecreate’, )

這兩個怎麼用? 簡單的來說,在 jQuery 中使用

在 jQuery Mobile 中,使用

參考資料: jQuery Mobile Events jQuery Mobile: document ready vs page events

Posted in Javascript, jQuery, 程式設計 | Tagged , | Leave a comment

[jQuery Mobile] 怎麼把 footer 固定在下面?

加上 data-position=”fixed” 即可!

參考資料: jQuery Mobile: Stick footer to bottom of page

Posted in Javascript, jQuery, 程式設計 | Tagged , | Leave a comment