0

我对 jquery 选项卡和滑块有问题。我的问题是当我单击滑块项目时，例如滑块的 4 元素。它会加载大约 4 个元素的每个选项卡。我想在单击滑块的一个元素时进行。它只能加载活动选项卡。

小提琴

HTML

<title>jQuery UI Slider - Slider scrollbar</title>
<body>
    <div class="scroll-pane ui-widget ui-widget-header ui-corner-all">
        <div class="scroll-content">
            <div class="scroll-content-item ui-widget-header"></div>
            <div class="scroll-content-item ui-widget-header">
                <div class="arabadiv" onclick="yukle()" style="width:100px; height:100px; background-color: darkviolet "></div>
            </div>
            <div class="scroll-content-item ui-widget-header">
                <div style="width:100px; height:100px; background-color:red"></div>
            </div>
            <div class="scroll-content-item ui-widget-header">4</div>
            <div class="scroll-content-item ui-widget-header">5</div>
            <div class="scroll-content-item ui-widget-header">6</div>
            <div class="scroll-content-item ui-widget-header">7</div>
            <div class="scroll-content-item ui-widget-header">8</div>
            <div class="scroll-content-item ui-widget-header">9</div>
            <div class="scroll-content-item ui-widget-header">10</div>
            <div class="scroll-content-item ui-widget-header">11</div>
            <div class="scroll-content-item ui-widget-header">12</div>
            <div class="scroll-content-item ui-widget-header">13</div>
            <div class="scroll-content-item ui-widget-header">14</div>
            <div class="scroll-content-item ui-widget-header">15</div>
            <div class="scroll-content-item ui-widget-header">16</div>
            <div class="scroll-content-item ui-widget-header">17</div>
            <div class="scroll-content-item ui-widget-header">18</div>
            <div class="scroll-content-item ui-widget-header">19</div>
            <div class="scroll-content-item ui-widget-header">20</div>
        </div>
        <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">
            <div class="scroll-bar"></div>
        </div>
    </div>
    <div style="clear:left"></div>
    <div id="tabs" class="tabs-bottom">
        <ul>
            <li><a href="#tabs-1">Genel Bakış</a>
            </li>
            <li><a href="#tabs-2">Tasarım</a>
            </li>
            <li><a href="#tabs-3">Aksesuar</a>
            </li>
            <li><a href="#tabs-4">Model</a>
            </li>
            <li><a href="#tabs-5">Renk</a>
            </li>
            <li><a href="#tabs-6">Fiyat</a>
            </li>
        </ul>
        <div class="tabs-spacer"></div>
        <div style="width:auto; height:800px; background-color:red" id="tabs-1"></div>
        <div style="width:auto; height:900px; background-color:yellowgreen" id="tabs-2"></div>
        <div style="width:auto; height:800px; background-color:darkcyan" id="tabs-3"></div>
        <div style="width:auto; height:800px; background-color:bisque" id="tabs-4"></div>
        <div style="width:auto; height:800px; background-color:firebrick" id="tabs-5"></div>
        <div style="width:auto; height:800px; background-color:ghostwhite" id="tabs-6"></div>

JAVA

$(function () {
    $("#tabs").tabs();

    // fix the classes
    $(".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *")
        .removeClass("ui-corner-all ui-corner-top")
        .addClass("ui-corner-bottom");

    // move the nav to the bottom
    $(".tabs-bottom .ui-tabs-nav").appendTo(".tabs-bottom");
});

