Navibar 6 buttons

http://stackoverflow.com/questions/6161377/more-than-5-items-per-line-in-jquery-mobile-navbar

jQuery Mobile 1.4 needs some additional changes.

li.ui-block-f,
li.ui-block-g {
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  list-style: none;
}

.ui-grid-e,
.ui-grid-f {
  overflow: hidden;
}

.ui-block-f,
.ui-block-g {
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  min-height: 1px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* grid e: 16/16/16/16/16/16 */
.ui-grid-e .ui-block-a,
.ui-grid-e .ui-block-b,
.ui-grid-e .ui-block-c,
.ui-grid-e .ui-block-d,
.ui-grid-e .ui-block-e,
.ui-grid-e .ui-block-f { width: 16.65%; }
.ui-grid-e .ui-block-a { clear: left; }

/* grid f: 14/14/14/14/14/14/14 */
.ui-grid-f .ui-block-a,
.ui-grid-f .ui-block-b,
.ui-grid-f .ui-block-c,
.ui-grid-f .ui-block-d,
.ui-grid-f .ui-block-e,
.ui-grid-f .ui-block-f,
.ui-grid-f .ui-block-g { width: 14.2857%; }
.ui-grid-f .ui-block-a { clear: left; } 

[BUG] iOS hover position

I don't know how to fix this problem.

Performance improvement

I wrote what I got to know as my experience.

All widgets

• Use "vclick"
• Not use "transitions" as much as possible
• Move common parts(panels, popups) to out of div(data-role="page").

Popup

• Remove "ui-overlay-shadow" 

Form

•  Reduce "select" tags

Reference sites

• jQuery Mobile Optimizing Peformance 

Change Listview icons size

The size of Listview icons is 16px. But often I wish show bigger size icons. So I wrote some css.

.ui-listview .ui-li-icon {
  position: absolute !important;
  max-height: 24px !important;
  max-width: 24px !important;
  left: 10px !important;
  top: 10px !important;
}

16px

24px