logo标签列表

Mootools和YUI Carousel问题

javascriptmootoolsyuicarousel
5

我正在处理一个使用了Mootools的网站，其中添加了一个轮播组件，该组件取自此处 - http://developer.yahoo.com/yui/examples/carousel/carousel-ariaplugin_source.html

问题在于，轮播组件与Mootools有些不兼容。使用Mootools时，它不起作用，而当我删除Mootools时，它开始工作。当启用Mootools时，Firebug也没有显示任何JS错误或控制台冲突。

我设置了几个jsfiddle来演示这个问题。

HTML

<div class="yui-skin-sam">
        <h1 id="my-carousel-label">Expert Health Advice</h1>

    <div id="container">
        <ol id="carousel">
            <li class="item">   <a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/skintype/bio/leslie-baumann/"><img width="125" height="154" alt="Leslie Baumann, M.D." src="http://l.yimg.com/fz/ls/he/blogs/carousel/LeslieBaumann_carousel.png"/></a>

                    <h3><a href="http://health.yahoo.com/experts/skintype/bio/leslie-baumann/">Leslie Baumann, M.D.</a></h3>

                    <h4><a href="http://health.yahoo.com/experts/skintype/12135/skin-treatments-for-brides-to-be/">Skin Treatments for&#8240;</a></h4>
    <cite>Posted Thu 5.1.08</cite>

                <p class="all"><a href="http://health.yahoo.com/experts/skintype/">View All Posts &#187;</a>

                </p>
            </li>
            <li class="item">   <a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/deepak/bio/deepak-chopra/"><img width="125" height="154" alt="Deepak Chopra, M.D." src="http://l.yimg.com/fz/ls/he/blogs/carousel/DeepakChopra_carousel.png"/></a>

                    <h3><a href="http://health.yahoo.com/experts/deepak/bio/deepak-chopra/">Deepak Chopra, M.D.</a></h3>

                    <h4><a href="http://health.yahoo.com/experts/deepak/2689/how-you-think-about-illness-affects-your-recovery/">How You Think About Illness&#8240;</a></h4>
    <cite>Posted Thu 5.1.08</cite>

                <p class="all"><a href="http://health.yahoo.com/experts/deepak/">View All Posts &#187;</a>

                </p>
            </li>
            <li class="item">   <a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/nutrition/bio/christine-mckinney-nutrition/"><img width="125" height="154" class="lz" alt="Christine McKinney, M.S., R.D., C.D.E." src="http://l.yimg.com/fz/ls/he/blogs/carousel/ChristineMcKinney_carousel.png"/></a>

                    <h3><a href="http://health.yahoo.com/experts/nutrition/bio/christine-mckinney-nutrition/">Christine McKinney, M.S., R.D., C.D.E.</a></h3>

                    <h4><a href="http://health.yahoo.com/experts/nutrition/12067/fat-how-much-is-enough-of-a-good-thing/">Fat: How Much Is Enough of a&#8240;</a></h4>
    <cite>Posted Thu 5.1.08</cite>

                <p class="all"><a href="http://health.yahoo.com/experts/nutrition/">View All Posts &#187;</a>

                </p>
            </li>
            <li class="item">   <a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/drmao/bio/maoshing-ni/"><img width="125" height="154" class="lz" alt="Dr. Maoshing Ni" src="http://l.yimg.com/fz/ls/he/blogs/carousel/MaoshingNi_carousel.png"/></a>

                    <h3><a href="http://health.yahoo.com/experts/drmao/bio/maoshing-ni/">Dr. Maoshing Ni</a></h3>

                    <h4><a href="http://health.yahoo.com/experts/drmao/13738/centenarian-tips-for-a-long-life/">Centenarian Tips for a Long&#8240;</a></h4>
    <cite>Posted Tue 4.29.08</cite>

                <p class="all"><a href="http://health.yahoo.com/experts/drmao/">View All Posts &#187;</a>

                </p>
            </li>
            <li class="item">   <a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/breastcancer/bio/lillie-shockney/"><img width="125" height="154" class="lz" alt="Lillie Shockney, R.N., M.A.S." src="http://l.yimg.com/fz/ls/he/blogs/carousel/LillieShockney_carousel.png"/></a>

                    <h3><a href="http://health.yahoo.com/experts/breastcancer/bio/lillie-shockney/">
                    Lillie Shockney, R.N., M.A.S.</a></h3>

                    <h4><a href="http://health.yahoo.com/experts/breastcancer/5673/are-you-being-over-or-undertreated/">Are You Being Over- or&#8240;</a></h4>
    <cite>Posted Tue 4.29.08</cite>

                <p class="all"><a href="http://health.yahoo.com/experts/breastcancer/">View All Posts &#187;</a>

                </p>
            </li>
            <li class="item">   <a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/depression/bio/david-neubauer/"><img width="125" height="154" class="lz" alt="David Neubauer, M.D." src="http://l.yimg.com/fz/ls/he/blogs/carousel/DavidNeubauer_carousel.png"/></a>

                    <h3><a href="http://health.yahoo.com/experts/depression/bio/david-neubauer/">David Neubauer, M.D.</a></h3>

                    <h4><a href="http://health.yahoo.com/experts/depression/12445/could-a-breast-cancer-treatment-help-bipolar-disorder/">Could a Breast Cancer&#8240;</a></h4>
    <cite>Posted Tue 4.29.08</cite>

                <p class="all"><a href="http://health.yahoo.com/experts/depression/">View All Posts &#187;</a>

                </p>
            </li>
            <li class="item">   <a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/capessa/bio/capessa/"><img width="125" height="154" class="lz" alt="Jennifer Tuma-Young" src="http://l.yimg.com/fz/ls/he/blogs/carousel/Capessa_carousel.png"/></a>

                    <h3><a href="http://health.yahoo.com/experts/capessa/bio/capessa/">Jennifer Tuma-Young</a></h3>

                    <h4><a href="http://health.yahoo.com/experts/capessa/3473/relieve-stress-with-your-senses/">Relieve Stress With Your&#8240;</a></h4>
    <cite>Posted Mon 4.28.08</cite>

                <p class="all"><a href="http://health.yahoo.com/experts/capessa/">View All Posts &#187;</a>

                </p>
            </li>
            <li class="item">   <a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/healthieryou/bio/lucydanziger/"><img width="125" height="154" class="lz" alt="Lucy Danziger, SELF Edit" src="http://l.yimg.com/fz/ls/he/blogs/carousel/LucyDanziger_carousel.png"/></a>

                    <h3><a href="http://health.yahoo.com/experts/healthieryou/bio/lucydanziger/">Lucy Danziger, SELF Edit</a></h3>

                    <h4><a href="http://health.yahoo.com/experts/healthieryou/2639/de-stress-in-mere-minutes/">De-Stress in Mere Minutes</a></h4>
    <cite>Posted Mon 4.28.08</cite>

                <p class="all"><a href="http://health.yahoo.com/experts/healthieryou/">View All Posts &#187;</a>

                </p>
            </li>
            <li class="item">   <a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/healthnews/bio/simeon-margolis/"><img width="125" height="154" class="lz" alt="Simeon Margolis, M.D., Ph.D." src="http://l.yimg.com/fz/ls/he/blogs/carousel/SimeonMargolis_carousel.png"/></a>

                    <h3><a href="http://health.yahoo.com/experts/healthnews/bio/simeon-margolis/">Simeon Margolis, M.D., Ph.D.</a></h3>

                    <h4><a href="http://health.yahoo.com/experts/healthnews/13879/alzheimer-s-and-dementia-will-you-be-affected/">Alzheimer's and Dementia: Will&#8240;</a></h4>
    <cite>Posted Mon 4.28.08</cite>

                <p class="all"><a href="http://health.yahoo.com/experts/healthnews/">View All Posts &#187;</a>

                </p>
            </li>
            <li class="item">   <a title="View Author's Biography" class="authimg" href="http://health.yahoo.com/experts/intentblog/bio/intentblog/"><img width="125" height="154" class="lz" alt="Mallika Chopra, IntentBlog" src="http://l.yimg.com/fz/ls/he/blogs/carousel/Intentblog_carousel.png"/></a>

                    <h3><a href="http://health.yahoo.com/experts/intentblog/bio/intentblog/">Mallika Chopra, IntentBlog</a></h3>

                    <h4><a href="http://health.yahoo.com/experts/intentblog/2919/treating-a-sore-throat/">Treating a Sore Throat</a></h4>
    <cite>Posted Mon 4.28.08</cite>

                <p class="all"><a href="http://health.yahoo.com/experts/intentblog/">View All Posts &#187;</a>

                </p>
            </li>
        </ol>
    </div>
