Code: index.phtml

<?php
    $this->jQuery()->addStylesheet('jquery.ui-1.6b/themes/flora/flora.all.css');
?>

<?php $this->jQuery()->onLoadCaptureStart(); ?>
<?php $this->jQuery()->onLoadCaptureEnd(); ?>

<h2>Widgets</h2>

<h3>Accordion Container</h3>
<p><?= $this->accordionContainer()
    ->addPane("accord1", "Accord 1", "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam arcu neque, tincidunt in, ullamcorper sit amet, ullamcorper vitae, neque. Nulla volutpat, nibh non tincidunt sagittis, lacus pede tempor libero, pellentesque dignissim eros purus a ligula. Morbi gravida ante a nisi. Ut feugiat, lorem eget tincidunt feugiat, justo erat rutrum dui, sed consectetuer sapien augue ac mi. Sed congue sagittis neque. Nunc vulputate, purus a fringilla iaculis, odio erat facilisis libero, a luctus leo nunc sit amet nisi. Curabitur non urna. Morbi eu odio quis eros varius posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis feugiat suscipit magna. Pellentesque eros nibh, eleifend viverra, tempor sed, interdum ut, erat. Sed posuere accumsan eros.")
    ->addPane("accord1", "Accord 2", "In ac odio. Vivamus scelerisque aliquet mi. Nam nec elit. Nunc tristique tempor massa. Donec vel ante. Maecenas nec nisi eu urna gravida bibendum. Quisque gravida. Etiam risus risus, facilisis in, fermentum ac, dignissim eget, justo. Sed mattis erat. Donec nec dolor. Fusce pede. Praesent id mi. Nunc non mi. Aenean venenatis, justo aliquam auctor convallis, dolor urna varius dolor, ac pellentesque nisi risus ac augue. Nunc lobortis elementum ipsum. Mauris aliquet sem id erat.")
    ->addPane("accord1", "Accord 3", "Proin feugiat velit consequat lectus. Aenean eget neque eu est cursus vestibulum. Mauris odio magna, malesuada et, gravida sed, lacinia eu, enim. Donec lacinia malesuada mi. Maecenas nec pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis aliquam, arcu in feugiat consequat, tortor felis elementum ante, quis aliquet mauris risus vel orci. Nulla facilisi. Pellentesque lacus dolor, pharetra vitae, consectetuer vitae, adipiscing ac, libero. Aenean euismod sem a diam. Quisque condimentum augue id augue. Phasellus sed sem. Aliquam faucibus diam. Quisque mauris ante, consequat euismod, ullamcorper consectetuer, tempor non, felis. Mauris consequat, arcu vitae porta eleifend, nunc lectus pellentesque mauris, et eleifend nulla magna vitae dolor.")
    ->accordionContainer("accord1", array(), array("class" => "flora")); ?>

<h3>DatePicker</h3>
<p><?= $this->datePicker("date1", "12.12.2007", array(), array()); ?></p>

<h3>AutoComplete</h3>
<p><? $data = array('new York', 'Tokyo', 'Berlin', 'London', 'Sydney', 'Bern', 'Boston', 'Baltimore'); ?>
<?= $this->autoComplete("ac1", "New York", array('data' => $data), array()); ?></p>

<h3>Slider</h3>
<p><?= $this->slider("slider1", 100); ?></p>

