带有mootools的Twitter小工具

twitter widget with mootools?

本文关键字:工具 Twitter mootools 带有      更新时间:2023-09-26

我正在尝试在我的网站上为我的twitter帐户制作选框。

和我成功使用jQuery,这是我的代码:

<div id="twitter">
    <p>
        تحميل.....</p>
    <noscript>
       هذه الخدمة بحاجة الى الجافا  سكريبت</noscript>
</div>
<script language="javascript">
    var Twitter = {
        init: function () {
            // Pass in the username you want to display feeds for
            this.insertLatestTweets('@ajialq8');
        },
        // This replaces the <p>Loading...</p> with the tweets
        insertLatestTweets: function (username) {
            var limit = 5; // How many feeds do you want?
            var url = 'http://twitter.com/statuses/user_timeline.json?screen_name=' + username + '&count=' + limit + '&callback=?';
            // Now ajax in the feeds from twitter.com
            $.getJSON(url, function (data) {
                // We'll start by creating a normal marquee-element for the tweets
                var html = '<marquee behavior="scroll" scrollamount="1" direction="right">';
                // Loop through all the tweets and create a link for each
                for (var i in data) {
                    html += '<a href="http://twitter.com/' + username + '#status_' + data[i].id_str + '">' + data[i].text + ' <i>' + Twitter.daysAgo(data[i].created_at) + '</i></a>';
                }
                html += '</marquee>';
                // Now replace the <p> with our <marquee>-element
                $('#twitter p').replaceWith(html);
                // The marquee element looks quite shite so we'll use Remy Sharp's plug-in to replace it with a smooth one
                Twitter.fancyMarquee();
            });
        },
        // Replaces the marquee-element with a fancy one
        fancyMarquee: function () {
            // Replace the marquee and do some fancy stuff (taken from remy sharp's website)
            $('#twitter marquee').marquee('pointer')
                    .mouseover(function () {
                        $(this).trigger('stop');
                    })
                    .mouseout(function () {
                        $(this).trigger('start');
                    })
                    .mousemove(function (event) {
                        if ($(this).data('drag') == true) {
                            this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
                        }
                    })
                    .mousedown(function (event) {
                        $(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
                    })
                    .mouseup(function () {
                        $(this).data('drag', false);
                    });
        },
        // Takes a date and return the number of days it's been since said date
        daysAgo: function (date) {
            // TODO: Fix date for IE...
            if ($.browser.msie) {
                return '1 day ago';
            }
            var d = new Date(date).getTime();
            var n = new Date().getTime();
            var numDays = Math.round(Math.abs(n - d) / (1000 * 60 * 60 * 24));
            var daysAgo = numDays + ' days ago';
            if (numDays == 0) {
                daysAgo = 'today';
            }
            else if (numDays == 1) {
                daysAgo = numDays + ' day ago';
            }
            return daysAgo;
        }
    };
    Twitter.init();
</script>

,但问题是有一个关键的冲突在我的旋转横幅和选框(在jQuery和MooTools之间)!!

然后我决定只使用MooTools而不是使用两个主题,但我不知道如何使用MooTools使上面的代码工作!!

如果有人能帮忙的话,我将不胜感激。

您可以使用jQuery与mootools作为临时解决方案,只需调用jQuery. noconflict()并将$(…)替换为jQuery(…)正如这里所描述的http://docs.jquery.com/Using_jQuery_with_Other_Libraries Overriding_the_.24-function

相关文章: