SOURCE CODE: Basic HTML Swap
VIEW EXAMPLE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Basic HTML Swap | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="animation widget Uize.Widget.Swap.Html"/>
  <meta name="description" content="See a demo of the HTML swapper widget, which provides a JavaScript animation transition effect when swapping out the HTML that the widget displays."/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>
</head>

<body>

<script type="text/javascript" src="../js/Uize.js"></script>

<h1 class="header">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>
</h1>

<div class="main">
  <h1 class="document-title">
    <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
    Basic HTML Swap
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/swap-html.html" class="buttonLink">SOURCE</a></div>
    </div>
  </h1>

  <!-- explanation copy -->

  <div class="explanation">
    <p>In this example, an instance of the <a href="../reference/Uize.Widget.Swap.Html.html"><code>Uize.Widget.Swap.Html</code></a> class is wired up to a div in the document in order to provide a JavaScript animation transition effect when swapping out the HTML. Making the widget display new HTML with an accompanying transition effect is as simple as setting the widget's <code>content</code> state property. You can set the <code>content</code> state property to any HTML, including HTML containing images and complex layouts, although in this case the HTML is merely styles <code>div</code> tags. Use the buttons below to switch back and forth between different content.</p>
  </div>

  <!-- swap HTML layout with UI to be wired up -->

  <center id="page-buttons" style="margin-bottom: 20px;"></center>
  <div id="page_swap" style="position:relative; width:420px; height:320px; border:1px solid #555; margin:auto;"></div>
</div>

<!-- JavaScript code to make the static slideshow HTML "come alive" -->

<script type="text/javascript">

Uize.require (
  [
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example',
    'Uize.Widget.Swap.Html',
    'Uize.Widgets.Container.Widget',
    'Uize.Widgets.Button.Widget'
  ],
  function () {
    'use strict';

    /*** create the example page widget ***/
      var page = window.page = UizeSite.Page.Example ();

    /*** add the HTML swap child widget ***/
      page.addChild (
        'swap',
        Uize.Widget.Swap.Html,
        {
          background:'none',
          viewSeedSizeX:0,
          viewSeedSizeY:1,
          viewSeedAlignX:.5,
          viewSeedAlignY:.5,
          dissolve:true,
          viewContentAlignX:'none',
          viewContentAlignY:'none',
          crossFade:true,
          built:false
        }
      ).fade.set ({duration:1000});

    /*** add the content selector buttons ***/
      page.addChild ('buttons',Uize.Widgets.Container.Widget,{built:false})
        .addChildren (
          {
            content1:{
              text:'Content 1',
              action:function () {
                page.children.swap.set ({
                  content:
                    '<div style="height:100%; background:#adbebf url(../images/brushed-metal.jpg) repeat-x left top; padding:20px; font-family:Arial; font-size:30px; text-shadow:1px 0 2px #fff;">' +
                      'Sunlight can be converted into electricity using photovoltaics (PV).<br/><br/>' +
                      '<p style="font-size:20px; letter-spacing:5px; font-style:italic; text-shadow:1px 0 2px #fff;">' +
                        'A solar cell, or photovoltaic cell (PV), is a device that converts light into electric current using the photoelectric effect.' +
                      '</p>' +
                    '</div>'
                });
              }
            },
            content2:{
              text:'Content 2',
              action:function () {
                page.children.swap.set ({
                  content:
                    '<div style="height:100%; background:url(http://rlv.zcache.com/isapi/designall.dll?action=realview&rvtype=pre&view=front&pid=228335039877617170&max_dim=500) no-repeat -2px -2px; padding:20px; font-family:Times; color:#ccc; font-size:23px; text-align:left; text-shadow:2px 2px 2px #000;">' +
                      '<hr style="height:10px; background:#adbebf url(../images/brushed-metal.jpg) repeat-x left top;"/>' +
                      'Wind power is the conversion of wind energy into a useful form, such as electricity, using wind turbines. Large scale wind farms are typically connected to the local electric power transmission network, with smaller turbines being used to provide electricity to isolated locations.' +
                      '<hr style="height:10px; background:#adbebf url(../images/brushed-metal.jpg) repeat-x left top;"/>' +
                    '</div>'
                });
              }
            }
          },
          {widgetClass:Uize.Widgets.Button.Widget}
        )
      ;

    /*** wire up the page widget ***/
      page.wireUi ();
  }
);

</script>

</body>
</html>