如何将图像添加到西方切换器?

时间:2013-09-02 04:35:04

标签: javascript jquery jquery-ui jquery-ui-layout

我正在尝试将图像添加到切换器(当鼠标光标在其上方移动时,左侧的栏会变为橙色)。如何在那里添加图片?

您可以在此处看到示例:

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 个答案:

答案 0 :(得分:1)

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

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