Total Pageviews

8 September 2013

How to create Home page with Menu Bar and List View with help of JQuery Mobile

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="Default" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Home Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="JScritpt/demos/css/themes/default/jquery.mobile-1.2.0.css" />

    <script src="JScritpt/jquery-1.7.2.js" type="text/javascript"></script>

    <script src="JScritpt/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>

    <link href="new.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server" class="ui-mobile-viewport ui-overlay-c">
        <div>
            <div data-role="page" id="page1">
                <div data-role="header" data-theme="a">
                    <img src="Jquery-mobile-logo.png" alt="Sunset" height="100px" width="100%" />
                    <div data-role="navbar" data-iconpos="top">
                        <ul>
                            <li><a href="Default2.aspx" data-transition="pop" data-theme="" data-icon="home">Home
                            </a></li>
                            <li><a href="Home.aspx" data-transition="pop" data-theme="" data-icon="info">About </a>
                            </li>
                            <li><a href="Key.aspx" data-transition="pop" data-theme="" data-icon="star">Features
                            </a></li>
                            <li><a href="Contactus.aspx" data-transition="pop" data-theme="" data-icon="check">Contact
                                Us </a></li>
                        </ul>
                    </div>
                </div>
                <div data-role="content">
                    <ul data-role="listview" data-divider-theme="b" data-inset="true">
                        <li data-theme="a"><a href="regis.aspx" data-transition="fade">Register Now </a></li>
                        <li data-theme="a"><a href="Login.aspx" data-transition="slide">Sign In </a></li>
                        <li data-theme="a"><a href="GPS.aspx" data-transition="slide">GPS </a></li>
                        <li data-theme="a"><a href="Demo.aspx" data-transition="slide">Display map </a></li>
                        <li data-theme="a"><a href="Test.aspx" data-transition="slide">Feedback </a></li>
                    </ul>
                </div>
                <div data-role="footer">
                    <h1>
                       AMBROSIA</h1>
                </div>
            </div>
        </div>
    </form>
</body>
</html>


How to create Login page in JQuery mobile in .Net




<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Login.aspx.vb" Inherits="Login" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Sign In</title>
    <style>
        #login-button {
            margin-top: 30px;
        }       
    </style>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="JScritpt/demos/css/themes/default/jquery.mobile-1.2.0.css" />

    <script src="JScritpt/jquery-1.7.2.js" type="text/javascript"></script>

    <script src="JScritpt/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>

    <link href="home_standard.css" rel="stylesheet" type="text/css" />
    <link href="new.css" rel="stylesheet" type="text/css" />

    <script src="JScritpt/Login.js" type="text/javascript"></script>

    <script src="JScritpt/jquery-1.8.2.js" type="text/javascript"></script>

</head>
<body>
    <div data-role="page" id="login">
        <div data-role="header">
            <a href="Default2.aspx" data-icon="home">Home</a><h1>
                Login Here</h1>
        </div>
        <div data-role="content">
            <form id="check-user" class="ui-mobile-viewport ui-overlay-c" data-ajax="false">
                <fieldset>
                    
                                <label for="username">
                                    Username:</label>
                                <input type="text" value="" name="username" id="username" data-role="text" /></td>
                        <
                                <label for="password">
                                    Password:</label>
                                <input type="password" value="" name="password" id="password" data-role="password" />
                           
                                <input type="button" data-theme="a" name="submit" id="submit" value="Submit">
                </fieldset>
            </form>
        </div>
        <div data-role="footer">
            <h1>
                AMBROSIA</h1>
        </div>
    </div>
</body>
</html>

Contact Form

Name

Email *

Message *