jQM - Dont have a clue

by Dragan Gaić

HTML

<link rel="stylesheet" href="http://jeromeetienne.github.com/jquery-mobile-960/css/jquery-mobile-fluid960.css">
<script src="http://timeago.yarp.com/jquery.timeago.js"></script>
<script src="http://imakewebthings.github.com/jquery-waypoints/waypoints.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <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/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">
            <ul data-role="listview" data-split-icon="gear" data-split-theme="d" data-inset="true">
                <li><a class="readonly-state">
                    <img src="http://view.jquerymobile.com/1.3.0/docs/_assets/img/album-bb.jpg">
                    <h2>Broken Bells</h2>
                    <p>Broken Bells</p></a>
                    <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
                </li>
                <li><a  class="readonly-state">
                    <img src="http://view.jquerymobile.com/1.3.0/docs/_assets/img/album-hc.jpg">
                    <h2>Warning</h2>
                    <p>Hot Chip</p></a>
                    <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
                </li>
                <li><a  class="readonly-state">
                    <img src="http://view.jquerymobile.com/1.3.0/docs/_assets/img/album-p.jpg">
                    <h2>Wolfgang Amadeus...

CSS

.readonly-state {
	background: #eee !important;
	font-weight: bold !important;
	color: #2F3E46 !important;
	text-shadow: 0 /*{c-bup-shadow-x}*/ 1px /*{c-bup-shadow-y}*/ 0 /*{c-bup-shadow-radius}*/ #ffffff /*{c-bup-shadow-color}*/ !important;
	background-image: -webkit-gradient(linear, left top, left bottom, from( #ffffff /*{c-bup-background-start}*/), to( #f1f1f1 /*{c-bup-background-end}*/)) !important; /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient( #ffffff /*{c-bup-background-start}*/, #f1f1f1 /*{c-bup-background-end}*/) !important; /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient( #ffffff /*{c-bup-background-start}*/, #f1f1f1 /*{c-bup-background-end}*/) !important; /* FF3.6 */
	background-image:     -ms-linear-gradient( #ffffff /*{c-bup-background-start}*/, #f1f1f1 /*{c-bup-background-end}*/) !important; /* IE10 */
	background-image:      -o-linear-gradient( #ffffff /*{c-bup-background-start}*/, #f1f1f1 /*{c-bup-background-end}*/) !important; /* Opera 11.10+ */
	background-image:         linear-gradient( #ffffff /*{c-bup-background-start}*/, #f1f1f1 /*{c-bup-background-end}*/) !important;   
    cursor: default !important;
}

JavaScript

$(document).on('pagebeforeshow', '#index', function(){       

});