</div>

Javascript

window.onload=function(){
(function () {
                var carousel;

                YAHOO.util.Event.onDOMReady(function (ev) {
                    var carousel = new YAHOO.widget.Carousel("container", {
                                animation: { speed: 0.5 },
                                describedby: "my-carousel-label"
                        });

                    carousel.render(); // get ready for rendering the widget
                    carousel.show();   // display the widget
                });
            })();
}

非常感谢您的帮助。

1
我的建议是使用基于Mootools构建的东西。你可以适应运行在Mootools 1.4上的这个 - http://jsfiddle.net/NfSLP/ - Sergio
谢谢@Sergio。但是如果可能的话，我更愿意使用同一个旋转木马。 - yetanotherse
看了你的两个fiddles... 似乎问题出在CSS上... 使用Firebug查看两个CSS样式... 我非常确定它们被覆盖了... - DarkHorse
我在使用Firebug检查MooTools的fiddle时遇到了以下错误： SyntaxError: 非法字符 [中断此错误]GIF89aconversion.js (第1行，第6列)SyntaxError: 语法错误 [中断此错误]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://ww combo?...-min.js (第42行) - DarkHorse
@Shishir，我认为问题在于YUI与Mootools不太兼容。许多方法具有相同的名称，而且没有太多的解决办法。 - Sergio
@Sergio 我想那么只有切换到基于Mootools的走马灯了。感谢您的帮助。 - yetanotherse
1个回答
1
如上所建议，我认为最好的选择是使用基于Mootools的Carousel。
如果您想这样做，我可以提供以下贡献：（使用您的CSS文件和布局） FIDDLE CSS（除了您的文件之外的额外内容）：
ol {
    list-style: none;
    overflow-y: hidden;
    overflow-x: visible;
    position: relative;
    padding:0px;
    height:320px;
    width:10000px;
}
ol#carousel li.item {
    float: left;
    width:471px;
}
#container {
    height:400px;
    width:471px;
}

