Smartphone version theme¶

Items

What is smartphone version theme
Theme and Swatch
- Swatch

What is smartphone version theme ¶

Smartphone version is a theme optimized for smartphone.
Redundant description in <HTML> tag or <HEAD> tag etc. is omitted
and there is no need for the developer to define libraries like jQuery/jQuery | Mobile etc. since, development can be done in environments wherein
the required libraries are already loaded.

Example for coding of general jQuery Mobile.

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
  </head>
  <body>
    <div data-role="page">
      <div data-role="header">
        <h1>My Title</h1>
      </div>
      <div data-role="content">
        <p>Hello world</p>
      </div>
      <div data-role="footer">
        <h1>My Title</h1>
      </div>
    </div>
  </body>
</html>

Example of coding when smartphone version theme is used.
Only a part of <HEAD> tag is defined in <imui:head> tag
and the remaining is mentioned in BODY tag only.

<imui:head>
  <title>My Page</title>
</imui:head>
<div data-role="page">
  <div data-role="header">
    <h1>My Title</h1>
  </div>
  <div data-role="content">
    <p>Hello world</p>
  </div>
  <div data-role="footer">
    <h1>My Title</h1>
  </div>
</div>

Note

For details on theme, refer About Theme.

Theme and Swatch ¶

Design of smartphone version theme can be implemented by extending jQuery Mobile theme.

jQuery Mobile theme includes a pattern called as “Swatch”

which has multiple color designs. Developer can specify swatch in a particular element and

can create a screen while applying swatch.

Swatch ¶

In intra-mart Accel Platform , extended swatch “F” “I” can be used in addition to

jQuery Mobile default swatch “A” ~ “E”.

Setting Description Image

A intra-mart Accel Platform Standard color

B

C jQueryMobile Standard color

D Shade darker than C

height: 150px

E

F Additional swatch. For warning

I Additional swatch. For warning