Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/80.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Jquery滑块句柄没有';别动_Jquery_Slider_Handle - Fatal编程技术网

Jquery滑块句柄没有';别动

Jquery滑块句柄没有';别动,jquery,slider,handle,Jquery,Slider,Handle,我正在将我们的Drupal6网站升级到Drupal7,随之而来的是新版本的Jquery。我有一个幻灯片库,里面有一些方框图,你可以水平浏览,在新网站上你仍然可以滚动浏览内容,但手柄不动 你知道为什么滑块仍然有效,但手柄本身不再有效了吗 我也试过滑动条,但那一个滑动条甚至没有出现 初始版本基于,但由于Jquery更新,该版本无法再使用 css: /* slider specific CSS */ body.page-node-483 .sliderGallery { backg

我正在将我们的Drupal6网站升级到Drupal7,随之而来的是新版本的Jquery。我有一个幻灯片库,里面有一些方框图,你可以水平浏览,在新网站上你仍然可以滚动浏览内容,但手柄不动

你知道为什么滑块仍然有效,但手柄本身不再有效了吗

我也试过滑动条,但那一个滑动条甚至没有出现

初始版本基于,但由于Jquery更新,该版本无法再使用

css:

     /* slider specific CSS */
body.page-node-483 .sliderGallery {
     background: url(/sites/all/themes/fourpees2011/css/images/productbrowser-background3.png) no-repeat;
     overflow: hidden;
     position: relative;
     padding: 10px;
     height: 200px;
     width: 960px;
 }

body.page-node-483 .sliderGallery ul {
     position: absolute;
     list-style: none;
     overflow: none;
     white-space: nowrap;
     padding: 0;
     margin: 0;
 }

body.page-node-483 .sliderGallery ul li {
     display: inline;
     margin-right: 30px;
 }

body.page-node-483 .sliderGallery ul li.first {
     margin-left: 20px;
 }

body.page-node-483 .slider {
     width: 950px;
     height: 19px;
     margin-top: 160px;
     margin-left: 5px;
     padding: 1px;
     position: relative;
     background: url(/sites/all/themes/fourpees2011/css/images/productbrowser-scrollbar2.png) no-repeat;
 }

body.page-node-483 .handle {
     position: absolute;
     cursor: move;
     height: 19px;
     width: 187px;
     top: 0;
     background: url(/sites/all/themes/fourpees2011/css/images/productbrowser-scroller2.png) no-repeat;
     z-index: 100;
 }

body.page-node-483 .slider span {
     color: #bbb;
     font-size: 80%;
     cursor: pointer;
     position: absolute;
     z-index: 110;
     top: 3px;
 }
剧本:

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<script type="text/javascript" charset="utf-8">
    window.onload = function () {
        var container = $('div.sliderGallery');
        var ul = $('ul', container);

        var itemsWidth = ul.innerWidth() - container.outerWidth();

        $('.slider', container).slider({
            min: 0,
            max: itemsWidth,
            handle: '.handle',
            stop: function (event, ui) {
                ul.animate({'left' : ui.value * -1}, 500);
            },
            slide: function (event, ui) {
                ul.css('left', ui.value * -1);
            }
        });
    };
</script>

window.onload=函数(){
var容器=$('div.sliderGallery');
变量ul=$('ul',容器);
var itemsWidth=ul.innerWidth()-container.outerWidth();
$('.slider',container).slider({
分:0,,
max:itemsWidth,
句柄:'.handle',
停止:功能(事件、用户界面){
动画({'left':ui.value*-1},500);
},
幻灯片:功能(事件、用户界面){
ul.css('left',ui.value*-1);
}
});
};
和HTML:

