La toile de diffusion d’Unisciel

#nested_container {
position:relative;
left:170px;
top: 25px;
/*width:600px;
height:400px;*/
text-align:center;
/*background-color:#CCCCCC;*/
/*padding-top:50%;*/
/*vertical-align:middle;*/
/*border:1px dotted #900;*/
}
#nested_container h3 {
float:left;
margin-top:23%;
margin-left:7%;
}
.list .item .sublist,
.sublist {
display:none;
}
.my_class_main,
.my_class_sub {
font-size:1em;
color:#123;
/*background-color:#567;*/
border:1px dotted silver;
width:80px;
height:80px;
/*overflow:auto;*/
/*-moz-border-radius:30px;
width:30px;
height:30px;
-webkit-border-radius:30px;*/
}
.my_class_sub {
/*background-color:#def;*/
color:#123;
}
#nested_container .radial_div_item {
background-color:none;
/*height:30px;*/
padding:10px;
/*color:#234;*/
/*-moz-border-radius:10px;
-webkit-border-radius:10px;*/
cursor:pointer;
}
#nested_container .radial_div_item.active {
/*background-color:#511;*/
color:white;
/*padding: 10px; */
/*-moz-border-radius:40px;*/
z-index:100;
}
.selection {
float:right;
/*color:#abc;*/
border:1px solid #abc;
}
#nested_selection {
float:right;
}

jQuery(document).ready(function(){
jQuery(« #nested_container »).radmenu({
listClass: ‘list’, // the list class to look within for items
itemClass: ‘item’, // the items
radius: 150, // radius in pixels
animSpeed:400, // animation speed in millis
centerX: 30, // the center x axis offset
centerY: 100, // the center y axis offset
selectEvent: « click », // the select event (click)
onSelect: nestedSelection,
angleOffset: 0 // in degrees
});
jQuery(‘#nested_container’).radmenu(‘show’);
//console.log();
});
var jlastSelected;
var build = true;
// the onSelect method for the main radmenu
function nestedSelection(jselected){
// make sure that there are elements
if(jselected.length){
// only do this if a parent menu item has been selected
if(jlastSelected) {
if(jlastSelected.is(« :visible »)){ // if theres an active radmenu item, i.e it’s visible
// check to see if its the parent of the nested menu item
if(jlastSelected.parents(« .radial_div »).length){
jlastSelected.radmenu(« hide »); // hide the radmenu
build = false; // we don’t want to build a new radmenu
}
}else { // this is a new selection
jlastSelected = null;
build = true; // we want to build the sublist if avail.
}
}
if(build){
// build the sublist radmenu and show it
jselected.radmenu(selectedRadmenuOptions).radmenu(« show »);
// add some effects for the menu selections
jselected.siblings().fadeTo(« slow », 0.32);
jselected.fadeTo(« slow », 1);
// store the last item so for nested elements
jlastSelected = jselected;
}else{
// toggle : show the parent radmenu (i.e. ‘reset’ the main radmenu)
jselected.parents(« .radial_div »).radmenu(« show »);
}
}
};
// sublist menu options
var selectedRadmenuOptions = {
listClass: « sublist »,
itemClass: « subitem »,
select: « click »,
rotate:false,
onSelect: function(jselected){
//update the box in the top right corner with the selected item’s HTML
//jQuery(« #nested_selection »).html(jselected.html());
jselected.siblings().fadeTo(« slow », 0.32);
jselected.fadeTo(« slow », 1);
},
radius: 130,
centerX: -10,
centerY: -90,
angleOffset: 0
};