<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>List with Image - jQuery EasyUI Mobile Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/mobile.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.mobile.js"></script> </head> <body> <div class="easyui-navpanel"> <header> <div class="m-toolbar"> <span class="m-title">List with Image</span> </div> </header> <ul id="list" class="m-list"> <li> <img class="list-image" src="../images/modem.png"/> <div class="list-header">modem</div> <div class="list-content">modulates an analog carrier signal to encode digital information.</div> </li> <li> <img class="list-image" src="../images/scanner.png"/> <div class="list-header">scanner</div> <div class="list-content">scans images, printed text, handwriting, or an object.</div> </li> <li> <img class="list-image" src="../images/pda.png"/> <div class="list-header">pda</div> <div class="list-content">A personal digital assistant.</div> </li> <li> <img class="list-image" src="../images/tablet.png"/> <div class="list-header">tablet</div> <div class="list-content">one-piece mobile computer.</div> </li> </ul> </div> <style scoped> #list .list-image{ width: 32px; height: 32px; border: 0; margin-right: 5px; float: left; } #list .list-header{ font-size: 16px; font-weight: bold; } #list .list-content{ text-overflow: ellipsis; overflow: hidden; } </style> </body> </html>
|
