如何自定義jquery移動對話框

如何刪除對話框的默認格式並應用我自己的CSS？如何自定義jquery移動對話框

我嘗試不工作得非常好......

<div data-role="dialog" id="confirm-clear" class="dialog-custom" > 
    <div data-role="content" > 
     <p>Some text.</p> 
     <p><a href="#" data-role="button" data-inline="true">Yes</a><a href="#" data-role="button" data-inline="true" data-rel="back">No</a></p> 
    </div> 
</div>

編輯：而在我的CSS：

.ui-dialog.dialog-custom { 

background: repeat scroll 0 0 rgba(0,0,0,.5); 

height:200px; /* this doesn't do anything */ 
}

來源

2012-02-08 soleil

JQM採用各種不同的風格，以實現其主題化，如webkit漸變和具有背景位置偏移的背景圖像。它還包含div中的一些元素或插入跨度等以進行佈局。

要開始，您需要使用調試器（如Chrome的開發人員工具）並檢查對話框，在計算風格下您可以看到您的樣式以及它們是否被覆蓋或其效果。您還可以看到任何額外的佈局元素jQM插入並關閉jQM的樣式，直到樣式生效。

現在就可以開始使用覆蓋JQM的樣式！重要的，或者modifiying JQM的CSS文件

來源

2012-02-08 20:57:12

請參閱原文中的編輯。我如何讓div不佔用屏幕的整個高度？ – soleil 2012-02-09 00:48:47

這不容易編輯，你爲什麼需要？就像賈斯珀說的，jQM覆蓋了高度，對話框意味着佔據整個屏幕，而且它的模態無論如何。另外jQM處理跨移動瀏覽器問題，所以它不能保證通過編輯jQM的resize事件來解決您的解決方案將適用於所有手機。我學會了使用我所擁有的東西，即使使用jQM（例如Android Firefox上的按鍵），仍然會發現足夠的差異，因此謹慎編輯jQM – 2012-02-09 18:26:54

CSS默認情況下使用最獨特的選擇，以及jQuery Mobile的則可能使用更獨特的選擇。您可以使用!important關鍵字，以確保您的CSS聲明用於：

.ui-dialog.dialog-custom { 
    background : repeat scroll 0 0 rgba(0,0,0,.5); 
    height  :200px !important; 
}

如果您檢查與開發工具，如Chrome瀏覽器開發工具或Firebug中，可以看到正在應用什麼樣的風格，什麼CSS規則的元素，他們來自。這將幫助您決定將樣式添加到現有框架的最佳方式。

我不確定關於對話框，但對於頁面小部件，通過jQM框架更改元素的min-height CSS屬性。您可以通過爲對話框覆蓋jQM resize事件處理程序來解決此問題。

來源

2012-02-09 00:50:12 Jasper

感謝您的回覆。！重要的是沒有幫助。你能解釋一下如何「通過爲對話框重寫jQM resize事件處理程序來解決這個問題。」 – soleil 2012-02-09 02:26:35

Firebug只顯示了這個對話框：element.style { height：687px; }，它隨着窗口大小的改變而改變。 – soleil 2012-02-09 02:28:03

@soleil關閉我的頭頂我認爲最簡單的方法是將事件處理程序綁定到'window'對象的'resize'事件，該對象有一個超時大小來設置對話框的大小。 $（window）.bind（'resize'，function（）{setTimeout（function（）{$（'＃my-dialog'）。height（200）;}，500）;}）' – Jasper 2012-02-09 17:36:57

如何自定義jquery移動對話框

回答

相關問題