How can I add an image to the west toggler?

583 Views Asked by At

I'm trying to add an image to the toggler (it's the bar on the left that turns orange when your mouse cursor moves over it). How can I add an image there?

You can see the example here:

http://jsfiddle.net/XjA4v/

HTML

<div class="ui-layout-center" id="inner">
    <div class="ui-layout-center">Inner Center</div>
</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-west">West</div>

Javascript

myLayout = $('body').layout({ //    reference only - these options are NOT required because 'true' is the default
    //applyDefaultStyles: true,
    //stateManagement__enabled: true,

    closable: true, // pane can open & close
    resizable: true, // when open, pane can be resized 
    slidable: false, // when closed, pane can 'slide' open over other panes - closes on mouse-out
    livePaneResizing: true,

    north__size: 100,
    north__minSize: 100,
    north__maxSize: 100,
    north__closable: false,
    north__resizable: false,
    north__spacing_open: 0,
    north__spacing_closed: 0,

    west__size: 177,
    west__minSize: 50,
    west__maxSize: 260,
    west__togglerLength_closed: '100%', // toggle-button is full-width of resizer-bar
    west__spacing_closed: 20, // big resizer-bar when open (zero height)
    west__initClosed: true
});
1

There are 1 best solutions below

0
On BEST ANSWER
 .ui-layout-toggler-hover{
    background:url(''); //your image url
 }

http://jsfiddle.net/XjA4v/1/