Skip to content

Commit 1b9a9c5

Browse files
NeCkErNeCkEr
committed
add first files and first version
1 parent 42a6bf8 commit 1b9a9c5

File tree

837 files changed

+206762
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

837 files changed

+206762
-0
lines changed

‎CRUDGrid.js

+134
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
// This is an example of one possible way to make a reusable component (or 'plugin'), consisting of:
2+
// * A view model class, which gives a way to configure the component and to interact with it (e.g., by exposing currentPageIndex as an observable, external code can change the page index)
3+
// * A custom binding (ko.bindingHandlers.simpleGrid in this example) so a developer can place instances of it into the DOM
4+
// - in this example, the custom binding works by rendering some predefined templates using the ko.jqueryTmplTemplateEngine template engine
5+
//
6+
// There are loads of ways this grid example could be expanded. For example,
7+
// * Letting the developer override the templates used to create the table header, table body, and page links div
8+
// * Adding a "sort by clicking column headers" option
9+
// * Creating some API to fetch table data using Ajax requests
10+
// ... etc
11+
12+
(function () {
13+
// Private function
14+
function getColumnsForScaffolding(data) {
15+
if ((typeof data.length != 'number') || data.length == 0)
16+
return [];
17+
var columns = [];
18+
for (var propertyName in data[0])
19+
columns.push({ headerText: propertyName, rowText: propertyName });
20+
return columns;
21+
}
22+
23+
ko.simpleGrid = {
24+
// Defines a view model class you can use to populate a grid
25+
viewModel: function (configuration) {
26+
this.mostraEditar = configuration.mostraEditar || false;
27+
this.functionAddNewObj = configuration.functionAddNewObj;
28+
this.editarClick= configuration.editarClick;
29+
this.data = configuration.data;
30+
this.currentPageIndex = ko.observable(0);
31+
this.pageSize = configuration.pageSize || 5;
32+
33+
// If you don't specify columns configuration, we'll use scaffolding
34+
this.columns = configuration.columns || getColumnsForScaffolding(ko.utils.unwrapObservable(this.data));
35+
36+
this.itemsOnCurrentPage = ko.dependentObservable(function () {
37+
var startIndex = this.pageSize * this.currentPageIndex();
38+
return this.data.slice(startIndex, startIndex + this.pageSize);
39+
}, this);
40+
41+
this.maxPageIndex = ko.dependentObservable(function () {
42+
return Math.ceil(ko.utils.unwrapObservable(this.data).length / this.pageSize);
43+
}, this);
44+
45+
this.criaNovoObjfromTemplate = function(){
46+
var newObj = {};
47+
for(var key in this.data()[0]){
48+
if(key != 'updateObj'){
49+
newObj[key] = $('#asd'+key).val();
50+
}
51+
}
52+
this.functionAddNewObj(newObj)
53+
54+
}
55+
56+
}
57+
};
58+
59+
// Templates used to render the grid
60+
var templateEngine = new ko.jqueryTmplTemplateEngine();
61+
templateEngine.addTemplate("ko_simpleGrid_grid", "\
62+
<table class=\"ko-grid\" cellspacing=\"0\">\
63+
<thead>\
64+
<tr>\
65+
{{each(i, columnDefinition) columns}}\
66+
<th>${ columnDefinition.headerText }</th>\
67+
{{/each}}\
68+
{{if mostraEditar}}\
69+
<th>Editar</th>\
70+
{{/if}}\
71+
</tr>\
72+
</thead>\
73+
<tbody>\
74+
{{each(i, row) itemsOnCurrentPage()}}\
75+
<tr class=\"${ i % 2 == 0 ? 'even' : 'odd' }\">\
76+
{{each(j, columnDefinition) columns}}\
77+
<td>{{html typeof columnDefinition.rowText == 'function' ? columnDefinition.rowText(row,i) : row[columnDefinition.rowText] }}</td>\
78+
{{/each}}\
79+
{{if mostraEditar}}\
80+
<td><button class='btnEditar' data-bind=\"click: function() { this.editarClick(this.itemsOnCurrentPage()[i]); }\">Editar</button></td>\
81+
{{/if}}\
82+
</tr>\
83+
{{/each}}\
84+
</tbody>\
85+
</table>");
86+
87+
templateEngine.addTemplate("ko_simpleGrid_pageLinks", "\
88+
<div class=\"ko-grid-pageLinks\">\
89+
<span><!--Page:--></span>\
90+
{{each(i) ko.utils.range(1, maxPageIndex)}}\
91+
<a href=\"#\" data-bind=\"click: function() { currentPageIndex(i); }, css: { selected: i == currentPageIndex() }\">\
92+
${ i + 1 }\
93+
</a>\
94+
{{/each}}\
95+
</div>");
96+
97+
templateEngine.addTemplate("form_add_newObj", "\
98+
<form>\
99+
<fieldset>\
100+
{{each(i, objProp) data()[0]}}\
101+
{{if i != 'updateObj'}}\
102+
<label for=\"${ i }\">${ i }</label>\
103+
<input type=\"text\" name=\"${ i }\" id=\"asd${ i }\" class=\"text ui-widget-content ui-corner-all\" />\
104+
<br/>\
105+
{{/if}}\
106+
{{/each}}\
107+
<button class='btnEditar' data-bind=\"click: function() {\
108+
criaNovoObjfromTemplate()\
109+
}\">Adicionar</button>\
110+
</fieldset>\
111+
</form>");
112+
113+
114+
// The "simpleGrid" binding
115+
ko.bindingHandlers.simpleGrid = {
116+
// This method is called to initialize the node, and will also be called again if you change what the grid is bound to
117+
update: function (element, viewModelAccessor) {
118+
var teste = function(){
119+
$('button').button();
120+
};
121+
var viewModel = viewModelAccessor();
122+
element.innerHTML = "";
123+
124+
var gridContainer = element.appendChild(document.createElement("DIV"));
125+
ko.renderTemplate("ko_simpleGrid_grid", viewModel, { templateEngine: templateEngine, afterRender: teste }, gridContainer, "replaceNode");
126+
127+
var pageLinksContainer = element.appendChild(document.createElement("DIV"));
128+
ko.renderTemplate("ko_simpleGrid_pageLinks", viewModel, { templateEngine: templateEngine }, pageLinksContainer, "replaceNode");
129+
130+
131+
}
132+
133+
};
134+
})();

‎example/css/style.css

+147
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
2+
/* ==== Scroll down to find where to put your styles :) ==== */
3+
4+
/* HTML5 ✰ Boilerplate */
5+
6+
html, body, div, span, object, iframe,
7+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8+
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
9+
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
10+
fieldset, form, label, legend,
11+
table, caption, tbody, tfoot, thead, tr, th, td,
12+
article, aside, canvas, details, figcaption, figure,
13+
footer, header, hgroup, menu, nav, section, summary,
14+
time, mark, audio, video {
15+
margin: 0;
16+
padding: 0;
17+
border: 0;
18+
font-size: 100%;
19+
font: inherit;
20+
vertical-align: baseline;
21+
}
22+
23+
article, aside, details, figcaption, figure,
24+
footer, header, hgroup, menu, nav, section {
25+
display: block;
26+
}
27+
28+
blockquote, q { quotes: none; }
29+
blockquote:before, blockquote:after,
30+
q:before, q:after { content: ''; content: none; }
31+
ins { background-color: #ff9; color: #000; text-decoration: none; }
32+
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
33+
del { text-decoration: line-through; }
34+
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
35+
table { border-collapse: collapse; border-spacing: 0; }
36+
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
37+
input, select { vertical-align: middle; }
38+
39+
body { font:13px/1.231 sans-serif; *font-size:small; }
40+
select, input, textarea, button { font:99% sans-serif; }
41+
pre, code, kbd, samp { font-family: monospace, sans-serif; }
42+
43+
html { overflow-y: scroll; }
44+
a:hover, a:active { outline: none; }
45+
ul, ol { margin-left: 2em; }
46+
ol { list-style-type: decimal; }
47+
nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }
48+
small { font-size: 85%; }
49+
strong, th { font-weight: bold; }
50+
td { vertical-align: top; }
51+
52+
sub, sup { font-size: 75%; line-height: 0; position: relative; }
53+
sup { top: -0.5em; }
54+
sub { bottom: -0.25em; }
55+
56+
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; }
57+
textarea { overflow: auto; }
58+
.ie6 legend, .ie7 legend { margin-left: -7px; }
59+
input[type="radio"] { vertical-align: text-bottom; }
60+
input[type="checkbox"] { vertical-align: bottom; }
61+
.ie7 input[type="checkbox"] { vertical-align: baseline; }
62+
.ie6 input { vertical-align: text-bottom; }
63+
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
64+
button, input, select, textarea { margin: 0; }
65+
input:valid, textarea:valid { }
66+
input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; }
67+
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }
68+
69+
::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
70+
::selection { background:#FF5E99; color:#fff; text-shadow: none; }
71+
a:link { -webkit-tap-highlight-color: #FF5E99; }
72+
73+
button { width: auto; overflow: visible; }
74+
.ie7 img { -ms-interpolation-mode: bicubic; }
75+
76+
body, select, input, textarea { color: #444; }
77+
h1, h2, h3, h4, h5, h6 { font-weight: bold; }
78+
a, a:active, a:visited { color: #607890; }
79+
a:hover { color: #036; }
80+
81+
/*
82+
// ========================================== \\
83+
|| ||
84+
|| Your styles ! ||
85+
|| ||
86+
\\ ========================================== //
87+
*/
88+
.ko-grid { margin-bottom: 1em; width: 25em; border: 1px solid silver; background-color:White; width:100%; }
89+
.ko-grid th { text-align:left; background-color: #cccccc; color:Blue; }
90+
.ko-grid td, th { padding: 0.4em; }
91+
.ko-grid tr.odd { background-color: #DDD; }
92+
.ko-grid-pageLinks { margin-bottom: 1em; float:right;}
93+
.ko-grid-pageLinks a { padding: 0.5em; }
94+
.ko-grid-pageLinks a.selected { background-color: Black; color: Black; }
95+
96+
97+
98+
99+
100+
101+
102+
103+
104+
105+
106+
107+
108+
109+
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
110+
.hidden { display: none; visibility: hidden; }
111+
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
112+
.visuallyhidden.focusable:active,
113+
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
114+
.invisible { visibility: hidden; }
115+
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
116+
.clearfix:after { clear: both; }
117+
.clearfix { zoom: 1; }
118+
119+
120+
@media all and (orientation:portrait) {
121+
122+
}
123+
124+
@media all and (orientation:landscape) {
125+
126+
}
127+
128+
@media screen and (max-device-width: 480px) {
129+
130+
/* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
131+
}
132+
133+
134+
@media print {
135+
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
136+
-ms-filter: none !important; }
137+
a, a:visited { color: #444 !important; text-decoration: underline; }
138+
a[href]:after { content: " (" attr(href) ")"; }
139+
abbr[title]:after { content: " (" attr(title) ")"; }
140+
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
141+
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
142+
thead { display: table-header-group; }
143+
tr, img { page-break-inside: avoid; }
144+
@page { margin: 0.5cm; }
145+
p, h2, h3 { orphans: 3; widows: 3; }
146+
h2, h3{ page-break-after: avoid; }
147+
}

‎example/favicon.ico

1.12 KB
Binary file not shown.

‎example/images/Thumbs.db

5.5 KB
Binary file not shown.

‎example/images/_logo.png

10.9 KB

‎example/images/arrow_left_48.png

4.45 KB

‎example/images/arrow_right_48.png

4.33 KB

‎example/images/back.png

79.3 KB

‎example/images/back_text.png

207 KB

‎example/images/back_text2.png

273 KB

‎example/images/background.png

54.6 KB

‎example/images/barra.jpg

65.1 KB

‎example/images/barra.png

47.4 KB

‎example/images/bodyBack.jpg

658 Bytes

‎example/images/bt.png

390 Bytes

‎example/images/bt_delete.png

421 Bytes

‎example/images/btnNext.png

706 Bytes

‎example/images/butao_new.png

3.08 KB

‎example/images/butao_save.png

80.1 KB

‎example/images/choose-file.gif

1.89 KB

‎example/images/fechar.png

78.9 KB

‎example/images/forward.png

79.3 KB

‎example/images/fundo.jpg

711 Bytes

‎example/images/fundo_padrao.jpg

332 Bytes

‎example/images/layout_01.png

518 KB

‎example/images/layout_02.png

3.11 MB

‎example/images/loader.gif

3.13 KB

‎example/images/logo.jpg

8.84 KB

‎example/images/logo.png

6.76 KB

‎example/images/menu-back.png

71 KB

‎example/images/minimizar.png

63 KB

‎example/images/news1.jpg

7.05 KB

‎example/images/news2.jpg

7.99 KB

‎example/images/news3.jpg

8.84 KB

‎example/images/news4.jpg

8.67 KB

‎example/images/pesquisa_barra.jpg

334 Bytes

‎example/images/pesquisa_barra2.jpg

576 Bytes

‎example/images/setamenu.png

47.2 KB

‎example/images/slice.jpg

1.36 KB

‎example/images/slice.png

1.36 KB

‎example/images/slice2.png

147 KB

‎example/images/slice_2.jpg

1.36 KB

‎example/images/step1pt.jpg

26.9 KB

‎example/images/step2pt.jpg

25.6 KB

‎example/images/step3pt.jpg

25.7 KB

‎example/images/step4pt.jpg

27.3 KB

‎example/index.html

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!doctype html>
2+
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
3+
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
4+
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
5+
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
6+
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
7+
<head>
8+
<meta charset="UTF-8">
9+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
10+
11+
<title></title>
12+
<meta name="description" content="">
13+
<meta name="author" content="">
14+
15+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
16+
17+
<link rel="shortcut icon" href="/favicon.ico">
18+
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
19+
<link rel="stylesheet" href="css/style.css?v=2">
20+
<link rel="stylesheet" type="text/css" href="js/libs/layout.css" />
21+
<link rel="stylesheet" href="js/libs/jqtransformplugin/jqtransform.css" type="text/css" media="all" />
22+
<link type="text/css" href="js/libs/flick/jquery-ui-1.8.12.custom.css" rel="stylesheet" />
23+
24+
<script src="js/libs/modernizr-1.7.min.js"></script>
25+
26+
27+
28+
</head>
29+
<body style=" background:#ffffff url(images/bodyBack.jpg) repeat-x;">
30+
<div id="container">
31+
<div id="tabs">
32+
<ul>
33+
<li><a href="#tabs-1">Listagem Quartos</a></li>
34+
<li><a href="#tabs-2">Inserir Novo Quarto</a></li>
35+
</ul>
36+
<div id="tabs-1">
37+
<div data-bind="simpleGrid: gridViewModel"> </div>
38+
</div>
39+
<div id="tabs-2">
40+
41+
</div>
42+
</div>
43+
44+
<button class='btnEditar'>Editar</button>
45+
<div id="dialog-form" data-bind='template: { name: "form_add_newObj", data: gridViewModel }'></div>
46+
</div>
47+
48+
<script src="js/libs/jquery-1.5.1.min.js"></script>
49+
50+
<script src="js/libs/popup.js"></script>
51+
<script src="js/libs/jquery.pngFix.js"></script>
52+
<script src="js/libs/jquery-ui-1.8.12.custom.min.js"></script>
53+
<script src="js/libs/jqtransformplugin/jquery.jqtransform.js" ></script>
54+
<script src='js/libs/jquery.tmpl.js'></script>
55+
<script src='js/libs/knockout-1-1.1.2.js'></script>
56+
57+
<!--Reference to the CRUDGrid.js -->
58+
<script src='../CRUDGrid.js' type='text/javascript'> </script>
59+
60+
<script src="js/plugins.js"></script>
61+
<script src="js/script.js"></script>
62+
<!--[if lt IE 7 ]>
63+
<script src="js/libs/dd_belatedpng.js"></script>
64+
<script> DD_belatedPNG.fix('img, .png_bg');</script>
65+
<![endif]-->
66+
</body>
67+
</html>

‎example/js/libs/.DS_Store

6 KB
Binary file not shown.

0 commit comments

Comments
 (0)