1

このスクリプトは、次の関数を使用して、<input type="date">ネイティブで利用できるかどうかをブラウザに尋ねます。そうでない場合は、CDN から jQuery UI を読み込みます。

$(document).ready(function(event){
    // Date Picker with fallback
    // http://diveintohtml5.info/forms.html#type-date
    var i = document.createElement("input");
    i.setAttribute("type", "date");
    if (i.type == "text") {

        // No native date picker support :(
        // Use jQuery UI to create one then dynamically replace that <input> element.
        var jQueryUICSS = document.createElement('link');
        jQueryUICSS.href = "http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css";
        jQueryUICSS.rel = "stylesheet";
        document.getElementsByTagName('head')[0].appendChild(jQueryUICSS);

        $.getScript("http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js", function() {
            $.datepicker.setDefaults(
                $.extend($.datepicker.regional[''])
            );
        });
    }
});

私がやりたいことは、Paul Irish が定義した Protocol Relative メソッドを使用して、CSS と JS の両方にローカル フォールバックがあることを確認することですが、これに似たHTML5 Boilerplateに従って更新されたバージョンを使用します。

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-ui.min.js"><\/script>')</script>

元の例では、Javascript はlinkjquery の Web サイトのみを指す要素を作成しています。このプロトコル相対メソッドの 2 行目の記述方法と JavaScript を使用した作成方法がよくわかりません。

同様に、jQuery UI js ファイルがgetScript()メソッドによって追加されています。$.datepicker()意図したとおりにロードできるこのファイルのローカル バージョンを追加するにはどうすればよいですか? getScript()そうしないと、日付ピッカーが未定義であるというコンソールエラーをスローするため、使用する必要がありました。

ローカル ファイルのこのフォールバック メソッドを、既に記述したコードにどのように含めますか?

4

1 に答える 1

1

Promise パターンを使用できます。

$.getScript("//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js")
  .then(null, function handleError() {
      console.log("first try failed, loading local version");
      return $.getScript("js/vendor/jquery-ui.min.js");
  }).done(function() {
      console.log("succeeded to load jQuery UI");
      $.datepicker.setDefaults(
          $.extend($.datepicker.regional[''])
      );
  }).fail(function(_, status, error) {
      console.error("both attempts to load jQuery UI failed", status, error);
  });

ただし、一部の jQuery バージョンでは、$.getScript関数がクロスドメイン スクリプトで失敗しないように思われるため、おそらくタイムアウトを使用する必要があります。

于 2013-09-18T21:53:54.000 に答える