user interface design using jquery mobile cis 136 building mobile apps 1
TRANSCRIPT
![Page 1: User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649ceb5503460f949b626c/html5/thumbnails/1.jpg)
User Interface Design using jQuery Mobile
CIS 136 Building Mobile Apps
1
![Page 2: User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649ceb5503460f949b626c/html5/thumbnails/2.jpg)
2
Navigation Patterns
Primary and Secondary
![Page 3: User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649ceb5503460f949b626c/html5/thumbnails/3.jpg)
3
Navigation App ratings
4-5 star reviews Great app Works well and looks good
1-2 start reviews Offer truer picture Most common complaints
Crashing Lack of features (syncing, filtering, linking) Confusing interface design Poor navigation
Can’t go back and find things Design patterns can fix the last two
Good navigation is invisible
![Page 4: User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649ceb5503460f949b626c/html5/thumbnails/4.jpg)
4
Primary Navigation Persistent
Navigating from one primary category to another List Menu or Tab Menu
Transient Revealed through tap or gesture Due to sizes of smartphone screens Create side-drawer navigation pattern
If menu needs to be present, use Persistent
![Page 5: User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649ceb5503460f949b626c/html5/thumbnails/5.jpg)
5
Primary Navigation Springboard
Landing screen with options that act as launch points
![Page 6: User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649ceb5503460f949b626c/html5/thumbnails/6.jpg)
6
Primary Navigation Cards
Stack, shuffle, discard, flip
![Page 7: User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649ceb5503460f949b626c/html5/thumbnails/7.jpg)
7
Primary Navigation Cards
Stack, shuffle, discard, flip
![Page 8: User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649ceb5503460f949b626c/html5/thumbnails/8.jpg)
8
Primary Navigation List Menu
Show topics hierarchically One choice per screen until
the destination is reached
![Page 9: User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649ceb5503460f949b626c/html5/thumbnails/9.jpg)
9
Primary Navigation Dashboard
Snapshot of most relevant info Similar to Springboard and List Menu
![Page 10: User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649ceb5503460f949b626c/html5/thumbnails/10.jpg)
10
Primary Navigation Gallery
Displays live content arranged in a gridor carousel
![Page 11: User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649ceb5503460f949b626c/html5/thumbnails/11.jpg)
11
Primary Navigation Tab
Similar to Springboard and List Menu Content opens on own tab
![Page 12: User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649ceb5503460f949b626c/html5/thumbnails/12.jpg)
12
Themes
Web view appearance
![Page 13: User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649ceb5503460f949b626c/html5/thumbnails/13.jpg)
13
Themes jQuery Mobile has a robust theme framework that supports up to 26
sets of toolbar, content and button colors. Provides a consistent and touch-friendly look and feel for your widgets
across platforms. It is built around the following essential concepts:1. Swatch - one of several color schemes provided by your theme
uses single-letter designations the default jQuery Mobile theme provides two swatches
"a" swatch is a neutral, gray swatch "b" swatch has a darker color scheme designed to contrast with the "a" swatch.
2. Active State The theme defines an "active" state Gives immediate feedback upon a user action if there should be a brief processing delay
most mobile devices implement a 300ms delay between the time when the user lifts her finger from the touchscreen and the triggering of the "click" event
JQM adds the "active" state to a button whenever the device is poised to emit a "click" event so the user receives immediate feedback that the application is committed to processing the "click" in the next 300ms.
![Page 14: User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649ceb5503460f949b626c/html5/thumbnails/14.jpg)
14
Themes (cont.)3. Theme inheritance
You do not need to specify a swatch for everything A swatch defined on the outermost container will be inherited by all the tags in
the container Can override swatch for portions of a container by specifying a theme swatch for
one of its subcontainers
Can also build your own custom themes Can also download and use 3rd party themes Note: Different releases of jQuery have different themes
1.1.1 is a very popular release
![Page 15: User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649ceb5503460f949b626c/html5/thumbnails/15.jpg)
15
How to implement a theme jQuery Mobile (v 1.4) 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” id=home” data-theme=“a”> <div data-role=“page” id=home” data-theme=“b”>
![Page 16: User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649ceb5503460f949b626c/html5/thumbnails/16.jpg)
16
data-theme = “a” Black text on a light gray background for page content Black text on a gray background for headers and footers Black text on a light gray background for buttons White text on a blue background for active buttons Blue text on links Light gray text (placeholder) or black text (value) on a
white background for input fields
![Page 17: User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649ceb5503460f949b626c/html5/thumbnails/17.jpg)
17
data-theme = “b” White text on a dark gray background for page content White text on a dark gray background for headers and
footers White text on a charcoal background for buttons White text on a "cyan" blue background for active
buttons "Cyan" blue text on links Gray text (placeholder) or white text (value) on a black
background for input fields
![Page 18: User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649ceb5503460f949b626c/html5/thumbnails/18.jpg)
18
Theming headers, footers, and popups Use data-theme attribute
<div data-role="page" id="pagetwo"> <div data-role="header" data-theme="b"></div> <div data-role="footer" data-theme="b"></div> <div data-role="popup" id="myPopup" data-theme="b"></div>
![Page 19: User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649ceb5503460f949b626c/html5/thumbnails/19.jpg)
19
Theme Classes two theme classes: a (gray) and b (black) you can also create your own, custom class values
all the way up to the letter "z" Class Desription
ui-page-theme-(a-z)
Specifies the color for pages
ui-btn- (a-z) Specifies the color for a button
ui-body-(a-z) Specifies the color for a content block, popups, lists etc.
ui-bar- (a-z) Specifies the color for a bar (footers, headers, and other bars)
![Page 20: User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649ceb5503460f949b626c/html5/thumbnails/20.jpg)
20
Theming buttons Use styles defined in jQuery classes <a href="#" class="ui-btn ui-btn-b">Black Button</a>
![Page 21: User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649ceb5503460f949b626c/html5/thumbnails/21.jpg)
21
Theme overrides add new styles by
using theme classes in local stylesheet add the class "ui-bar-
(a-z)" for toolbars "ui-body-(a-z)" for the
content ui-page-theme-(a-z)"
for the page
<style>.ui-bar-f { color: red; background-color: yellow;}
.ui-body-f { font-weight: bold; color: white; background-color: purple;}
.ui-page-theme-f { font-weight: bold; background-color: green;}</style>
![Page 22: User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649ceb5503460f949b626c/html5/thumbnails/22.jpg)
22
Pop-Up windows
Different in JQM 1.4.5
![Page 23: User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649ceb5503460f949b626c/html5/thumbnails/23.jpg)
Pop-Ups
23 Learn more at https://demos.jquerymobile.com/1.1.0/docs/api/themes.html
Popups are similar to dialogs, in that they both overlay a part of a page useful when you want to display small text, photos, maps or other content
To create a popup: start with an <a> element and a <div> element. Add the data-rel="popup" attribute to <a>, and
the data-role="popup" attribute to <div>. Then specify an id for <div>, and set the href of <a> to match the specified id. The content inside <div> is the actual content that will pop up when a user clicks on the link.
Note: The popup <div> must be within the same page as the link.<a href="#myPopup" data-rel="popup" >Show Popup</a>
<div data-role="popup" id="myPopup"> <p>This is a simple popup.</p></div>
![Page 24: User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649ceb5503460f949b626c/html5/thumbnails/24.jpg)
Positioning Pop-Ups
24 Learn more at https://demos.jquerymobile.com/1.1.0/docs/api/themes.html
By default, popups will appear directly over the clicked element To control the position of the popup, use the data-position-to
attribute on the link that is used to open the popup. There are three ways of positioning the popup:
<a href="#myPopup1" data-rel="popup" class="ui-btn" data-position-to="window">Window</a><a href="#myPopup2" data-rel="popup" class="ui-btn" data-position-to="#demo">id="demo"</a><a href="#myPopup3" data-rel="popup" class="ui-btn" data-position-to="origin">Origin</a>
![Page 25: User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649ceb5503460f949b626c/html5/thumbnails/25.jpg)
Closing Pop-Ups
25 Learn more at https://demos.jquerymobile.com/1.1.0/docs/api/themes.html
By default, popups can be closed either by clicking outside the popup box or by pressing the "Esc" key. If you do not want the popup to be closable by clicking outside the
box, you can add the data-dismissible="false" attribute to the popup You can also add a close button to the popup, placed either right or
left.
<a href="#" data-rel="back" class="ui-btn ui-btn-right">Close</a>
<div data-role="popup" id="myPopup" class="ui-content" data-dismissible="false" style="max-width:400px;"> <a href="#" data-rel="back" class="ui-btn ui-btn-right">Close</a>
![Page 26: User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649ceb5503460f949b626c/html5/thumbnails/26.jpg)
Pop-Up Arrows
26 Learn more at https://demos.jquerymobile.com/1.1.0/docs/api/themes.html
To add an arrow to the popup's border, use the data-arrow attribute, and specify the value "l" (left), "t" (top), "r" (right) or "b" (bottom):
<a href="#myPopup" data-rel="popup" class="ui-btn">Open Popup</a>
<div data-role="popup" id="myPopup" class="ui-content" data-arrow=“b"> <p>There is an arrow on my BOTTOM border.</p></div> There is an arrow
on my BOTTOM border
![Page 27: User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1](https://reader035.vdocuments.net/reader035/viewer/2022062421/56649ceb5503460f949b626c/html5/thumbnails/27.jpg)
Pop-Up Photos
27 Learn more at https://demos.jquerymobile.com/1.1.0/docs/api/themes.html
Can display images in pop-ups
<a href="#myPopup" data-rel="popup" data-position-to="window"><img src="skaret.jpg" alt="Skaret View" style="width:200px;"></a>
<div data-role="popup" id="myPopup"> <img src="skaret.jpg" style="width:800px;height:400px;" alt="Skaret View"></div>