example-ui-samples.html

<div style="padding:5px;"></div>
<div class="internalNav uiExamples" style="background:#f3f3f3; padding:10px;">
<a href="bottom-tabs.html">Bottom Tabs</a> &nbsp;|&nbsp; <a href="left-tabs.html">Left Tabs</a>&nbsp;|&nbsp; <a href="right-tabs.html">Right Tabs</a>
</div>
<div id="moreUI">
<!-- Bottom Tabs -->
<h1>Bottom Tabs <sup id="ver" class="version"></sup></h1>
<div class="tabsCntents">
  <div id="cms_content">
    <p>In the 1990s, most web sites were based on complete HTML pages; each user action required that the page be re-loaded from the server (or a new page loaded). This process is inefficient, as reflected by the user experience: all page content disappears then reappears, etc. Each time a page is reloaded due to a partial change, all of the content must be re-sent instead of only the changed information. This can place additional load on the server and use excessive bandwidth.</p>
    <p>Asynchronous loading of content first became practical when Java applets were introduced in the first version of the Java language in 1995. These allow compiled client-side code to load data asynchronously from the web server after a web page is loaded.[3] In 1996, Internet Explorer introduced the iframe element to HTML, which also enabled asynchronous loading.[4] In 1999, Microsoft utilized its iframe technology to dynamically update the news stories and stock quotes on the default page for Internet Explorer (http://home.microsoft.com). In 1999, Microsoft created the XMLHTTP ActiveX control in Internet Explorer 5, which was later adopted by Mozilla, Safari, Opera and other browsers as the XMLHttpRequest JavaScript object.[4][5] Microsoft has adopted the native XMLHttpRequest model as of Internet Explorer 7, though the ActiveX version is still supported. The utility of background HTTP requests to the server and asynchronous web technologies remained fairly obscure until it started appearing in full scale online applications such as Outlook Web Access (2000)[6] and Oddpost (2002), and later, Google made a wide deployment of Ajax with Gmail (2004) and Google Maps (2005).</p>
    <p>The term Ajax was coined on 18 February 2005 by Jesse James Garrett in an article entitled "Ajax: A New Approach to Web Applications", based on techniques used on Google web pages.</p>
    <p>On 5 April 2006 the World Wide Web Consortium (W3C) released the first draft specification for the XMLHttpRequest object in an attempt to create an official web standard.</p>
    <a href="http://en.wikipedia.org/wiki/Ajax_%28programming%29" target="_blank">Source: Wiki</a> </div>
  <div id="interactive_content">
    <p>Presentation is the practice of showing and explaining the content of a topic to an audience or learner. Presentations come in nearly as many forms as there are life situations. In the business world, there are sales presentations, informational and motivational presentations, first encounters, interviews, briefings, status reports, image-building, and of course, the inevitable training sessions.</p>
    <p>Although individuals most often think of presentations in a business meeting context, there are countless occasions when that is not the case. For example, a Non Profit Organization presents the need for a capital fund-raising campaign to benefit the victims of a recent tragedy; a school district superintendent presents a program to parents about the introduction of foreign-language instruction in the elementary schools;an artist demonstrates decorative painting techniques to a group of interior designers; a horticulturist shows garden club members or homeowners how they might use native plants in the suburban landscape; a police officer addresses a neighborhood association about initiating a safety program.</p>
    <a href="http://en.wikipedia.org/wiki/Presentation" target="_blank">Source: Wiki</a> </div>
  <div id="ecommerce_content">
    <p>India has an internet user base of over 100 million users. The penetration of e-commerce is low compared to markets like the United States and the United Kingdom but is growing at a much faster rate with a large number of new entrants. The industry consensus is that growth is at an inflection point with key drivers being:</p>
    <ul>
      <li>Increasing broadband Internet (growing at 20% MoM) and 3G penetration.</li>
      <li>Rising standards of living and a burgeoning, upwardly mobile middle class with high disposable incomes</li>
      <li>Availability of much wider product range (including long tail and Direct Imports) compared to what is available at brick and mortar retailers</li>
      <li>Busy lifestyles, urban traffic congestion and lack of time for offline shopping</li>
      <li>Lower prices compared to brick and mortar retail driven by disintermediation and reduced inventory and real estate costs</li>
    </ul>
    <a href="http://en.wikipedia.org/wiki/Presentation" target="_blank">Source: Wiki</a> </div>
  <div id="ajax_content">
    <p>In the 1990s, most web sites were based on complete HTML pages; each user action required that the page be re-loaded from the server (or a new page loaded). This process is inefficient, as reflected by the user experience: all page content disappears then reappears, etc. Each time a page is reloaded due to a partial change, all of the content must be re-sent instead of only the changed information. This can place additional load on the server and use excessive bandwidth.</p>
    <p>Asynchronous loading of content first became practical when Java applets were introduced in the first version of the Java language in 1995. These allow compiled client-side code to load data asynchronously from the web server after a web page is loaded.[3] In 1996, Internet Explorer introduced the iframe element to HTML, which also enabled asynchronous loading.[4] In 1999, Microsoft utilized its iframe technology to dynamically update the news stories and stock quotes on the default page for Internet Explorer (http://home.microsoft.com). In 1999, Microsoft created the XMLHTTP ActiveX control in Internet Explorer 5, which was later adopted by Mozilla, Safari, Opera and other browsers as the XMLHttpRequest JavaScript object.[4][5] Microsoft has adopted the native XMLHttpRequest model as of Internet Explorer 7, though the ActiveX version is still supported. The utility of background HTTP requests to the server and asynchronous web technologies remained fairly obscure until it started appearing in full scale online applications such as Outlook Web Access (2000)[6] and Oddpost (2002), and later, Google made a wide deployment of Ajax with Gmail (2004) and Google Maps (2005).</p>
    <p>The term Ajax was coined on 18 February 2005 by Jesse James Garrett in an article entitled "Ajax: A New Approach to Web Applications", based on techniques used on Google web pages.</p>
    <p>On 5 April 2006 the World Wide Web Consortium (W3C) released the first draft specification for the XMLHttpRequest object in an attempt to create an official web standard.</p>
    <a href="http://en.wikipedia.org/wiki/Ajax_%28programming%29" target="_blank">Source: Wiki</a> </div>
  <div id="web2_content">
    <p>Web 2.0 is a loosely defined intersection of web application features that facilitate participatory information sharing, interoperability, user-centered design, and collaboration on the World Wide Web. A Web 2.0 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community, in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them. Examples of Web 2.0 include social networking sites, blogs, wikis, video sharing sites, hosted services, web applications, mashups and folksonomies.</p>
    <p>The term is closely associated with Tim O'Reilly because of the O'Reilly Media Web 2.0 conference in late 2004. Although the term suggests a new version of the World Wide Web, it does not refer to an update to any technical specification, but rather to cumulative changes in the ways software developers and end-users use the Web. Whether Web 2.0 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee, who called the term a "piece of jargon", precisely because he intended the Web in his vision as "a collaborative medium, a place where we [could] all meet and read and write". He called it the "Read/Write Web".</p>
    <a href="http://en.wikipedia.org/wiki/Web_2.0" target="_blank">Source: Wiki</a> </div>
  <div id="flash_content">
    <p>Multimedia is media and content that uses a combination of different content forms. The term can be used as a noun (a medium with multiple content forms) or as an adjective describing a medium as having multiple content forms. The term is used in contrast to media which use only rudimentary computer display such as text-only, or traditional forms of printed or hand-produced material. Multimedia includes a combination of text, audio, still images, animation, video, or interactivity content forms.</p>
    <p>Multimedia is usually recorded and played, displayed or accessed by information content processing devices, such as computerized and electronic devices, but can also be part of a live performance. Multimedia (as an adjective) also describes electronic media devices used to store and experience multimedia content. Multimedia is distinguished from mixed media in fine art; by including audio, for example, it has a broader scope. The term "rich media" is synonymous for interactive multimedia. Hypermedia can be considered one particular multimedia application.</p>
    <a href="http://en.wikipedia.org/wiki/Multimedia" target="_blank">Source: Wiki</a> </div>
</div>

<div class="tabsPanel">
	<ul class="tabholder bottomTabs">
    	<li id="cms">CMS Systems</li>
        <li id="interactive">Interactive Presentations</li>
        <li id="ecommerce">Ecommerce Solutions</li>
        <li id="ajax">Ajax</li>
        <li id="web2">Web 2.0</li>
        <li id="flash">Flash Design</li>
    </ul>
</div>
<!-- /Bottom Tabs -->
</div>
<script type="text/javascript">
var oTabs = $(".bottomTabs").msTabs({tabs:'li', effects:'fade', speed:'fast', selected:'active'}).data("msTabs");
//no use
$("#ver").html("v"+oTabs.getVersion());

$(".uiExamples a").click(function(evt) {
	evt.preventDefault();
	var url = $(this).prop("href");
	loadFile(url, "moreUI");
	return false;
});

</script>