<h3>Tabs Container</h3>
<p><?= $this->tabContainer()
    ->addPane("tab1", "Tab 1", "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam arcu neque, tincidunt in, ullamcorper sit amet, ullamcorper vitae, neque. Nulla volutpat, nibh non tincidunt sagittis, lacus pede tempor libero, pellentesque dignissim eros purus a ligula. Morbi gravida ante a nisi. Ut feugiat, lorem eget tincidunt feugiat, justo erat rutrum dui, sed consectetuer sapien augue ac mi. Sed congue sagittis neque. Nunc vulputate, purus a fringilla iaculis, odio erat facilisis libero, a luctus leo nunc sit amet nisi. Curabitur non urna. Morbi eu odio quis eros varius posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis feugiat suscipit magna. Pellentesque eros nibh, eleifend viverra, tempor sed, interdum ut, erat. Sed posuere accumsan eros.")
    ->addPane("tab1", "Tab 2", "In ac odio. Vivamus scelerisque aliquet mi. Nam nec elit. Nunc tristique tempor massa. Donec vel ante. Maecenas nec nisi eu urna gravida bibendum. Quisque gravida. Etiam risus risus, facilisis in, fermentum ac, dignissim eget, justo. Sed mattis erat. Donec nec dolor. Fusce pede. Praesent id mi. Nunc non mi. Aenean venenatis, justo aliquam auctor convallis, dolor urna varius dolor, ac pellentesque nisi risus ac augue. Nunc lobortis elementum ipsum. Mauris aliquet sem id erat.")
    ->addPane("tab1", "Tab 3", "Proin feugiat velit consequat lectus. Aenean eget neque eu est cursus vestibulum. Mauris odio magna, malesuada et, gravida sed, lacinia eu, enim. Donec lacinia malesuada mi. Maecenas nec pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis aliquam, arcu in feugiat consequat, tortor felis elementum ante, quis aliquet mauris risus vel orci. Nulla facilisi. Pellentesque lacus dolor, pharetra vitae, consectetuer vitae, adipiscing ac, libero. Aenean euismod sem a diam. Quisque condimentum augue id augue. Phasellus sed sem. Aliquam faucibus diam. Quisque mauris ante, consequat euismod, ullamcorper consectetuer, tempor non, felis. Mauris consequat, arcu vitae porta eleifend, nunc lectus pellentesque mauris, et eleifend nulla magna vitae dolor.")
    ->tabContainer("tab1", array(), array("class" => "flora")); ?>

<?= $this->dialogContainer("dialog1", "This is a jQuery UI Dialog generated by ZendX_JQuery View Helper.", array(), array('class' => 'flora')); ?>

<h3>Spinner</h3>
<p><?= $this->spinner("spinner2", "100", array('min' => 0, 'max' => 1000, 'start' => 100)); ?></p>

<h3>ColorPicker</h3>
<p><?= $this->colorPicker("picker1", "", array(), array()); ?></p>

Code: layout.html

<html>
    <head>
        <title>Zend_JQuery_Helper :: Demo 2</title>
        <style type="text/css">
        <!--
            .ui-spinner-up { background-image: url(jquery.ui-1.6b/themes/flora/i/slider-handle.gif); }
            .ui-spinner-down { background-image: url(jquery.ui-1.6b/themes/flora/i/slider-handle.gif); }
        --></style>
        <link rel="Stylesheet" href="views/colorpicker.css" type="text/css" />
        <?= $this->jQuery()
                 ->setUiLocalPath("jquery.ui-1.6b/ui/packed/jquery.ui.all.packed.js");
        ?>
    </head>

    <body>
        <div class="content" style="width: 600px;">
            <h2>Information on the ZendX jQuery Proposals</h2>

            <p>This is a demo showing the proposed functionality of the <a href="http://framework.zend.com/wiki/display/ZFPROP/ZendX_JQuery_View_Helper_JQuery+-+Benjamin+Eberlei">ZendX JQuery helper</a>.
            It utilizes the View Helpers that are <a href="http://framework.zend.com/wiki/display/ZFPROP/ZendX_JQuery+UI+Widgets+Extension+-+Benjamin+Eberlei">proposed
            in the UI Widgets extensions</a>. You can see that this demo uses jQuery 1.2.6 and the jQuery 1.6b release candidate.</p>

            <p>There is a problem with the ColorPicker since i don't seem to get a good stylesheet to make this component work properly. Sadly there is not yet
            a good documentation on it (or i havent found it). Also the slider looks broken but i only implemented the image so ugly. You have to press and hold
            the mouse button on the up- or down-pointing errors to get feedback on this component.</p>

            <p>Now there is also a <a href="formdemo.php">demo showing how jQuery will be integrated with Zend Form</a>. You will see it looks exactly like the Dojo implementation.</p>

            <?= $this->layout()->content; ?>
        </div>

        <h2>Code: index.phtml</h2>
        <blockquote style="border: 1px solid #000; margin-top: 20px; padding: 10px; background-color: #f4f4f4; overflow:scroll;"><code style="font-size: 10pt;">
        <? show_source("index.phtml"); ?>
        </code></blockquote>

        <h2>Code: layout.html</h2>
        <blockquote style="border: 1px solid #000; margin-top: 20px; padding: 10px; background-color: #f4f4f4; overflow:scroll;"><code style="font-size: 10pt;">
        <? show_source(__FILE__); ?>
        </code></blockquote>
    </body>
</html>