voici un Widget pour ça :
.......
<link rel="stylesheet" type="text/css" href="ui-lightness/jquery-ui.custom.css">
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" >
(function ($) {
$.widget("ui.collapsiblePanel", {
defaultOptions:{
collapsedIcone :"ui-icon-circle-triangle-s",
expandedIcone :"ui-icon-circle-triangle-n",
height:"auto",
fillSpace:false,
collapsed:true
},
_create: function () {
var opt=$.extend(this.defaultOptions, this.options);
var expanded=opt.collapsed?opt.collapsedIcone:opt.expandedIcone ;
var title=opt.title||this.element.attr("title");
var header=$('<h3 class="ui-helper-reset ui-widget-header '+
' ui-corner-top" style="cursor: pointer; "><div>'+
'<span style="float:left;margin:2px 2px" class="ui-icon '+expanded+
'" ></span><span >'+title+'</span></div></h3>')
.click(function (){
$(this).next("div").slideToggle("fast");
$(this).find("span.ui-icon")
.toggleClass(opt.expandedIcone+" "+opt.collapsedIcone);
}).hover(
function () {
$(this).addClass("ui-state-hover");
},
function () {
$(this).removeClass("ui-state-hover");
});
var container=$('<div role="collapsiblePanel"'+
' class="ui-helper-reset ui-widget"/>')
.css(
"width",opt.width||this.element.width()
) ;
var wrapper=$('<div class="ui-helper-reset ui-widget-content '+
'ui-corner-bottom">')
.css("display",opt.collapsed?"none":"block");
this.element.wrap(container)
.wrap(wrapper)
.parent()
.before(header);
},
_setOption: function (key, value) {
$.Widget.prototype._setOption.apply(this, arguments);
}
});})(jQuery);
</script>
<script type="text/javascript" >
$(function(){
$('.colPanel').collapsiblePanel();
});
</script>
........
<body>
<div class="colPanel" title="le titre" style="height:200px">
le contenu du panneau
</div>
<div class="colPanel" title="un autre titre" style="height:200px">
un autre contenu
</div>
</body>
</html>
on obtient ce ci
0 commentaires:
Enregistrer un commentaire