$(function () {
    //scrollpane parts
    var scrollPane = $(".scroll-pane"),
        scrollContent = $(".scroll-content");

    //build slider
    var scrollbar = $(".scroll-bar").slider({
        slide: function (event, ui) {
            if (scrollContent.width() > scrollPane.width()) {
                scrollContent.css("margin-left", Math.round(
                ui.value / 100 * (scrollPane.width() - scrollContent.width())) + "px");
            } else {
                scrollContent.css("margin-left", 0);
            }
        }
    });

    //append icon to handle
    var handleHelper = scrollbar.find(".ui-slider-handle")
        .mousedown(function () {
        scrollbar.width(handleHelper.width());
    })
        .mouseup(function () {
        scrollbar.width("100%");
    })
        .append("<span class='ui-icon ui-icon-grip-dotted-vertical'></span>")
        .wrap("<div class='ui-handle-helper-parent'></div>").parent();

    //change overflow to hidden now that slider handles the scrolling
    scrollPane.css("overflow", "hidden");

    //size scrollbar and handle proportionally to scroll distance
    function sizeScrollbar() {
        var remainder = scrollContent.width() - scrollPane.width();
        var proportion = remainder / scrollContent.width();
        var handleSize = scrollPane.width() - (proportion * scrollPane.width());
        scrollbar.find(".ui-slider-handle").css({
            width: handleSize,
                "margin-left": -handleSize / 2
        });
        handleHelper.width("").width(scrollbar.width() - handleSize);
    }

    //reset slider value based on scroll content position
    function resetValue() {
        var remainder = scrollPane.width() - scrollContent.width();
        var leftVal = scrollContent.css("margin-left") === "auto" ? 0 : parseInt(scrollContent.css("margin-left"));
        var percentage = Math.round(leftVal / remainder * 100);
        scrollbar.slider("value", percentage);
    }

    //if the slider is 100% and window gets larger, reveal content
    function reflowContent() {
        var showing = scrollContent.width() + parseInt(scrollContent.css("margin-left"), 10);
        var gap = scrollPane.width() - showing;
        if (gap > 0) {
            scrollContent.css("margin-left", parseInt(scrollContent.css("margin-left"), 10) + gap);
        }
    }

    //change handle position on window resize
    $(window).resize(function () {
        resetValue();
        sizeScrollbar();
        reflowContent();
    });
    //init scrollbar size
    setTimeout(sizeScrollbar, 10); //safari wants a timeout
});

CSS

    .scroll-pane {
    overflow: auto;
    width: 99%;
    float:left;
}
.scroll-content {
    width: 2440px;
    float: left;
}
.scroll-content-item {
    width: 100px;
    height: 100px;
    float: left;
    margin: 10px;
    font-size: 3em;
    line-height: 96px;
    text-align: center;
}
.scroll-bar-wrap {
    clear: left;
    padding: 0 4px 0 2px;
    margin: 0 -1px -1px -1px;
}
.scroll-bar-wrap .ui-slider {
    background: none;
    border:0;
    height: 2em;
    margin: 0 auto;
}
.scroll-bar-wrap .ui-handle-helper-parent {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}
.scroll-bar-wrap .ui-slider-handle {
    top:.2em;
    height: 1.5em;
}
.scroll-bar-wrap .ui-slider-handle .ui-icon {
    margin: -8px auto 0;
    position: relative;
    top: 50%;
}
/* force a height so the tabs don't jump as content height changes */
 #tabs .tabs-spacer {
    float: left;
    height: 200px;
}
.tabs-bottom .ui-tabs-nav {
    clear: left;
    padding: 0 .2em .2em .2em;
}
.tabs-bottom .ui-tabs-nav li {
    top: auto;
    bottom: 0;
    margin: 0 .2em 1px 0;
    border-bottom: auto;
    border-top: 0;
}
.tabs-bottom .ui-tabs-nav li.ui-tabs-active {
    margin-top: -1px;
    padding-top: 1px;
}
4

2 回答 2

0

顺便说一句，您可以只使用JQuery Cycle Plugin,<div>和<ul> 元素。这将解决您的很多问题，而无需重新发明轮子。你可以阅读初学者演示、中级演示或高级演示，或者类似的东西就好了。

<!-- Pull some Libraries-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<!-- Slider code -->
<script type="text/javascript">
$('#slider').cycle('slideX');
</script>
<!-- Slider itself-->
<ul id="slider">
    <li><img src='img1.png' title='first image' /></li>
    <li><img src='img2.png' title='second image' /></li>
    <li><img src='img3.png' title='third image' /></li>
</ul>
于 2013-07-11T08:31:23.200 回答
0

我很难明白你的意思。如果您只想加载选定的元素，您可以使其类等于您要加载的 id，然后使用它来识别您要加载的内容。

HTML

<div id="selected_item" class="item_to_load">

爪哇

var loadMe = document.getElementsById("selected_item");

function showOrLoad () {
   var $item-to-load = document.getElementsByClassName(loadMe); 
}

可能是您需要为每个滑块项指定一个 id？

如果您为所有滑块项目提供了唯一 ID，则您可以隐藏“类”并显示“ID”。

IE

HTML

<div id="uniqueID" class="scroll-content-item ui-widget-header">14</div>

查询

$('.scroll-content-item').hide();
$('#uniqueID').show();

更新

我认为您是说您需要为所有滑块项目添加另一个类。然后，当您选择一个选项卡项时，您需要隐藏相应的滑块项。

于 2013-07-11T08:04:17.953 回答