jquery.vibrate.jsライブラリを使用した振動制御

今日はjQuery Vibrate.jsライブラリについて書きたいと思います。 このライブラリを使用すると、モバイルデバイスでバイブレーションを構成できます。バイブレーションの長さが異なるさまざまなモードを選択できます。

モバイルデバイスの振動により、メッセージや電話についてユーザーに警告したり、ゲームでのフィードバックを表示したりできます。

ライブラリを接続するには、jQuery.vibrate.min.jsファイルをjQueryと組み合わせて使用​​する必要があります。

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="build/jquery/jquery.vibrate.min.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

以下の例は、id =” example”の要素をクリックしたときの振動を示しています。

 $("#example").vibrate(); //  50  . $("#example").vibrate("short"); //  20  . $("#example").vibrate("long"); //  100  .
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次の例では、エレメントをクリックすると、最大3000ミリ秒で振動します。

 $("#example").vibrate({ duration: 3000, trigger: "touchstart" });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

50ミリ秒続くアイテムをクリックすると振動します。

 var item = $("#example"); item.vibrate("medium"); item.vibrate("default"); item.vibrate(50); $("#example-five .button").vibrate({ duration: 2000, trigger: "touchstart" });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

「少し設定」して、スマートフォンの振動要素、たとえば帝国の行進を再生できます。

最初のパラメーターは振動の持続時間を設定し、2番目のパラメーターは一時停止を設定します。

 navigator.vibrate([500,110,500,110,450,110,200,110,170,40,450,110,200,110,170,40,500]);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

パラメータから取得した長いボタンを使用した振動。

 $(“button").each(function() { $(this).vibrate(parseInt($(this).text(), 10)); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

以下のコードを使用すると、デバイスの可動性を判断し、画面に触れたときに振動を開始できます。

 var isMobile = (/iPhone|iPod|iPad|Android|BlackBerry/).test(navigator.userAgent); //   . $(".button").on(isMobile ? 'touchstart' : 'mousedown', function(e) { //  . navigator.vibrate(Infinity); //  . }); $(".button").on(isMobile ? 'touchend' : 'mouseup', function(e) { navigator.vibrate(0); //  . });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

もちろん、このライブラリの欠点について注意する必要があります。 iOS Safari、Opera Mini、IE、BlackBerryなどのブラウザーでは機能しません。

ここで 、ライブラリをダウンロードして、動作をテストできます。