Incapaz de terminar un trabajo
Publicado por Francisco (6 intervenciones) el 30/11/2014 13:24:46
Buenos Dias/Tardes/Noches,
Me piden para un curso algo que soy incapaz de hacer, por mas que lo he intentado.
Modificar el ejemplo de abajo(tb esta adjunto el html) para que se muestre el URL de cada iframe justo encima de la ventana donde se visualiza su contenido.
- Los URLs irán numerados de forma que cada uno lleve delante el string URL_n, siendo n el índice en el array.
- Añadir ademas un cajetín para introducir un número y un botón que borre el URL con el índice introducido cuando se pulse el botón.
Se recomienda utilizar el método splice(…) para eliminar dicho elemento del array y después volver a repintar la lista de iFrames restantes.
Si hay algun valiente (y crack) que sea capaz de realizarlo, le estaria muy agradecido. Así aprenderia a realizarlo
Gracias!
Me piden para un curso algo que soy incapaz de hacer, por mas que lo he intentado.
Modificar el ejemplo de abajo(tb esta adjunto el html) para que se muestre el URL de cada iframe justo encima de la ventana donde se visualiza su contenido.
- Los URLs irán numerados de forma que cada uno lleve delante el string URL_n, siendo n el índice en el array.
- Añadir ademas un cajetín para introducir un número y un botón que borre el URL con el índice introducido cuando se pulse el botón.
Se recomienda utilizar el método splice(…) para eliminar dicho elemento del array y después volver a repintar la lista de iFrames restantes.
Si hay algun valiente (y crack) que sea capaz de realizarlo, le estaria muy agradecido. Así aprenderia a realizarlo
Gracias!
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
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<style>
iframe { padding:10px; border:5px solid pink;background-color:white;
width:300px; height:350px;}#iframes {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;-webkit-flex-wrap: wrap;
flex-wrap:wrap;
}#marco {
background-color: pink;
padding: 10px; margin: 10px; border: 3px solid black;}</style>
<script type="text/javascript" src="zepto.min.js" >
</script>
<script type="text/javascript">
$(function(){
var urls = ["http://getbootstrap.com","http://vishub.org"];
function mostrar(urls) {
var i, iframes="";
for (i=0; i < urls.length; ++i) {
iframes += "<iframe src='" + urls[i] + "'></iframe>";
}$('#iframes').html(iframes);
};$("#boton").on('click', function(){
urls.push($('#nuevo').val());
mostrar(urls);
});
mostrar(urls);
});
</script>
</head>
<body>
<h3>Ejemplos de diseño responsivo</h3>
<input type="text" id="nuevo" value="Nuevo URL" />
<button type="button" id="boton"> Añadir </button>
<p>
<div id='marco'><div id="iframes" /></div>
</body>
</html>
- 55-for_iframe.htm.zip(797,0 B)
Valora esta pregunta
0
