2

そのため、ウェブサイトにスライドショーがあり、ウィンドウサイズがモバイルのときにリストだけに変えたいと思っています。jqueryプラグインを無効にする方法や、ウィンドウのサイズ変更の機能を無効にしてスライドを無効にし、スライドリストのモバイルスタイルを作成する方法があるかどうかを考えていました。

これを行うための最良の方法は何だと思いますか?

ありがとう！

4

3 に答える 3

1

作成した要素とイベント リスナーを削除できるteardown()orメソッドでスライドショーを使用します。destroy()

jQuery UI ウィジェット ファクトリを使用するすべての jQuery プラグインにはこれがありますが、残念ながら他の多くのプラグインにはありません。このカルーセルhttps://github.com/richardscarrott/jquery-ui-carouselを試すことができますが、必ず jQuery ウィジェット ファクトリを含めるようにしてください: http://jqueryui.com/widget/

第 2 に、デバイスがモバイルかどうかを調べようとしないでください。デバイスの観点から考えて行き詰まらないでください。ユーザーがスマートフォンでカルーセルを表示したい場合はどうすればよいでしょうか? デバイスがモバイルと誤って解釈された場合はどうなりますか? 仮定を立てることは、あなたを噛むために戻ってくるかもしれません。機能とプロパティの検出はより安全であり、より将来に適したものになるはずです。

解決しようとしている問題について考えてみてください。「このスライドショーは、小さなビューポートでリストとして表示した方がうまくいくでしょう」という場合はmatchMedia()、プラグインをインスタンス化する前に、ウィンドウのサイズを確認するか、メディア クエリをテストしてください (なぜビューポートのサイズが変更されたり、デバイスの向きが変わったりした場合は、元に戻すためだけにすべての作業を行ってください)。

プレーンな JS (および比較的最新のブラウザーの場合) では、次のようになります。

var slideshowControl = function(element, breakpoint) {

    var api;

    var initSlideshow = function() {
        api = new Slideshow(element);
    };

    var removeSlideshow = function() {
        api.teardown();
        api = undefined;
    };

    // Test media query
    return function() {

        // Test if match media is available
        var matchMedia = window.matchMedia || window.msMatchMedia;

        if ( ! matchMedia) {
            return;
        }

        if (matchMedia('all and (max-width:' + breakpoint + ')').matches && ! api) {
            return initSlideshow();
        }

        if (matchMedia('all and (min-width:' + breakpoint + ')').matches && api) {
            return removeSlideshow();
        }
    };

}(document.querySelector('.slideshow'), 640);

window.addEventListener('resize', slideshowControl);
window.addEventListener('DOMContentLoaded', slideshowControl);
于 2013-04-23T15:10:49.977 に答える
0

プラグインを呼び出す前に、ウィンドウ サイズを確認してください。例えば：

height = $(window).height();
width = $(window).width();
if(height > 300 || width > 200) {
  // Initialize plugin
}

または、開始してからウィンドウが小さくなりすぎたときに停止する場合 (プラグイン自体を無効にする方法があると仮定します):

$(window).resize(function() {
  height = $(window).height();
  width = $(window).width();
  if(height < 300 || width < 200) {
    // Stop plugin
  }
});
于 2013-04-23T04:44:25.100 に答える
-1

リクエストが $_SERVER['HTTP_USER_AGENT'] からのものかどうかを確認し、user_agent がモバイル ブラウザであるか、プラグインを使用してこの部分を実行しているかどうかを確認します。

http://detectmobilebrowsers.com/

リクエストがモバイルから来た場合。モバイルページにリダイレクトします。

于 2013-04-23T04:39:42.990 に答える