JS Bin is an open source web application built by Remy Sharp, available at http://www.jsbin.com. JS Bin allows you to directly enter your HTML, CSS, and JavaScript code online, and also allows you to include the required jQuery and jQuery Mobile libraries. You can add and directly run your JavaScript code and preview the output on your browser. You can also share your code and collaborate with others for review or troubleshooting. You can finally download your code once everything works as desired. It is a very popular tool used by many jQuery Mobile developers. This recipe shows you how to create a simple jQuery Mobile application using JS Bin.
The code in this recipe was created using the JS Bin web application available at http://www.jsbin.com. The code is available in the code/01/jsbin source folder. You can launch the code using the URL http://localhost:8080/01/jsbin/main.html.
Launch the JS Bin web application tool at the URL http://www.jsbin.com, and you will see a basic HTML template.
Select the Add Library link on the top-left panel, and include the latest jQuery Mobile library files. Next, edit the
<head>section, as shown in the following code snippet:<html> <head> <link href="http://code.jquery.com/mobile/latest /jquery.mobile.css" rel="stylesheet" type="text/css" /> <script src="http://code.jquery.com /jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com /mobile/latest/jquery.mobile.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Welcome using JS Bin</title> </head>Add code to the
<body>section to create a simple jQuery Mobile page:<body> <!-- Main Page --> <div id="main" data-role="page"> <div data-role="header"> <h1>Welcome - JS BIN</h1> </div> <div id="content" data-role="content"> <p>The jQuery Mobile Cookbook</p> </div> <div data-role="footer"> <h4>Enjoy reading the book ...</h4> </div> </div> </body> </html>The preview or output is now visible in the Output pane on the right side of the screen.
You can now download the source file (or copy-and-paste into a local file) to have a simple working jQuery Mobile application.
Launch the JS Bin web application in your browser. You will see the following screen in your browser, with a basic HTML template (which you can edit) on the left side. A menu bar is available at the top and an Output pane is available on the right, to instantly preview the output of your code:
You can click on the various menu options and see how the CSS or JavaScript panes can be made visible or hidden. Selecting the Auto-run JS option will allow you to run your JS code automatically; you can leave it on. You can also manually run the script by clicking on the Run with JS button.
Click on the Add library menu option and select the jQuery Mobile Latest option as shown in the following screenshot:
This will include the links and references to the jQuery Mobile and jQuery libraries in the <head> section of the HTML.
Note
When you add the jQuery Mobile library to your code using JS Bin, make sure you edit and set the correct versions for both jQuery Mobile and jQuery libraries that you want to use with your application. When this recipe was written, jQuery v1.6.4 was being used in JS Bin, whereas jQuery v1.7.1 is recommended to be used with jQuery Mobile v1.1.1.
Next, edit the <meta> tag to set the correct viewport width and scale, as shown in the code. Then, add a page to the <body> tag using a div tag with data-role="page". Create the header (data-role="header"), page content (data-role="content"), and footer (data-role="footer"), as shown. As you add these sections, you will notice that the Output pane on the right side of the screen gets updated and shows the output preview of your code.
You can also add CSS styles and JavaScript, and check how it works. Finally, your code is ready and you can copy-and-paste it locally into your editor. You can also click on the JS Bin menu option at the top-left to download the file. Now, launch the local file in your browser, and you will see that the output matches what was displayed in the Output pane of JS Bin.
This recipe shows you the simple steps required to create a basic jQuery Mobile application using JS Bin. JS Bin provides many features that are nice to use, such as creating and using ready templates, saving and forking your code using GitHub, and cloning your code. This tool is best suited for when you want to store your files online and collaborate on your source files. For more information and tutorials on using JS Bin, refer to http://jsbin.tumblr.com/.