frequent

// this is from a larger file, fit as you need:
var priv = {};


priv.generator = {

  /**
   * Generates elements based on supplied configuration
   * @method: makeElement
   * @param: {type} string Type of element to generate

frequent

<!-- panel transitions on HTML links -->
<a href="somePage.html" data-transition="fade" data-panel="your_panel_id">

<!-- programmatic -->
$.mobile.changePage('somePage.html', {
                        transition: 'fade', 
                        pageContainer: $('div:jqmData(id="your_panel_id")') 
                    });

frequent

<div data-role="page" id="your_wrapper_id" data-wrapper="true">
   <!-- global header --> 
   <div data-role="panel" data-id="your_menu_panel_id" data-panel="menu">
        <div data-role="page" id="your_menu_page_id" data-show="first">
            <!-- local header -->
            <!-- page content -->
            <!-- local footer -->
        </div>
    </div>
    <div data-role="panel" data-id="your_main_panel_id" data-panel="main">

frequent

// First, let's define a widget/plugin called "foo"

// Either using jQuery's $.fn plugin namespace, for simple stateless plugins...
$.fn.foo = function(){

  // In this scope, this refers to the element on which the plugin foo() was called 
  // manipulate it and return this at the end, so it can be chainable

};

frequent

<!-- Mobile meta & links -->

<!-- Reference

Custom Icon and Image Creation Guidelines:
http://developer.apple.com/library/safari/#documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html

Configuring Web Applications:
http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/configuringwebapplications/configuringwebapplications.html

frequent

<img src="large-default-file.jpg">
    <source src="smaller.jpg" media="max-width:600px">
    <source src="tiny.jpg" media="max-width:320px">
</img>

frequent

<!-- not perfect yet, but going in the right direction ... -->

<!-- list element from within actionsheet should be triggered -->
<ul data-role="listview" data-inset="true" class="socialize">					
        <li><a data-trigger="actionsheet" id="as1" href="#"><img src="iconSprite" class="ui-li-icon" alt="" />Favorite</a></li>
        <li><a data-trigger="actionsheet" id="as2" href="#"><img src="iconSprite" class="ui-li-icon" alt="" />Hide</a></li>
</ul>

<!-- action sheets -->
<!-- need to be place outside list element, otherwise CSS is not working properly once activated-->