留言板

Slider tools on left and bottom

thumbnail
Troy A. Griffitts，修改在8 年前。

Slider tools on left and bottom

Youngling 帖子: 13 加入日期: 16-8-12 最近的帖子
The NTVMR Manuscript Workspace page has tool panels which rest to the left and bottom and slide out on mouse hover.  The magic to make this happens is as follows:

Create a page and choose a the 2-2 Column Layout: ​​​​​​​ 
Place the gadgets you wish to remain stationary in the top 2 positions in the layout
Place the gadget you wish to use as the tool to slide out from the left in the bottom left position
Place the gadget you wish to use as the tool to slide out from the bottom in the bottom right position

Under the page's "Look and Feel" settings, define a custom look and feel for this page and use this in the CSS setting:

#column-3 {
    position: absolute;
    width: 620px;
    top: 200px;
    left: -90px;
    padding-left: 90px;
    padding-right: 50px;
}

#column-4 {
    bottom: -530px;
    height: 550px;
    overflow: hidden;
    position: fixed;
    left:15px;
    right: 15px;
    z-index: 5;
    padding-bottom: 90px;
}
Finally, add this to your page's JavaScript setting:
​​​​​​​
​​​​​​​AUI().use('get', function(A) { A.Get.script('http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js', { onSuccess: function() {

$('#column-3').find('header')
   .css('position', 'absolute')
   .css('-webkit-transform', 'rotate(90deg)')
   .css('-moz-transform', 'rotate(90deg)')
   .css('-ms-transform', 'rotate(90deg)')
   .css('-o-transform', 'rotate(90deg)')
   .css('transform', 'rotate(90deg)')
   .css('width', '200px')
   .css('right', '-60px')
   .css('top', '180px')
   .css('text-align', 'center');

$('#column-4').find('header')
   .css('width', '200px')
   .css('margin-left', '40px')
   .css('margin-top', '-30px')
   .css('z-index', '99999')
   .css('text-align', 'center')
   .css('position', 'fixed');

$('#column-3').mouseenter(function() {
     if (!$(this).hasClass("popped")) {
          $(this).animate({left: "-90px" }, {queue: false, duration: 500}).addClass("popped");
     }
})
.mouseleave(function(e) {
     if (!e.relatedTarget || $(e.relatedTarget).attr('id')=='dockbar') return;
     if ($(this).hasClass("popped")) {
          $(this).animate({left:"-550px"}, {queue: false, duration: 500}).removeClass("popped");
     }
});

$('#column-4').mouseenter(function() {
     if (!$(this).hasClass("popped")) {
          $(this).animate({bottom: "-75px" }, {queue: false, duration: 500}).addClass("popped").css('z-index', 1001);
     }
})
.mouseleave(function(e) {
    if (!e.relatedTarget || $(e.relatedTarget).attr('id')=='dockbar') return;
    if ($(this).hasClass("popped")){
          $(this).css('z-index', 3).animate({bottom:'-530px'}, {queue: false, duration: 500}).removeClass("popped");
     }
});

$(window).resize(function() {
     expandFillPageClients();
});


var MARGIN=67;
function expandFillPageClients() {
     $('#column-1, #column-2, #column-3').find('.liferaygadget, .gadget').each(function () {
         $(this).height(window.innerHeight - $(this).offset().top - MARGIN);
     });
}

var afterLoad = function(max, n) {
     if (!n) n = 0; if (n > max) return;
     expandFillPageClients();
     setTimeout(function() { afterLoad(max, n+1); }, 1000);
}
afterLoad(12);

$("body").css("overflow", "hidden");

} }); });