如何动态加载基础轨道? [英] How to dynamically load foundation orbit?

问题描述

在我的JavaScript中，如果窗口是特定宽度，则将data-orbit属性添加到预期的滑块.在$(window).resize()和$(function(){})上触发.

In my javascript, if the window is a specific width, add the data-orbit attribute to my intended slider. This fires on $(window).resize() and $(function(){}).

精简版...

   var ui = {
        mobile : function() {
            var i = 0;
            if($(window).width() <= 568) {
                this.resizeOffers();
            } else {
                this.mobileClear();
            }
        },
        resizeOffers : function() {
                $('#offers .inner').attr('data-orbit', "");

        },
        mobileClear : function() {
                $('#offers .inner').removeAttr('data-orbit');

        }
    }

如果在窗口宽度符合条件的情况下加载页面，则一切都很好.如果您以正常的窗口宽度加载页面，然后调整为媒体查询的大小，很显然dom不会加载dom，因此就不会有滑块动画或动态添加的dom dom元素.

Everything works great if you load the page while the window width falls into the condition. If you load the page with a normal window width, then resize to the media query, obviously orbit didn't load with the dom so there is no slider animation or dynamically added orbit dom elements.

我的问题是...

文件加载后，如何让轨道操纵dom?还是不可能?

How can I have orbit manipulate the dom, after the document has loaded? Or is this not possible?

谢谢，
赛斯

Thanks,
Seth

推荐答案

考虑到这一点，您可以使用ajax加载轨道js，然后在dom准备就绪后启动它.

Thinking about this you could load the orbit js using ajax then initiate it once the dom is ready.

 $(document).ready(function(){

   //load the orbit JS
   $.ajax({
     url: 'js/foundation/foundation.orbit.js',
     dataType: 'script',
     success: function(){
       //initiate orbit
       console.log('loaded');
       $(document).foundation('orbit');
     },
     async: false
   });

});

这篇关于如何动态加载基础轨道?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！