jqgrid-применение нескольких тем для нескольких таблиц на той же странице

Question

У меня есть 2 таблицы jqgrid здесь, в fiddle, что является лучшим способом применить несколько тем только к таблицам jqgrid.

я попытался добавить объем селектора CSS в таблицах, но оно не корректно работать на столе http://jqueryui.com/download/

Theme1 для table1

<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" /> 

Мой theme2 для 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

Прежде все вы должны скачать пользовательские темы jQuery UI от the jQuery UI download page. Например, вы хотите использовать темы Le-Frog и Redmond на одной странице HTML. Вы можете использовать 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 Theme 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; 
}