jQuery UI主題內數據表插件

我正在使用jquery數據表插件，並添加了一些自定義jquery-ui按鈕到表格頁腳。要使用帶有jquery-ui主題的數據表插件，必須打開「bJQueryUI」選項。jQuery UI主題內數據表插件

到目前爲止沒有問題，但現在我添加了jquery-ui themeroller到我的頁面。

當我更改主題時，所有jquery-ui組件都相應地改變其樣式，就像數據表一樣，除了數據表中的按鈕。

我發現它實際上是一個css優先級問題：由美樂家應用的新樣式得到的優先級低於原始樣式，所以這些按鈕從不改變他們的樣子。

由於jQuery的UI組件和插件都是很受歡迎的，我想我會找人用類似的問題，但沒有運氣迄今爲止的DataTable ..

那怎麼DataTable，並創立了初始化自定義的按鈕來完成：

<table id="DataTable"> 
// ... 
</table> 
<script type="text/javascript"> 
    $(function() 
    { 
     var oDataTable = $('#DataTable').dataTable({ 
      "aaData": result.aaData, 
      "bPaginate": false, 
      "bJQueryUI": true, 
      "bInfo": true, 
      "sDom": '<"fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ipT<"toolbar">>', 
      "oTableTools": 
      { 
       "sRowSelect": "single" 
      } 
     }); 
     // add buttons 
     $("div.toolbar").html('<button id="AddButton">New element</button>'); 
     $("#AddButton").button().click(function() { /* ... */ }); 
     // add more buttons... 
    } 
</script>

下面是實際的HTML結構的屏幕截圖和應用CSS的樣式： http://i.stack.imgur.com/vbAuy.jpg

任何暗示是極大的讚賞。

來源

2011-07-18 Gigo

它是「bJQueryUI」是造型的按鈕，並重寫jQuery UI主題？ – b01

我找到了解決自己：

如果我添加了「UI小部件內容」 CSS-類工具欄容器的div ，樣式得到正確應用。要刪除類適用的（邊框和背景）的風格，我加了一個更具體的CSS樣式刪除這些：

div.toolbar 
{ 
    float: right; 
    border: 0; 
    background: 0; 
}

使用「div.toolbar」而不是「.toolbar」它在這裏很重要的，否則ui-widget-content樣式被應用。現在，工具欄容器並沒有得到不需要的樣式，內部的按鈕正確地獲取了選定的主題。

也許這對使用帶有自定義jquery-ui按鈕的數據表中的美樂師有幫助。

來源

2014-06-17 23:02:32 Gigo

如果您想讓主題控制按鈕的樣式，請將覆蓋主題滾軸樣式的CSS註釋掉。

如果它們是主題按鈕，那麼您將不得不移除CSS以使主題生效。主題很容易覆蓋，所以你可以添加自定義，只不過聽起來你不再需要自定義。

來源

2011-07-18 03:43:13 b01

覆蓋主題滾輪樣式的CSS是原始主題。如果我發表評論，頁面會被搞砸。我沒有改變任何風格，它們都是jquery-ui標準。 – Gigo

我可以將「每頁記錄數」文本更改爲數據表插件中的記錄。我可以在「搜索」文本字段中放置一個「佔位符」，而不是「標記」搜索。 –

搜索選項在數據表中右對齊。我可以將搜索文本框的對齊方式更改爲在特定頁面上左對齊嗎？ –

不知道你是否有這個問題，但有兩個獨立的css類與數據表。真或bJQueryUI：如果你有bJQueryUI使用哪一個取決於假

來源

2011-11-09 18:03:45 bmoran

jQuery UI主題內數據表插件

回答

相關問題