无法在页面右侧获得“滑出"选项卡 [英] Can't get Slide Out Tab on the right hand side of my page

问题描述

我有一个滑出式选项卡，它在左侧的效果很好，但是当我更改设置以将其定位在右侧时-选项卡图像消失并且内容卡住了.

I have a slide out tab, it works perfectly on the left, but when I change the settings to position it on the right - the tab image disappears and the content is stuck open.

在标签滑出DIV下，我有这个js

Under the tab slide out DIV I have this js

$('.slide-out-div').tabSlideOut({

    tabHandle: '.handle',                     //class of the element that will be your tab
    pathToTabImage: 'images/getstarted.gif',  //path to the image for the tab *required*
    imageHeight: '139px',                     //height of tab image *required*
    imageWidth: '27px',                       //width of tab image *required*    
    tabLocation: 'right',                     //side of screen where tab lives, top, right, bottom, or left
    speed: 300,                               //speed of animation
    action: 'click',                          //options: 'click' or 'hover', action to trigger animation
    topPos: '0px',                            //position from the top
    fixedPosition: false                      //options: true makes it stick(fixed position) on scroll
});

然后有一个具有这些设置的js文件

Then there is a js file that has these settings

(function($){

    $.fn.tabSlideOut = function(callerSettings) {
        var settings = $.extend({
            tabHandle: '.handle',
            speed: 300, 
            action: 'click',
            tabLocation: 'left',
            topPos: '200px',
            leftPos: '20px',
            fixedPosition: false,
            positioning: 'absolute',
            pathToTabImage: null,
            imageHeight: null,
            imageWidth: null,
            onLoadSlideOut: false                   
        }, callerSettings||{});

我的CSS

.slide-out-div {

    padding: 12px;
    width: 220px;
    height: 87px;
    border: 2px inset #1e5e70;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #eefbfe;
    background-image: url(../images/stripe.png);
    background-repeat: repeat;  
    z-index:999;
}

我的网站是 http://www.pagetree.co.uk

谢谢！

推荐答案

无法以正确"的方式完成您要问的事情. 正确的方法是将滑出设置(在您的网站上，名为float的div)设置为right: 0;，并调整实际的javascript函数(不是此处列出的js，这些是函数参数).在这些参数中，您可能已经观察到没有rightPos:，这意味着只能从左侧进行设置.

There's no way to do what you're asking in the 'correct' way. The correct way would be to set the slide-out (on your website the div called float) to right: 0; and tweak the actual javascript function (not the js you listed here, those are the function parameters). In those parameters you may have observed that there is no rightPos:, which means it can only be set from the left.

但是，如果可以给float div一个宽度，则可以设法将其定位在屏幕的右边缘，以百分比为单位.在这种情况下，您可以为float div提供这些属性width: 20%; left: 80%;. 缺点:您的div的宽度将与屏幕尺寸成比例变化.

However, if you can give the float div a width, you could manage to position it to the right edge of the screen, in percents. In that case, you would give the float div these properties width: 20%; left: 80%;. DISADVANTAGE: Your div's width will vary in proportion to the screen size.

是为了定位.而且仍然无法正常工作，因为您的js计算出的标签会从左侧滑出.我猜你在这里有这个插件: http://www.building58.com/examples/tabSlideOut .html .它可以完成工作，但是扩展性不是很好.

That's for the positioning. And still then it will not work because your js calculates the tab to slide out from the left. I'm guessing you got this plugin here: http://www.building58.com/examples/tabSlideOut.html . It's does the job, but it's not very extensible.

结论: 您需要为此类功能编写自己的JavaScript. 但是，为什么可以通过CSS:hover选择器使用javascript?

CONCLUSION: You need to write your own javascript for a function like this. HOWEVER, why use javascript when you could do it with a CSS:hover selector?

看看这个小提琴: http://jsfiddle.net/TvGQ5/，它可以准确地实现您想要的内容(如果您真的想单击而不是悬停，请使用:target选择器进行调整.

Have a look at this fiddle: http://jsfiddle.net/TvGQ5/, it achieves exactly what you want (if you really want on click and not on hover, toy around with the :target selector.

如果使用此解决方案，请不要忘记设置父元素(在您的网站上，将名为middle的div设置为overflow-x: hidden;.此外，在所有页面上都可以使用，但在首页上您需要移动浮动div到中间div，而不是主体.

If you use this solution, don't forget to set the parent element (on your website the div called middle to overflow-x: hidden;. Also, on all your pages it works, but on your homepage you need to move the floated div to the middle div, not the body.

这篇关于无法在页面右侧获得“滑出"选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！