-
Notifications
You must be signed in to change notification settings - Fork 1
/
example2.html
86 lines (74 loc) · 3.28 KB
/
example2.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link type="text/css" href="css/smoothness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<link type="text/css" href="css/ui.board.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/ui.board.element.js"></script>
<script type="text/javascript" src="js/ui.board.js"></script>
<script type="text/javascript" src="js/ui.board.edit.js"></script>
<script type="text/javascript" src="js/ui.board.order.js"></script>
<script>
$(function() {
// create the board in edit mode
$( "#board" ).board( {"edit": true} );
// add an element to the board
var el1 = $( "#board" ).board( "addElement" );
// set data for this element
el1.board_element("setData", "x", 120);
el1.board_element("setData", "y", 125);
el1.board_element("setData", "color", "green");
el1.board_element("setValue", 125.123);
// add an unnamed element
$( "#board" ).board( "addElement" );
// add an existing element to the board
// element color data is set
var el3 = $( '<li data-color="lightgray"></li>' )
$( "#board" ).board( "addElement", el3 );
// set value for element 3
el3.board_element( "setValue", 12.34 );
// stringify the board
if (typeof console !== 'undefined') {
console.log( $( "#board" ).board( "stringify" ) );
}
});
</script>
<title>jQuery ui board</title>
</head>
<body>
<div>
<!-- edit toolbar -->
<input type="image" title="copy" onClick='
$( "#board" ).board( "copy" );
' src="example-img/buttons/edit_copy.png" />
<input type="image" title="paste" onClick='
$( "#board" ).board( "paste" );
' src="example-img/buttons/edit_paste.png" />
<input type="image" title="paste style" onClick='
$( "#board" ).board( "pasteStyle" );
' src="example-img/buttons/edit_paste_style.png" />
<input type="image" title="delete" onClick='
$( "#board" ).board( "delElement" );
' src="example-img/buttons/edit_delete.png" />
<input type="image" title="new" onClick='
$( "#board" ).board( "addElement" );
' src="example-img/buttons/edit_new.png" />
<!-- canvas toolbar -->
<input type="image" title="grid" onClick='
$( this ).toggleClass( "on" );
var on = $( this ).hasClass( "on" );
$( "#board" ).board( "option", "grid-show", on );
$( "#board" ).board( "option", "grid-snap", on );
' src="example-img/buttons/grid_xy.png" />
<input type="image" title="down" onClick='
$( "#board" ).board( "downElement" );
' src="example-img/buttons/selection-down.png" />
<input type="image" title="up" onClick='
$( "#board" ).board( "upElement" );
' src="example-img/buttons/selection-up.png" />
</div>
<div id="board"></div>
</body>
</html>