-
Notifications
You must be signed in to change notification settings - Fork 40
/
index.htm
180 lines (167 loc) · 11.3 KB
/
index.htm
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Roger Pincombe's Ribbon Test</title>
<link href="ribbon/ribbon.css" rel="stylesheet" type="text/css" />
<link href="soft_button.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="ribbon/ribbon.js"></script>
<script type="text/javascript" src="ribbon/jquery.tooltip.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#ribbon').ribbon();
$('#enable-btn').click(function() {
$('#del-table-btn').enable();
$('#del-page-btn').enable();
$('#save-btn').enable();
$('#other-btn-2').enable();
$('#enable-btn').hide();
$('#disable-btn').show();
});
$('#disable-btn').click(function() {
$('#del-table-btn').disable();
$('#del-page-btn').disable();
$('#save-btn').disable();
$('#other-btn-2').disable();
$('#disable-btn').hide();
$('#enable-btn').show();
});
$('.ribbon-button').click(function() {
if (this.isEnabled()) {
alert($(this).attr('id') + ' clicked');
}
});
});
</script>
</head>
<body bgcolor="#c9cdd2">
<div id="ribbon">
<span class="ribbon-window-title">Ribbon App Test</span>
<div class="ribbon-tab file" id="file-tab">
<span class="ribbon-title">File</span>
<div class="ribbon-backstage">
This is the Backstage.<br/><br/>
<div class="button big">
<img src="icons/normal/open-page.png" alt="Open" />
<span class="label">Open</span>
<span class="desc">Open a document from your computer</span>
</div><br/>
<div class="button big">
<img src="icons/normal/save-page.png" alt="Save" />
<span class="label">Save</span>
<span class="desc">Save your document to your computer</span>
</div>
</div>
</div>
<div class="ribbon-tab" id="format-tab">
<span class="ribbon-title">Format</span>
<div class="ribbon-section">
<span class="section-title">Tables</span>
<div class="ribbon-button ribbon-button-large" id="add-table-btn">
<span class="button-title">Add<br/>Table</span>
<span class="button-help">This button will add a table to your document.</span>
<img class="ribbon-icon ribbon-normal" src="icons/normal/new-table.png" />
<img class="ribbon-icon ribbon-hot" src="icons/hot/new-table.png" />
<img class="ribbon-icon ribbon-disabled" src="icons/disabled/new-table.png" />
</div>
<div class="ribbon-button ribbon-button-large" id="open-table-btn">
<span class="button-title">Open<br/>Table</span>
<span class="button-help">This button will open a table and add it to your document.</span>
<img class="ribbon-icon ribbon-normal" src="icons/normal/open-table.png" />
<img class="ribbon-icon ribbon-hot" src="icons/hot/open-table.png" />
<img class="ribbon-icon ribbon-disabled" src="icons/disabled/open-table.png" />
</div>
<div class="ribbon-button ribbon-button-large disabled" id="del-table-btn">
<span class="button-title">Remove<br/>Table</span>
<span class="button-help">This button will remove the selected table from your document.</span>
<img class="ribbon-icon ribbon-normal" src="icons/normal/delete-table.png" />
<img class="ribbon-icon ribbon-hot" src="icons/hot/delete-table.png" />
<img class="ribbon-icon ribbon-disabled" src="icons/disabled/delete-table.png" />
</div>
</div>
<div class="ribbon-section">
<span class="section-title">Pages</span>
<div class="ribbon-button ribbon-button-large" id="add-page-btn">
<span class="button-title">Add<br/>Page</span>
<span class="button-help">This button will add a page to your document.</span>
<img class="ribbon-icon ribbon-normal" src="icons/normal/new-page.png" />
<img class="ribbon-icon ribbon-hot" src="icons/hot/new-page.png" />
<img class="ribbon-icon ribbon-disabled" src="icons/disabled/new-page.png" />
</div>
<div class="ribbon-button ribbon-button-large" id="open-page-btn">
<span class="button-title">Open<br/>Page</span>
<span class="button-help">This button will open a page and add it to your document.</span>
<img class="ribbon-icon ribbon-normal" src="icons/normal/open-page.png" />
<img class="ribbon-icon ribbon-hot" src="icons/hot/open-page.png" />
<img class="ribbon-icon ribbon-disabled" src="icons/disabled/open-page.png" />
</div>
<div class="ribbon-button ribbon-button-large disabled" id="del-page-btn">
<span class="button-title">Remove<br/>Page</span>
<span class="button-help">This button will remove the selected page from your document.</span>
<img class="ribbon-icon ribbon-normal" src="icons/normal/delete-page.png" />
<img class="ribbon-icon ribbon-hot" src="icons/hot/delete-page.png" />
<img class="ribbon-icon ribbon-disabled" src="icons/disabled/delete-page.png" />
</div>
</div>
<div class="ribbon-section">
<span class="section-title">Actions</span>
<div class="ribbon-button ribbon-button-small" id="run-btn">
<span class="button-title">Run</span>
<span class="button-help">This button will run the program.</span>
<img class="ribbon-icon ribbon-normal" src="icons/normal/run.png" />
<img class="ribbon-icon ribbon-hot" src="icons/hot/run.png" />
<img class="ribbon-icon ribbon-disabled" src="icons/disabled/run.png" />
</div>
<div class="ribbon-button ribbon-button-small" id="repeat-btn">
<span class="button-title">Repeat</span>
<span class="button-help">This button will repeat something.</span>
<img class="ribbon-icon ribbon-normal" src="icons/normal/repeat.png" />
<img class="ribbon-icon ribbon-hot" src="icons/hot/repeat.png" />
<img class="ribbon-icon ribbon-disabled" src="icons/disabled/repeat.png" />
</div>
<div class="ribbon-button ribbon-button-small disabled" id="save-btn">
<span class="button-title">Save</span>
<span class="button-help">This button will save your document.</span>
<img class="ribbon-icon ribbon-normal" src="icons/normal/save.png" />
<img class="ribbon-icon ribbon-hot" src="icons/hot/save.png" />
<img class="ribbon-icon ribbon-disabled" src="icons/disabled/save.png" />
</div>
</div>
</div>
<div class="ribbon-tab" id="next-tab">
<span class="ribbon-title">Options</span>
<div class="ribbon-section">
<span class="section-title">More Stuff</span>
<div class="ribbon-button ribbon-button-large">
<span class="button-title">Other<br/>Feature</span>
<span class="button-help">This button will do something else.</span>
<img class="ribbon-icon ribbon-normal" src="icons/normal/bullet-orange.png" />
</div>
<div class="ribbon-button ribbon-button-large disabled" id="other-btn-2">
<span class="button-title">Remove<br/>Table</span>
<span class="button-help">This button will remove the selected table from your document.</span>
<img class="ribbon-icon ribbon-normal" src="icons/normal/delete-table.png" />
</div>
</div>
</div>
</div>
<div class="page">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut adipiscing elementum massa, et mollis dolor semper sed. Donec et tortor nisi, sed pharetra elit. Praesent semper ullamcorper pharetra. Maecenas pulvinar commodo lobortis. Vestibulum at ipsum sed leo fermentum hendrerit. Suspendisse dictum nisi a velit cursus suscipit. Nullam et nibh ligula.
<br/>
<br/>
<a href="#" id="enable-btn" class="button">Enable all actions</a> <a href="#" id="disable-btn" class="button" style="display:none">Disable some actions</a>
<a href="index-red.htm" class="button">Go to red version</a><br/>
<p>
Mauris venenatis gravida neque at lacinia. Etiam quis ligula non sem feugiat gravida. Curabitur sit amet eros nisl, quis dictum arcu. Vivamus ut orci orci. Pellentesque id nisi lobortis leo ornare molestie nec non arcu. Duis eget turpis nec arcu facilisis tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis enim erat, pulvinar id dictum sed, eleifend eu turpis. Duis ut consectetur metus. Phasellus feugiat pharetra nunc, in laoreet leo convallis ac. Sed quam lectus, tristique non convallis in, tempor vitae arcu. Ut ante velit, ultrices porttitor accumsan sed, tristique id nunc. Nulla eu nisi in odio dapibus aliquet. Vivamus rhoncus posuere lacus in ornare. Nulla vel mi augue, egestas pretium mi. Suspendisse ac lectus metus. In lacinia pulvinar massa ut convallis. Donec eu nulla nec libero semper accumsan.
</p>
<p>
Nulla facilisi. Donec placerat convallis fermentum. Nulla sed urna orci. Integer ligula orci, vulputate a porttitor sit amet, elementum eu lectus. Praesent quis ante et nibh cursus convallis in sed ligula. Nullam quis nisi vitae erat dictum feugiat. Pellentesque sit amet neque tellus. Quisque congue turpis sit amet nisl suscipit fermentum. Ut odio tortor, pellentesque non rutrum ac, facilisis sit amet nisl. Pellentesque feugiat dictum luctus. Nullam imperdiet metus id dui pharetra venenatis. In hac habitasse platea dictumst. Quisque ultrices, augue ut consequat molestie, neque magna tincidunt nunc, ac auctor metus ipsum eget risus. Aliquam eleifend vestibulum elit, quis tincidunt sapien hendrerit quis. Maecenas erat arcu, lacinia vel laoreet eget, tempor non velit. Proin diam magna, aliquet quis euismod imperdiet, commodo malesuada augue. Quisque sit amet risus massa, quis laoreet diam. Sed id lacus magna.
</p>
<p>
Nulla rhoncus iaculis lorem, venenatis lacinia turpis malesuada in. Curabitur quis laoreet lorem. Vivamus at fringilla odio. Proin eget purus sed massa accumsan aliquet ac sit amet dui. Duis arcu mauris, placerat eu vulputate eu, venenatis nec augue. Nunc sed enim nisi. Proin et augue vulputate nibh mollis consectetur. Aliquam vel lacus odio, a gravida justo. Sed tincidunt, tortor sed sodales varius, neque eros auctor enim, non auctor diam enim non turpis. Praesent turpis nunc, aliquet vitae pulvinar eget, blandit id risus. Maecenas ornare mi nec diam ullamcorper auctor. Maecenas ipsum nulla, tempus sit amet imperdiet quis, auctor eu erat. Sed porttitor facilisis orci, quis lacinia nisl laoreet ac. Etiam tristique tempus odio, vel tempor purus congue at. Maecenas turpis est, iaculis at viverra et, pharetra in lacus.
</p>
<p>
Donec eros diam, ornare eu aliquam ac, sodales a lacus. Aenean congue viverra mollis. Nullam dictum justo sed tellus dignissim non tempus magna aliquet. Ut imperdiet mi tortor, et commodo turpis. Vivamus nisl ligula, pulvinar in semper ac, dictum vitae enim. Cras tincidunt tempus ipsum, nec venenatis nibh faucibus id. Phasellus massa urna, faucibus id auctor et, posuere ac nunc. Duis pulvinar arcu in nisl ultricies quis congue nisi ultrices. Morbi quis tellus lacus, non viverra sem. Fusce vel mattis diam. Nunc vehicula libero sollicitudin metus dapibus laoreet. Vivamus sollicitudin malesuada gravida. Phasellus eget mi ligula, nec pellentesque magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae tempus enim. Morbi at nisl sed odio ullamcorper ullamcorper. Vestibulum turpis libero, dignissim sit amet pulvinar ut, cursus vitae mauris. Sed consectetur nisi vitae nunc egestas et consequat arcu fringilla.
</p></div>
</body>
</html>