Jquery ui、joomla 和 safari 问题答案

【问题标题】：Jquery ui, joomla and safari problemJquery ui、joomla 和 safari 问题
【发布时间】：2010-01-22 14:33:06
【问题描述】：

我有一个 jquery ui 滑块，它在移动时滚动 div 的内容，代码如下：

    var paraHeight = $("#descPara").height();
    var maxScroll = paraHeight - 250;
    var activeScroll;
    if (maxScroll <= 0){

        //do nothing    

    } else {

        $("#slider2").slider({

            orientation: "vertical",
            min: 0,
            animate: true,
            max: maxScroll,
            value: maxScroll,
            slide: function(event, ui) {
                $("#descPara").stop().animate({'bottom': (-ui.value + maxScroll) + 'px'}, 1000);
            }
        });

    }

这在 Firefox 中可以正常工作，但在 Safari/Chrome 中却不行。在 Safari 和 Chrome 中发生的情况是，页面加载时滑块的句柄不存在，直到您单击滑块轨道并且当它确实出现时无法拖动，但是您仍然可以通过单击滑块轨道来滚动。

然而，这个问题只有在 cms joomla 中使用时才明显，在这个 cms 之外，它在所有浏览器中都能完美运行。很奇怪。

有没有人遇到过类似的问题？真的很有帮助，谢谢。

【问题讨论】：

标签： jquery jquery-ui safari joomla google-chrome

【解决方案1】：

Joomla 通常包含mootools 作为一种帮助您的方式以及一些简单的javascript 内容。这样做的一个大问题是，当使用 jQuery 时，$ 别名是为 mootools 而不是 jQuery 保留的。以下是一些解决方案。

选项 1：

如果您知道仍然需要 mootools，请修改调用 jQuery 的代码以使用 jQuery() 函数而不是 $()。像这样：

var paraHeight = jQuery("#descPara").height();
...
jQuery("#slider2").slider({
    orientation: "vertical",
    min: 0,
    animate: true,
    max: maxScroll,
    value: maxScroll,
    slide: function(event, ui) {
        jQuery("#descPara").stop().animate({'bottom': (-ui.value + maxScroll) + 'px'}, 1000);
    }
});

选项 2：

摆脱 mootools。这是 PHP 中的一个修复程序。您可以使用它来阻止 mootools 获取网页的输出（以及随后干扰您的 jQuery。）：

<?php
$user =& JFactory::getUser();
if ($user->get('guest') == 1) {
    $headers = $this->getHeadData();
    $headers['scripts'] = array();
    $this->setHeadData($headers); 
}
?>

【讨论】：