<div data-role="tabs" id="tabs">
  <div data-role="navbar">
    <ul>
      <li><a href="#one" data-ajax="false">one</a></li>
      <li><a href="#two" data-ajax="false">two</a></li>
    </ul>
  </div>
  <div id="one" class="ui-body-d ui-content">
  </div>
  <div id="two">
  </div>
</div>

<div data-role="tabs">
	<style scoped="scoped">
            .tablist-left {width: 35%; display: inline-block;}
            .tablist-content {width: 50%; display: inline-block;vertical-align: top;margin-left: 5%;}
	</style>
    <ul data-role="listview" data-inset="true" class="tablist-left">
      <li><a href="#one" data-ajax="false">one</a></li>
      <li><a href="#two" data-ajax="false">two</a></li>
      <li><a href="ajax-content.html" data-ajax="false">three</a></li>
    </ul>
    <div id="one" class="ui-body-d tablist-content">
   </div>
    <div id="two" class="ui-body-d tablist-content">
   </div>
</div>

<script>
	$("#tabs").tabs({collapsible: true});
</script>

<script>
	$("#tabs").tabs({collapsible: true, active: false});
</script>

<script>
	$("#tabs").tabs({active: 1});
</script>

<script>
	$("#tabs").tabs({disabled: [2]});
</script>

<script>
	$("#tabs").tabs({show: true, hide: true});
</script>

<script>
	$("#tabs").tabs({event: "mouseover"});
</script>