jqgrid - aynı sayfada birden çok tabloya birden çok tema uygulama

Question

0 jpegrid tabloları burada fiddle içinde var, birden çok temayı yalnızca jqgrid tablolarına uygulamanın en iyi yolu nedir?

Ben tablolara css seçici kapsamını ekleyerek çalıştı ama table1 için http://jqueryui.com/download/

THEME1 masaya düzgün çalışması yoktu

ait

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

tablo2 için My THEME2

<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

İlk Tüm özel jQuery UI temalarını the jQuery UI download page'dan indirmelisiniz. Örneğin, bir HTML sayfasındaki Le-Frog ve Redmond temalarını kullanmak istiyorsunuz.

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

gibi kullandığınız HTML kodu Bu div.redmond ve div.le-frog gelen jQuery UI Tema CSS uygulayarak kapsamını belirlemek için kullanılabilecek seçiciler, olabileceği anlamına gelir. Böylece indirme sayfasında aşağıdaki seçebilirsiniz:

Sen

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

gibi web sayfasında hem CSS, dahil ve her zamanki gibi aynı kodu kullanın.

veya Blitzer ve Le-Kurbağa temaları kullanan, the another demo beğendikleri: Sonuçlar the demo üzerine nasıl olacak ben demoları jquery-ui.css dahil yerine sadece jquery-ui.min.css

dosyaları incelemek için herkesi basitleştirmek. İlgili kurallara sahip CSS kuralları vardır. Rica ederim: Örneğin

için

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

ve bunun yerine standart kural

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