Scripting a dynamically added button

Buttons are standard HTML form elements that are enhanced by the button plugin in the jQuery Mobile framework to make them finger friendly and also to look good in a wide variety of mobile devices. You can add buttons to your app by using the <button> tag or the <input> tag. You can also style the anchor element as a button by adding the data-role="button" attribute to it. This recipe shows you how to dynamically add a button to a page using JavaScript and bind an action to this newly added button.

Getting ready

Copy the full code of this recipe from the code/04/dynamic-button sources folder. You can launch this code using the URL http://localhost:8080/04/dynamic-button/main.html.

How to do it...

In main.html, create the #main page and add a button to it. When you click on this button, use JavaScript and create a second button and also assign an action to it:

  1. Create the #main page in main.html and add the following code content to it:
    <div data-role="content">
  <input type="submit" id="addContentBtn" data-inline="true"
    value="Click to add new button"><br>
  <div id="newcontent"></div>
</div>
  2. Add the following script to handle the click event of the button. In the callback function, create the new button and also assign an action to it.
    $("#main").live("pageinit", function(event) {
  $("#addContentBtn").bind("click", function(event, ui) {
    var str="<a href='#page2' data-role='button' data-inline='true'>"
           +"Disable 1st button and Go to Page 2</a>";
  $("#newcontent").html(str).trigger("create")
        .bind("click", function(event, ui) {
      $("#addContentBtn").button("disable");
    });
  });
});
  3. Add #page2 as given in the following code. This is a multi-page document. This page is opened when you click the dynamically added button.
    <div id="page2" data-role="page" data-add-back-btn="true">
  <div data-role="header">
    <h1>Page2 Header</h1>
  </div>
  <div data-role="content">
    <h3>This is Page 2</h3>
  </div>
</div>

How it works...

Create main.html with a page #main and add a button with id="addContentBtn" to the page content. Also add an empty div container, id="newcontent" to the page. When you load this page, you will see only one button with text Click to add new button displayed on the screen.

Next add the given script. Add a pageinit event handler that gets invoked after the page has been initialized. Here, bind the click event of the button to a callback function. In the callback function, add an anchor link with data-role="button" to the empty "#newcontent" div. Since the page is already initialized, you have to explicitly call the create method to trigger the framework to revisit this link and enhance it to a button. Now when you click on the first button, you will see that the second button, Disable 1st button and Go to Page 2, is created and displayed. In the script also add code to bind the click event of the new button to a callback function. Here, invoke the disable method on the first button.

Finally create a new page with id="page2" that will get opened when you click on the new button. Add the data-add-back-btn="true" to #page2 to provide a Back button to help navigate back to the #main page. Now when you click on the second button, the dynamically added script gets invoked and the first button is disabled and the page navigates to open page2. You can click on the Back button in page2 and go back to the #main page. You will see that the first button is now disabled by the dynamic script that you had added.

There's more...

The button plugin also provides methods to enable, disable, and refresh the button:

$(buttonselector).button("enable");
$(buttonselector).button("disable");
$(buttonselector).button("refresh");

Button options

Buttons provide numerous markup options using the data- attributes. They are corners (data-corners), icon (data-icon), iconpos (data-iconpos), shadow (data-shadow), iconshadow (data-iconshadow), inline (data-inline), and theme (data-theme).

You can call the buttonMarkup method on an anchor link to enhance it as a button. The following line of code takes a native anchor link and adds the button role to it and also sets the data-icon="alert" and data-inline="true" attributes:

$("a").buttonMarkup({ icon: "alert", inline: "true"});
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
52.14.17.40