Jquery 슬라이더가 모든 탭을로드합니다.

jquery 탭과 슬라이더에 문제가 있습니다. 내 문제는 ı 슬라이더 요소 예를 들어 4 슬라이더 요소를 클릭하면 4 개의 요소에 대한 모든 탭이로드됩니다. 하나를 클릭하면 만들려고합니다. 슬라이더의 요소. 활성 탭만로드 할 수 있습니다.Jquery 슬라이더가 모든 탭을로드합니다.

FIDDLE

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; 
}

출처

2013-07-11 nazir dogan

. 선택한 요소 만로드하려는 경우 클래스를로드 할 항목의 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'를 표시 할 수 있습니다.

즉

HTML

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

JQUERY

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

UPDATE 난 당신이 모든 슬라이더 항목에 다른 클래스를 추가 할 필요가 말을하는지 생각

. 그런 다음 탭 항목을 선택하면 해당 슬라이더 항목을 숨겨야합니다.

출처

2013-07-11 08:04:17 Hepburn3D

페이지 상단에는 스크롤 슬라이더가 있습니다. 스크롤 컨텐트 항목을 클릭하면 한 번에 모든 탭을로드합니다. –

내가 무슨 뜻인지 알 것 같아. 그래서 'Tasarim'탭을 클릭하면 슬라이더 '4,5,6'만로드 할 수 있습니다. – Hepburn3D

:) 내 영어가 너무 좋지 않아 .. 도와 줘서 고마워. ı 슬라이더 "4"를 클릭하면 뜻. 활성 탭만로드해야합니다. 그리고 ı 변경 탭을 누른 다음 다른 탭을로드 할 수 있지만 슬라이더 항목이 같아야합니다. "4"가되어야합니다. –

다만 JQuery Cycle Plugin을 사용하는 방법은 <div>과 <ul> 요소 모두에서 작동합니다. 휠 재발견없이 많은 문제를 해결할 수 있습니다. beginner demo, intermediate demos 또는 advanced demo을 읽거나 이와 같이 좋아하는 내용을 읽을 수 있습니다.

<!-- 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-11 08:31:23 Killrawr

ı 사용법을 모르겠다. –

[here] (http://malsup.com/jquery/cycle/begin.html)에서 데모를 읽으십시오. – Killrawr

Jquery 슬라이더가 모든 탭을로드합니다.

답변

관련 문제