CCOM4030
/
artesanias
Watch 5
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Estructura del despliegue de informacion de Renglon->Artesania->Artesano utilizando Onsen Ui.

lyxaira.glass 5 years ago
parent
0d6dd4b6c5
commit
966c3c2947
1 changed files with 201 additions and 64 deletions
Split View Show Diff Stats
  1. 201
    64
      www/index.html

+ 201
- 64
www/index.html View File 

@@ -41,88 +41,218 @@
41 41 
         <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
42 42 
         <link rel="stylesheet" type="text/css" href="css/index.css">
43 43 
         <link rel="stylesheet" href="lib/OnsenUI/css/onsenui.css">
44 
-        <link rel="stylesheet" href="lib/OnsenUI/css/onsen-css-components.min.css">
44 
+        <link rel="stylesheet" href="lib/OnsenUI/css/onsen-css-components.min.css">
45 45 
         <script src="lib/OnsenUI/js/onsenui.min.js"></script>
46 
+  	<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
46 47
47 48 
     </head>
48 49 
     <body>
49 
-
50 
-        <ons-navegator id="myNavigator">
51 
-        <ons-page>
52 
-
50 
+
51 
+        <ons-navigator swipeable animation="slide" id="myNavigator">
52 
+           <ons-page>
53 53 
             <ons-toolbar>
54 
-                <div class="center">Cultura</div>
54 
+                <div class="center">Instituto de Cultura</div>
55 55 
             </ons-toolbar>
56 
-
57 
-
58 56 
             <ons-tabbar swipeable position="auto">
59 
-                <ons-tab page="home.html" label="Hogar" active></ons-tab>
60 
-                <ons-tab page="artesania.html" label="Artesanias"></ons-tab>
57 
+                <ons-tab page="home.html" label="Hogar"></ons-tab>
58 
+                <ons-tab page="renglones.html" label="Artesanias"active></ons-tab>
61 59 
                 <ons-tab page="ferias.html" label="Ferias"></ons-tab>
62 60 
                 <ons-tab page="instituto.html" label="Instituto"></ons-tab>
63 61 
             </ons-tabbar>
64 62 
         </ons-page>
65 
-        </ons-navegator>
63 
+        </ons-navigator>
64 
+
65 
+	<template id="artesanias.html">
66 
+	  <ons-page id="artesanias">
67 
+
68 
+	    <ons-toolbar>
69 
+	      <div class="left"><ons-back-button>Atrás</ons-back-button></div>
70 
+	      <div class="center"></div>
71 
+	    </ons-toolbar>
66 72
73 
+    <ons-pull-hook id="pull-hook" threshold-height="120px">
74 
+      <ons-icon id="pull-hook-icon" size="22px" class="pull-hook-content" icon="fa-arrow-down"></ons-icon>
75 
+    </ons-pull-hook>
76 
+
77 
+    <ons-list id="artesania-list">
78 
+      <ons-list-header>Pull to refresh</ons-list-header>
79 
+    </ons-list>
80 
+
81 
+        <script>
82 
+      ons.getScriptPage().onInit = function () {
83 
+        this.querySelector('ons-toolbar div.center').textContent = this.data.title;
84 
+        var pullHook = document.getElementById('pull-hook');
85 
+        var icon = document.getElementById('pull-hook-icon');
86 
+        pullHook.addEventListener('changestate', function (event) {
87 
+          switch (event.state) {
88 
+            case 'initial':
89 
+              icon.setAttribute('icon', 'fa-arrow-down');
90 
+              icon.removeAttribute('rotate');
91 
+              icon.removeAttribute('spin');
92 
+              break;
93 
+            case 'preaction':
94 
+              icon.setAttribute('icon', 'fa-arrow-down');
95 
+              icon.setAttribute('rotate', '180');
96 
+              icon.removeAttribute('spin');
97 
+              break;
98 
+            case 'action':
99 
+              icon.setAttribute('icon', 'fa-spinner');
100 
+              icon.removeAttribute('rotate');
101 
+              icon.setAttribute('spin', true);
102 
+              break;
103 
+          }
104 
+        });
105 
+
106 
+        var getArtesania = function (num) {
107 
+          const names = ['Palo', 'Cara', 'Guitarra', 'Pilon', 'Raqueta', 'Envase', 'Vasija', 'Caparazon', 'Libros', 'Persona'];
108 
+          return {
109 
+            name: names[num]
110 
+          };
111 
+        };
112 
+        var getData = function () {
113 
+          const data = [];
114 
+          for (var i = 0; i < 10; i++) {
115 
+            data.push(getArtesania(i));
116 
+          }
117 
+          return data;
118 
+        };
119 
+        var createArtesania = function (Artesania) {
120 
+          return ons.createElement(`
121 
+              <ons-list-item expandable tappable>
122 
+                <div class="center" >${Artesania.name}</div>
123 
+      	        <div class="expandable-content"> -Artesanos que trabajan con ${Artesania.name}- <br><br> Luis Lao | Naguabo
124 
+							<br> <a id='home.html'>Jorge Rivera | Naguabo</a> </div>
125 
+              </ons-list-item>
126 
+            `
127 
+          );
128 
+        };
129 
+        var Artesanias = getData();
130 
+        for (Art of Artesanias) {
131 
+          var Artesania = createArtesania(Art);
132 
+          document.getElementById('artesania-list').appendChild(Artesania);
133 
+        };
134 
+        pullHook.onAction = function (done) {
135 
+          setTimeout(function() {
136 
+            document.getElementById('artesania-list').appendChild(createArtesania(getArtesania()));
137 
+            done();
138 
+          }, 400);
139 
+        }
140 
+      };
141 
+        </script>
142 
+
143 
+        <style>
144 
+          .pull-hook-content {
145 
+            color: #333;
146 
+            transition: transform .25s ease-in-out;
147 
+          }
148 
+        </style>
149 
+      </ons-page>
150 
+    </template>
67 151
68 152 
         <template id="home.html">
