<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title></title> <!--link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css"--> <link rel="stylesheet" href="css/jquery.mobile-1.3.1.css"> <!--link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.css"--> <!--link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.min.css"--> <link rel="stylesheet" href="css/jquery.mobile.theme-1.3.1.css"> <!--link rel="stylesheet" href="css/jquery.mobile.theme-1.3.1.min.css"--> <!-- Extra Codiqa features --> <!-- jQuery and jQuery Mobile --> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/jquery.mobile-1.3.1.min.js"></script> <script src="js/jquery.mobile-1.3.1.min.js"></script> <script src="js/jquery.mobile-1.3.1.js"></script> <script src="js/EventHandler.js"></script> <!-- Extra Codiqa features --> </head> <style> .ui-page { background : transparent url(img/Background-Screen.png) repeat 0 0; position:absolute; height:100%; background-size : cover; } </style> <body onload="loadData()"> <!--page one My Cases Screen-------------> <div data-role="page" id="Home"> <div data-role="header" data-theme="b" data-position="fixed"> <h1 class="ui-title" id="hdr" style="text-align:left;margin-left: 20px;">My Cases</h1> <div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" data-inline="true" data-iconpos="notext" data-icon="gear" data-theme="b" id="Setting">Setting</a> <a href="#newevent1" data-role="button" data-iconpos="notext" data-inline="true" data-icon="plus" data-theme="b" data-rel="dialog" id="Add">Add</a> <a href="#newevent1" data-role="button" data-inline="true" data-theme="b" data-rel="dialog"id="Edit">Edit</a> </div> </div> <div id="here_table"> </div> </div> <!-- Page two Case Information Screen--------------------------> <div data-role="page" id="CaseInformationScreen"> <div data-role="header" data-theme="b" data-position="fixed"> <a href="#" data-role="button" data-corners="false">Cancel</a> <h1>Case Information</h1> <a href="#" ddata-role="button" data-corners="false">Add</a> </div> <div data-role="fieldcontain"> <label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label> <input name="text-12" id="text-12" value="" type="text"> </div> <div data-role="fieldcontain"> <label for="text-12" style="text-align:left;margin-left: 0px;">Case Date:</label> <input name="text-12" id="text-12" value="" type="text"> </div> <div data-role="fieldcontain"> <label for="textarea-12">Textarea:</label> <textarea cols="40" rows="8" name="textarea-12" id="textarea-12"></textarea> </div> </div> </body> <script > $(document).ready(function() { // $('.ui-loader').remove(); $.mobile.loading('hide'); }); var loadData = function() { var content = "<table>"; for (i = 0; i < 30; i++) { content += '<tr class="row" id="' + i + '"><td>' + 'result ' + i + '</td></tr>'; } content += "</table>" $('#here_table').append(content); $(".row").click(function() { alert(this.id); }); } $("#addbuttons").on("click", "a", function() { if ($(this).attr("id") == "Add") { $.mobile.changePage($("#CaseInformationScreen"), { transition: "slide", reverse: false, changeHash: false }); } }); </script> </html>
transition: 'pop'
role: 'dialog'
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)