-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjquery-container.htm
116 lines (95 loc) · 4.75 KB
/
jquery-container.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
<!DOCTYPE html>
<!-- (C) 2013 Robert DeSantis -->
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio">
<TITLE>jQuery Container test</TITLE>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/dark-hive/jquery-ui-1.9.2.custom.css" />
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery-ui-1.9.2.custom.js"></script>
<script src="jquery.container.js"></script>
<script>
$(function () {
$("#c1").expandableContainer({
item_template: '<div class="container_input" style="height:26px; width:40px; border: 1px solid #808080; border-radius: 6pt 6pt;" value="foo"></div>'
});
});
$(function () {
$("#c2").expandableContainer({
vertical: true,
controls: "left"
});
});
$(function () {
$("#c3").expandableContainer({
vertical: true,
controls: "right"
});
});
function add_item( target ) {
target.expandableContainer( "items", [ "<div><input value='99' class='container_input' size=5 /></div>" ] );
}
$(function () {
$("#esca_animations").expandableContainer({
item_template: esca_channel_template.innerHTML,
vertical: true,
controls: "right",
new_item_callback: new_channel_animation
});
});
function new_channel_animation(item, channel_animation) {
var esca_channel_list = item.find(".esca_channel_list");
esca_channel_list.expandableContainer({
item_template: "<div><input class='container_input' type='text' style='width:55px;'><div>",
new_item_callback: function (item, value) {
var input = item.find(".container_input");
input.spinner({ min: 0, max: 255 }).val((value == null) ? 0 : value);
}
});
}
</script>
</HEAD>
<body style="background-color:white;">
<div style="border: 1px solid black;margin: 40px 10px 10px 10px; padding:10px;">
Horizontal container:<br /><br />
<div id="c1"></div>
<div style="clear:both;"></div>
<div style="margin-top: 10px;" >
<button onclick='alert( $("#c1").expandableContainer( "values" ) )'>Show values</button>
<button onclick='alert( $("#c1").expandableContainer( "items" ).length )'>Show # of values</button>
<button onclick='add_item( $("#c1"));'>Add edit field</button>
<button onclick='$("#c1").expandableContainer( "set_values", [1,2,3,4,5,6]);'>Add 6 components</button>
</div>
</div>
<div style="border: 1px solid black; clear: both; float:left; margin: 10px 10px 10px 10px; padding:10px;">
Vertical container, controls left:<br /><br />
<div id="c2"></div>
<div style="clear:both;margin-top: 40px;" >
<button onclick='alert( $("#c2").expandableContainer( "values" ) )'>Show values</button>
<button onclick='alert( $("#c2").expandableContainer( "items" ).length )'>Show # of values</button>
<button onclick='add_item( $("#c2"));'>Add edit field</button>
<button onclick='$("#c2").expandableContainer( "set_values", [1,2,3,4,5,6]);'>Add 6 components</button>
</div>
</div>
<div style="border: 1px solid black; float: left; margin: 10px 10px 10px 10px; padding:10px;">
Vertical container, controls right:<br /><br />
<div id="c3"></div>
<div style="clear:both;margin-top: 40px;" >
<button onclick='alert( $("#c3").expandableContainer( "values" ) )'>Show values</button>
<button onclick='alert( $("#c3").expandableContainer( "items" ).length )'>Show # of values</button>
<button onclick='add_item( $("#c3"));'>Add edit field</button>
<button onclick='$("#c3").expandableContainer( "set_values", [1,2,3,4,5,6]);'>Add 6 components</button>
</div>
</div>
<div id="esca_animations" style="margin-top: 6px; clear: both; float: left; margin: 10px 10px 10px 10px; padding:10px; border: 1px solid black; "></div>
<div id="esca_channel_template" style="display:none;">
<div style="padding:10px; width:600px; background-color: black; border: 1px solid #808080; border-radius: 6pt 6pt;"">
<div class="esca_channel_list_container" style="float:left;">
<div class="esca_channel_list"></div>
</div>
</div>
</div>
</BODY>
</HTML>