Advertisement
Guest User

delegate binding to "expand" example

a guest
Apr 7th, 2011
396
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.     <title>Page Title</title>
  5.     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
  6.     <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
  7.     <script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
  8.     <script>
  9.     /*
  10.     $('div.info').live('expand', function(){
  11.         //get the ID for this record
  12.         var record = $(this).data("record");
  13.         console.log('expanded '+record);
  14.         $(".detail", this).load("test2.cfm?record="+record);
  15.       });
  16.     */
  17.     $('.weather-station').delegate ('.info', 'expand', function (event) {
  18.         console.log ('expanded');
  19.         var record = $(this).data ("record");
  20.         console.log ('expanded ' + record);
  21.         $(".detail", this).load ("test2.cfm?record=" + record);
  22.     });
  23.    
  24.     </script>
  25.    
  26.     <style>
  27.     .weather-station                {}
  28.     .weather-station-header         {float:left; width:100%; background-color:#C9D1DD; margin:0 0 0.5em 0;}
  29.     .weather-station-header h1      {padding:0.3em; padding-bottom:0; margin:0 0 0.2em 0;}
  30.     .weather-station-header p       {padding:0.3em; padding-top:0; margin:0;}
  31.     p.weather-station-reading       {clear:left; padding:0 0.5em; font-weight:normal;}
  32.     .weather-station label  {font-weight:bold; padding-right:0.4em;}
  33.     </style>
  34. </head>
  35. <body>
  36.  
  37. <div data-role="page">
  38.  
  39.     <div data-role="header">
  40.         <h1>Page Title</h1>
  41.     </div>
  42.  
  43.     <div data-role="content">  
  44.        
  45.         <ul data-role="listview">
  46.        
  47.             <li>
  48.                 <div class="weather-station">
  49.                     <div class="weather-station-header">
  50.                         <h1>JACKSON HOLE-SUMMIT</h1>
  51.                         <p><label>Elevation:</label>10,318 ft. <label>Lat/Lon:</label>43.59, -110.85</p>
  52.                     </div>
  53.                     <p class="weather-station-reading"><label>Temperature:</label>24&deg; F</p>
  54.                     <p class="weather-station-reading"><label>Wind Speed:</label>32 mph</p>
  55.                     <p class="weather-station-reading"><label>Wind Gusts:</label>46 mph</p>
  56.                     <div data-role="collapsible" data-collapsed="true" class="info" data-record="1">  
  57.                         <h1>View 24-Hour History</h1>
  58.                         <div class="detail"></div>
  59.                     </div>
  60.                 </div>
  61.             </li>
  62.            
  63.             <li>
  64.                 <div class="weather-station">
  65.                     <div class="weather-station-header">
  66.                         <h1>JACKSON HOLE-RENDEZVOUS BOWL</h1>
  67.                         <p><label>Elevation:</label>9,608 ft. <label>Lat/Lon:</label>43.590858, -110.872558</p>
  68.                     </div>
  69.                     <p class="weather-station-reading"><label>Temperature:</label>26&deg; F</p>
  70.                     <p class="weather-station-reading"><label>Wind Speed:</label>12 mph</p>
  71.                     <p class="weather-station-reading"><label>Wind Gusts:</label>23 mph</p>
  72.                     <div data-role="collapsible" data-collapsed="true" class="info" data-record="2">  
  73.                         <h1>View 24-Hour History</h1>
  74.                         <div class="detail"></div>
  75.                     </div>
  76.                 </div>
  77.             </li>
  78.        
  79.         </ul>
  80.        
  81.     </div>
  82.  
  83.     <div data-role="footer">
  84.         <h4>Page Footer</h4>
  85.     </div>
  86.  
  87. </div>
  88.  
  89. </body>
  90. </html>
Advertisement
Advertisement
Advertisement
RAW Paste Data Copied
Advertisement