-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
109 lines (100 loc) · 3.19 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<link type="text/css" href="static/css/styler-grey/jquery-ui-1.10.1.custom.css" rel="stylesheet"/>
<link rel="stylesheet" href="static/colorpicker/colorpicker.css" type="text/css" />
<link rel="stylesheet" href="static/styler.css" type="text/css" />
<script type="text/javascript" src="static/jquery-1.9.1.js"></script>
<script type="text/javascript" src="static/jquery.tools.min.js"></script>
<script type="text/javascript" src="static/jquery-ui-1.10.1.custom.min.js"></script>
<style>
body{
font-size: 10px;
}
table{
width:100%;
height:100%;
}
table td{
}
#control_container{
width:100%;
height:400px;
overflow:scroll;
}
#preview_iframe{
width:100%;
height:400px;
}
#thecss{
width:100%;
height:200px;
}
</style>
<body>
<table>
<tr>
<td style='width:30%;height:400px;'>
<div id='control_container'>
</div>
</td>
<td style='width:70%;'>
<iframe id='preview_iframe' src='demoitem.html'>
</iframe>
</td>
</tr>
<tr>
<td colspan=2>
<textarea id='thecss'>
</textarea>
<button id='update_button'>
Update CSS
</button>
<button id='apply_button'>
Apply new CSS
</button>
</td>
</tr>
</table>
</body>
<script type="text/javascript" src="static/styler.js"></script>
<script>
var predeflayout={
"Tab1 In JS":{
"type":"emptygroup",
"name":"Background group",
"defaultprop":{
"selector":"body"
},
"controls":[
{
"name":"Background",
"css":"background"
},
{
"name":"Text",
"css":"text"
}
]
}
};
css=$("#thecss").val();
stylerobj=Styler({
css:css,
container:$("#control_container"),
iframe:$('#preview_iframe'),
predeflayout:predeflayout,
preparse:false
});
$("#update_button").click(function(){
var newstyle=stylerobj.getNewCss();
$("#thecss").val(newstyle);
});
$("#apply_button").click(function(){
stylerobj.updateCss($("#thecss").val());
});
$.get("democss.css",function(text){
$("#thecss").val(text);
stylerobj.updateCss(text);
});
</script>
</html>