Question

有谁知道如何将以下代码更新为jQuery 1.3.2和jQuery UI 1.5.3？

CSS：

<style type="text/css" media="screen">
<!--
    body {
        padding: 0; 
        font: 1em "Trebuchet MS", verdana, arial, sans-serif; 
        font-size: 100%;
        background-color: #212121;
        margin: 0;
    }

    h1 { 
        margin-bottom: 2px; 
    }

    #container {
        background-color: #fff;
        width: 580px;
        margin: 15px auto;
        padding: 50px;
    }

    /* slider specific CSS */
    .sliderGallery {
        background: url(http://static.jqueryfordesigners.com/demo/images/productbrowser_background_20070622.jpg) no-repeat;
        overflow: hidden;
        position: relative;
        padding: 10px;
        height: 160px;
        width: 560px;
    }

    .sliderGallery UL {
        position: absolute;
        list-style: none;
        overflow: none;
        white-space: nowrap;
        padding: 0;
        margin: 0;
    }

    .sliderGallery UL LI {
        display: inline;
    }

    .slider {
        width: 542px;
        height: 17px;
        margin-top: 140px;
        margin-left: 5px;
        padding: 1px;
        position: relative;
        background: url(http://static.jqueryfordesigners.com/demo/images/productbrowser_scrollbar_20070622.png) no-repeat;
    }

    .handle {
        position: absolute;
        cursor: move;
        height: 17px;
        width: 181px;
        top: 0;
        background: url(http://static.jqueryfordesigners.com/demo/images/productbrowser_scroller_20080115.png) no-repeat;
        z-index: 100;
    }

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

    .slider .slider-lbl1 {
        left: 50px;
    }

    .slider .slider-lbl2 {
        left: 107px;
    }

    .slider .slider-lbl3 {
        left: 156px;
    }

    .slider .slider-lbl4 {
        left: 280px;
    }

    .slider .slider-lbl5 {
        left: 455px;
    }
-->
</style>

javascipt的：

<script src="jquery-1.2.6.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery-ui-full-1.5.2.min.js" type="text/javascript" charset="utf-8"></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>

Div的：

<div id="container">
    <h1>Slider Gallery</h1>
    <p>This shows a demonstration of a slider widget from the jQuery UI library used to create the same effect used on <a href="http://www.apple.com/mac/">Apple's web site</a>.</p>
    <p><a href="/slider-gallery">Read the article, and see the screencast this demonstration relates to</a></p>

    <div class="sliderGallery">
        <ul>
            <li><img class="pb-airportexpress" src="http://static.jqueryfordesigners.com/demo/images/pb_airport_express.jpg" /></li>
            <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_airport_extreme.jpg" /></li>
            <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_timecapsule_20080115.jpg" /></li>
            <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_keyboards20070807.jpg" /></li>
            <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_mighty_mouse.jpg" /></li>
            <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_cinema_display20071026.jpg" /></li>
            <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_mac_pro_20070622.jpg" /></li>

            <li><img class="pb-macmini" src="http://static.jqueryfordesigners.com/demo/images/pb_mac_mini.jpg" /></li>
            <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_macbook20071026.jpg" /></li>
            <li><img class="pb-macbookair" src="http://static.jqueryfordesigners.com/demo/images/pb_macbookair_20080115.jpg" /></li>
            <li><img class="pb-macbookpro" src="http://static.jqueryfordesigners.com/demo/images/pb_macbook_pro20071026.jpg" /></li>
            <li><img class="pb-imac" src="http://static.jqueryfordesigners.com/demo/images/pb_imac20071026.jpg" /></li>
            <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_macosx_20080115.jpg" /></li>
            <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_ilife_20080115.jpg" /></li>
            <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_dot_mac_20080115.jpg" /></li>
            <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_iwork_20080115.jpg" /></li>

            <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_quicktime.jpg" /></li>
            <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_aperture20080212.jpg" /></li>
            <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_final_cut_studio2_20080115.jpg" /></li>
            <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_final_cut_express_20080115.jpg" /></li>
            <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_logic_studio_20080115.jpg" /></li>
            <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_logic_express_20080115.jpg" /></li>
            <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_shake_20080115.jpg" /></li>                    
            <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_apple_remote_desktop_20080115.jpg" /></li>
            <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_xserve.jpg" /></li>

            <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_xserve_raid.jpg" /></li>
            <li><img class="pb-xsan" src="http://static.jqueryfordesigners.com/demo/images/pb_xsan_20080115.jpg" /></li>
            <li><img class="pb-macosxserver" src="http://static.jqueryfordesigners.com/demo/images/pb_macosx_server20071016.jpg" /></li>                    
        </ul>
        <div class="slider">
            <div class="handle"></div>
            <span class="slider-lbl1">Wi-Fi</span>
            <span class="slider-lbl3">Macs</span>
            <span class="slider-lbl4">Applications</span>
            <span class="slider-lbl5">Servers</span>
        </div>
    </div>
</div>

任何和所有帮助都非常感谢大家。

Ferdia

Answer 1

自UI v1.5.3以来，jQuery UI滑块滚动条已更改。如果您正在寻找一个简单，干净的如何构建滑块滚动条的示例，latest demo可能是最好的起点。

你真的想要像existing demo那样完全重建滑块库，或者你可以像我制作的this demo一样使用简单的CSS overflow:scroll。

我还要started a solution使用旧资产重建，但使用jQuery 1.5.2和jQuery UI 1.8.9。它并不完整，因为如果那不是你想要的，我不想付出努力来重建旧画廊。无论如何，如果你真的想这样做，这应该会给你一个良好的开端。

希望这有帮助！

编辑：啊，对不起，我误解了这个问题。你有使用jQuery 1.3.2！ UI版本是否灵活？您可以降级到jQuery 1.3.2和UI 1.7.3，my (updated) demo仍然有效。

编辑2： Smaller handle height demo。作为参考，我减少了以下CSS规则的height属性：

.scroll-bar-wrap .ui-slider { background:none; border:0; height:20px; margin:0 auto;  }
.scroll-bar-wrap .ui-slider-handle { top:.2em; height:10px; }

编辑3：

我终于找到了我正在寻找的信息来解释为什么升级到jQuery 1.3.2和UI 1.5.2导致句柄停止工作。这些版本从不兼容 - 请参阅this thread。据称，UI 1.6是第一个与jQuery 1.3.2兼容的，但推荐使用来自UI download page的UI 1.7.3。

请注意，该演示包含一个jQuery UI主题，但您可以在页面中使用包含它：

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/cupertino/jquery-ui.css">

Answer 2

任何一个版本的代码都很好，只有我能指出的东西与编码风格有关，而不是像jQuery版本那样：

var ul = $('div.sliderGallery ul');

而不是：

var container = $('div.sliderGallery');
var ul = $('ul', container);

将Slider Gallery更新为jQuery 1.3.2

2 个答案: