0

isTouchDevice が true であるかどうかに応じて、条件付きで .js ファイルをロードしようとしています。そして、表示されるスライダーのタイプとそれぞれに必要なオプションを定義するクラスを #slider に追加した直後。私は自分が間違っていることを理解できず、これを達成する方法について他の提案を受け入れています。

更新: https://github.com/woothemes/FlexSlider http://swipejs.com/

JS:

$(document).ready(function() {
function isTouchDevice() {
return (typeof(window.ontouchstart) != 'undefined') ? true : false;
};

if (isTouchDevice == true) {//Hook up Swipe

    $.ajax({
      type: "GET",
      url: "swipe.min.js",
      dataType: "script"
    }).done(function() { //Hook up Swipe
        $("#slider").addClass("swipe");
        var slider = new Swipe(document.getElementById('slider'));
    });
};

else {//Hook up Flexslider

    $.ajax({
      type: "GET",
      url: "jquery.flexslider.js",
      dataType: "script"
    }).done(function() { //Hook up Flexslider
        $("#slider").addClass("flexslider");
        $('.flexslider').flexslider({directionNav: false});
};
});

HTML マークアップ:

<div id="slider">

     <ul class="slides">

         <li>
             <img src="images/loch-nevis.jpg" alt="" />
         </li>

         <li>
             <img src="images/snow.jpg" alt="" />
         </li>

         <li>
             <img src="images/iceland.jpg" alt="" />
         </li>

     </ul><!-- end slides -->

</div><!-- end slider -->
4

2 に答える 2

0

isTouchDeviceが正しく機能している場合は、lab.jsまたはyepnopeを試すことができます

lab.jsの例：

if (isTouchDevice===true) {
  $LAB
    .script('swipe.min.js')
    .wait(function() {
      // do some stuff
    })
}

yepnope :(これは間違っている可能性があります。yepnopeを実際に使用したことはありません）

yepnope({
  test:isTouchDevice,
  yep:'swipe.min.js',
  callback: function (testResult,key) {
    // do some stuff
  }
});
于 2012-09-12T18:10:32.160 に答える
0

jQuery の getScript メソッドを使用するのはどうですか?

if (isTouchDevice == true) {//Hook up Swipe
    $.getScript("swipe.min.js", 
        function() {
            $("#slider").addClass("flexslider");
            $('.flexslider').flexslider({directionNav: false })  // Removed errant ","
        }
    );
}
于 2012-09-12T17:57:52.457 に答える