Function: StickyWin.ui

Creates an html holder for in-page StickyWin popups using a default style. This is not a class; it is a stand alone method.

Author: Aaron Newton

Syntax

StickyWin.ui(caption, body[, options]);
//example with StickyWin Class
new StickyWin({
    content: StickyWin.ui('this is the caption', 'this is the body')
});
 

Arguments

1. caption - (string) the caption for the popup window
2. body - (string or DOM element) content for the popup; a string of html or a DOM element to be injected into the body
3. options - (object) a key/value set of options

Options

• width - (string) width for the box; defaults to 300px.
• css - (string) override for the css styles for the default html
• cssClass - (string) adds a css class in addition to "DefaultStickyWin" to the container
• baseHref - (string) url to the path where the images in the default style are located; defaults to http://www.cnet.com/html/rb/assets/global/stickyWinHTML/
• buttons - (array) array of key/value set of button options (see below)
• cornerHandle - (boolean) true: adds a handle to the corner of the caption area for dragging; false: if the StickyWin is draggable, the whole caption is the drag handle; defaults to false

Buttons

• text - (string) the text of the button
• onClick - (function) function to execute on click
• properties - (object) a name/value set of properties applied to the element using Element.setProperties
• properties.class - (string) a css class name for the button; defaults to "closeSticky" which closes the popup. You can give a different class name and the button won't close the sticky when clicked. You can also give it an additional class name (className: 'closeSticky button') so that it will have your additional class but will still close the popup.

Example

StickyWin.ui('the caption', 'this is the body', {
  width: '400px',
    buttons: [
        {
            text: 'close', 
            onClick: function(){alert('closed!')}
        },
        {
            text: 'okey-dokey', 
            onClick: function(){alert('ok!')},
            properties: {class: 'ok'} //don't close though
        },
        {
            text: 'blah', 
            onClick: function(){alert('blah!')},
            properties: {
                class: 'closeSticky blah', //still closes
                style: 'width: 100px, border: 1px solid red',
                title: 'blah! I say!'
            }
        }
    ]
});
//Resulting HTML:
<div class="DefaultStickyWin">
    <div class="top">
        <div class="top_ul"></div>
        <div class="top_ur">
            <div class="closeButton closeSticky"></div>
            <h1 style="width: 335px;" class="caption">the caption</h1>
        </div>
    </div>
    <div class="middle">
        <div class="body">this is the body</div>
    </div>
    <div class="closeBody">
        <div class="closeButtons">
            <a class="closeSticky button">close</a>
            <a class="ok button">okey-dokey</a>
            <a class="closeSticky blah button" title="blah! I say!" style="width: 100px, border; 1px solid red">blah</a>
        </div>
    </div>
    <div class="bottom">
        <div class="bottom_ll"></div>
        <div class="bottom_lr"></div>
    </div>
</div>
 

Notes

• You can overwite the default StickyWin styles created when this method is invoked by placing a style object in your document (the head or the body) with the id "defaultStickyWinStyle".