mobile

by manoj

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page" id="main_page">
  <div data-role="header" role="banner" data-position="inline" data-theme="e">
    <h1 role="heading">jqm Collapsible Set Styling</h1>
  </div>  <!-- /header main -->

  <div data-role="content" id="main_content">

    <div data-role="collapsible" data-collapsed="false">
      <h3>Links in a collapsible-block | no data-content-theme</h3>
      <p class="ui-li-desc">A collapsible content now have again no background if the data-content-theme is not set. <span class="vn">Very nice!</span></p>
      <ul data-role="listview" data-inset="true">
        <li data-theme="a"><a href="#">Data-theme of this &lt;LI&gt; is <big>a</big></a></li>
        <li data-theme="b"><a href="#">Data-theme of this &lt;LI&gt; is <big>b</big></a></li>
        <li data-theme="c"><a href="#">Data-theme of this &lt;LI&gt; is <big>c</big></a></li>
        <li data-theme="d"><a href="#">Data-theme of this &lt;LI&gt; is <big>d</big></a></li>
        <li data-theme="e"><a href="#">Data-theme of this &lt;LI&gt; is <big>e</big></a></li>
      </ul>
    </div>

    <input type="button" value="switch swatch" data-inline="true" id="setcol" />

    <div data-role="collapsible" data-collapsed="false" data-content-theme="c" id="coll_set_2" >
      <h3>Links in a collapsible block | data-content-theme set</h3>
      <p class="ui-li-desc"><b>But</b> if the data-content-theme is set, included links still inherits the text-color from the parent:</p>
      <ul...

CSS

p { white-space: pre-wrap !important }
.vn { color: firebrick; font-weight: bold; text-shadow: 1px 1px 0 yellow; }