代码之家 › 专栏 › 技术社区 › testing

yepnope的用法(相对路径、css和js)

yepnope modernizr fancybox-2 css javascript

testing · 技术社区 · 11 年前

我只想在没有触摸设备的情况下加入fancybox。到目前为止,这是我的代码:

<script>
    yepnope([{
        test : Modernizr.touch,
        nope  : './js/lib/fancybox/jquery.fancybox.pack.js',
        callback : {
            "jquery.fancybox.pack.js": function () {
                console.log("fancybox loaded!");
            }
        }
    }]);
</script>

此代码位于结束正文标记之前。我明白了 TypeError: k.apply is not a function 但这对我没有帮助。

我的问题:

我可以用这个相对路径加载js文件吗?
我的相对路径从哪里开始?从yepnope所在的小路上?
如何有条件地加载JS和CSS文件?

更新:

现在我尝试了一种不同的方式:

<script>
Modernizr.load([
    {
        test  : Modernizr.mq('screen and (max-width: 31.25em)'),
        yep  : {
            'photoswipe' : ['/js/klass.min.js', '/js/code.photoswipe-3.0.5.min.js']
        },
        nope : {
            'fancybox' : ['/js/lib/fancybox/jquery.fancybox.pack.js', '/js/lib/fancybox/jquery.fancybox.css']
        },
        callback : {
            'photoswipe': function (url, result, key) {
                var myPhotoSwipe = $("a.fancy").photoSwipe({ enableMouseWheel: false , enableKeyboard: false });
            },
            'fancybox': function (url, result, key) {
                $('a.fancy').fancybox();
            }
        }
    }
]);
</script>

我得到以下错误 TypeError: a.split is not a function 。我做错了什么?

2 回复 | 直到 11 年前

Stephen James 11 年前

Q: 我可以用这个相对路径加载js文件吗?

是的,前提是您的结构类似于:

 index.html
--js/
----lib/
------modernizr.custom.js
--------fancybox/
----------jquery.fancyboxy.pack.js

请参阅下一个答案来解释这一点。。。

Q: 我的相对路径从哪里开始?从yepnope所在的小路上?

Modernizr从html页面的位置获取路径,而不是从Modernizr加载脚本的位置获取(因为它在html中使用该路径创建了脚本引用)。

Q: 如何有条件地加载JS和CSS文件?

将一个数组传递给nope,而不是仅用于JavaScript的单个字符串:

nope : ['./js/lib/fancybox/jquery.fancybox.pack.js', './styles/fancybox/jquery.fancybox.pack.css']

看看医生,他们在这方面做得很好。。。 http://modernizr.com/docs/#load

testing 11 年前

与的相对路径 ./folder 有可能( / 一开始不是)。您也不能将键与数组一起使用。数组键或单独的键,如下所示:

<script>
    Modernizr.load({
        test: Modernizr.mq('screen and (max-width: 31.25em)'),
        yep: {
            'photoswipe-klass' : './js/klass.min.js',
            'photoswipe-js' : './js/code.photoswipe-3.0.5.min.js'
        },
        nope: {
            'fancybox-js' : './js/lib/fancybox/jquery.fancybox.pack.js',
            'fancybox-css' : './js/lib/fancybox/jquery.fancybox.css'
        },
        callback: {
            'photoswipe-js': function (url, result, key) {
                var myPhotoSwipe = $("a.fancy").photoSwipe({ enableMouseWheel: false , enableKeyboard: false });
            },
            'fancybox-js' : function (url, result, key) {
                $('a.fancy').fancybox();
            }
        }

    });
</script>