0

特定のブレークポイントで起動するいくつかのカスタム jquery プラグインを持つモバイル ファーストのレスポンシブ Web サイトを作成しています。

まず、コードのスニペット、次に問題を説明します...

CSS:

@media (min-width: 20em) {
  html:after {
    content: "320";
     } }
@media (min-width: 25em) {
  html:after {
    content: "400";
     } }
@media (min-width: 30em) {
  html:after {
    content: "480";
     } }

グローバルJS

var FOO = {
 mq: function() {
   return  parseInt(window.getComputedStyle(document.documentElement,':after').getPropertyValue('content').replace(/['"]/g,''),10);                     
 }
}

JQuery プラグイン 1

this.init = function()
{
 $(window).on("load resize orientationchange", function() {
   if(FOO.mq() >= 480) {
      DO SOMETHING
   }
});
};

JQuery プラグイン 2

this.init = function()
{
 $(window).on("load resize orientationchange", function() {
   if(FOO.mq() >= 560) {
      DO SOMETHING ELSE
   }
});
};

FOO.mq() を jquery プラグインに配置する際の問題は、見つかったすべての DOM オブジェクトに対して FOO.mq() 関数を起動することです (たとえば、プラグインが 10 個の画像に対して何かを実行すると、FF.mq( ) 10 回) 1 回だけチェックする必要があるため、実際には必要ありません。

サイズ変更/戻り値をグローバル オブジェクトに入れようとしましたが、動作しないようで、jquery プラグインによって取得されます。

任意のポインタをいただければ幸いです。

ありがとう

4

2 に答える 2

1

この計算値は、ドキュメントの読み込み時、またはウィンドウのレイアウトが変更された場合にのみ変化すると仮定します。

var FOO = FOO || {};      // create global namespace obj, if required
$(function() {
    var mq;               // scoped variable

    // catch events that might change the @media CSS rules
    $(window).on("load resize orientationchange", function() {
        mq = parseInt(window.getComputedStyle(document.documentElement,':after').getPropertyValue('content').replace(/['"]/g,''),10);
    });

    FOO.mq = function() { // function that just returns the scoped variable
        return mq;
    }
});
于 2013-04-30T10:48:16.603 に答える