Mootools
var items = document.getElements('li.item');
var carousel = $('carousel');

/**************************************
Caroussel functions
**************************************/

var li_index = 0;

function gotoSlide(ind) {
    li_index = ind;
    var pos = items[ind].getPosition().x - carousel.getPosition().x;
    li_thumbs.each(function (e, i) {
        e.removeClass('yui-carousel-nav-page-selected');
        if (ind == i) e.addClass('yui-carousel-nav-page-selected');
    });
    carousel.morph({
        'margin-left': -pos
    });
};



/**************************************
Create rest of markup
**************************************/

var container = document.id('container');
container.addClass('yui-carousel-visible yui-carousel-horizontal yui-carousel');
var nav = new Element('div', {
    'class': 'yui-carousel-nav'
});
var li = new Element('li');
var ul = new Element('ul');
var span0 = new Element('span', {
    'class': 'yui-carousel-button'
});
var span1 = new Element('span', {
    'class': 'yui-carousel-button'
});
var btn = new Element('button');
var div_content = new Element('div', {
    'class': 'yui-carousel-content'
});

btn.clone().set('id', 'yui-gen10').inject(span0);
span0.addClass('yui-carousel-first-button').inject(nav);
btn.clone().set('id', 'yui-gen11').inject(span1);
span1.addClass('yui-carousel-next-button').inject(nav);

items.each(function (ele, ind) {
    li.clone().set('id', 'nav_button_' + ind).addEvent('click', function () {
        li_index = ind;
        gotoSlide(ind);
    }).inject(ul);
});
ul.getElement('li').addClass('yui-carousel-nav-page-selected');
ul.inject(nav);

div_content.inject(container);
nav.inject(container, 'top');
div_content.wraps(carousel);
document.getElements('.yui-carousel-button button').addEvent('click', function () {
    var ind = (this.id).split('yui-gen1')[1] == 0 ? li_index - 1 : li_index + 1;
    if (ind < 0 || ind > items.length - 1) return false;
    gotoSlide(ind);
});
var li_thumbs = $$('.yui-carousel-nav ul li');
1
感谢 @Sergio。它运行得很好，感谢你花时间并提供所需的CSS和JS。悬赏金归您 :) - yetanotherse
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接