JSFiddle - React, Tailwind, and code Playground

by Juan Camilo Romero

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="http://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.css">
<title>Validacion de usuarios</title>
 
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="http://weareoutman.github.io/clockpicker/dist/jquery-clockpicker.min.js"></script>
<iframe src='' name='iframecontoff' style="width:0px;height:0px;visibility:hidden"></iframe>
<iframe src='' name='iframeconton' style="width:0px;height:0px;visibility:hidden"></iframe>
 
<body> 
 
<div data-role="page" id="inicio">
 
	<div data-role="header" data-theme="b">
		<h1>Autenticacion de Usuario</h1>
	</div>
    
	<div data-role="content">	
		<form id="formulario" >
      
      			<label> Usuario </label>
      			<input type="text" id="nombredeusuario" name="nombredeusuario">
      
      			<label> Password </label>
     			<input type="password" id="clave" name="clave" >
 
      			<input type="submit" value="Login" id="botonLogin" data-theme="b">
      
    		</form>		
	</div>
	 
</div>
 
<div data-role="page" id="demo-page">

        <div data-role="header" data-theme="b">
                <h1>Areas - LigthGo</h1>
                <a href="#" class="ui-btn-right" data-icon="plus" id="btn2">Add</a>
        </div>

        <div data-role="content" >      
<div data-role="controlgroup" data-type="horizontal" id="navgroup">
<a href="#" data-role="button" id="btn3" data-icon="power" data-theme="e">On all</a>
<a href="#" data-role="button" id="btn4" data-icon="power" data-theme="b">Off all</a>
<input type="text" value="" maxlength="12" placeholder="Codigo De Control" id="control"/>    
</div>
               
            <ul id="list1" data-role="listview" data-inset="true" data-filter="false" data-split-icon="delete">
                   <li><a href="#" class="fila">
	       ...

CSS

.cuadro
{
padding:10px;
display:none;
text-align:center;
border:solid 1px #c3c3c3;
}
#navgroup {text-align:center;}

JavaScript

$('#formulario').submit(function() { 
	 
	// recolecta los valores que inserto el usuario
	var datosUsuario = $("#nombredeusuario").val()
	var datosPassword = $("#clave").val()
	
  	archivoValidacion = "http://revolucion.mobi/ejemplos/phonegap/envioFormulario/validacion_de_datos.php?jsoncallback=?"
 
	$.getJSON( archivoValidacion, { usuario:datosUsuario ,password:datosPassword})
	.done(function(respuestaServer) {
		
		alert(respuestaServer.mensaje)
		
		if(respuestaServer.validacion == "ok"){
		  
		 	/// si la validacion es correcta, muestra la pantalla "home"
			$.mobile.changePage("#demo-page")
		  
		}else{
		  
		  /// ejecutar una conducta cuando la validacion falla
		}
  
	})
	return false;
})
$(document).on("click", "#test", function () {
       $.mobile.changePage("#inicio")
     });

$(document).on("click", ".fila", function () {
        $(this).next().next(".cuadro").slideToggle(); // al click desplegar sublista
      });

    $(document).on("click", ".borrar", function () {
        $( this ).parent( "li" ).remove();    //eliminar elemento
        $( "#list1" ).listview( "refresh" );  //refrescar lista
      });
     $(document).on("click", "#btn2", function () {
  var content =
              "<li>" +
              "<a href='#' class='fila'>elemento1</a><a href='#' data-icon='delete' class='borrar'>Favorita</a><div class='cuadro'><label>label:</label><input type='text' value='' maxlength='3'class='referencia'/><label >label2:</label><select class='sld' data-role='slider'><option value='off'>Off</option><option value='on'>On</option></select><div class='ui-field-contain'><label>Encender a las:</label><input type='text' data-mini='true' class='input-a' value=''><label>Apagar a las:</label><input type='text' data-mini='true' class='input-b' value=''></div></div>" +
              "</li>";
 
  $( content ).appendTo( "#list1" ).enhanceWithin(); // agregar nueva fila a lista
   $('.input-a').clockpicker({ donetext: 'Done', placement: 'top', align:...