69 
-            <ons-page id="Hogar">
153 
+
154 
+	      <ons-page id="home">
155 
+
70 156 
                 <p style="text-align: center;">
71 
-			     Pantalla Principal
157 
+					Aqui los datos :
72 158 
                 </p>
159 
+
73 160 
             </ons-page>
161 
+
162 
+
74 163 
         </template>
75 164
76 
-        <template id="artesania.html">
77 
-            <ons-page id="artesania">
78 
-
79 
-                <div class="search-bar">
80 
-                     <p style="text-align: center; margin-top: 10px;">
81 
-                        <ons-search-input placeholder="Search" onchange="ons.notification.alert('Searched for: ' + this.value)" style="width: 96%; margin: 6px auto 6px auto;"></ons-search-input>
82 
-                    </p>
83 
-                </div>
84 
-
85 
-                <div>
86 
-                <ons-scroller>
87 
-                    <!--<table id="table" align="center">
88 
-                        <tr>
89 
-                            <th>Renglones</th>
90 
-                            <th>Especificaciones</th>
91 
-                        </tr>
92 
-                    <script type="text/javascript" src="js/test.js"></script>
93 
-                    </table>     -->
94 
-
95 
-                    <ons-list>
96 
-                    <ons-list-header>Renglones</ons-list-header>
97 
-                    <ons-list-item><a href="madera.html">Madera</a></ons-list-item>
98 
-                    <ons-list-item>Labores en aguja</ons-list-item>
99 
-                    <ons-list-item>Textiles</ons-list-item>
100 
-                    <ons-list-item>Barro</ons-list-item>
101 
-                    <ons-list-item>Instrumentos Típicos</ons-list-item>
102 
-                    <ons-list-item>Juguetes tradicionales</ons-list-item>
103 
-                    <ons-list-item>Fibras</ons-list-item>
104 
-                    <ons-list-item>Caretas</ons-list-item>
105 
-                    <ons-list-item>Cuero</ons-list-item>
106 
-                    <ons-list-item>Metal</ons-list-item>
107 
-                    <ons-list-item>Piedras</ons-list-item>
108 
-                    <ons-list-item>Papel</ons-list-item>
109 
-                    <ons-list-item>Bambú</ons-list-item>
110 
-                    <ons-list-item>Cristal</ons-list-item>
111 
-                    <ons-list-item>Higüera</ons-list-item>
112 
-                    <ons-list-item>Desechos Marinos</ons-list-item>
113 
-                    <ons-list-item>Porcelanicrón</ons-list-item>
114 
-                    <ons-list-item>Tabacos</ons-list-item>
115 
-                    <ons-list-item>Semillas</ons-list-item>
116 
-                    <ons-list-item>Aromatización</ons-list-item>
117 
-                    <ons-list-item>Dulces Típicos</ons-list-item>
118 
-                    </ons-list>
119 
-                </ons-scroller>
120 
-                </div>
121 
-            </ons-page>
165 
+        <template id="renglones.html">
166 
+
167 
+            <ons-page id="renglones">
168 
+
169 
+	    <!--ons-card id="renglones-list" onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Madera'})">
170 
+		<p> Aqui los renglones </p>
171 
+	    </ons-card-->
172 
+
173 
+
174 
+
175 
+   		<ons-card onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Madera'})">
176 
+	          <div class="title">Madera</div>
177 
+	        </ons-card>
178 
+
179 
+
180 
+	        <ons-card onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Labores en aguja'})">
181 
+	          <div class="title">Labores en aguja</div>
182 
+	        </ons-card>
183 
+
184 
+	        <ons-card onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Textiles'})">
185 
+	          <div class="title">Textiles</div>
186 
+	        </ons-card>
187 
+
188 
+	        <ons-card onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Barro'})">
189 
+	          <div class="title">Barro</div>
190 
+	        </ons-card>
191 
+
192 
+	        <ons-card onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Instrumentos Típicos'})">
193 
+	          <div class="title">Instrumentos Típicos</div>
194 
+	        </ons-card>
195 
+
196 
+	        <ons-card onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Juguetes tradicionales'})">
197 
+	          <div class="title">Juguetes tradicionales</div>
198 
+	        </ons-card>
199 
+
200 
+	        <ons-card onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Fibras'})">
201 
+	          <div class="title">Fibras</div>
202 
+	        </ons-card>
203 
+
204 
+	        <ons-card onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Caretas'})">
205 
+	          <div class="title">Caretas</div>
206 
+	        </ons-card>
207 
+
208 
+	        <ons-card onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Cuero'})">
209 
+	          <div class="title">Cuero</div>
210 
+	        </ons-card>
211 
+
212 
+	        <ons-card onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Metal'})">
213 
+	          <div class="title">Metal</div>
214 
+	        </ons-card>
215 
+
216 
+	        <style>
217 
+	          .intro {
218 
+		    text-align: center;
219 
+		    padding: 20px;
220 
+		    margin-top: 30px;
221 
+	          }
222 
+
223 
+	          ons-card {
224 
+		    cursor: pointer;
225 
+		    color: #333;
226 
+	          }
227 
+
228 
+	          .card__title,
229 
+	          .card--material__title {
230 
+		    font-size: 15px;
231 
+	          }
232 
+	        </style>
233 
+	    </ons-page>
234 
+
235 
+	<!--script>
236 
+	ons.getScriptPage().onInit = function () {
237 
+        this.querySelector('ons-toolbar div.center').textContent = this.data.title;
238 
+        var createArtesania = function (Artesania) {
239 
+          return ons.createElement(`
240 
+              <ons-list-item expandable tappable>
241 
+                <div class="center" >${Artesania.name}</div>
242 
+      	        <div class="expandable-content"> -Artesanos que trabajan con ${Artesania.name}- <br><br> Luis Lao | Naguabo
243 
+							<br> <a id='home.html'>Jorge Rivera | Naguabo</a> </div>
244 
+              </ons-list-item>
245 
+            `
246 
+          );
247 
+         document.getElementById('artesania-list').appendChild(createArtesania(getArtesania()));
248 
+	};
249 
+	</script-->
250 
+
251 
+
122 252 
         </template>
123 253
124 254 
         <template id="ferias.html">
125 
-            <ons-page id="Ferias">
255 
+            <ons-page id="ferias">
126 256
127 257 
                 <div id = "caleandar" class = "calendar" style="margin-top: 50px;">
128 258 
                     <script type="text/javascript" src="calendar_files/js/caleandar.js"></script>
 
@@ -132,9 +262,15 @@
132 262 
         </template>
133 263
134 264 
         <template id="instituto.html">
135 
-            <ons-page id="Instituto">
265 
+            <ons-page id="instituto">
136 266 
                 <p style="text-align: center;">
137 267
268 
+		    <ons-toolbar>
269 
+		      <div class="left"><ons-back-button>Pagejjn 3</ons-back-button></div>
270 
+		      <div class="center"></div>
271 
+		    </ons-toolbar>
272 
+
273 
+
138 274 
 		<h1>Instituto de Cultura Puertorriqueña</h1>
139 275 
 		<h3>Ven, descubre lo que nuestra riqueza cultural puertorriqueña tiene para tí.<br> Disfrútala, es tu identidad.
140 276 
 		</h3>
 
@@ -152,7 +288,7 @@
152 288 
         </body>
153 289
154 290
155 
-		Visita nuestra <a href="https://www.icp.pr.gov/">Página Web</a> o síguenos en nuestras redes sociales:
291 
+		Visita nuestra <a href="https://www.icp.pr.gov/">Página Web</a> o síguenos en nuestras redes sociales: <br>
156 292 
 		<a href="https://twitter.com/icppr"><img src="img/twitter.png" alt="Twitter" style="width:35px;height:35px;border:0;">
157 293 
 		</a>
158 294 
 		<a href="https://facebook.com/icppr"><img src="img/facebook.png" alt="Facebook" style="width:35px;height:35px;border:0;">
 
@@ -162,11 +298,12 @@
162 298 
 		<a href="https://instagram.com/icppr"><img src="img/instagram.png" alt="Instagram" style="width:35px;height:35px;border:0;">
163 299 
 		</a>
164 300
165 
-
166 
-
167 301 
                 </p>
168 302 
             </ons-page>
169 303 
         </template>
304 
+
305 
+	<script src="js/load.js"></script>
306 
+	<script src="js/demo.js"></script>
170 307
171 308 
         <script type="text/javascript" src="cordova.js"></script>
172 309 
         <script type="text/javascript" src="js/index.js"></script>