<!doctype html><html><head><metacharset="UTF-8"><metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>List with Image - jQuery EasyUI Mobile Demo</title><linkrel="stylesheet"type="text/css"href="../../themes/metro/easyui.css"><linkrel="stylesheet"type="text/css"href="../../themes/mobile.css"><linkrel="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><divclass="easyui-navpanel"><header><divclass="m-toolbar"><spanclass="m-title">List with Image</span></div></header><ulid="list"class="m-list"><li><imgclass="list-image"src="../images/modem.png"/><divclass="list-header">modem</div><divclass="list-content">modulates an analog carrier signal to encode digital information.</div></li><li><imgclass="list-image"src="../images/scanner.png"/><divclass="list-header">scanner</div><divclass="list-content">scans images, printed text, handwriting, or an object.</div></li><li><imgclass="list-image"src="../images/pda.png"/><divclass="list-header">pda</div><divclass="list-content">A personal digital assistant.</div></li><li><imgclass="list-image"src="../images/tablet.png"/><divclass="list-header">tablet</div><divclass="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>
<!doctype html><html><head><metacharset="UTF-8"><metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>Basic Tabs - jQuery EasyUI Mobile Demo</title><linkrel="stylesheet"type="text/css"href="../../themes/metro/easyui.css"><linkrel="stylesheet"type="text/css"href="../../themes/mobile.css"><linkrel="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><divclass="easyui-tabs"data-options="fit:true,border:false,tabWidth:80,tabHeight:35"><divtitle="Java"style="padding:10px"><p>Java is a general-purpose, concurrent, class-based, object-oriented computer programming language that is specifically designed to have as few implementation dependencies as possible.</p><p>Java applications are typically compiled to bytecode (class file) that can run on any Java virtual machine (JVM) regardless of computer architecture.</p></div><divtitle="Fortran"style="padding:10px"><p>Fortran (previously FORTRAN) is a general-purpose, imperative programming language that is especially suited to numeric computation and scientific computing. Originally developed by IBM at their campus in south San Jose, California[1] in the 1950s for scientific and engineering applications.</p></div><divtitle="Perl"style="padding:10px"><p>Perl is a family of high-level, general-purpose, interpreted, dynamic programming languages. The languages in this family include Perl 5 and Perl 6.</p><p>Though Perl is not officially an acronym, there are various backronyms in use, such as: Practical Extraction and Reporting Language. Perl was originally developed by Larry Wall in 1987 as a general-purpose Unix scripting language to make report processing easier. Since then, it has undergone many changes and revisions.</p></div></div><style scoped>p{line-height:150%;}</style></body></html>
<!doctype html><html><head><metacharset="UTF-8"><metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>Navigation Tabs - jQuery EasyUI Mobile Demo</title><linkrel="stylesheet"type="text/css"href="../../themes/metro/easyui.css"><linkrel="stylesheet"type="text/css"href="../../themes/mobile.css"><linkrel="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><divclass="easyui-navpanel"><header><divclass="m-toolbar"><divclass="m-title">Devices</div></div></header><divclass="easyui-tabs"data-options="tabHeight:60,fit:true,tabPosition:'bottom',border:false,pill:true,narrow:true,justified:true"><divstyle="padding:10px"><divclass="panel-header tt-inner"><imgsrc='../images/modem.png'/><br>Modem
</div><p>A modem (modulator-demodulator) is a device that modulates an analog carrier signal to encode digital information, and also demodulates such a carrier signal to decode the transmitted information.</p></div><divstyle="padding:10px"><divclass="panel-header tt-inner"><imgsrc='../images/scanner.png'/><br>Scanner
</div><p>In computing, an image scanner—often abbreviated to just scanner—is a device that optically scans images, printed text, handwriting, or an object, and converts it to a digital image.</p></div><divstyle="padding:10px"><divclass="panel-header tt-inner"><imgsrc='../images/pda.png'/><br>Pda
</div><p>A personal digital assistant (PDA), also known as a palmtop computer, or personal data assistant, is a mobile device that functions as a personal information manager. PDAs are largely considered obsolete with the widespread adoption of smartphones.</p></div><divstyle="padding:10px"><divclass="panel-header tt-inner"><imgsrc='../images/tablet.png'/><br>Pda
</div><p>A tablet computer, or simply tablet, is a one-piece mobile computer. Devices typically have a touchscreen, with finger or stylus gestures replacing the conventional computer mouse.</p></div></div></div><style scoped>.tt-inner{display:inline-block;line-height:12px;padding-top:5px;}p{line-height:150%;}</style></body></html>
<!doctype html><html><head><metacharset="UTF-8"><metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>Pill Tabs - jQuery EasyUI Mobile Demo</title><linkrel="stylesheet"type="text/css"href="../../themes/metro/easyui.css"><linkrel="stylesheet"type="text/css"href="../../themes/mobile.css"><linkrel="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><divclass="easyui-tabs"data-options="fit:true,border:false,pill:true,justified:true,tabWidth:80,tabHeight:35"><divtitle="Java"style="padding:10px"><p>Java is a general-purpose, concurrent, class-based, object-oriented computer programming language that is specifically designed to have as few implementation dependencies as possible.</p><p>Java applications are typically compiled to bytecode (class file) that can run on any Java virtual machine (JVM) regardless of computer architecture.</p></div><divtitle="Fortran"style="padding:10px"><p>Fortran (previously FORTRAN) is a general-purpose, imperative programming language that is especially suited to numeric computation and scientific computing. Originally developed by IBM at their campus in south San Jose, California[1] in the 1950s for scientific and engineering applications.</p></div><divtitle="Perl"style="padding:10px"><p>Perl is a family of high-level, general-purpose, interpreted, dynamic programming languages. The languages in this family include Perl 5 and Perl 6.</p><p>Though Perl is not officially an acronym, there are various backronyms in use, such as: Practical Extraction and Reporting Language. Perl was originally developed by Larry Wall in 1987 as a general-purpose Unix scripting language to make report processing easier. Since then, it has undergone many changes and revisions.</p></div></div><style scoped>p{line-height:150%;}</style></body></html>
<p>The accordion allows you to provide multiple panels and display one or more at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p>
