Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Split Desktop (gallery-split-desktop) on cdn

Last Updated: 05/27/11

+ 0 -

paolo nesti poggi

YUI Contributor

See 2 more by this user.

Created: 03/28/11
Last CDN Push: 07/6/11
Build Tag: gallery-2011.07.06-19-30
Project: YUI 3
License: YUI BSD
YUI Version: 3.3.0
Free for use.

An innovative GUI paradigm. It works the opposite way of usual desktops: It hides all functionalities until the user decides to explore the space. It's up to the developer to design a path of actions for the user to discover the functionalities when the user needs them. It is inspired by human centered design principles as described by Donald Norman.

A knob is presented at the crossing of three lines and a "Drag here" image below it. Drag the knob to open the two upper panes (left or right) to reveal the explaining text.

Leave the bottom pane empty and only fill it depending on actions done in the upper panes.

Testing the module
To test this module you can use it directly from the CDN. Just copy and paste the example code shown below.
See also a tutorial and working example on: http://www.eaktion.com/splitdesktop/

Events
Some events are published to aid adding behaviours at some interesting points:

splitDesktop:draginit (initial drag, when the background arrow gets hidden)
splitDesktop:dragstart (each subsequent drag:start event)
splitDesktop:dragend (each drag:end event)
splitDesktop:enterMain (when mouse hovering inside the bottom pane from anywhere else)
splitDesktop:enterNW (when mouse hovering inside the North West pane from anywhere else)
splitDesktop:enterNE (when mouse hovering inside the North East pane from anywhere else)

Include the provided and required css file

<link rel="stylesheet" type="text/css" href="/gallery-split-desktop/assets/skins/sam/gallery-split-desktop.css"/>

Write the required divs on your page



<body>

<div id="ea_page_wrapper"> 

    <div id="ea_crown">

        <div id="ea_nw">

            <div id="ea_body_nw" class="sdt-active">

            Left Pane

            </div><!-- body_nw -->

        </div><!-- ea_nw -->

        <div id="ea_ne" class="sdt-active">

            <div id="ea_borders">

                <div id="ea_body_ne">

                Right Pane

                </div><!-- ea_body_ne -->

            </div><!-- ea_borders -->

        </div><!-- ea_ne -->

    </div><!-- ea_crown   -->

    

    <div id="ea_main" class="sdt-active">

        <div id="ea_body_main">

        Bottom Pane

        </div><!-- ea_body_main   -->

    </div><!-- ea_main   -->

</div><!-- ea_page_wrapper   -->

Before the closing body tag download and instantiate your desktop:

Code Sample

<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>

YUI({
	gallery: 'gallery-2011.05.18-19-11'
 
}).use('gallery-split-desktop', function(Y) {
 
var sdt = new Y.Widget.SplitDesktop(
	{
		/* 	// See all configurable default values below.
			// If you need to change the prefix of your ids, remember to 
			// edit all prefixes in the provided css file
		prefix: 	'ea_'
		,pageWidth: 	960
		,bordersColor: 	'#99cccc'
		,pathToImages: 	'/gallery-split-desktop/assets/'
		,dragHereImg: 	'drag-here.png'
		,borderPixImg: 	'pix-blue.gif'
		,handleImg: 	'center-handle.png'
		,dragHereLeft: 	162
		,dragHereTop: 	7
		,mainHeight: 	700
		,crownHeight: 	30
		*/
               /*  To react to events */
               on: {
                          'enterMain' : function () { Y.log("Entering the main pane");}
                          ,'enterNW' : function () { Y.log("Entering the northwest pane");}
                          ,'enterNE' : function () { Y.log("Entering the northeast pane");}
                     }
 
	}
);
 
sdt.render();
 
 
 
});

Forum Posts

Subject	Author	Date
Really new?	John Lindal	06/23/11
Re: Really new?	paolo nesti poggi	06/30/11