List Split icons

Question

In dreamweaver CS6 - In the JQuery Mobile swatches, the List Split Icons are not displaying,  even once data-split-icon is allocated. Anyone else having this issue?

Answer 1

Hi
I started building a simple jQuery mobile site using the video found here http://tv.adobe.com/watch/learn-dreamweaver-cs6/enhanced-jquery-mobile-support/
and I was having an issue with the icons not displaying properly also.
Here is a snippet of code that does display the icons properly
<div data-role="content">
  <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
        <li data-icon="info"><a href="#page2">About</a></li>
        <li data-icon="check"><a href="#page3">Contact Us</a></li>
        <li data-icon="star"><a href="#page4">Services</a></li>
  </ul> 
</div>
the code created in dreamweaver was this
<div data-role="content">
  <ul data-role="listview" data-split-icon="grid" data-theme="c">
        <li><a href="#page2">Page Two</a></li>
        <li><a href="#page3">Page Three</a></li>
        <li><a href="#page4">Page Four</a></li>
  </ul> 
</div>
the problem seems to be that the li element needs to have the data-icon property which adobe does recognize
also according to jQuery mobile for the latest stable release you can link the css and js files as follows
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
I hope this helps...
Charlie