<span class="ui-li-text-main">2line-colorbar3</span>
<span class="ui-li-text-sub">Subtext</span>
<!-- <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div> -->
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
</li>
</ul>
</form>
</li>
<li class="ui-li-dialogue">
1line-bigicon1
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
</li>
<li class="ui-li-dialogue">
1line-bigicon2
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
<span class="ui-li-text-sub">Sub text</span>
</li>
<li class="ui-li-dialogue">
1line-bigicon4
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
<div data-role="button" data-inline="true">Button</div>
</li>
<li class="ui-li-dialogue">
1line-bigicon5
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
<div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
</li>
<li class="ui-li-dialogue">
1line-bigicon6
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
<select name="flip-11" id="flip-11" data-role="slider">
<option value="off"></option>
<option value="on"></option>
<li class="ui-li-dialogue ui-li-text-ellipsis">
<a>
1line-bigicon1 (with link)
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
</a>
</li>
<li class="ui-li-dialogue ui-li-text-ellipsis">
<a>
1line-bigicon2
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
<span class="ui-li-text-sub">Sub text</span>
</a>
</li>
<li class="ui-li-dialogue ui-li-text-ellipsis">
<a>
1line-bigicon4 (with link)
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
<div data-role="button" data-inline="true">Button</div>
</a>
</li>
<li class="ui-li-dialogue ui-li-text-ellipsis">
<a>
1line-bigicon5 (with link)
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
<div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
</a>
</li>
<li class="ui-li-dialogue ui-li-text-ellipsis">
<a>
1line-bigicon5 (with link)
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
<select name="flip-11" id="flip-11" data-role="slider">
<option value="off"></option>
<option value="on"></option>
<li>
<a href="#">
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
1line-bigicon1
</a>
</li>
<li>
<a href="#">
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
1line-bigicon2
<span class="ui-li-text-sub">Sub text</span>
</a>
<li>
<a href="#">
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
1line-bigicon4
<div data-role="button" data-inline="true">Text Button</div>
</a>
<li>
<a href="#">
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
1line-bigicon5
<div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
</a>
<li>
<a href="#">
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
1line-bigicon6
<select name="flip-11" id="flip-11" data-role="slider">
<option value="off"></option>
<li class="ui-li-has-checkbox">
<a href="#">
<input type="checkbox" name="c1line-check3" />
- <img src="thumbnail.jpg" class="ui-li-bigicon" >
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
1line-check3
</a>
</li>
<li class="ui-li-has-checkbox">
<a href="#">
<input type="checkbox" name="c1line-check4" />
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
1line-check4
<div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
</a>
<li class="ui-li-has-radio">
<a href="#">
<input type="radio" name="1line-radio" />
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
1line-radio4
</a>
</li>
<a href="#">
<input type="radio" name="1line-radio" />
1line-radio5
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
<div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
</a>
</li>
<a href="#">
<input type="radio" name="1line-radio" />
1line-radio6
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
</a>
</li>
<a href="#">
2line-star1
<span class="ui-li-text-sub">Subtext</span>
- <span style="position:absolute; right:16px; top:80px"><img class= "ui-li-icon-sub-right" src="00_winset_icon_favorite_on.png"></span>
+ <span style="position:absolute; right:16px; top:80px"><img class= "ui-li-icon-sub-right" src="00_winset_icon_favorite_on.png" alt="favorite"></span>
<span class="ui-li-text-sub2">Subtext2</span>
</a>
</li>
<li class="ui-li-has-multiline">
<a href="#">
2line-star2
- <span class="ui-li-text-sub"><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png">Subtext</span>
- <span><img class="ui-li-icon-sub-right" src="00_winset_icon_favorite_on.png"></span>
+ <span class="ui-li-text-sub"><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png" alt="favorite">Subtext</span>
+ <span><img class="ui-li-icon-sub-right" src="00_winset_icon_favorite_on.png" alt="favorite"></span>
</a>
</li>
<li class="ui-li-has-multiline">
<a href="#">
2line-bigicon0
- <span class="ui-li-text-sub">Subtext<img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
+ <span class="ui-li-text-sub">Subtext<img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png" alt="favorite"></span>
<div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
</a>
</li>
<li class="ui-li-has-multiline">
<a href="#">
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
2line-bigicon1
<span class="ui-li-text-sub">Subtext</span>
</a>
<li class="ui-li-has-multiline">
<a href="#">
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
2line-bigicon2
<span class="ui-li-text-sub">Subtext</span>
<span class="ui-li-text-sub2">Subtext2</span>
<li class="ui-li-has-multiline">
<a href="#">
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
2line-bigicon3
<span class="ui-li-text-sub">Subtext</span>
</a>
<li class="ui-li-has-multiline">
<a href="#">
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
2line-bigicon4
<span class="ui-li-text-sub">Subtext</span>
<div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
<li class="ui-li-has-checkbox ui-li-has-multiline">
<a href="#">
<input type="checkbox" name="c2line-check3" />
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
2line-check3
<span class="ui-li-text-sub">Subtext</span>
</a>
<li class="ui-li-has-checkbox ui-li-has-multiline">
<a href="#">
<input type="radio" name="2line-radio" />
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
2line-radio2
<span class="ui-li-text-sub">Subtext</span>
</a>
<span class="ui-li-color-bar"></span>
2line-colorbar1
<span class="ui-li-text-sub">Subtext
- <img src="00_winset_icon_favorite_on.png">
- <img src="00_winset_icon_favorite_on.png">
- <img src="00_winset_icon_favorite_on.png">
+ <img src="00_winset_icon_favorite_on.png" alt="favorite">
+ <img src="00_winset_icon_favorite_on.png" alt="favorite">
+ <img src="00_winset_icon_favorite_on.png" alt="favorite">
</span>
<div data-role="button" data-inline="true">button</div>
</a>
<a href="#">
<span class="ui-li-color-bar" style="background-color:rgba(72, 136, 42, 1);"></span>
2line-colorbar2
- <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
+ <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png" alt="favorite"></span>
<span class="ui-li-text-sub">Subtext</span>
<div data-role="button" data-inline="true">button</div>
</a>
<a href="#">
<span class="ui-li-color-bar" style="background-color:rgba(204, 52, 52, 1);"></span>
2line-colorbar2
- <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
+ <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png" alt="favorite"></span>
<span class="ui-li-text-sub">Subtext</span>
<div data-role="button" data-inline="true" data-icon="call"></div>
</a>
<li class="ui-li-has-multiline">
<a href="#">
<span class="ui-li-color-bar" style="background-color:rgba(72, 136, 42, 1);"></span>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
2line-colorbar3
<span class="ui-li-text-sub">Subtext</span>
<div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
<li class="ui-li-has-multiline">
<a href="#">
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
2line-bigicon8
<span class="ui-li-text-sub">Subtext</span>
- <img src="00_winset_icon_favorite_on.png" class="ui-li-icon-sub">
+ <img src="00_winset_icon_favorite_on.png" alt="favorite" class="ui-li-icon-sub">
</a>
</li>
<a href="#">
2line-thumb1
<span class="ui-li-text-sub">Subtext</span>
- <img src="large_thumbnail.jpg" class="ui-li-bigicon">
+ <img src="large_thumbnail.jpg" alt="Photo ID" class="ui-li-bigicon">
</a>
</li>
<li class="ui-li-has-multiline">
<a href="#">
2line-thumb2
- <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
- <span class="ui-li-text-sub"><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png">Subtext</span>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png" alt="favorite"></span>
+ <span class="ui-li-text-sub"><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png" alt="favorite">Subtext</span>
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
</a>
</li>
<a href="#">
<span class="ui-li-text-sub">Subtext</span>
2line-sub-main-bigicon1
- <img src="large_thumbnail.jpg" class="ui-li-bigicon">
+ <img src="large_thumbnail.jpg" alt="Photo ID" class="ui-li-bigicon">
</a>
</li>
<li class="ui-li-has-multiline">
<a href="#">
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
Short Progress
<div data-role="progressbar" id="progressbar"></div>
<div data-role="button" data-inline="true">Stop</div>
<li class="ui-li-has-checkbox ui-li-has-multiline">
<a href="#">
<input type="checkbox" name="c2line-icon-bigicon-btn" />
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
2line-3items
<span class="ui-li-text-sub">Subtext</span>
<div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
<li class="ui-li-has-multiline">
<a href="#">
2line-thumb3
- <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
+ <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png" alt="favorite"></span>
<span class="ui-li-text-sub">Subtext</span>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
</a>
</li>
</ul>
</li>
<li>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
1line-bigicon1
</li>
<li>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
1line-bigicon2
<span class="ui-li-text-sub">Sub text</span>
</li>
<li>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
1line-bigicon4
<div data-role="button" data-inline="true">Text Button</div>
</li>
<li>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
1line-bigicon5
<div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
</li>
<li>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
1line-bigicon6
<select name="flip-11" id="flip-11" data-role="slider">
<option value="off"></option>
<li class="ui-li-has-checkbox">
<input type="checkbox" name="c1line-check3" />
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
1line-check3
</li>
<li class="ui-li-has-checkbox">
<input type="checkbox" name="c1line-check4" />
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
1line-check4
<div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
</li>
<li class="ui-li-has-radio">
<input type="radio" name="1line-radio" />
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
1line-radio4
</li>
<li class="ui-li-has-radio">
<input type="radio" name="1line-radio" />
1line-radio5
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
<div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
</li>
<li class="ui-li-has-radio">
<input type="radio" name="1line-radio" />
1line-radio
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
</li>
<li class="ui-li-has-multiline">
<li class="ui-li-has-multiline">
2line-star1
<span class="ui-li-text-sub">Subtext</span>
- <span style="position:absolute; right:16px; top:80px"><img class= "ui-li-icon-sub-right" src="00_winset_icon_favorite_on.png"></span>
+ <span style="position:absolute; right:16px; top:80px"><img class= "ui-li-icon-sub-right" src="00_winset_icon_favorite_on.png" alt="favorite"></span>
<span class="ui-li-text-sub2">Subtext2</span>
</li>
<li class="ui-li-has-multiline">
2line-star2
- <span class="ui-li-text-sub"><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png">Subtext</span>
- <span><img class="ui-li-icon-sub-right" src="00_winset_icon_favorite_on.png"></span>
+ <span class="ui-li-text-sub"><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png" alt="favorite">Subtext</span>
+ <span><img class="ui-li-icon-sub-right" src="00_winset_icon_favorite_on.png" alt="favorite"></span>
</li>
<li class="ui-li-has-multiline">
<li class="ui-li-has-multiline">
2line-bigicon0
- <span class="ui-li-text-sub">Subtext<img src="00_winset_icon_favorite_on.png"></span>
+ <span class="ui-li-text-sub">Subtext<img src="00_winset_icon_favorite_on.png" alt="favorite"></span>
<div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
</li>
<li class="ui-li-has-multiline">
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
2line-bigicon1
<span class="ui-li-text-sub">Subtext</span>
</li>
<li class="ui-li-has-multiline">
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
2line-bigicon2
<span class="ui-li-text-sub">Subtext</span>
<span class="ui-li-text-sub2">Subtext2</span>
</li>
<li class="ui-li-has-multiline">
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
2line-bigicon3
<span class="ui-li-text-sub">Subtext</span>
</li>
<li class="ui-li-has-multiline">
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
2line-bigicon4
<span class="ui-li-text-sub">Subtext</span>
<div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
<li class="ui-li-has-checkbox ui-li-has-multiline">
<input type="checkbox" name="c2line-check3" />
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
2line-check3
<span class="ui-li-text-sub">Subtext</span>
</li>
<li class="ui-li-has-radio ui-li-has-multiline">
<input type="radio" name="2line-radio" />
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
2line-radio2
<span class="ui-li-text-sub">Subtext</span>
</li>
<span class="ui-li-color-bar"></span>
2line-colorbar1
<span class="ui-li-text-sub">Subtext
- <img src="00_winset_icon_favorite_on.png">
- <img src="00_winset_icon_favorite_on.png">
- <img src="00_winset_icon_favorite_on.png">
+ <img src="00_winset_icon_favorite_on.png" alt="favorite">
+ <img src="00_winset_icon_favorite_on.png" alt="favorite">
+ <img src="00_winset_icon_favorite_on.png" alt="favorite">
</span>
<div data-role="button" data-inline="true">button</div>
</li>
<li class="ui-li-has-multiline">
<span class="ui-li-color-bar" style="background-color:rgba(72, 136, 42, 1);"></span>
2line-colorbar2
- <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
+ <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png" alt="favorite"></span>
<span class="ui-li-text-sub">Subtext</span>
<div data-role="button" data-inline="true">button</div>
</li>
<li class="ui-li-has-multiline">
<span class="ui-li-color-bar" style="background-color:rgba(204, 52, 52, 1);"></span>
2line-colorbar2
- <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
+ <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png" alt="favorite"></span>
<span class="ui-li-text-sub">Subtext</span>
<div data-role="button" data-inline="true" data-icon="call"></div>
</li>
<li class="ui-li-has-multiline">
<span class="ui-li-color-bar" style="background-color:rgba(72, 136, 42, 1);"></span>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
2line-colorbar3
<span class="ui-li-text-sub">Subtext</span>
<div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
</li>
<li class="ui-li-has-multiline">
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
2line-bigicon8
<span class="ui-li-text-sub">Subtext</span>
- <img src="00_winset_icon_favorite_on.png" class="ui-li-icon-sub">
+ <img src="00_winset_icon_favorite_on.png" alt="favorite" class="ui-li-icon-sub">
</li>
<li class="ui-li-has-multiline ui-li-thumbnail-right">
2line-thumb1
<span class="ui-li-text-sub">Subtext</span>
- <img src="large_thumbnail.jpg" class="ui-li-bigicon">
+ <img src="large_thumbnail.jpg" alt="Photo ID" class="ui-li-bigicon">
</li>
<li class="ui-li-has-multiline ui-li-thumbnail-right">
2line-thumb2
- <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
- <span class="ui-li-text-sub"><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png">Subtext</span>
- <img src="large_thumbnail.jpg" class="ui-li-bigicon">
+ <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png" alt="favorite"></span>
+ <span class="ui-li-text-sub"><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png" alt="favorite">Subtext</span>
+ <img src="large_thumbnail.jpg" alt="Photo ID" class="ui-li-bigicon">
</li>
<li class="ui-li-has-multiline ui-li-thumbnail-right">
<span class="ui-li-text-sub">Subtext</span>
2line-sub-main-bigicon1
- <img src="large_thumbnail.jpg" class="ui-li-bigicon">
+ <img src="large_thumbnail.jpg" alt="Photo ID" class="ui-li-bigicon">
</li>
<li class="ui-li-has-multiline">
</li>
<li class="ui-li-has-multiline">
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
Short Progress
<div data-role="progressbar" id="progressbar"></div>
<div data-role="button" data-inline="true">Stop</div>
<li class="ui-li-has-checkbox ui-li-has-multiline">
<input type="checkbox" name="c2line-icon-bigicon-btn" />
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
2line-3items
<span class="ui-li-text-sub">Subtext</span>
<div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
<li class="ui-li-has-multiline">
2line-thumb3
- <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png"></span>
+ <span><img class="ui-li-icon-sub" src="00_winset_icon_favorite_on.png" alt="favorite"></span>
<span class="ui-li-text-sub">Subtext</span>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
</li>
</ul>
</form>
</li>
<li class="ui-li-has-radio">
<input type="radio" name="radio-choice-1" id="radio-choice-5" value="choice-5"/>
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
Radio Item 5
</li>
<li class="ui-li-has-radio">
<li class="ui-li-has-radio">
<input type="radio" name="radio-choice-1" id="radio-choice-10" value="choice-10"/>
Radio Item 10
- <img src="thumbnail.jpg" class="ui-li-bigicon">
+ <img src="thumbnail.jpg" alt="icon" class="ui-li-bigicon">
</li>
</ul>
</form>
<div data-role="content">
<script id="tmp-1line-bigicon5" type="text/x-jquery-tmpl">
<li class="ui-li-1line-bigicon5">
- <img src=${TEAM_LOGO} class="ui-li-bigicon">
+ <img src=${TEAM_LOGO} alt="icon" class="ui-li-bigicon">
<span class="ui-li-text-main">${NAME}</span>
<div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
</li>
<li class="ui-li-has-multiline">
<span class="ui-li-text-main">${NAME}</span>
<span class="ui-li-text-sub">${ACTIVE}
- <img src="00_winset_icon_favorite_on.png" class="ui-li-icon-sub">
+ <img src="00_winset_icon_favorite_on.png" alt="favorite" class="ui-li-icon-sub">
</span>
<span class="ui-li-text-sub2">${FROM}</span>
</li>
<p>Footer more sample</p>
</div>
<div data-role="footer">
- <a href="#pop_js" data-role="button" data-icon="naviframe-more" data-transition="slidedownfade" data-rel="popup"></a>
-
<div data-role="button" data-inline="true" data-style="round">Button1</div>
<div data-role="button" data-inline="true" data-style="round">Button2</div>
+ <a href="#pop_js" data-role="button" data-icon="naviframe-more" data-transition="slidedownfade" data-rel="popup"></a>
+
<div id="pop_js" data-role="popup" >
<ul data-role="listview">
<li><a href="#" data-rel="back">Settings</a></li>
<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Title 2 Buttons </h1>
- <a data-icon="naviframe-edit"></a>
<a data-icon="naviframe-cancel"></a>
+ <a data-icon="naviframe-edit"></a>
</div>
<div data-role="content">
<p>Title text Button 02 sample</p>
<img src="icon-tizen.png"/>
<h1>Title demo</h1>
<span class="ui-title-text-sub">Title image multiline 2 Buttons</span>
- <a data-icon="naviframe-more"></a>
<a data-icon="naviframe-edit"></a>
+ <a data-icon="naviframe-more"></a>
</div>
<div data-role="content">
<p>Image Title text Multiline Button 02 sample</p>
--- /dev/null
+From 79d7d678ec75404aa8a927ec337d8563ed26e9fc Mon Sep 17 00:00:00 2001
+From: Wonseop Kim <wonseop.kim@samsung.com>
+Date: Sat, 16 Mar 2013 17:26:01 +0900
+Subject: [PATCH] JQM: Support accessibility for button
+
+---
+ .../js/jquery.mobile.buttonMarkup.js | 9 +++++++
+ 1 file changed, 9 insertions(+)
+
+diff --git a/libs/js/jquery-mobile-1.2.0/js/jquery.mobile.buttonMarkup.js b/libs/js/jquery-mobile-1.2.0/js/jquery.mobile.buttonMarkup.js
+index 7c17ba6..cd8e39d 100644
+--- a/libs/js/jquery-mobile-1.2.0/js/jquery.mobile.buttonMarkup.js
++++ b/libs/js/jquery-mobile-1.2.0/js/jquery.mobile.buttonMarkup.js
+@@ -52,6 +52,11 @@ $.fn.buttonMarkup = function( options ) {
+ e.setAttribute( "aria-owns", e.getAttribute( "href" ) );
+ }
+
++ if ( e.tagName !== "LI" && e.tagName !== "LABEL" ) {
++ e.setAttribute( "role", "button" );
++ e.setAttribute( "tabindex", "0" );
++ }
++
+ // Check if this element is already enhanced
+ buttonElements = $.data( ( ( e.tagName === "INPUT" || e.tagName === "BUTTON" ) ? e.parentNode : e ), "buttonElements" );
+
+@@ -131,6 +136,10 @@ $.fn.buttonMarkup = function( options ) {
+
+ buttonClass += " ui-btn-icon_only";
+ innerClass += " ui-btn-icon-only";
++
++ if ( e.tagName !== "LABEL" ) {
++ $( el ).text( o.icon.replace( "naviframe-", "" ) );
++ }
+ }
+ } else {
+ if ( $(el).text().length > 0 ) {
+--
+1.7.9.5
+
--- /dev/null
+From 599c0b39fc2cbbc5977f3b489e8f4c5a739a8c96 Mon Sep 17 00:00:00 2001
+From: Wonseop Kim <wonseop.kim@samsung.com>
+Date: Sat, 16 Mar 2013 17:39:55 +0900
+Subject: [PATCH] JQM: Support accessibility for page
+
+---
+ libs/js/jquery-mobile-1.2.0/js/widgets/page.js | 1 -
+ 1 file changed, 1 deletion(-)
+
+diff --git a/libs/js/jquery-mobile-1.2.0/js/widgets/page.js b/libs/js/jquery-mobile-1.2.0/js/widgets/page.js
+index 4e67469..55701bc 100644
+--- a/libs/js/jquery-mobile-1.2.0/js/widgets/page.js
++++ b/libs/js/jquery-mobile-1.2.0/js/widgets/page.js
+@@ -24,7 +24,6 @@ $.widget( "mobile.page", $.mobile.widget, {
+ }
+
+ self.element
+- .attr( "tabindex", "0" )
+ .addClass( "ui-page ui-body-" + self.options.theme )
+ .bind( "pagebeforehide", function() {
+ self.removeContainerBackground();
+--
+1.7.9.5
+
--- /dev/null
+From 6a2454411d5416ec39c53c5fb9532ca68363d504 Mon Sep 17 00:00:00 2001
+From: Wonseop Kim <wonseop.kim@samsung.com>
+Date: Wed, 20 Mar 2013 20:44:35 +0900
+Subject: [PATCH] JQM: Support accessibility for page-section
+
+---
+ .../js/widgets/page.sections.js | 21 ++++++++++++++------
+ 1 file changed, 15 insertions(+), 6 deletions(-)
+
+diff --git a/libs/js/jquery-mobile-1.2.0/js/widgets/page.sections.js b/libs/js/jquery-mobile-1.2.0/js/widgets/page.sections.js
+index e00684c..1a7b373 100644
+--- a/libs/js/jquery-mobile-1.2.0/js/widgets/page.sections.js
++++ b/libs/js/jquery-mobile-1.2.0/js/widgets/page.sections.js
+@@ -61,6 +61,10 @@ $.mobile.$document.bind( "pagecreate", function( e ) {
+ leftbtn = leftbtn || $headeranchors.eq( 0 ).not( ".ui-btn-right" ).addClass( "ui-btn-left" ).length;
+
+ rightbtn = rightbtn || $headeranchors.eq( 1 ).addClass( "ui-btn-right" ).length;
++
++ $( $headeranchors.get().reverse() ).each( function ( i ) {
++ $( this ).addClass( "ui-btn-right-" + i );
++ });
+ }
+
+ // Auto-add back btn on pages beyond first view
+@@ -75,12 +79,13 @@ $.mobile.$document.bind( "pagecreate", function( e ) {
+ $dest = $page.find( ".ui-footer" );
+ }
+
+- backBtn = $( "<a href='javascript:void(0);' class='ui-btn-back' data-"+ $.mobile.ns +"rel='back' data-"+ $.mobile.ns +"icon='header-back-btn'></a>" )
+- // If theme is provided, override default inheritance
+- .attr( "data-"+ $.mobile.ns +"theme", o.backBtnTheme || thisTheme );
+-
+ if ( !$dest.find( ".ui-btn-back" ).length ) {
+- backBtn.prependTo( $dest );
++ backBtn = $( "<a href='javascript:void(0);' class='ui-btn-back' data-" + $.mobile.ns + "rel='back'></a>" )
++ // // If theme is provided, override default inheritance
++ .buttonMarkup( { icon: "header-back-btn", theme: o.backBtnTheme || thisTheme } );
++
++ backBtn.find( ".ui-btn-text" ).text( o.backBtnText );
++ backBtn.appendTo( $dest );
+ }
+ }
+
+@@ -90,9 +94,13 @@ $.mobile.$document.bind( "pagecreate", function( e ) {
+ // Regardless of h element number in src, it becomes h1 for the enhanced page
+ .attr({
+ "role": "heading",
+- "aria-level": "1"
++ "aria-level": "1",
++ "aria-label": "title",
++ "tabindex": "0"
+ });
+
++ $( ".ui-title-text-sub" ).attr( { "tabindex": "0", "aria-label": "subtitle" } );
++
+ } else if ( role === "content" ) {
+ if ( contentTheme ) {
+ $this.addClass( "ui-body-" + ( contentTheme ) );
+--
+1.7.9.5
+
--- /dev/null
+From 3aef45a3d030e7e723a30b30b901f6c22e7eeadb Mon Sep 17 00:00:00 2001
+From: Minkyeong Kim <minkyeong.kim@samsung.com>
+Date: Tue, 19 Mar 2013 10:46:43 +0900
+Subject: [PATCH] JQM Support accessibility for textinput
+
+---
+ .../js/widgets/forms/textinput.js | 15 +++++++++++++++
+ 1 files changed, 15 insertions(+), 0 deletions(-)
+
+diff --git a/libs/js/jquery-mobile-1.2.0/js/widgets/forms/textinput.js b/libs/js/jquery-mobile-1.2.0/js/widgets/forms/textinput.js
+index 05b1b03..8f939b1 100644
+--- a/libs/js/jquery-mobile-1.2.0/js/widgets/forms/textinput.js
++++ b/libs/js/jquery-mobile-1.2.0/js/widgets/forms/textinput.js
+@@ -39,6 +39,21 @@ $.widget( "mobile.textinput", $.mobile.widget, {
+
+ focusedEl = input.addClass("ui-input-text ui-body-"+ theme );
+
++ switch ( input.attr( "type" ) ) {
++ case "text":
++ case "password":
++ case "number":
++ case "email":
++ case "url":
++ case "tel":
++ input.attr( { "role" : "textbox", "aria-label" : "Keyboard opened" } );
++ break;
++ default:
++ if ( input.prop( "tagName" ).toLowerCase() === "textarea" ) {
++ input.attr( { "role" : "textbox", "aria-label" : "Keyboard opened" } );
++ }
++ }
++
+ // XXX: Temporary workaround for issue 785 (Apple bug 8910589).
+ // Turn off autocorrect and autocomplete on non-iOS 5 devices
+ // since the popup they use can't be dismissed by the user. Note
+--
+1.7.5.4
+
--- /dev/null
+From 61d133a822b45b01bb31985c8b8142457d17b5c7 Mon Sep 17 00:00:00 2001
+From: Woosung Sohn <woosungim.sohn@samsung.com>
+Date: Tue, 19 Mar 2013 15:20:13 +0900
+Subject: [PATCH] JQM Support accessibility for collapsible
+
+Change-Id: Iaa49fa1ff977230320daf9380dfe6ec3cbb72080
+---
+ .../jquery-mobile-1.2.0/js/widgets/collapsible.js | 8 +++++---
+ 1 file changed, 5 insertions(+), 3 deletions(-)
+
+diff --git a/libs/js/jquery-mobile-1.2.0/js/widgets/collapsible.js b/libs/js/jquery-mobile-1.2.0/js/widgets/collapsible.js
+index 26dbb61..8398de4 100644
+--- a/libs/js/jquery-mobile-1.2.0/js/widgets/collapsible.js
++++ b/libs/js/jquery-mobile-1.2.0/js/widgets/collapsible.js
+@@ -11,8 +11,8 @@ define( [ "jquery", "../jquery.mobile.widget", "../jquery.mobile.buttonMarkup" ]
+
+ $.widget( "mobile.collapsible", $.mobile.widget, {
+ options: {
+- expandCueText: " click to expand contents",
+- collapseCueText: " click to collapse contents",
++ expandCueText: " Expandable list, tap to open list",
++ collapseCueText: " Expandable list, tap to close list",
+ collapsed: true,
+ heading: "h1,h2,h3,h4,h5,h6,legend",
+ theme: null,
+@@ -103,7 +103,8 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
+ icon: collapsedIcon,
+ mini: o.mini,
+ theme: o.theme
+- });
++ })
++ .attr( "role", "");
+
+ if ( !!o.inset ) {
+ collapsibleHeading
+@@ -138,6 +139,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
+
+ $this.toggleClass( "ui-collapsible-collapsed", isCollapse );
+ collapsibleContent.toggleClass( "ui-collapsible-content-collapsed", isCollapse ).attr( "aria-hidden", isCollapse );
++ collapsibleContent.children( "li" ).not( "ui-collapsible-content" ).attr( "tabindex", isCollapse ? "" : "0" );
+
+ if ( contentTheme && !!o.inset && ( !collapsibleSet.length || collapsible.jqmData( "collapsible-last" ) ) ) {
+ collapsibleHeading
+--
+1.7.9.5
+
--- /dev/null
+From 15c488ed418fa5c8b5ae562427682f3a4e3bed8c Mon Sep 17 00:00:00 2001
+From: "sang-hee.lee" <sang-hee.lee@samsung.com>
+Date: Tue, 19 Mar 2013 20:05:24 +0900
+Subject: [PATCH] JQM Support accessibility for checkboxradio
+
+---
+ .../js/widgets/forms/checkboxradio.js | 12 ++++++++++--
+ 1 file changed, 10 insertions(+), 2 deletions(-)
+
+diff --git a/libs/js/jquery-mobile-1.2.0/js/widgets/forms/checkboxradio.js b/libs/js/jquery-mobile-1.2.0/js/widgets/forms/checkboxradio.js
+index a9f8f31..aa6f8a2 100644
+--- a/libs/js/jquery-mobile-1.2.0/js/widgets/forms/checkboxradio.js
++++ b/libs/js/jquery-mobile-1.2.0/js/widgets/forms/checkboxradio.js
+@@ -38,12 +38,15 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
+ checkedClass = "ui-" + checkedState + activeBtn,
+ uncheckedClass = "ui-" + uncheckedState,
+ checkedicon = "ui-icon-" + checkedState,
+- uncheckedicon = "ui-icon-" + uncheckedState;
++ uncheckedicon = "ui-icon-" + uncheckedState,
++ ariaCheckedAttr = "";
+
+ if ( inputtype !== "checkbox" && inputtype !== "radio" ) {
+ return;
+ }
+
++ ariaCheckedAttr = ( inputtype === "checkbox" ) ? "aria-checked" : "aria-selected";
++
+ // Support fake label
+ if ( label.length == 0 ) {
+ label = $( "<label for='" + input[ 0 ].id +
+@@ -57,7 +60,8 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
+ checkedClass: checkedClass,
+ uncheckedClass: uncheckedClass,
+ checkedicon: checkedicon,
+- uncheckedicon: uncheckedicon
++ uncheckedicon: uncheckedicon,
++ ariaCheckedAttr : ariaCheckedAttr
+ });
+
+ // If there's no selected theme check the data attr
+@@ -76,6 +80,7 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
+ // Wrap the input + label in a div
+ var wrapper = document.createElement('div');
+ wrapper.className = 'ui-' + inputtype;
++ wrapper.setAttribute( "role", inputtype );
+
+ if ( input.hasClass( "favorite" ) ) {
+ wrapper.className += ' favorite';
+@@ -184,14 +189,17 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
+ refresh: function() {
+ var input = this.element[0],
+ label = this.label,
++ wrapper = input.parentNode,
+ icon = label.find( ".ui-icon" );
+
+ if ( input.checked ) {
+ label.addClass( this.checkedClass ).removeClass( this.uncheckedClass );
+ icon.addClass( this.checkedicon ).removeClass( this.uncheckedicon );
++ wrapper.setAttribute( this.ariaCheckedAttr, true );
+ } else {
+ label.removeClass( this.checkedClass ).addClass( this.uncheckedClass );
+ icon.removeClass( this.checkedicon ).addClass( this.uncheckedicon );
++ wrapper.setAttribute( this.ariaCheckedAttr, false );
+ }
+
+ if ( input.disabled ) {
+--
+1.7.9.5
+
--- /dev/null
+From 2f68f0cd4b3e55d0e9cc08cb3e9b4b00a45c3674 Mon Sep 17 00:00:00 2001
+From: "sang-hee.lee" <sang-hee.lee@samsung.com>
+Date: Tue, 19 Mar 2013 21:58:18 +0900
+Subject: [PATCH] JQM Support accessibility for listview
+
+---
+ libs/js/jquery-mobile-1.2.0/js/widgets/listview.js | 27 +++++++++++++++++---
+ 1 file changed, 24 insertions(+), 3 deletions(-)
+
+diff --git a/libs/js/jquery-mobile-1.2.0/js/widgets/listview.js b/libs/js/jquery-mobile-1.2.0/js/widgets/listview.js
+index 993d03e..4d53d2c 100644
+--- a/libs/js/jquery-mobile-1.2.0/js/widgets/listview.js
++++ b/libs/js/jquery-mobile-1.2.0/js/widgets/listview.js
+@@ -147,7 +147,10 @@ $.widget( "mobile.listview", $.mobile.widget, {
+ for ( i = 0; i < len; i++ ) {
+ img = $( this._findFirstElementByTagName( containers[ i ].firstChild, "nextSibling", "img", "IMG" ) );
+ if ( img.length ) {
+- img.addClass( "ui-li-thumb" );
++ img.addClass( "ui-li-thumb" ).attr( {
++ "role" : "",
++ "aria-label" : "icon"
++ });
+ $( this._findFirstElementByTagName( img[ 0 ].parentNode, "parentNode", "li", "LI" ) ).addClass( img.is( ".ui-li-icon" ) ? "ui-li-has-icon" : "ui-li-has-thumb" );
+ }
+ }
+@@ -228,9 +231,26 @@ $.widget( "mobile.listview", $.mobile.widget, {
+ // If we're creating the element, we update it regardless
+ if ( create || !item.hasClass( "ui-li" ) ) {
+ itemTheme = $.mobile.getAttrFixed( item[0], "data-" + $.mobile.ns + "theme" ) || o.theme;
+- a = this._getChildrenByTagName( item[ 0 ], "a", "A" );
++ a = this._getChildrenByTagName( item[ 0 ], "a", "A" ).attr( {
++ "role": "",
++ "tabindex": "0"
++ });
+ var isDivider = ( $.mobile.getAttrFixed( item[0], "data-" + $.mobile.ns + "role" ) === "list-divider" );
+
++ if ( item.hasClass( "ui-li-has-checkbox" ) || item.hasClass( "ui-li-has-radio" ) ) {
++ item.on( "vclick", function ( e ) {
++ var targetItem = $( e.target );
++ var checkboxradio = targetItem.find( ".ui-checkbox" );
++ if ( !checkboxradio.length ) {
++ checkboxradio = targetItem.find( ".ui-radio" );
++ }
++
++ if ( checkboxradio.length ) {
++ checkboxradio.children( "label" ).trigger( "vclick" );
++ }
++ });
++ }
++
+ if ( a.length && !isDivider ) {
+ icon = $.mobile.getAttrFixed( item[0], "data-" + $.mobile.ns + "icon" );
+
+@@ -287,7 +307,7 @@ $.widget( "mobile.listview", $.mobile.widget, {
+ } else if ( isDivider ) {
+
+ itemClass += " ui-li-divider ui-bar-" + dividertheme;
+- item.attr( "role", "heading" );
++ item.attr( { "role": "heading", "tabindex": "0" } );
+
+ if ( ol ) {
+ //reset counter when a divider heading is encountered
+@@ -305,6 +325,7 @@ $.widget( "mobile.listview", $.mobile.widget, {
+
+ } else {
+ itemClass += " ui-li-static ui-btn-up-" + itemTheme;
++ item.attr( "tabindex", "0" );
+ }
+ }
+
+--
+1.7.9.5
+
jumpToDivider;
this.scrollview = $el.closest( '.ui-scrollview-clip' );
- this.shortcutsContainer = $( '<div class="ui-fastscroll"/>' );
- this.shortcutsList = $( '<ul></ul>' );
+ this.shortcutsContainer = $( '<div class="ui-fastscroll" aria-label="Fast scroll bar, double tap to fast scroll mode" tabindex="0"/>' );
+ this.shortcutsList = $( '<ul aria-hidden="true"></ul>' );
// popup for the hovering character
this.scrollview.append($( '<div class="ui-fastscroll-popup"></div>' ) );
// remove scrollbars from scrollview
this.scrollview.find( '.ui-scrollbar' ).hide();
- jumpToDivider = function ( divider ) {
+ this.jumpToDivider = function ( divider ) {
// get the vertical position of the divider (so we can scroll to it)
var dividerY = $( divider ).position().top,
// find the bottom of the last list item
this.shortcutsList
// bind mouse over so it moves the scroller to the divider
- .bind( 'touchstart mousedown vmousedown touchmove vmousemove vmouseover ', function ( e ) {
+ .bind( 'touchstart mousedown vmousedown touchmove vmousemove vmouseover', function ( e ) {
// Get coords relative to the element
var coords = $.mobile.tizen.targetRelativeCoordsFromEvent( e ),
shortcutsListOffset = self.shortcutsList.offset();
coords.y += $( e.target ).offset().top - shortcutsListOffset.top;
}
+ if ( e.target.tagName.toLowerCase() === "span" ) {
+ coords.x += $( e.target ).parent().offset().left - shortcutsListOffset.left;
+ coords.y += $( e.target ).parent().offset().top - shortcutsListOffset.top;
+ }
+
self.shortcutsList.find( 'li' ).each( function () {
var listItem = $( this );
$( listItem )
b = t + Math.abs(listItem.outerHeight( true ) );
if ( coords.x >= l && coords.x <= r && coords.y >= t && coords.y <= b ) {
- if ( typeof listItem.data( 'divider' ) !== "undefined" ) {
- jumpToDivider( $( listItem.data( 'divider' ) ) );
- }
-
- if ( listItem.text() !== "." ) {
- $popup.text( listItem.text() )
- .css( { marginLeft: -( $popup.width() / 2 ),
- marginTop: -( $popup.height() / 2 ),
- padding: $popup.css( "paddingTop" ) } )
- .width( $popup.height() )
- .show();
- } else {
- $popup.hide();
- }
-
- $( listItem ).addClass( "ui-fastscroll-hover" );
- if ( listItem.index() === 0 ) {
- $( listItem ).addClass( "ui-fastscroll-hover-first-item" );
- }
- if ( listItem.index() > 0 ) {
- $( listItem ).siblings().eq( listItem.index() - 1 ).addClass( "ui-fastscroll-hover-up" );
- }
- $( listItem ).siblings().eq( listItem.index() ).addClass( "ui-fastscroll-hover-down" );
+ self._hitItem( listItem );
return false;
}
return true;
} );
},
- _contentHeight : function () {
+ _hitItem: function ( listItem ) {
+ var self = this,
+ $popup = self.scrollview.find( '.ui-fastscroll-popup' );
+
+ if ( typeof listItem.data( 'divider' ) !== "undefined" ) {
+ self.jumpToDivider( $( listItem.data( 'divider' ) ) );
+ }
+
+ if ( listItem.text() !== "." ) {
+ $popup.text( listItem.text() )
+ .css( { marginLeft: -( $popup.width() / 2 ),
+ marginTop: -( $popup.height() / 2 ),
+ padding: $popup.css( "paddingTop" ) } )
+ .width( $popup.height() )
+ .show();
+ } else {
+ $popup.hide();
+ }
+
+ $( listItem ).addClass( "ui-fastscroll-hover" );
+ if ( listItem.index() === 0 ) {
+ $( listItem ).addClass( "ui-fastscroll-hover-first-item" );
+ }
+ if ( listItem.index() > 0 ) {
+ $( listItem ).siblings().eq( listItem.index() - 1 ).addClass( "ui-fastscroll-hover-up" );
+ }
+ $( listItem ).siblings().eq( listItem.index() ).addClass( "ui-fastscroll-hover-down" );
+ },
+
+ _focusItem: function ( listItem ) {
+ var self = this,
+ $popup = self.scrollview.find( '.ui-fastscroll-popup' );
+
+ listItem.focusin( function ( e ) {
+ self._hitItem( listItem );
+ }).focusout( function ( e ) {
+ $popup.hide();
+ $( ".ui-fastscroll-hover" ).removeClass( "ui-fastscroll-hover" );
+ $( ".ui-fastscroll-hover-first-item" ).removeClass( "ui-fastscroll-hover-first-item" );
+ $( ".ui-fastscroll-hover-up" ).removeClass( "ui-fastscroll-hover-up" );
+ $( ".ui-fastscroll-hover-down" ).removeClass( "ui-fastscroll-hover-down" );
+ });
+ },
+
+ _contentHeight: function () {
var self = this,
$content = $( '.ui-scrollview-clip' ),
header = null,
primaryCharacterSet = self._primaryLanguage ? self._primaryLanguage.replace( /,/g, "" ) : null,
secondCharacterSet = self._secondLanguage ? self._secondLanguage.replace( /,/g, "" ) : null,
contentHeight = self._contentHeight(),
- shapItem = $( '<li>#</li>' ),
+ shapItem = $( '<li tabindex="0" aria-label="double to move Number list"><span aria-hidden="true">#</span><span aria-label="Number"/></li>' ),
omitIndex = 0,
matchToDivider,
containerHeight,
matchToDivider = function ( index, divider ) {
if ( $( divider ).text() === indexChar ) {
- shortcutItem.data( 'divider', divider );
+ shortcutItem.data( 'divider', divider )
+ .bind( 'vclick', function ( e ) {
+ $( divider ).next().focus();
+ } );
}
};
self.shortcutsList.show();
self.lastListItem = listItems.last();
self.shortcutsList.append( shapItem );
+ self._focusItem( shapItem );
if ( primaryCharacterSet !== null ) {
padding = parseInt( shapItem.css( "padding" ), 10 );
for ( i = 0; i < primaryCharacterSet.length; i++ ) {
indexChar = primaryCharacterSet.charAt( i );
- shortcutItem = $( '<li>' + indexChar + '</li>' );
+ shortcutItem = $( '<li tabindex="0" aria-label="double to move ' + indexChar + ' list">' + indexChar + '</li>' );
+ self._focusItem( shortcutItem );
dividers.each( matchToDivider );
if ( typeof omitInfo !== "undefined" && omitInfo[ omitIndex ] > 1 ) {
for ( i = 0; i < seconds.length; i++ ) {
indexChar = seconds[ i ];
- shortcutItem = $( '<li>' + indexChar + '</li>' );
+ shortcutItem = $( '<li tabindex="0" aria-label="double to move ' + indexChar + ' list">' + indexChar + '</li>' );
+ self._focusItem( shortcutItem );
dividers.each( matchToDivider );
shapItem.before( shortcutItem );
}
} else {
dividers.each( function ( index, divider ) {
- shapItem.before( $( '<li>' + $( divider ).text() + '</li>' )
- .data( 'divider', divider ) );
+ indexChar = $( divider ).text();
+ shortcutItem = $( '<li tabindex="0" aria-label="double to move ' + indexChar + ' list">' + indexChar + '</li>' );
+
+ shortcutItem.data( 'divider', divider );
+ self._focusItem( shortcutItem );
+ shapItem.before( shortcutItem );
} );
}
}
handler = $( [ prefix, direction, suffix ].join( "" ) ).appendTo( $view.addClass( " ui-handler-" + theme ) );
- handlerThumb = $view.find( ".ui-handler-thumb" ).hide();
+ handlerThumb = $view.find( ".ui-handler-thumb" ).attr( {
+ "tabindex" : "0",
+ "aria-label" : ( isHorizontal ? "Horizontal handler, double tap and move to scroll" : "Verticalhandler, double tap and move to scroll" )
+ }).hide();
handlerHeight = ( isHorizontal ? handlerThumb.width() : handlerThumb.height() );
handlerMargin = ( isHorizontal ? parseInt( handler.css( "right" ), 10 ) : parseInt( handler.css( "bottom" ), 10 ) );
option = this.options,
className = "ui-tokentextarea-link",
inputbox = $( document.createElement( "input" ) ),
- labeltag = $( document.createElement( "label" ) ),
+ labeltag = $( document.createElement( "span" ) ),
moreBlock = $( document.createElement( "a" ) );
$view.hide().empty().addClass( "ui-" + role );
// create a label tag.
- $( labeltag ).text( option.label ).addClass( "ui-tokentextarea-label" );
+ $( labeltag ).text( option.label ).addClass( "ui-tokentextarea-label" ).attr( "tabindex", 0 );
$view.append( labeltag );
// create a input tag
- $( inputbox ).addClass( "ui-tokentextarea-input ui-tokentextarea-input-visible ui-input-text ui-body-s" );
+ $( inputbox ).addClass( "ui-tokentextarea-input ui-tokentextarea-input-visible ui-input-text ui-body-s" ).attr( "role", "textbox" );
$view.append( inputbox );
// create a anchor tag.
icon: "plus",
style: "circle"
})
- .attr( "href", $.trim( option.link ) )
+ .attr( { "href" : $.trim( option.link ), "tabindex" : 0 } )
.addClass( "ui-tokentextarea-link-base" )
- .addClass( className );
+ .addClass( className )
+ .find( "span.ui-btn-text" )
+ .text( "Add recipient" );
// append default htmlelements to main widget.
$view.append( moreBlock );
self._focusStatus = "init";
// display widget
$view.show();
- $view.attr( "tabindex", -1 ).focusin( function ( e ) {
- self.focusIn();
- });
// assign global variables
self._viewWidth = $view.innerWidth();
// Create a new text HTMLDivElement.
textBlock = $( document.createElement( 'div' ) );
- textBlock.text( content ).addClass( "ui-tokentextarea-block" );
+ textBlock.text( content ).addClass( "ui-tokentextarea-block" ).attr( { "aria-label" : "double tap to edit", "tabindex" : 0 } );
textBlock.css( {'visibility': 'hidden'} );
blocks = $view.find( "div" );
var $view = this.element;
- $view.find( "label" ).show();
+ $view.find( ".ui-tokentextarea-label" ).attr( "tabindex", 0 ).show();
$view.find( ".ui-tokentextarea-desclabel" ).remove();
$view.find( "div.ui-tokentextarea-sblock" ).removeClass( "ui-tokentextarea-sblock" ).addClass( "ui-tokentextarea-block" );
- $view.find( "div" ).show();
- $view.find( ".ui-tokentextarea-input" ).removeClass( "ui-tokentextarea-input-invisible" ).addClass( "ui-tokentextarea-input-visible" );
- $view.find( "a" ).show();
+ $view.find( "div" ).attr( { "aria-label" : "double tap to edit", "tabindex" : 0 } ).show();
+ $view.find( ".ui-tokentextarea-input" ).removeClass( "ui-tokentextarea-input-invisible" ).addClass( "ui-tokentextarea-input-visible" ).attr( "tabindex", 0 );
+ $view.find( "a" ).attr( "tabindex", 0 ).show();
// change focus state.
this._modifyInputBoxWidth();
this._focusStatus = "focusIn";
- $view.removeClass( "ui-tokentextarea-focusout" ).addClass( "ui-tokentextarea-focusin" );
+ $view.removeClass( "ui-tokentextarea-focusout" ).addClass( "ui-tokentextarea-focusin" ).removeAttr( "tabindex" );
+ $view.find( ".ui-tokentextarea-input" ).focus();
},
focusOut : function () {
var self = this,
$view = self.element,
tempBlock = null,
+ stateBlock = null,
+ numBlock = null,
statement = "",
index = 0,
lastIndex = 10,
- label = $view.find( "label" ),
+ label = $view.find( ".ui-tokentextarea-label" ),
more = $view.find( "span" ),
blocks = $view.find( "div" ),
currentWidth = $view.outerWidth( true ) - more.outerWidth( true ) - label.outerWidth( true ),
blockWidth = 0;
- $view.find( ".ui-tokentextarea-input" ).removeClass( "ui-tokentextarea-input-visible" ).addClass( "ui-tokentextarea-input-invisible" );
- $view.find( "a" ).hide();
- blocks.hide();
+ label.removeAttr( "tabindex" );
+ $view.find( ".ui-tokentextarea-input" ).removeClass( "ui-tokentextarea-input-visible" ).addClass( "ui-tokentextarea-input-invisible" ).removeAttr( "tabindex" );
+ $view.find( "a" ).removeAttr( "tabindex" ).hide();
+ blocks.removeAttr( "aria-label" ).removeAttr( "tabindex" ).hide();
currentWidth = currentWidth - self._reservedWidth;
if ( lastIndex !== blocks.length ) {
statement = self._stringFormat( self.options.description, blocks.length - lastIndex - 1 );
- tempBlock = $( document.createElement( 'label' ) );
- tempBlock.text( statement );
- tempBlock.addClass( "ui-tokentextarea-desclabel" );
+ tempBlock = $( document.createElement( 'span' ) );
+ tempBlock.addClass( "ui-tokentextarea-desclabel" ).attr( { "aria-label" : "more, double tap to edit", "tabindex" : "-1" } );
+ stateBlock = $( document.createElement( 'span' ) ).text( statement ).attr( "aria-hidden", "true" );
+ numBlock = $( document.createElement( 'span' ) ).text( blocks.length - lastIndex - 1 ).attr( "aria-label", "and" ).css( "visibility", "hidden" );
+ tempBlock.append( stateBlock );
+ tempBlock.append( numBlock );
$( blocks[lastIndex] ).after( tempBlock );
}
// update focus state
this._focusStatus = "focusOut";
- $view.removeClass( "ui-tokentextarea-focusin" ).addClass( "ui-tokentextarea-focusout" );
+ $view.removeClass( "ui-tokentextarea-focusin" ).addClass( "ui-tokentextarea-focusout" ).attr( "tabindex", 0 );
},
inputText : function ( message ) {
return;
}
- $view.find( "label" ).remove();
+ $view.find( ".ui-tokentextarea-label" ).remove();
$view.find( "div" ).undelegate( "click" ).remove();
$view.find( "a" ).remove();
$view.find( ".ui-tokentextarea-input" ).unbind( "keyup" ).remove();
},
_OVERFLOW_DIR_NONE = 0, /* ENUM */
_OVERFLOW_DIR_UP = 1, /* ENUM */
- _OVERFLOW_DIR_DOWN = -1; /* ENUM */
+ _OVERFLOW_DIR_DOWN = -1, /* ENUM */
+ imgTagSrcAttrRE = /src\s*=\s*[\"\'][\w\/.]+.[A-z]+[\"\']/;
function getCurrentTime () {
return Date.now();
elapsed = getCurrentTime () - this.startTime;
elapsed = elapsed > duration ? duration : elapsed;
dx = this.speed * ( 1 - $.easing[this.easing]( elapsed / duration, elapsed, 0, 1, duration ) );
- x = this.pos + dx;
+ x = this.pos + ( dx / 2 );
this.pos = x;
if ( elapsed >= duration ) {
_numItemData : 0,
_cacheItemData : function ( minIdx, maxIdx ) { },
_totalRowCnt : 0,
- _template : null,
+ _templateText : null,
_maxViewSize : 0,
_modifyViewPos : 0,
_maxSizeExceptClip : 0,
self._direction = opts.direction === 'x' ? true : false;
// make view layer
- self._$clip = $( self.element ).addClass( "ui-scrollview-clip" ).addClass( "ui-virtualgrid-view" );
+ self._$clip = $dom.addClass( "ui-scrollview-clip" ).addClass( "ui-virtualgrid-view" );
$item = $( document.createElement( "div" ) ).addClass( "ui-scrollview-view" );
self._clipSize = self._calculateClipSize();
self._$clip.append( $item );
}
self._setElementTransform( -self._cellSize );
- self._replaceRow( self._$view.children().first(), self._totalRowCnt - 1 );
+ self._replaceRow( self._$view[0].firstChild, self._totalRowCnt - 1 );
if ( opts.rotation && self._rowsPerView >= self._totalRowCnt ) {
- self._replaceRow( self._$view.children().last(), 0 );
+ self._replaceRow( self._$view[0].lastChild, 0 );
}
self._setViewSize();
},
var self = this,
opts = self.options,
width = 0,
- height = 0;
+ height = 0,
+ $template = null;
- self._template = $( "#" + opts.template );
- if ( !self._template ) {
+ $template = $( "#" + opts.template );
+ if ( !$template ) {
return ;
}
+ self._templateText = self._insertAriaAttrToTmpl( $template.text() );
width = self._calculateClipWidth();
height = self._calculateClipHeight();
rowsPerView = Math.ceil( rowsPerView );
self._rowsPerView = parseInt( rowsPerView, 10 );
- $child = self._makeRows( rowsPerView + 2 );
- $( self._$view ).append( $child.children() );
+ $child = $( self._makeRows( rowsPerView + 2 ) );
+ self._$view.append( $child.children() );
self._$view.children().css( attributeName, self._cellSize + "px" );
self._$rows = self._$view.children().detach();
return ret;
},
- resize : function ( ) {
+ resize : function () {
var self = this,
ret = null,
rowsPerView = 0,
clipPosition = self._getClipPosition();
self._$view.hide();
- diffRowCnt = self._replaceRows(itemCount, prevcnt, self._totalRowCnt, clipPosition);
+ diffRowCnt = self._replaceRows( itemCount, prevcnt, self._totalRowCnt, clipPosition );
self._maxSizeExceptClip = ( self._totalRowCnt - self._rowsPerView ) * self._cellSize;
self._maxSize = self._totalRowCnt * self._cellSize;
- self._scalableSize += (-diffRowCnt) * self._cellSize;
- self._reservedPos += (-diffRowCnt) * self._cellSize;
+ self._scalableSize += ( -diffRowCnt ) * self._cellSize;
+ self._reservedPos += ( -diffRowCnt ) * self._cellSize;
self._setScrollBarSize();
self._setScrollBarPosition( diffRowCnt );
if ( self._direction ) {
self._$clip.append( prefix + "x" + suffix );
- self._hScrollBar = $( self._$clip.children( ".ui-scrollbar-x" ) );
+ self._hScrollBar = self._$clip.children( ".ui-scrollbar-x" );
self._hScrollBar.find( ".ui-scrollbar-thumb" ).addClass( "ui-scrollbar-thumb-x" );
} else {
self._$clip.append( prefix + "y" + suffix );
- self._vScrollBar = $( self._$clip.children( ".ui-scrollbar-y" ) );
+ self._vScrollBar = self._$clip.children( ".ui-scrollbar-y" );
self._vScrollBar.find( ".ui-scrollbar-thumb" ).addClass( "ui-scrollbar-thumb-y" );
}
},
var self = this,
$sbt = null,
x = "0px",
- y = "0px";
+ y = "0px",
+ translate;
if ( self.options.rotation ) {
return ;
self._currentItemCount = self._currentItemCount + di;
if ( self._vScrollBar ) {
- $sbt = self._vScrollBar .find( ".ui-scrollbar-thumb" );
+ $sbt = self._vScrollBar.find( ".ui-scrollbar-thumb" );
y = ( self._currentItemCount * self._itemScrollSize ) + "px";
} else {
- $sbt = self._hScrollBar .find( ".ui-scrollbar-thumb" );
+ $sbt = self._hScrollBar.find( ".ui-scrollbar-thumb" );
x = ( self._currentItemCount * self._itemScrollSize ) + "px";
}
self._setStyleTransform( $sbt, x, y, duration );
idx = 0,
replaceStartIdx = 0,
realRowCount = self._rowsPerView + 2,
- $row = null;
+ rawView = self._$view[0];
if ( self._blockScroll ) {
if ( dy > 0 && distance >= -self._cellSize && self._scalableSize >= -self._cellSize ) {
if ( di > 0 ) { // scroll up
for ( i = replaceStartIdx; i < di; i++ ) {
idx = -parseInt( ( sy / self._cellSize ) + i + 3, 10 );
- $row = self._$view.children().last().detach();
- self._replaceRow( $row, circularNum( idx, self._totalRowCnt ) );
- self._$view.prepend( $row );
+ self._replaceRow( rawView.lastChild, circularNum( idx, self._totalRowCnt ) );
+ rawView.insertBefore( rawView.lastChild, rawView.firstChild );
}
} else if ( di < 0 ) { // scroll down
for ( i = replaceStartIdx; i > di; i-- ) {
idx = self._rowsPerView - parseInt( ( sy / self._cellSize ) + i, 10 );
- $row = self._$view.children().first().detach();
- self._replaceRow( $row, circularNum( idx, self._totalRowCnt ) );
- self._$view.append( $row );
+ self._replaceRow( rawView.firstChild, circularNum( idx, self._totalRowCnt ) );
+ rawView.insertBefore( rawView.firstChild, rawView.lastChild.nextSibling );
}
}
self._setScrollBarPosition( -di );
_calculateClipWidth : function () {
var self = this,
- view = $( self.element ),
- $parent = $( self.element ).parent(),
+ $parent = self._$clip.parent(),
paddingValue = 0,
clipSize = $( window ).width();
paddingValue = parseInt( $parent.css( "padding-right" ), 10 );
clipSize = clipSize - ( paddingValue || 0 );
} else {
- clipSize = view.width();
+ clipSize = self._$clip.width();
}
return clipSize;
},
_calculateClipHeight : function () {
var self = this,
- view = $( self.element ),
- $parent = view.parent(),
+ $parent = self._$clip.parent(),
header = null,
footer = null,
paddingValue = 0,
clipSize = clipSize - footer.outerHeight( true );
}
} else {
- clipSize = view.height();
+ clipSize = self._$clip.height();
}
return clipSize;
},
$tempBlock,
$cell;
- $tempBlock = self._makeRows( 1 );
+ $tempBlock = $( self._makeRows( 1 ) );
self._$view.append( $tempBlock.children().first() );
if ( self._direction ) {
// x-axis
_calculateColumnCount : function ( ) {
var self = this,
- $view = $( self.element ),
+ $view = self._$clip,
viewSize = self._direction ? $view.innerHeight() : $view.innerWidth(),
itemCount = 0 ;
//----------------------------------------------------//
_makeRows : function ( count ) {
var self = this,
- opts = self.options,
index = 0,
- $row = null,
- $wrapper = null;
+ row = null,
+ wrapper = null;
- $wrapper = $( self._createElement( "div" ) );
- $wrapper.addClass( "ui-scrollview-view" );
+ wrapper = self._createElement( "div" );
+ wrapper.setAttribute( "class", "ui-scrollview-view" );
for ( index = 0; index < count ; index += 1 ) {
- $row = self._makeRow( self._template, index );
+ row = self._makeRow( index );
if ( self._direction ) {
- $row.css( "top", 0 ).css( "left", ( index * self._cellSize ) );
+ row.style.top = 0;
+ row.style.left = index * self._cellSize;
}
- $wrapper.append( $row );
+ wrapper.appendChild( row );
}
- return $wrapper;
+ return wrapper;
},
// make a single row block
- _makeRow : function ( myTemplate, rowIndex ) {
+ _makeRow : function ( rowIndex ) {
var self = this,
- opts = self.options,
index = rowIndex * self._itemCount,
- htmlData = null,
- itemData = null,
colIndex = 0,
- attrName = self._direction ? "top" : "left",
blockClassName = self._direction ? "ui-virtualgrid-wrapblock-x" : "ui-virtualgrid-wrapblock-y",
- blockAttrName = self._direction ? "top" : "left",
- wrapBlock = $( self._createElement( "div" ) );
+ wrapBlock = self._createElement( "div" ),
+ strWrapInner = "",
+ attrName = self._direction ? "top" : "left";
- wrapBlock.addClass( blockClassName ).attr( "row-index", rowIndex );
for ( colIndex = 0; colIndex < self._itemCount; colIndex++ ) {
- htmlData = self._makeHtmlData( myTemplate, index, colIndex );
- if ( htmlData ) {
- wrapBlock.append( htmlData );
- }
+ strWrapInner += self._makeHtmlData( index, colIndex, attrName );
index += 1;
}
+ wrapBlock.innerHTML = strWrapInner;
+ wrapBlock.setAttribute( "class", blockClassName );
+ wrapBlock.setAttribute( "row-index", String( rowIndex ) );
+ self._fragment.appendChild( wrapBlock );
return wrapBlock;
},
- _makeHtmlData : function ( myTemplate, dataIndex, colIndex ) {
+ _makeHtmlData : function ( dataIndex, colIndex, attrName ) {
var self = this,
- htmlData = null,
- itemData = null,
- attrName = self._direction ? "top" : "left";
+ htmlStr = "",
+ itemData = null;
itemData = self._itemData( dataIndex );
if ( itemData ) {
- htmlData = self._tmpl( itemData );
- htmlData.css( attrName, ( colIndex * self._cellOtherSize ) ).addClass( "virtualgrid-item" );
+ htmlStr = self._getConvertedTmplStr( itemData );
+ htmlStr = self._insertPosToTmplStr( htmlStr, attrName, ( colIndex * self._cellOtherSize ) );
}
- return htmlData;
+ return htmlStr;
+ },
+
+ _insertPosToTmplStr : function ( tmplStr, attrName, posVal ) {
+ var tagCloseIdx = tmplStr.indexOf( '>' ),
+ classIdx = -1,
+ firstPart,
+ lastPart,
+ result,
+ found = false,
+ targetIdx = 0,
+ firstPartLen,
+ i = 0;
+
+ if ( tagCloseIdx === -1 ) {
+ return;
+ }
+
+ firstPart = tmplStr.slice( 0, tagCloseIdx );
+ lastPart = tmplStr.slice( tagCloseIdx, tmplStr.length );
+
+ classIdx = firstPart.indexOf( 'class' );
+
+ if ( classIdx !== -1 ) {
+ firstPartLen = firstPart.length;
+ for ( i = classIdx + 6; i < firstPartLen; i++ ) {
+ if ( firstPart.charAt( i ) === "\"" || firstPart.charAt( i ) === "\'" ) {
+ if ( found === false ) {
+ found = true;
+ } else {
+ targetIdx = i;
+ break;
+ }
+ }
+ }
+ result = firstPart.slice( 0, targetIdx ) + " virtualgrid-item" + firstPart.slice( targetIdx, firstPartLen ) + lastPart;
+ } else {
+ result = firstPart + " class=\"virtualgrid-item\"" + lastPart;
+ }
+
+ if ( !isNaN( posVal ) ) {
+ result = result.replace( '>', " style=\"" + attrName + ": " + String( posVal ) + "px\">");
+ }
+
+ return result;
},
_increaseRow : function ( num ) {
for ( idx = 1 ; idx <= num ; idx++ ) {
if ( tailItemIndex + idx >= self._totalRowCnt ) {
- $row = self._makeRow( self._template, headItemIndex );
+ $row = $( self._makeRow( headItemIndex ) );
self._$view.prepend( $row );
headItemIndex -= 1;
} else {
- $row = self._makeRow( self._template, tailItemIndex + idx );
+ $row = $( self._makeRow( tailItemIndex + idx ) );
self._$view.append( $row );
}
if ( self._direction ) {
_replaceRow : function ( block, index ) {
var self = this,
- opts = self.options,
- $columns = null,
- $column = null,
- $block = block.attr ? block : $( block ),
- data = null,
- htmlData = null,
- myTemplate = null,
- idx = 0,
- dataIdx = 0,
tempBlocks = null;
- $columns = $block.attr( "row-index", index ).children();
- if ( $columns.length !== self._itemCount ) {
- $block.children().remove();
- tempBlocks = $( self._makeRow( self._template, index ) );
- $block.append( tempBlocks.children() );
- tempBlocks.remove();
- return ;
+ while ( block.hasChildNodes() ) {
+ block.removeChild( block.lastChild );
}
- dataIdx = index * self._itemCount;
- for ( idx = 0; idx < self._itemCount ; idx += 1 ) {
- $column = $columns.eq( idx );
- data = self._itemData( dataIdx );
- if ( $column && data ) {
- htmlData = self._tmpl( data );
- self._replace( $column, htmlData, false );
- htmlData.remove(); // Clear temporary htmlData to free cache
- dataIdx ++;
- } else if ( $column && !data ) {
- $column.remove();
- }
+ tempBlocks = self._makeRow( index );
+ while ( tempBlocks.children.length ) {
+ block.appendChild( tempBlocks.children[0] );
}
+ tempBlocks.parentNode.removeChild( tempBlocks );
},
_createElement : function ( tag ) {
this._fragment.appendChild( element );
return element;
},
+
_getObjectNames : function ( obj ) {
var properties = [],
name = "";
this._properties = properties;
},
- _tmpl : function ( data ) {
+ _getConvertedTmplStr : function ( data ) {
var self = this,
- idx = 0,
+ dataProperties = self._properties,
+ i = 0,
plainMsg,
- ret;
+ ret = "";
+
if ( !data ) {
return ;
}
- plainMsg = self._template.text();
- for ( idx = 0 ; idx < self._properties.length ; idx++ ) {
- plainMsg = self._strReplace( plainMsg, "${" + self._properties[ idx ] + "}" , data[ self._properties[ idx ] ] );
+ plainMsg = self._templateText;
+ for ( i = 0; i < dataProperties.length; i++ ) {
+ plainMsg = self._strReplace( plainMsg, "${" + dataProperties[ i ] + "}" , data[ dataProperties[ i ] ] );
+ }
+ plainMsg = self._changeImgSrcAriaAttrFromTmpl( plainMsg );
+
+ return plainMsg;
+ },
+
+ _changeImgSrcAriaAttrFromTmpl : function ( plainMsg ) {
+ var self = this,
+ ret = "",
+ targetTagIdx,
+ beforeTargetTag = "",
+ afterTargetTag = "",
+ imgFileName,
+ imgSrcSlashIdx,
+ temp,
+ srcRegExpResult;
+
+ temp = plainMsg;
+ targetTagIdx = temp.indexOf( "$ARIA-IMG-SRC-ALT$" );
+ while ( targetTagIdx !== -1 ) {
+ imgFileName = "";
+ beforeTargetTag = beforeTargetTag + temp.slice( 0, targetTagIdx + 19 );
+ afterTargetTag = temp.slice( targetTagIdx + 19, temp.length );
+ srcRegExpResult = afterTargetTag.match( imgTagSrcAttrRE );
+ if ( srcRegExpResult ) {
+ imgSrcSlashIdx = srcRegExpResult[0].lastIndexOf( "/" );
+ if ( imgSrcSlashIdx !== -1 ) {
+ imgFileName = srcRegExpResult[0].slice( imgSrcSlashIdx + 1, -1 );
+ }
+ }
+ beforeTargetTag = beforeTargetTag.replace( "$ARIA-IMG-SRC-ALT$", imgFileName );
+ temp = afterTargetTag;
+ targetTagIdx = temp.indexOf( "$ARIA-IMG-SRC-ALT$" );
+ ret = beforeTargetTag + afterTargetTag;
+ }
+
+ if ( ret === "" ) {
+ ret = plainMsg;
+ }
+
+ return ret;
+ },
+
+ _insertAriaAttrToTmpl : function ( plainMsg ) {
+ var ret = "",
+ targetTagIdx,
+ beforeTargetTag = "",
+ afterTargetTag = "",
+ temp;
+
+ temp = plainMsg.replace( "<div", "<div tabindex=\"0\" aria-selected=\"true\"" );
+ targetTagIdx = temp.indexOf( "<img" );
+ if ( targetTagIdx !== -1 ) {
+ while ( targetTagIdx !== -1 ) {
+ beforeTargetTag = beforeTargetTag + temp.slice( 0, targetTagIdx + 4 );
+ afterTargetTag = temp.slice( targetTagIdx + 4, temp.length );
+ beforeTargetTag = beforeTargetTag + " role=\"img\" alt=\"$ARIA-IMG-SRC-ALT$\"";
+ temp = afterTargetTag;
+ targetTagIdx = temp.indexOf( "<img" );
+ ret = beforeTargetTag + afterTargetTag;
+ }
+ temp = ret;
+ targetTagIdx = temp.indexOf( "<span" );
+ beforeTargetTag = "";
+ while ( targetTagIdx !== -1 ) {
+ beforeTargetTag = beforeTargetTag + temp.slice( 0, targetTagIdx + 5 );
+ afterTargetTag = temp.slice( targetTagIdx + 5, temp.length );
+ beforeTargetTag = beforeTargetTag + " aria-hidden=\"true\" tabindex=\"-1\"";
+ temp = afterTargetTag;
+ targetTagIdx = temp.indexOf( "<span" );
+ ret = beforeTargetTag + afterTargetTag;
+ }
+ }
+
+ if ( ret === "" ) {
+ ret = plainMsg;
}
- ret = $( plainMsg );
+
return ret;
},
index = temp.indexOf( stringToFind );
}
return temp;
- },
-
- /* Text & image src replace function */
- // @param oldItem : prev HtmlDivElement
- // @param newItem : new HtmlDivElement for replace
- // @param key :
- _replace : function ( oldItem, newItem, key ) {
- var NODETYPE = { ELEMENT_NODE : 1, TEXT_NODE : 3 };
-
- $( oldItem ).find( ".ui-li-text-main", ".ui-li-text-sub", "ui-btn-text" ).each( function ( index ) {
- var oldObj = $( this ),
- newText = $( newItem ).find( ".ui-li-text-main", ".ui-li-text-sub", "ui-btn-text" ).eq( index ).text();
-
- $( oldObj ).contents().filter( function () {
- return ( this.nodeType == NODETYPE.TEXT_NODE );
- }).get( 0 ).data = newText;
- });
-
- $( oldItem ).find( "img" ).each( function ( imgIndex ) {
- var oldObj = $( this ),
- newImg = $( newItem ).find( "img" ).eq( imgIndex ).attr( "src" );
-
- $( oldObj ).attr( "src", newImg );
- });
- $( oldItem ).removeData();
- if ( key ) {
- $( oldItem ).data( key, $( newItem ).data( key ) );
- }
}
+
} );
$( document ).bind( "pagecreate create", function ( e ) {
.ui-btn-icon-only .ui-btn-text
{
- left: -9999px;
- display: none;
+ display:block;
+ width: 0;
+ height: 0;
+ overflow: hidden;
}
.ui-btn.ui-btn-corner-all
border-radius : 0px;
}
- > .ui-btn:nth-child(2) {
- right : 13 * @unit_base;
- }
-
- > .ui-btn:nth-child(3) {
- right : 56 * @unit_base;
- }
-
- > img + h1 + .ui-btn:nth-child(3) {
- right : 13 * @unit_base;
- }
-
- > img + h1 + .ui-btn:nth-child(3) + .ui-btn {
- right : 56 * @unit_base;
- }
-
- > img + h1 + span.ui-title-text-sub + .ui-btn:nth-child(4) {
+ .ui-btn-right-0 {
right : 11 * @unit_base;
}
- > img + h1 + span.ui-title-text-sub + .ui-btn:nth-child(4) + .ui-btn {
- right : 58 * @unit_base;
+ .ui-btn-right-1 {
+ right : 56 * @unit_base;
}
> .ui-btn:not(.ui-btn-icon_only):nth-child(2) {
projects / platform / framework / web / web-ui-fw.git / commitdiff