jQuery Mobile w przykładach - <ul>, <ol> Lista z standardowymi ikonami

<ul data-role="listview"> ... <li data-icon=

Lista z standardowymi ikonami

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
   <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
   <script src="https://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
</head>
<body>
<div data-role="page">
   <div data-role="header" data-position="fixed"><H1>Header</H1></div>
   <div role="main" class="ui-content">
      <h3>List with standard icons</h3>
      <ul data-role="listview">
         <li data-icon="false"><a href="#">no</a></li>
         <li data-icon="action"><a href="#">action</a></li>
         <li data-icon="alert"><a href="#">alert</a></li>
         <li data-icon="arrow-d"><a href="#">arrow-d</a></li>
         <li data-icon="arrow-d-l"><a href="#">arrow-d-l</a></li>
         <li data-icon="arrow-d-r"><a href="#">arrow-d-r</a></li>
         <li data-icon="arrow-l"><a href="#">arrow-l</a></li>
         <li data-icon="arrow-r"><a href="#">arrow-r</a></li>
         <li data-icon="arrow-u"><a href="#">arrow-u</a></li>
         <li data-icon="arrow-u-l"><a href="#">arrow-u-l</a></li>
         <li data-icon="arrow-u-r"><a href="#">arrow-u-r</a></li>
         <li data-icon="audio"><a href="#">audio</a></li>
         <li data-icon="back"><a href="#">back</a></li>
         <li data-icon="bars"><a href="#">bars</a></li>
         <li data-icon="bullets"><a href="#">bullets</a></li>
         <li data-icon="calendar"><a href="#">calendar</a></li>
         <li data-icon="camera"><a href="#">camera</a></li>
         <li data-icon="carat-d"><a href="#">carat-d</a></li>
         <li data-icon="carat-l"><a href="#">carat-l</a></li>
         <li data-icon="carat-r"><a href="#">carat-r</a></li>
         <li data-icon="carat-u"><a href="#">carat-u</a></li>
         <li data-icon="check"><a href="#">check</a></li>
         <li data-icon="clock"><a href="#">clock</a></li>
         <li data-icon="cloud"><a href="#">cloud</a></li>
         <li data-icon="comment"><a href="#">comment</a></li>
         <li data-icon="delete"><a href="#">delete</a></li>
         <li data-icon="edit"><a href="#">edit</a></li>
         <li data-icon="eye"><a href="#">eye</a></li>
         <li data-icon="forbidden"><a href="#">forbidden</a></li>
         <li data-icon="forward"><a href="#">forward</a></li>
         <li data-icon="gear"><a href="#">gear</a></li>
         <li data-icon="grid"><a href="#">grid</a></li>
         <li data-icon="heart"><a href="#">heart</a></li>
         <li data-icon="home"><a href="#">home</a></li>
         <li data-icon="info"><a href="#">info</a></li>
         <li data-icon="location"><a href="#">location</a></li>
         <li data-icon="lock"><a href="#">lock</a></li>
         <li data-icon="mail"><a href="#">mail</a></li>
         <li data-icon="minus"><a href="#">minus</a></li>
         <li data-icon="navigation"><a href="#">navigation</a></li>
         <li data-icon="phone"><a href="#">phone</a></li>
         <li data-icon="plus"><a href="#">plus</a></li>
         <li data-icon="power"><a href="#">power</a></li>
         <li data-icon="recycle"><a href="#">recycle</a></li>
         <li data-icon="refresh"><a href="#">refresh</a></li>
         <li data-icon="search"><a href="#">search</a></li>
         <li data-icon="shop"><a href="#">shop</a></li>
         <li data-icon="star"><a href="#">star</a></li>
         <li data-icon="tag"><a href="#">tag</a></li>
         <li data-icon="user"><a href="#">user</a></li>
         <li data-icon="video"><a href="#">video</a></li>
      </ul>
   </div>
   <div data-role="footer" data-position="fixed"><H1>Footer</H1></div>
</div>
</body>
</html>
Pobierz kod