jQuery Mobile Code Snippets for Visual Studio

I’ve been recently learning jQuery Mobile and am really impressed with the technology. It is a powerful and robust tool to quickly create content for mobile devices. However, with it being so new to me and with it being so robust, I find it difficult to remember all of the syntax for the many different things you can do with it. It occurred to me that code snippets could be a great way to relieve this burden, so I began creating my own to do this.

As an example, using my jqmPage code snippet (by typing

<div data-role="page" data-theme="THEME" id="PAGENAME">  
    <div data-position="fixed" data-role="header" data-theme="a">
        <h1>HEADER</h1>
    </div>
    <div data-role="content" data-theme="a"></div>
    <div class="ui-bar" data-position="fixed" data-role="footer" data-theme="a">
        <h4>FOOTER</h4>
    </div>
</div>  

Then, if I wanted to, for instance, add a slider, all I have to do is use my jqmSlider snippet (by typing

<fieldset data-role="fieldcontain">  
    <label for="SLIDER1">Slider Input:</label>  
    <input type="range" name="slider" id="SLIDER1" min="MIN" max="MAX"
           value="INITIALVALUE" data-highlight="false" data-mini="false" />
</fieldset>  

Then, to add a text field, I just have to type <jqmText + tab + tab, and I get this:

<div class="fieldcontain">  
    <label for="txtNAME1">Text Input:</label>  
    <input data-mini="false" id="txtNAME1" name="name" placeholder="PLACEHOLDER" type="TEXT" value=""></input>
</div>  

The Code Snippet Tooltip for the input type identifies the valid options.

I’ve included all my current snippet files below. They’ll probably change a little bit as I continue to learn jQuery Mobile better, and you’ll probably want to make changes of your own. Nonetheless, this is a decent start.

jQuery Mobile Code Snippets