<div class="sliderGallery">
        <ul>
            <li><a href="/products/atomyx/atomyx-portal"<li><img src="/sites/default/files/products/boxshots/small/boxshot_Atomyx-Portal_LEFT_LR.png"></li></a>
            <li><a href="/products/axaio-software/madetoprint"<li><img src="/sites/default/files/products/boxshots/small/MadeToPrint_0.png"></li></a>
            <li><a href="/products/axaio-software/madetocompare"<li><img src="/sites/default/files/products/boxshots/small/MadeToCompare_0.png"></li></a>
            <li><a href="/products/axaio-software/madeforlayers"<li><img src="/sites/default/files/products/boxshots/small/MadeForLayers.png"></li></a>
            <li><a href="/products/callas-software/pdftoolbox"<li><img src="/sites/default/files/products/boxshots/small/pdfToolbox_0.png"></li></a>
            <li><a href="/products/callas-software/pdftoolbox-server"<li><img src="/sites/default/files/products/boxshots/small/pdfToolboxServer_0.png"></li></a>
            <li><a href="/products/callas-software/pdfapilot"<li><img src="/sites/default/files/products/boxshots/small/pdfaPilot_0.png"></li></a>
            <li><a href="/products/callas-software/pdfapilot-server"<li><img src="/sites/default/files/products/boxshots/small/pdfaPilotServer_0.png"></li></a>
            <li><a href="/products/ctrlpublishing/ctrlchanges"<li><img src="/sites/default/files/products/boxshots/small/CtrlChanges.png"></li></a>
            <li><a href="/products/ctrlpublishing/ctrllayers"<li><img src="/sites/default/files/products/boxshots/small/CtrlLayers.png"></li></a>
            <li><a href="/products/ctrlpublishing/ctrlcrosstalkid"<li><img src="/sites/default/files/products/boxshots/small/CtrlCrossTalkID.png"></li></a>
            <li><a href="/products/ctrlpublishing/ctrlcrosstalk"<li><img src="/sites/default/files/products/boxshots/small/CtrlCrossTalk.png"></li></a>
            <li><a href="/products/elpical/claro-premedia"<li><img src="/sites/default/files/products/boxshots/small/ClaroPremedia.png"></li></a>
            <li><a href="/products/elpical/claro-single"<li><img src="/sites/default/files/products/boxshots/small/ClaroSingle.png"></li></a>
            <li><a href="/products/printfactory/printfactory"<li><img src="/sites/default/files/products/boxshots/small/PrintFactory_0.png"></li></a>
            <li><a href="/products/printfactory/printfactory-go"<li><img src="/sites/default/files/products/boxshots/small/PrintFactory_Go_Boxshot_0.png"></li></a>
            <li><a href="/products/proofmaster/proofmaster-plus"<li><img src="/sites/default/files/products/boxshots/small/ProofMasterPlus.png"></li></a>
            <li><a href="/products/proofmaster/proofmaster-certify"<li><img src="/sites/default/files/products/boxshots/small/ProofMasterCertify.png"></li></a>
            <li><a href="/products/proofmaster/proofmaster-media"<li><img src="/sites/default/files/products/boxshots/small/ProofMasterMedia.png"></li></a>
            <li><a href="/products/remote-director/remote-director"<li><img src="/sites/default/files/products/boxshots/small/Remote-director.png"></li></a>
            <li><a href="/products/remote-director/press-director"<li><img src="/sites/default/files/products/boxshots/small/Press-director.png"></li></a>
            <li><a href="/products/twixl-media/twixl-publisher"<li><img src="/sites/default/files/products/boxshots/small/Twixl-boxshot.png"></li></a>
            <li><a href="/products/twixl-media/twixl-publisher-enterprise-kiosk"<li><img src="/sites/default/files/products/boxshots/small/Twixl-Enterprise-Kiosk-boxshot.png"></li></a>
        </ul>
        <div class="slider">
            <div class="handle"></div>
        </div>
</div>

整个过程都在JSFIDLE上:

从jquery-1.7.1.min.js迁移到jquery-1.9.1.min.jss时,我遇到了类似的“滑块手柄不移动”问题。在我这方面,在测试之后,肯定是由于这个文件的更改。Jquery中的某些语法可能已从1.7.1更改为1.9.1。我无法使您的代码/滑块显示在JSFIDLE上。jsfiddle.net/vTr5c/2/