Skip to content

Commit 992dbaa

Browse files
author
Peter Kim
committed
Minor Change
pulled out css and js from index.html for better readability
1 parent 5d04a90 commit 992dbaa

File tree

7 files changed

+225
-238
lines changed

7 files changed

+225
-238
lines changed

‎examples/field.css

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
body {
2+
font-family: Helvetica, sans-serif;
3+
background-color: #eeeeee;
4+
}
5+
6+
.tc-field {
7+
position: relative;
8+
float: left;
9+
clear: left;
10+
margin: 0 0 30px;
11+
border: 1px solid transparent;
12+
}
13+
14+
.tc-field.state-invalid {
15+
border-color: #dd0000;
16+
}
17+
18+
.tc-field-label {
19+
font-size: 12px;
20+
text-transform: uppercase;
21+
}
22+
23+
.tc-field-hint {
24+
color: #999999;
25+
font-size: 14px;
26+
font-style: italic;
27+
}
28+
29+
.tc-dropdown {
30+
width: 250px;
31+
}
32+
33+
.tc-dropdown .display {
34+
cursor: pointer;
35+
padding: 5px 10px;
36+
border: 2px solid #999999;
37+
overflow: hidden;
38+
white-space: nowrap;
39+
}
40+
.tc-dropdown .display:hover {
41+
background-color: #f9f9f9;
42+
border-color: #333333;
43+
}
44+
.tc-dropdown .display .state-empty {
45+
color: #888888;
46+
font-style: italic;
47+
}
48+
.tc-dropdown .menu {
49+
display: none;
50+
margin: 0;
51+
padding: 0;
52+
position: absolute;
53+
top: 100%;
54+
left: 0;
55+
z-index: 2;
56+
width: 100%;
57+
background-color: #ffffff;
58+
box-shadow: 0 0 6px rgba(0, 0, 0, .4);
59+
}
60+
.tc-dropdown .item {
61+
cursor: pointer;
62+
padding: 5px 10px;
63+
font-family: Georgia, serif;
64+
font-style: italic;
65+
font-size: 14px;
66+
}
67+
.tc-dropdown .item.state-active {
68+
color: #dd0000;
69+
font-weight: bold;
70+
}
71+
.tc-dropdown .item:hover {
72+
background-color: #999999;
73+
color: #ffffff;
74+
}
75+
.tc-dropdown .item:active {
76+
background-color: #000000;
77+
color: #ffffff;
78+
}
79+
80+
.tc-dropdown .item input[type="checkbox"] {
81+
margin: 0px 10px 0px 0px;
82+
position: relative;
83+
top: -2px;
84+
}
85+
86+
.sexy-control {
87+
cursor: pointer;
88+
float: left;
89+
}
90+
91+
.sexy-checkbox {
92+
margin-right: 5px;
93+
width: 12px;
94+
height: 12px;
95+
-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
96+
border: 2px solid #fff;
97+
background: #f9f9f9; background: -moz-linear-gradient(top, #f9f9f9 0%, #efefef 100%);
98+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#efefef));
99+
background: -webkit-linear-gradient(top, #f9f9f9 0%,#efefef 100%);
100+
background: -o-linear-gradient(top, #f9f9f9 0%,#efefef 100%);
101+
background: -ms-linear-gradient(top, #f9f9f9 0%,#efefef 100%);
102+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#efefef',GradientType=0 );
103+
background: linear-gradient(top, #f9f9f9 0%,#efefef 100%);
104+
-webkit-transition: all 100ms ease-in-out; -moz-transition: all 100ms ease-in-out;
105+
-o-transition: all 100ms ease-in-out; transition: all 100ms ease-in-out;
106+
}
107+
.sexy-checkbox:hover {
108+
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .2);
109+
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .2); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .2);
110+
}
111+
.sexy-checkbox.state-active {
112+
background: #d87936; background: -moz-linear-gradient(top, #d87936 0%, #c46623 100%);
113+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d87936), color-stop(100%,#c46623));
114+
background: -webkit-linear-gradient(top, #d87936 0%,#c46623 100%);
115+
background: -o-linear-gradient(top, #d87936 0%,#c46623 100%);
116+
background: -ms-linear-gradient(top, #d87936 0%,#c46623 100%);
117+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d87936', endColorstr='#c46623',GradientType=0 );
118+
background: linear-gradient(top, #d87936 0%,#c46623 100%);
119+
}

‎examples/field.html

Lines changed: 6 additions & 227 deletions
Original file line numberDiff line numberDiff line change
@@ -1,137 +1,10 @@
11
<!DOCTYPE html>
2-
<html lang="en">
3-
2+
<html lang="en">
43
<head>
5-
64
<meta charset="utf-8">
7-
8-
<title>typecode-js field</title>
9-
10-
<style type="text/css">
11-
body {
12-
font-family: Helvetica, sans-serif;
13-
background-color: #eeeeee;
14-
}
15-
16-
.tc-field {
17-
position: relative;
18-
float: left;
19-
clear: left;
20-
margin: 0 0 30px;
21-
border: 1px solid transparent;
22-
}
23-
24-
.tc-field.state-invalid {
25-
border-color: #dd0000;
26-
}
27-
28-
.tc-field-label {
29-
font-size: 12px;
30-
text-transform: uppercase;
31-
}
32-
33-
.tc-field-hint {
34-
color: #999999;
35-
font-size: 14px;
36-
font-style: italic;
37-
}
38-
39-
.tc-dropdown {
40-
width: 250px;
41-
}
42-
43-
.tc-dropdown .display {
44-
cursor: pointer;
45-
padding: 5px 10px;
46-
border: 2px solid #999999;
47-
overflow: hidden;
48-
white-space: nowrap;
49-
}
50-
.tc-dropdown .display:hover {
51-
background-color: #f9f9f9;
52-
border-color: #333333;
53-
}
54-
.tc-dropdown .display .state-empty {
55-
color: #888888;
56-
font-style: italic;
57-
}
58-
.tc-dropdown .menu {
59-
display: none;
60-
margin: 0;
61-
padding: 0;
62-
position: absolute;
63-
top: 100%;
64-
left: 0;
65-
z-index: 2;
66-
width: 100%;
67-
background-color: #ffffff;
68-
box-shadow: 0 0 6px rgba(0, 0, 0, .4);
69-
}
70-
.tc-dropdown .item {
71-
cursor: pointer;
72-
padding: 5px 10px;
73-
font-family: Georgia, serif;
74-
font-style: italic;
75-
font-size: 14px;
76-
}
77-
.tc-dropdown .item.state-active {
78-
color: #dd0000;
79-
font-weight: bold;
80-
}
81-
.tc-dropdown .item:hover {
82-
background-color: #999999;
83-
color: #ffffff;
84-
}
85-
.tc-dropdown .item:active {
86-
background-color: #000000;
87-
color: #ffffff;
88-
}
89-
90-
.tc-dropdown .item input[type="checkbox"] {
91-
margin: 0px 10px 0px 0px;
92-
position: relative;
93-
top: -2px;
94-
}
95-
96-
.sexy-control {
97-
cursor: pointer;
98-
float: left;
99-
}
100-
101-
.sexy-checkbox {
102-
margin-right: 5px;
103-
width: 12px;
104-
height: 12px;
105-
-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
106-
border: 2px solid #fff;
107-
background: #f9f9f9; background: -moz-linear-gradient(top, #f9f9f9 0%, #efefef 100%);
108-
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#efefef));
109-
background: -webkit-linear-gradient(top, #f9f9f9 0%,#efefef 100%);
110-
background: -o-linear-gradient(top, #f9f9f9 0%,#efefef 100%);
111-
background: -ms-linear-gradient(top, #f9f9f9 0%,#efefef 100%);
112-
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#efefef',GradientType=0 );
113-
background: linear-gradient(top, #f9f9f9 0%,#efefef 100%);
114-
-webkit-transition: all 100ms ease-in-out; -moz-transition: all 100ms ease-in-out;
115-
-o-transition: all 100ms ease-in-out; transition: all 100ms ease-in-out;
116-
}
117-
.sexy-checkbox:hover {
118-
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .2);
119-
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .2); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .2);
120-
}
121-
.sexy-checkbox.state-active {
122-
background: #d87936; background: -moz-linear-gradient(top, #d87936 0%, #c46623 100%);
123-
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d87936), color-stop(100%,#c46623));
124-
background: -webkit-linear-gradient(top, #d87936 0%,#c46623 100%);
125-
background: -o-linear-gradient(top, #d87936 0%,#c46623 100%);
126-
background: -ms-linear-gradient(top, #d87936 0%,#c46623 100%);
127-
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d87936', endColorstr='#c46623',GradientType=0 );
128-
background: linear-gradient(top, #d87936 0%,#c46623 100%);
129-
}
130-
131-
</style>
132-
133-
</head>
134-
5+
<title>typecode-js field</title>
6+
<link rel="stylesheet" href="field.css">
7+
</head>
1358
<body>
1369

13710
<div id="my-dropdown" class="tc-field tc-dropdown">
@@ -185,102 +58,8 @@
18558
<script src="../lib/field/tc.field.dropdown.js" type="text/javascript"></script>
18659

18760
<!-- Example Application -->
188-
<script type="text/javascript">
189-
(function(window, $) {
190-
var NI = window.NI,
191-
console = NI.app.getConsole(true);
192-
193-
console.info("NI field!!!");
194-
console.log(NI.field);
195-
196-
$(function() {
197-
198-
199-
var input = NI.field.new_instance({
200-
element: "#my-input",
201-
options: {
202-
extensions: {
203-
Validator: {
204-
validators: ["number"]
205-
},
206-
Autocomplete: {
207-
208-
},
209-
Hint: {
210-
content: "Enter a number",
211-
css: {
212-
top: 5,
213-
left: 5
214-
}
215-
}
216-
},
217-
handlers: {
218-
focus: function(e) {
219-
console.info("focus");
220-
},
221-
blur: function(e) {
222-
console.info("blur");
223-
}
224-
},
225-
val: ""
226-
}
227-
});
228-
console.log(input);
229-
230-
var password = NI.field.new_instance({
231-
element: "#my-password"
232-
});
233-
console.log(password);
234-
235-
var dropdown = NI.field.new_instance({
236-
element: "#my-dropdown",
237-
options: {
238-
handlers: {
239-
change: function(e, d) {
240-
if (d) {
241-
console.info("change from "+ d.from +" to "+ d.to);
242-
}
243-
}
244-
}
245-
}
246-
});
247-
console.log(dropdown);
248-
});
249-
250-
var textarea = NI.field.new_instance({
251-
element: "#my-textarea",
252-
options: {
253-
extensions: {
254-
Hint: {
255-
content: "Enter a Comment",
256-
css: {
257-
top: 5,
258-
left: 5
259-
}
260-
}
261-
}
262-
}
263-
});
264-
console.log(textarea);
265-
266-
var select = NI.field.new_instance({
267-
element: "#my-select",
268-
options: {
269-
270-
}
271-
});
272-
console.log(select);
273-
274-
var checkbox = NI.field.new_instance({
275-
element: "#my-checkbox",
276-
options: {
277-
label: "label!"
278-
}
279-
});
280-
console.log(checkbox);
281-
282-
}(this, this.jQuery));
283-
</script>
61+
<script type="text/javascript" src="field.js"></script>
62+
28463

28564
</body>
28665
</html>

0 commit comments

Comments
 (0)