StickyWin.ui

docs

StickyWin.ui() returns an html layout that is my default StickyWin skin. I got tired of authoring this over and over again, so it's just a quick way to wrap your content up in a nice window. Feel free to download it and change the styles to suit your needs.

var simpleLayoutExample = StickyWin.ui('the caption', 'this is the body', {width: '400px'});
$('swLayoutTarget').grab(simpleLayoutExample);

The first argument is the caption, the second is the body. They can either be strings or dom elements.

The options are css (to override the default), width, and baseHref (currently cnet.com, where the images in the example reside).

Additionally, you can specify buttons with text and callbacks for any number of buttons:

var simpleLayoutExample = StickyWin.ui('the caption', 'this is the body', {
  width: '400px',
  buttons: [
    {
      text: 'close', 
      onClick: function(){alert('closed!')}
    },
    {
      text: 'okey-dokey', 
      onClick: function(){alert('ok!')}
    },
    {
      text: 'blah', 
      onClick: function(){alert('blah!')}
    }
  ]
});
$('swLayoutTarget2').adopt(simpleLayoutExample);

So an example of this as a StickyWin would look something like:

new StickyWin({
  content: StickyWin.ui('the caption', 'this is the body', {
    width: '400px',
    buttons: [
      {
        text: 'pin',
        className: 'pinSticky'
      },
      {
        text: 'close', 
        onClick: function(){alert('closed!')}
      },
      {
        text: 'okey-dokey', 
        onClick: function(){alert('ok!')}
      }
    ]
  })
});

Here's a single button StickyWin:

new StickyWin({
  content: StickyWin.ui('the caption', 'this is the body', {
    width: '400px',
    buttons: [{
      text: 'okey-dokey', 
      onClick: function(){alert('ok!')}
    }]
  })
});

Note: The onClick event here should not be confused with the onClose event for StickyWin. That gets fired also when the window is closed. If the user clicks the little "x" button in the corner (or any other item you have assigned as a close link - see StickyWin) the onClose event is fired for StickyWin, but NOT for this html block. So if you want to assign an event to the closing of the window, use the StickyWin onClose event, while if you want to assign an event to the user clicking a big button here - which can read whatever text you want ('cancel' or 'no thanks' or even 'ok'), then use this onClick event.

One more option is to add a drag handle to the caption area. If you don't use this option but are using StickyWin.Drag.js, the whole caption is draggable, but if you don't want that, you can add this little handle:

new StickyWin({
  draggable: true,
  content: StickyWin.ui('the caption', 'this is the body', {
    width: '400px',
    cornerHandle: true,
    buttons: [{
      text: 'okey-dokey', 
      onClick: function(){alert('ok!')}
    }]
  })
});