[SOLVED] How to organize and implement multiple jQuerymobile themes in one application?

How to organize and implement multiple jQuerymobile themes in one application?

I'm implementing jquerymobile themes via themeroller shared. I have applied two swatches a and b buttons are blue but flip switch is orange. How can I apply both themes in one page?

I have tried this:

  <fieldset data-role="controlgroup">

  <div class="ui-field-contain">
      <label for="txtEmail" class="ui-hidden-accessible"></label>
      <input name="txtEmail" id="txtEmail" placeholder="Email" value="" type="text" data-clear-btn="true"  data-theme="a" />
  </div>
  <div class="ui-field-contain">

      <label for="txtPassword" class="ui-hidden-accessible"></label>
      <input name="txtPassword" id="txtPassword" placeholder="Password" value="" type="password" data-clear-btn="true"  data-theme="a" />
       </div>

  <div class="containing-element"  >  
   
    <label class="fliplabel"   for="flipRemember">Remember me:</label>
      
  <select id="flipRemember" name="flipRemember" data-role="slider"  data-theme="b" >
          <option value="No">No</option>
          <option value="Yes">Yes</option>
      </select>
   
   </div>

       <div class="ui-field-contain" class="fieldbutton">
          <a id="btnSignin" data-theme="a" data-role="button"  data-theme="a"  href="javascript:void(0);">Sign In</a>
       </div> 

</fieldset>

Solution

What you've got there should work. You'll need to include the jquerymobile.js and jquerymobile.css, as well as your theme's css file. Aside from that, you can apply theme directly to parts of a page (either jquerymobile controls, or general page elements) by using the theme related css classes such as ui-body-b (shown here at the bottom of the page). I've put together a jsfiddle as well to give an example