Computer Applications Software: Graphics

1905000-25717500West Lothian CollegeHNC Interactive MediaDeveloping Mobile Web Based Applications: An IntroductionH17J 34Assessment task 1-3Outcome(s) covered 1-3Assessment task instructionsjQuery MobileBasicsTo keep it simple is probably why jQuery makes sense as an all-round useful development tool. You can link the pages to the online content delivery network (CDN) or download the files for stylesheet and javascript function from the following link: ease of use we will start by the first method.Step 1:To create a page we use the following HTML code:<head><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href=""><script src=""></script><script src=""></script></head><body><div data-role="page">? <div data-role="header">??? <h1>Welcome To My Homepage</h1>? </div>? <div data-role="main" class="ui-content">??? <p>I Am Now A Mobile Developer!!</p>? </div>? <div data-role="footer">??? <h1>Footer Text</h1>? </div></div></body>The data-role="page" is the page displayed in the browserThe data-role="header" creates a toolbar at the top of the page (often used for title or search buttons)The data-role="main" defines the content of the page, like text, images, buttons, forms, etc.The "ui-content" class adds extra padding and margin inside the page contentThe data-role="footer" creates a toolbar at the bottom of the pageInside these containers, you can add any HTML elements - paragraphs, images, headings, lists, etc.We can add multiple pages in the one HTML file:<div data-role="page" id="pageone">? <div data-role="main" class="ui-content">??? <a href="#pagetwo">Go to Page Two</a>? </div></div><div data-role="page" id="pagetwo">? <div data-role="main" class="ui-content">??? <a href="#pageone">Go to Page One</a>? </div></div>Transition EffectsAlthough this system is a bit gimmicky, it does allow a certain amount of professionalism to your interface. You just need to add the following code to a link:<a href="#anylink" data-transition="slide">Slide to Page Two</a>A list of transitions are shown below:fadeflipflowpopslideslidefadeslideupslidedownturnEffects will only work if the browser supports it. You can also reverse action the transition. To do this you can use the following code:<a href="#pagetwo" data-transition="slide" data-direction="reverse">Slide</a>ButtonsA button in jQuery Mobile can be created in three ways:Using the <input> elementUsing the <button> element with class="ui-btn"Using the <a> element with class="ui-btn"For the purpose of navigation in our project we will use the last example:<a href="#anylink" class="ui-btn">Button</a>To develop this into a For the purpose of forms we will use <input> and/or <button>To create button groups use the data-role="controlgroup" attribute together with data-type="horizontal|vertical" in a container element, to specify whether to group buttons horizontally or vertically:<div data-role="controlgroup" data-type="horizontal">? <a href="#" class="ui-btn">Button 1</a>? <a href="#" class="ui-btn">Button 2</a>? <a href="#" class="ui-btn">Button 3</a></div>Back ButtonsTo create a Back button, use the data-rel="back" attribute:<a href="#" class="ui-btn" data-rel="back">Go Back</a>Inline ButtonsBy default, buttons take up the full width of the screen. If you want a button that is only as wide as its content, or if you want two or more buttons to appear side by side, add the "ui-btn-inline" class:<a href="#pagetwo" class="ui-btn ui-btn-inline">Go to Page Two</a>Other effects that can be applied to buttons are as follows:ui-btn-bChanges the color of the button to a black background with white text (default is gray background with black text).ui-corner-allAdds rounded corners to the buttonui-miniMakes the button smallerui-shadowAdds shadows to the buttonIf you want to use more than one class, separate each class with a space, like: class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"jQuery Mobile Button IconsjQuery Mobile provides a set of icons that will make your buttons look better:To add an icon to your button, use the ui-icon class, and position the icon with an icon position class (ui-btn-icon-pos):<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>More icons:Positioning IconsYou can specify one of four values for where the icon should be positioned in the button: top, right, bottom or left. Use the ui-btn-icon class to specify the position:<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top">Top</a><a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-right">Right</a><a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-bottom">Bottom</a><a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Left</a>Displaying Only The IconTo only display the icon, use "notext" as value for icon position:<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-notext">Search</a>jQuery Mobile ToolbarsToolbar elements are often placed inside headers and footers - for "easy-access" navigation:Header BarsThe header is located at the top of the page and usually contain a page title/logo or one or two buttons (typically home, options or search).You can add buttons to the left and/or to the right side in the header.The code below, will add a "Home" button to the left and a "Search" button to the right of the header title text:<div data-role="header">? <a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>? <h1>Welcome To My Homepage</h1>? <a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a></div>The following code will only add a button to the left side of the header title:<div data-role="header">? <a href="#" class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">Home</a>? <h1>Welcome To My Homepage</h1></div>jQuery Mobile PanelsPanels in jQuery Mobile will slide out from the left or the right side of the screen with additional content.To create a panel, add the data-role="panel" attribute to a <div> element and specify an id.Add any HTML markup inside this <div> that you want to display in your panel:<div data-role="panel" id="myPanel">? <h2>Panel Header..</h2>? <p>Some text..</p></div>Note: The panel markup must be placed before or after the header, content and footer inside a jQuery Mobile page. To access the panel, create a link that points to the id of the panel < div>. When a user clicks on the link, the panel will open:<a href="#myPanel" class="ui-btn ui-btn-inline">Open Panel</a>Here is a basic panel example:<div data-role="page" id="pageone">? <div data-role="panel" id="myPanel"> ??? <h2>Panel Header..</h2>??? <p>Some text in the panel..</p>? </div> ? <div data-role="header">??? <h1>Standard Page Header</h1>? </div>? <div data-role="main" class="ui-content">??? <p>Click on the button below to open the Panel.</p>??? <a href="#myPanel" class="ui-btn ui-btn-inline">Open Panel</a>? </div>? <div data-role="footer">??? <h1>Footer Text</h1>? </div> </div>Closing PanelsYou can close the panel by clicking outside of it, by swiping or by pressing the Esc key. You can disable the clicking and swiping features by adding additional data-* attributes to the panel <div>:AttributeValueDescriptiondata-dismissibletrue | falseSpecifies whether the panel can be closed by clicking outside of it, or notdata-swipe-closetrue | falseSpecifies whether the panel can be closed by swiping, or notYou can also close the panel by using a button: Just add a link inside the panel <div> with the data-rel="close" attribute attached to it. And for compatibility reasons, you should also specify the href attribute to point to the ID of the page the user should go to when closing the panel:<div data-role="panel" id="myPanel"> ? <h2>Panel Header..</h2>? <p>Some text in the panel..</p>? <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline">Close Panel</a></div>Panel DisplayYou can control the display mode of the panel with the data-display attribute:Attribute ValueDescriptiondata-display="overlay"Displays the panel over the contentdata-display="push"Animates both the panel and the page at the same timedata-display="reveal"Default. The panel will sit under the page and reveal as the page slides away<div data-role="panel" id="overlayPanel" data-display="overlay"><div data-role="panel" id="revealPanel" data-display="reveal"><div data-role="panel" id="pushPanel" data-display="push">Positioning PanelsBy default, panels will appear on the left side of the screen. For the panel to appear on the right side of the screen, specify the data-position="right" attribute. <div data-role="panel" id="myPanel" data-position="right">You can also specify how the panel's content should be positioned according to the rest of the page when a user starts to scroll. By default, the panel will scroll with the page (but the panel's content will stay on top of the page). If you always want to display the contents of the panel, no matter how far you scroll the page, add the data-position-fixed="true" attribute to the panel:<div data-role="panel" id="myPanel" data-position-fixed="true">Collapsible Content BlocksCollapsibles allow you to hide or show content, which is useful for storing parts of information.To create a collapsible block of content, assign the data-role="collapsible" attribute to a container. Inside the container (div), add a header (H1-H6) or legend element, followed by any HTML markup you want to be expanded:<div data-role="collapsible">? <h1>Click me - I'm collapsible!</h1>? <p>I'm the expanded content.</p></div>Nested Collapsible BlocksCollapsible content blocks can be nested (a collapsible inside a collapsible):<div data-role="collapsible">? <h1>Click me - I'm collapsible!</h1>? <p>I'm the expanded content.</p>? <div data-role="collapsible">??? <h1>Click me - I'm a nested collapsible block!</h1>??? <p>I'm the expanded content in the nested collapsible block.</p>? </div></div>Collapsible SetsCollapsible sets are collapsible blocks that are grouped together (often referred to as an accordion). When a new block is opened, all other blocks close.Create several collapsible content blocks, and then wrap a new container with the data-role="collapsibleset" around the collapsible blocks:<div data-role="collapsibleset">? <div data-role="collapsible">??? <h1>Click me - I'm collapsible!</h1>??? <p>I'm the expanded content.</p>? </div>? <div data-role="collapsible">??? <h1>Click me - I'm collapsible!</h1>??? <p>I'm the expanded content.</p>? </div></div>Responsive TablesResponsive design is useful when you want the content of your mobile web page to respond to the user's device, such as its screen size and orientation.With a simple class name, jQuery Mobile is aware of the user's available screen size and automatically resizes itself to show content that is relevant for that particular user.Responsive tables allow us to display a large set of tabular data that will look attractive for both mobiles and desktops.Reflow TableThe reflow mode positions the table data horizontally until it reaches a minimum size, then all rows are grouped together vertically.Create a table, add the data-role="table" and a class of "ui-responsive" on the <table> element:<table data-role="table" class="ui-responsive">jQuery Mobile Layout GridsjQuery Mobile provides a set of CSS-based column layouts. However, column layouts are not generally recommended on a mobile device, due to the mobile's screen width. But there are times you want to position smaller elements, like buttons or navigation tabs, side-by-side as if it was in a table. Then, columns are perfect.Columns in a grid are of equal width (and 100% wide in total), with no border, background, margin or padding.There are five layout grids that can be used:Grid ClassColumnsColumn WidthsCorresponds Toui-grid-solo1100%ui-block-aui-grid-a250% / 50%ui-block-a|bui-grid-b333% / 33% / 33%ui-block-a|b|c?ui-grid-c425% / 25% / 25% / 25%ui-block-a|b|c|dui-grid-d520% / 20% / 20% / 20% / 20%ui-block-a|b|c|d|eResponsive GridsOn small screens, it is not recommended to have too many buttons with text side-by-side on one row - as the text might get shortened.For responsive grids, add the ui-responsive class to the container:<div class="ui-grid-b ui-responsive">jQuery Mobile List ViewsList views in jQuery Mobile are standard HTML lists; ordered (<ol>) and unordered (<ul>). To create a list, apply the data-role="listview" to the <ol> or <ul> element. To make the items tappable, specify a link inside each list item (<li>):<ol data-role="listview">? <li><a href="#">List Item</a></li></ol><ul data-role="listview">? <li><a href="#">List Item</a></li></ul>To style your lists with rounded corners and some margin, use the data-inset="true" attribute:<ul data-role="listview" data-inset="true">List DividersList dividers are used to organize and group items into categories/sections.To specify a list divider, add the data-role="list-divider" attribute to an < li> element:<ul data-role="listview">? <li data-role="list-divider">Europe</li>? <li><a href="#">Norway</a></li>? <li><a href="#">Germany</a></li></ul>jQuery Mobile List IconsThe default icon for each list item containing a link is "carat-r" (right arrow). To change this to another icon, use the data-icon attribute on the list item you want to modify:<ul data-role="listview"> ? <li><a href="#">Default is right arrow</a></li>? <li data-icon="plus"><a href="#">data-icon="plus"</a></li>? <li data-icon="minus"><a href="#">data-icon="minus"</a></li>? <li data-icon="delete"><a href="#">data-icon="delete"</a></li>? <li data-icon="location"><a href="#">data-icon="location"</a></li> ? <li data-icon="false"><a href="#">data-icon="false"</a></li></ul>16x16 IconsTo add a standard 16x16px icon to your list, add an <img> element inside the link with a class of "ui-li-icon":<ul data-role="listview">? <li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li></ul>Note: To apply the hamburger menu style icon use the following code:<a href="#" class="ui-btn ui-corner-all ui-icon-bars ui-btn-icon-notext">Bars Icon</a>jQuery Mobile FormsjQuery Mobile automatically style HTML forms to make them look engaging and touch-friendly.jQuery Mobile Form StructurejQuery Mobile uses CSS to style HTML form elements, making them attractive and easy to use.In jQuery Mobile you can use the following form controls:Text InputsSearch InputsRadio ButtonsCheckboxesSelect MenusSlidersFlip Toggle SwitchesWhen working with jQuery Mobile forms you should know:The <form> element must have a method and an action attributeEach form element must have a unique "id" attribute. The id must be unique across the pages in the site. This is because jQuery Mobile's single-page navigation model allows many different "pages" to be present at the same timeEach form element must have a label. Set the for attribute of the label to match the id of the element<form method="post" action="demoform.asp">? <label for="fname">First name:</label>??<input type="text" name="fname" id="fname"></form>Tip: Use a placeholder to specify a short hint that describes the expected value of an input field:<label for="fname">First name:</label><input type="text" name="fname" id="fname" placeholder="First name...">Tip: To hide the label, use the "ui-hidden-accessible" class. This is often used when you want the element's placeholder attribute to serve as the label:<label for="fname" class="ui-hidden-accessible"">First name:</label><input type="text" name="fname" id="fname" placeholder="First name...">Tip: If you want a "clear button" (an X icon on the right side of the input field that clears the contents of the field), add the data-clear-btn="true" attribute:<label for="fname">First name:</label><input type="text" name="fname" id="fname" data-clear-btn="true">jQuery Mobile Form ButtonsButtons in forms are coded with standard HTML <input> elements (button, reset, submit). They are automatically styled, making them attractive and easy-to-use on both mobile devices and desktop computers:<input type="button" value="Button"><input type="reset" value="Reset Button"><input type="submit" value="Submit Button">jQuery Mobile Text InputsInput fields are coded with standard HTML elements, and jQuery Mobile will style them to look attractive and easy-to-use for mobile devices. You can also use the new HTML5 <input> types:<form method="post" action="demoform.asp">? <div class="ui-field-contain">??? <label for="fullname">Full name:</label>??? <input type="text" name="fullname" id="fullname">??? <label for="bday">Date of Birth:</label>??? <input type="date" name="bday" id="bday">??? <label for="email">E-mail:</label>??? <input type="email" name="email" id="email" placeholder="Your email..">? </div></form>Radio ButtonsRadio buttons are used when a user can select only one of a limited number of choices.To create a set of radio buttons, add an input with type="radio" and a corresponding label. Wrap the radio buttons in a <fieldset> element. You can also add a < legend> element to define a caption for the <fieldset>. Tip: Use data-role="controlgroup", to group the buttons together:<form method="post" action="demoform.asp">? <fieldset data-role="controlgroup">??? <legend>Choose your gender:</legend>????? <label for="male">Male</label>????? <input type="radio" name="gender" id="male" value="male">????? <label for="female">Female</label>????? <input type="radio" name="gender" id="female" value="female"> ? </fieldset></form>CheckboxesCheckboxes are used when a user can select one or more options of a limited number of choices:<form method="post" action="demoform.asp">? <fieldset data-role="controlgroup">??? <legend>Choose as many favorite colors as you'd like:</legend>????? <label for="red">Red</label>????? <input type="checkbox" name="favcolor" id="red" value="red">????? <label for="green">Green</label>????? <input type="checkbox" name="favcolor" id="green" value="green">????? <label for="blue">Blue</label>????? <input type="checkbox" name="favcolor" id="blue" value="blue"> ? </fieldset></form>jQuery Mobile Select MenusThe <select> element creates a drop-down list with several options. The <option> elements inside the <select> element define the available options in the list:<form method="post" action="demoform.asp">? <fieldset class="ui-field-contain">????<label for="day">Select Day</label>??? <select name="day" id="day">????? <option value="mon">Monday</option>????? <option value="tue">Tuesday</option>????? <option value="wed">Wednesday</option>??? </select>? </fieldset></form>Custom Select MenusThe images on top of this page, shows how mobile platforms have their own way of showing a select menu. If you want the select menu to display the same on all mobile devices, use jQuery's own custom select menu, the data-native-menu="false" attribute:<select name="day" id="day" data-native-menu="false">Multiple SelectionsTo select multiple options in the select menu, use the multiple attribute in the <select> element:<select name="day" id="day" multiple data-native-menu="false">jQuery Mobile Slider ControlsA slider allows you to select a value from a range of numbers:<form method="post" action="demoform.asp">??<label for="points">Points:</label>??<input type="range" name="points" id="points" value="50" min="0" max="100"></form>Tip: If you want to show the value on the slider button, add data-show-value="true":<input type="range" data-show-value="true">Tip: If you want to the value to pop up on your screen like a tooltip (as you slide), add data-popup-enabled="true":<input type="range" data-popup-enabled="true">Tip: If you want to highlight the track up to the slider value, add data-highlight="true":<input type="range" data-highlight="true">Flip Toggle SwitchA flip switch is often used for on/off or true/false buttons:To create a flip switch, use <input type="checkbox"> and specify a data-role of "flipswitch":<form method="post" action="demoform.asp">??<label for="switch">Flip toggle switch checkbox:</label>??? <input type="checkbox" data-role="flipswitch" name="switch" id="switch"></form>jQuery Mobile ThemesjQuery Mobile provides two different style themes, "a" and "b" - each with different colors for buttons, bars, content blocks, and so on.To customize the look of your application, use the data-theme attribute, and assign the attribute with a letter:<div data-role="page" data-theme="a|b">For buttons with class="ui-btn", use the "ui-btn-a|b" class to style the button either gray (default) or black:<a href="#" class="ui-btn ui-btn-a|b">Button</a>For all other tutorials on these sections, visit the following link: information on this document has been sourced from ................
................

In order to avoid copyright disputes, this page is only a partial summary.

To fulfill the demand for quickly locating and searching documents.

It is intelligent file search solution for home and business.

Literature Lottery

To fulfill the demand for quickly locating and searching documents.

Related download

Related searches