sandbox/yui/accordion.html

	accordion.html revision 9cdb1aa8d3a7901f789c2ad7a6ea00e804a9abeb
<!doctype html>
<html>
<head><title>Test Page</title></head>
<body class="yui-skin-sam">

<div id="myaccordion"></div>
<div id="acc1"></div>
<div id="cb"></div>
<div id="time"></div>

	<!-- Bootstrap Script //-->
	<script type="text/javascript" src="/yui3/build/yui/yui-debug.js"></script>
	<!-- Initialization process //-->
	<script type="text/javascript">
		YUI_config = {
		    filter: 'raw'
		};
	</script>
	<script type="text/javascript">
		YUI().use('dd', function (Y) {

            Y.log('first block');

		});
	</script>
	<script type="text/javascript">
		YUI().use('node', function (Y) {

            Y.log('second block');

		});
/*
YUI({
    modules: {
        'gallery-node-accordion': {
            fullpath: 'http://yui.yahooapis.com/gallery-2009.10.27-23/build/gallery-node-accordion/gallery-node-accordion-min.js',
            requires: ["node-base","node-style","plugin","node-event-delegate","classnamemanager"],
            optional: ["anim"],
            supersedes: []
        }
    }
}).use('gallery-node-accordion', function(Y) {

    Y.one("#myaccordion").plug(Y.Plugin.NodeAccordion);

});
*/
YUI({
    modules: {
        'gallery-accordion': {
            fullpath: 'http://yui.yahooapis.com/gallery-2009.10.27/build/gallery-accordion/gallery-accordion-min.js',
            requires: ["event","anim-easing","dd-constrain","dd-proxy","dd-drop","widget","widget-stdmod","json-parse"],
            skinnable: true,
            optional: [],
            supersedes: []
        }
    }
}).use('gallery-accordion', function(Y) {
    var item1, item2, item3, accordion;

    accordion = new Y.Accordion( {
        contentBox: "#acc1",
        useAnimation: true,
        collapseOthersOnExpand: true
    });

    accordion.render();

    item1 = new Y.AccordionItem( {
        label: "Item1, added from script",
        expanded: true,
        contentBox: "dynamicContentBox1",
        contentHeight: {
            method: "fixed",
            height: 80
        },
        closable: true
    } );

    item1.set( "bodyContent", "This is the body of the item, added dynamically to accordion.<br>Content height has been set as \"fixed, 80px\"." );

    accordion.addItem( item1 );

    item2 = new Y.AccordionItem( {
        label: "Item2, added from script",
        expanded: true,
        contentBox: "dynamicContentBox2",
        contentHeight: {
            method: "stretch"
        }
    } );

    item2.set( "bodyContent", "This is the body of the item, added dynamically to accordion, before item1.<br>Content height has been set as \"stretch\"." );

    accordion.addItem( item2, item1 );

    item3 = new Y.AccordionItem( {
        label: "Item3, added from script",
        expanded: true,
        alwaysVisible: true,
        contentBox: "dynamicContentBox3",
        contentHeight: {
            method: "auto"
        }
    } );

    item3.set( "bodyContent", "<div style='position:relative;'>This is the body of the item, added dynamically to accordion.<br>Content height has been set as \"auto\".</div>" );

    accordion.addItem( item3 );

});

YUI({
    modules: {
        'gallery-timepicker': {
            fullpath: 'http://yui.yahooapis.com/gallery-2009.10.27-23/build/gallery-timepicker/gallery-timepicker-min.js',
            requires: ["oop","event-custom","attribute","base","dom","classnamemanager","widget","event"],
            optional: [],
            supersedes: []
        }
    }
}).use('gallery-timepicker', function(Y) {

 var picker = new Y.Saw.Timepicker({contentBox: '#cb'}); //assuming this exists
                picker.render();

                //hide
                picker.hide();

                //show
                picker.show();

                //set am or pm with class constants
                picker.set('time.ampm', picker.AM);

                //subscribe to events to do cool stuff:
                picker.subscribe('timechange', function(data){
                    //fires when the time changes

                    //put the 12 hour string into the input. s24hour is also available
                    Y.get('#time').set('value' ,data.s12hour); //#time should be a text input

                    //the data object also has members for hour, minute, ampm. Ampm is
                    //an int identified by picker.AM or picker.PM
                });

                picker.subscribe('cellclick', function(e){
                    //fires when a cell is clicked.
                   this.hide();
                },picker);
});

YUI({
    modules: {
        'gallery-idletimer': {
            fullpath: 'http://yui.yahooapis.com/gallery-2009.10.27-23/build/gallery-idletimer/gallery-idletimer-min.js',
            requires: ["event","event-custom"],
            optional: [],
            supersedes: []
        }
    }
}).use('gallery-idletimer', function(Y) {

    Y.IdleTimer.subscribe("idle", function(){
        //handle when the user becomes idle
    });

    Y.IdleTimer.subscribe("active", function(){
         //handle when the user becomes active
    });

    //start the timer with a default timeout of 30s
    Y.IdleTimer.start();
});

	</script>

</body>
</html>