1. Popups, Dialogs, Widgets, Panels
CIS 136 Building Mobile Apps

2. Pop-Ups and Dialogs

3. Pop-Ups and Dialogs Popups and dialogs are similar Dialogs
they both overlay a part of a page with a small window
useful when you want to display small text, photos, maps, text or other content
Dialogs
have a button for the user to close the window
modal
Popups (like a screen tip)
the close button would be designed into the page view
May not be modal
Example of a dialog

4. Dialogs To create a dialog:
use an <a> element with the data-rel=“dialog" attribute
set the href of <a> to match the specified id of the page-view

5. Dialogs The linked to page isn’t limited to the little “x” to close it
Can add other buttons to go to specific pages
Can use the data-rel=“back” attribute to go back to the previous page-view, dismissing the dialog

6. Pop-Ups To create a popup, target a <div> in the same page-view:
use an <a> element with the data-rel="popup" attribute
add a <div> element with the data-role="popup" attribute to <div>
specify an id for <div>
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.
<a href="#myPopup" data-rel="popup" >Show Popup</a> <div data-role="popup" id="myPopup">   <p>This is a simple popup.</p> </div>

7. Positioning Pop-Ups
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>

8. Closing Pop-Ups
By default, popups can be closed by pressing outside the popup box
If you do not want the popup to be closable by pressing outside the box, you can add the data-dismissible="false" attribute to the popup on the <div> tag
You can also add a close button to the popup, placed either right or left, on the link tag itself
<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>

9. I am a popup.There is an arrow on my BOTTOM border
Pop-Up Arrows
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>
I am a popup.There is an arrow on my BOTTOM border

10. Pop-Up Photos 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>

11. Widgets
Content formatting

12. Content Formatting Widgets that render Grids
Collapsible content blocks
Collapsible sets
Responsive Tables
Panels

13. Grids

14. Grids
Grids are one of the few features that do not use data attributes
work with grids by specifying CSS classes for the content
Grids come in four styles:
two-column
three-column
four-column
five-column
Best practices:
keep in mind your target audience
anything over two columns may be too thin on a mobile phone
limit the columns to what you can see on a page view

15. Grids Grids are: 100% width
completely invisible (no borders or backgrounds)
don't have padding or margins

16. Grids
To create a grid, use a <div> or <section> element that uses the ui-grid-? class, where ?
will be either a, b, c, or d
ui-grid-a represents a two-column grid
ui-grid-b is a three-column grid
what will ui-grid-c create?

17. Grids Next, within the <section> or <div> element
use a div for each "cell" of the content
the class for grid cells begin with ui-block-?
In a two-column grid, ui-block-a would be used for the first cell and ui-block-b for the next
In order to add more space between the content of the grid cells,
add a class to the main div that specifies ui-content

18. Grid example

19. Grids
To lay out a page with three columns, set the class for the top-level <section> or <div> to “ui-grid-b” and set the class for the third column to ui-block-c
To add more separation:
<section class=“ui-grid-b ui-content”>

20. Grids Grids do not have any concept of a row
But to create multiple rows in a grid, repeat the blocks
JQM knows to create a new row when it sees a block start over (as with the one marked ui-block-a).
Left Top
Right Top
Left Bottom
Right Bottom

21. Grids
Buttons in grids get a little amount of margin space on the right and left
Except for a full-width button
Use grid solo to align a single button with buttons in other grids
use a container with class ui-grid-solo and wrap the button in a div with class ui-block-a

22. Responsive Web Design Responsive web design (RWD)
a design and technical approach
adapts the layout and interaction of a site or app to work optimally across a wide range of:
device resolutions
screen densities
interaction modes
The framework has a number of responsive widgets:
responsive grids
reflow tables and column chooser tables
Panels
JQM’s latest versions include support for responsive design

23. Responsive grids
Complex grids may not work depending on the size of the device
A four-column grid might be OK on a tablet, but not on a phone
It's not recommended to have many buttons with text on one row on small screens, because the text might get truncated

24. Responsive grids
Add the ui-responsive class to an existing grid to make it responsive on a smaller device
four-column layout now is a one-column layout instead because it stacked
on a tablet, it would display as the original four-column design

25. Lets’ Practice
Write the <div> content block to display a grid that looks like this:
Bobby
Unser
Race Car Driver
Jimmy
Johnson
NFL Coach, ret.
Magic
Basketball player

26. Lets’ Practice Bobby Unser Race Car Driver Jimmy Johnson
NFL Coach, ret.
Magic
Basketball player

27. Collapsible Content Blocks

28. Collapsible Content Blocks
Blocks of content that can be collapsed and expanded
Provides a compact presentation of content
Uses a data-role="collapsible” attribute

29. Collapsible Content Blocks
in a <div> element
add data-role="collapsible",
include a title for the content, usually a header tag
the title will become a clickable banner to expand and collapse the content within it
Clicking on the + icon next to the title opens it, and can be clicked again to close it

30. Collapsible Content Blocks
By default, JQM will collapse and hide the content
to initialize the block as open instead of closed, add data-collapsed="false" to the initial div tag

31. Collapsible Content Blocks
You can theme the content of the area that is collapsed
Add a data-content-theme attribute, and data-iconpos attribute
specify a background color to give depth

32. Collapsible Content Blocks
By default collapsibles have an inset appearance
Make them full width without corner styling add the data- inset="false" attribute to the element.

33. Collapsible Content Sets

34. Accordians
take multiple collapsible regions and combine them into one region called an accordion
Wrap multiple collapsible blocks in a new parent div tag, and use the data-role="collapsible-set" attribute to have the inner blocks be treated as one unit

35. Responsive Tables

36. Responsive Tables Generally, tables consist of a large amount of data
This could take up an entire screen of a desktop browser
On a mobile browser, this can be even more condensed

37. Responsive Tables to enable them to be responsive
use thead and tbody blocks
add a data-role="table" to the core table block
add class ui-responsive
becomes

38. Responsive Tables

39. Responsive Tables JQM has another powerful feature
Can selectively filter the columns displayed to the user
Add data-mode="columntoggle" to a table
Add an ID attribute and value to the table

40. Responsive Tables
By default, the column toggle widget will not allow you to select any columns

41. Responsive Tables
To provide a list of columns, add a data-priority to each row header that you wish to make toggle-enabled
You do not need to select every column, nor do you need to provide any specific order

42. Panels

43. Panels
Panels sit on the left or right-hand side of a page and can be shown or hidden dynamically.
Because of the limited "real estate" on mobile devices, panels are a nice way to hide navigation or other content until the user requests it

44. Panels add a new <div> block with a data-role of panel
this is inside the div that defines your page
this should be outside of the content region.

45. Panels
To create panels, two panels are defined, one above and one below the content div.
both have an ID
inside the content div are two links—one for the left-hand side panel and one for the right-hand side panel.

46. Panels Panels are placed on the left-hand side by default
to place one on the right-hand side, add the data-position attribute.

47. Panels
Closing panels
By default a panel will be closed if the user clicks anywhere outside the panel
Panels will also be closed if the user swipes
But because a user may not know this, it makes sense to also provide a manual way to close the panel, using a link with a data-rel value of close
To control the close behavior of panels use data- swipeclose="false" and data-dismissable="false“ on the panel
data-swipeclose="false” disables the swipe-to-close behavior
data-dismissable="false" prevents the panel from closing by clicking outside the panel.

48. Panels
Panels are displayed in one of three ways and can be customized using the data-display attribute
The default value is reveal which pushes the content away by moving the main page content to the side revealing the panel
overlay renders the panel on top of the main page content
push acts as if the panel is pushing the content to the side