jqgrid-将多个主题应用于同一页面中的多个table

Question

我在 fiddle 中有 2 个 jqgrid tables，将多个主题仅应用于 jqgrid tables 的最佳方法是什么。

我曾尝试将 css 选择器范围添加到 table，但它在 table http://jqueryui.com/download/

上无法正常工作

table1 的主题 1

<link rel="stylesheet" type="text/css"  href="../themeLefrog/jquery-ui.theme.css" />
  <link rel="stylesheet" type="text/css"  href="../themeLefrog/jquery-ui.min.css" />
  <link rel="stylesheet" type="text/css"  href="../themeLefrog/jquery-ui.theme.css" />

我的主题 2 table2

<link rel="stylesheet" type="text/css"  href="../themeBlitzer/jquery-ui.theme.css" />
  <link rel="stylesheet" type="text/css"  href="../themeBlitzer/jquery-ui.min.css" />
  <link rel="stylesheet" type="text/css"  href="../themeBlitzer/jquery-ui.theme.css" />

Answer 1

首先，您应该从 the jQuery UI download page 下载自定义 jQuery UI 主题。例如，您想在一个 HTML 页面上使用 Le-Frog 和 Redmond 主题。您可以使用 HTML 代码，例如

<div class="redmond">
    <table id="grid1"></table>
</div>
<div class="le-frog">
    <table id="grid2"></table>
</div>

表示div.redmond和div.le-frog可以作为选择器，用于指定对应jQuery UI主题的应用范围CSS.因此您可以在下载页面选择以下内容：

您在网页上同时包含了 CSS，例如

<link rel="stylesheet" href="jquery-ui/le-frog/jquery-ui.css">
<link rel="stylesheet" href="jquery-ui/redmond/jquery-ui.css">

并使用与往常相同的代码。结果将类似于 the demo:

或在 the another demo 上点赞，它们使用 Blitzer 和 Le-Frog 主题：

我在演示中包含了 jquery-ui.css 而不是 jquery-ui.min.css 只是为了方便大家检查文件。其中包含 CSS 条规则和相应的规则。例如

div.redmond .ui-widget {
    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
    font-size: 1.1em;
}

和

div.le-frog .ui-widget {
    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
    font-size: 1.1em;
}

而不是标准规则

.ui-widget {
    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
    font-size: 1.1em;
}

jqgrid-将多个主题应用于同一页面中的多个table

jqgrid- applying multiple themes to multiple table in the same page

jquery-ui

jqgrid

free-jqgrid