Onsen UI Mostrar un Dialog

Onsen UI

En un artículo anterior pudimos ver que es Onsen UI, de que se trata y como este framework para la creación de aplicaciones híbridas nos provee una interfaz de programación poderosa para llevar acabo nuestros proyectos, para este artículo veremos como podemos hacer uso de dialogs ons-dialog un componente que es muy usando al momento de desarrollar software en múltiples ámbitos, a continuación veamos que necesitamos para la puesta en marcha de nuestro dialog:

Librerías y estilos de Onsen UI:

1
2
3
4
5
6
7
8
    <link rel="stylesheet" href="http://byspel.com/ejemplos/onsenui/recursos/onsenui.css"/>
    <link rel="stylesheet" href="http://byspel.com/ejemplos/onsenui/recursos/onsen-css-components-blue-basic-theme.css"/>
    <script src="http://byspel.com/ejemplos/onsenui/recursos/angular.js"></script>
    <script src="http://byspel.com/ejemplos/onsenui/recursos/onsenui.js"></script>
    <link rel="stylesheet" type="text/css" href="http://byspel.com/ejemplos/onsenui/recursos/ns-default.css" />
    <link rel="stylesheet" type="text/css" href="http://byspel.com/ejemplos/onsenui/recursos/ns-style-growl.css" />
    <script src="http://byspel.com/ejemplos/onsenui/recursos/jquery.js"></script>
    <script>

Todas estas librerías y archivos CSS están almacenadas en este sitio, les recomiendo descargarlas y alojarlas en uno propio o bien usar las propias del sitio de Onsen, seguido tenemos el código html completo para generar el lanzamiento de nuestro Dialogo, veamos:

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
< !doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>OnsenUI Dialog Byspel</title>
    <link rel="stylesheet" href="http://byspel.com/ejemplos/onsenui/recursos/onsenui.css"/>
    <link rel="stylesheet" href="http://byspel.com/ejemplos/onsenui/recursos/onsen-css-components-blue-basic-theme.css"/>
    <script src="http://byspel.com/ejemplos/onsenui/recursos/angular.js"></script>
    <script src="http://byspel.com/ejemplos/onsenui/recursos/onsenui.js"></script>
    <link rel="stylesheet" type="text/css" href="http://byspel.com/ejemplos/onsenui/recursos/ns-default.css" />
    <link rel="stylesheet" type="text/css" href="http://byspel.com/ejemplos/onsenui/recursos/ns-style-growl.css" />
    <script src="http://byspel.com/ejemplos/onsenui/recursos/jquery.js"></script>
    <script>
    var i = ons.bootstrap();
    </script>
</head>
<body>
   
<ons -page>
  </ons><ons -toolbar>
    <div class="center">Ejemplo de Dialog con OnsenUI - Byspel.com</div>
  </ons>
  <ons -list ng-controller="DialogController">
    </ons><ons -list-item ng-click="show('login.html')" modifier="tappable">
      Iniciar Sesión
    </ons>
 


<ons -template id="login.html">
  </ons><ons -dialog var="dialog" cancelable>

    </ons><ons -toolbar inline>
      <div class="center">
        Login
      </div>
    </ons>

    <p>
      <input placeholder="Username" id="username" class="text-input"/>
    </p>

    <p>
      <input type="password" placeholder="Password" id="username" class="text-input"/>
    </p>

    <p>
      <ons -button modifier="large" ng-click="dialog.hide()">Sign in</ons>
    </p>

 



    <script>
   

i.controller('DialogController', function($scope) {
  $scope.dialogs = {};

  $scope.show = function(dlg) {
    if (!$scope.dialogs[dlg]) {
      ons.createDialog(dlg).then(function(dialog) {
        $scope.dialogs[dlg] = dialog;
        dialog.show();
      });
    } else {
      $scope.dialogs[dlg].show();
    }
  }
});
</script>
</body>
</html>

Con esto tendríamos nuestro dialogo ejecutandose, podemos ver el ejemplo en funcionamiento desde este Link.

Si este post fue de ayuda para ti, no olvides dejar un comentario, también puedes contar tu experiencia o lo que estés haciendo. Nos ayuda a seguir creciendo. ¡Vamos!, solo te llevará 1 minuto.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *