Total Pageviews

9 September 2013

Some disscussion about JQuery Mobile With help of ASP.Net


How to create  About Us  page with help of Jquery mobile
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Home.aspx.vb" Inherits="Home" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Home</title>
    <meta http-equiv="refresh" content="5; url=http://localhost:46370/WebSite2/Default2.aspx" />
    <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" />
    <link href="new.css" rel="stylesheet" type="text/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>

</head>
<body>
    <form id="form1" runat="server" class="ui-mobile-viewport ui-overlay-c">
        <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="fade" data-theme="" data-icon="home">Home
                    </a></li>
                    <li><a href="Home.aspx" data-transition="fade" data-theme="" data-icon="info">About
                    </a></li>
                    <li><a href="Key.aspx" data-transition="fade" data-theme="" data-icon="star">Features
                    </a></li>
                    <li><a href="Contactus.aspx" data-transition="fade" data-theme="" data-icon="check">
                        Contact </a></li>
                </ul>
            </div>
        </div>
        <div data-role="content" style="text-align: left">
            <h1>
                jQuery Mobile Overview</h1>
            <p class="p">
                jQuery's mobile strategy can be summarized simply: A unified user interface system
                that works seamlessly across all popular mobile device platforms, built on the rock-solid
                jQuery and jQuery UI foundation. Focused on a feature-rich but lightweight codebase
                built on progressive enhancement with a flexible theming system and ThemeRoller
                tool.
            </p>
            <p class="p">
                The framework includes an Ajax navigation system that brings animated page transitions
                and a core set of UI widgets:pages, dialogs, toolbars, listviews, buttons with icons,
                form elements, accordions, collapsibles, and more.
            </p>
            <p class="p">
                The critical difference with our approach is the wide variety of mobile platforms
                we're targeting with jQuery Mobile so no browser or device is left behind.</p>
            <p class="p">
                We've also focused on making jQuery Mobile easy to learn with a simple, markup-based
                system to applying behavior and theming.</p>
            <p class="p">
                For more advanced developers, there is a rich API of global configuration options,
                events, and methods to apply scripting, generate dynamic pages, and even build native
                apps with tools like PhoneGap.</p>
        </div>
        <div data-role="footer">
            <h1>
                AMBROSIA</h1>
        </div>
    </form>
</body>
</html>

Posted by at No comments:

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>


Posted by at No comments:

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>

Posted by at No comments:

4 September 2013

How to create list view in jQuery mobile with help of ASP.Net

Here we will discuss about List View.
<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>
Posted by at No comments:

How to create menu bar in JQuery mobile with help of ASP.net

Here we will discuss about Menu Bar.
<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>
Posted by at No comments:

Basic introduction of jQuery Mobile with help of .Net

Here we will discuss about basic knowledge of jquery mobile application which are compatible for all
All device.
The jQuery Mobile is a framework that built on top of the jQuery and jQuery UI foundation. The framework  allow us to develop a single mobile web applications that work across smartphones, platforms and tablets. In addition, one for the great features that jQuery Mobile is “Progressive enhancement and graceful degradation“, which means that jQuery Mobile will fully leverages the latest  technologies HTML5, CSS3, and JavaScript on the supported modern devices and will still provide the best possible experience, basic functionality and basic content for less capable devices as well.


<div data-role=”header”>
//This is use for header content.
</div>
<div data-role=”content”>
//This is use for body content.
</div>
<div data-role=”footer”>
//This is use for footer content.
</div>


Before using  above tag  use following JavaScript and CSS.

<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>
  
  
Here is complete program as exmple

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Index.aspx.vb" Inherits="Default2" %>
<!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>

</head>
<body>
<div data-role=”header”>
//This is use for header content.
</div>
<div data-role=”content”>
//This is use for body content.
</div>
<div data-role=”footer”>
//This is use for footer content.
</div>

</body>

</html>
Posted by at No comments:

19 March 2013

What is CSS.


What is CSS?
CSS means Cascading Style Sheets.
it define how to display HTML elements.
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save a lot of work
External Style Sheets are stored in CSS files

 A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets:
p {color:red;text-align:center;}



Posted by at No comments:
Subscribe to: Posts (Atom)

Contact Form

Name

Email *

Message *