UNPKG

2.59 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <title>{NAME} v{VERSION} - Theme Roller Demo</title>
5 <!-- @import partials/style.html -->
6</head>
7<body>
8<h1>{NAME} v{VERSION}</h1>
9<h2>Theme roller demo</h2>
10<p>
11 This demo shows how to implement a theme roller.
12</p>
13
14<!-- @import partials/pre.html -->
15
16<div>
17 Theme:
18 <select onchange="javascript:changeTheme(this.value);">
19 <option value="default" selected="selected">default</option>
20 <option value="mytheme">mytheme</option>
21 <option value="skyblue">skyblue</option>
22 <option value="transparent">transparent</option>
23 </select>
24</div>
25<!-- @import partials/books.html -->
26
27<!-- @import partials/tablefilter-script.html -->
28<script data-config>
29var tfConfig = {
30 base_path: '../dist/tablefilter/',
31 filters_row_index: 2,
32 headers_row_index: 1,
33 sort: true,
34 col_types: [
35 'string', 'string', 'number',
36 'string', 'string', 'date'
37 ],
38 rows_counter: true,
39 rows_counter_text: 'Books: ',
40 alternate_rows: true,
41 btn_reset: true,
42 mark_active_columns: true,
43
44 /* Filter types*/
45 col_3: 'select',
46 col_4: 'select',
47
48 /* delegate for filtering 'In store' column */
49 custom_cell_data_cols: [3],
50 custom_cell_data: function(o, cell, colIndex){
51 if(colIndex === 3){
52 var chk = cell.getElementsByTagName('input')[0];
53 if(!chk){
54 return '';
55 }
56 if(chk.checked){
57 return 'yes';
58 } else {
59 return 'no';
60 }
61 }
62 },
63
64 /* Custom options for 'Shipping' column */
65 custom_options: {
66 cols: [4],
67 texts: [
68 ['1 Hour','12 Hours','24 Hours','2 Days','na']
69 ],
70 values: [
71 ['1 Hour','12 Hours','24 Hours','2 Days','na']
72 ],
73 sorts: [false]
74 },
75
76 /* theme */
77 themes: [{ name: 'default' }],
78
79 extensions: [{ name: 'sort' }]
80};
81
82var tf = new TableFilter('books', tfConfig, 2);
83tf.init();
84
85// TableFilter themes
86var THEMES = {
87 'default': tf.themesPath + 'default/default.css',
88 'mytheme': tf.themesPath + 'mytheme/mytheme.css',
89 'skyblue': tf.themesPath + 'skyblue/skyblue.css',
90 'transparent': tf.themesPath + 'transparent/transparent.css'
91};
92
93function changeTheme(name){
94 var stylesheet = tf.getStylesheet('default');
95 stylesheet.href = THEMES[name];
96}
97</script>
98
99<!-- @import partials/pre-inline-script.html -->
100</body>
101</html>