1

Twitter のtypeahead.jsは jQuery 1.9 (ドキュメント) に依存していますが、 Zurb Foundation 4は最新のブラウザーで Zepto.js を読み込もうとします。jQuery 1.9 が読み込まれていない場合、typeahead.js はエラー ( $.deferred is not defined) をスローします。これら 2 つのライブラリを連携させるには、どのような変更が必要かを示してください

4

2 に答える 2

2

このために、デフォルトの Zepto 1.0 と typeahead.js 0.9.3 を使用しています (これらは、これを書いた時点で現在リリースされているバージョンです)。

最初にスローされたエラーは、実際に発生する最後の問題ではありませんが、これを機能させるために行ったことを次に示します (Foundation 4 に属しているように見せるために追加した CSS と共に)。最初に欠落している deferred サポートを追加するために、 simple -deferredを含めました。Zepto.js と simple-deferred が読み込まれたら、次の行を追加して、simple-deferred が jQuery のように動作するようにする必要があります。

Deferred.installInto(Zepto);

次に、typahead.js に 2 つの変更を加える必要があります。1 つ目 ( 328 行目) では、リモート データをフェッチする元の関数は jQuery パターンを使用し、.$(ajax(url, {options})次のようになります。

var that = this, jqXhr = pendingRequests[url];
if (!jqXhr) {
  incrementPendingRequests();
  jqXhr = pendingRequests[url] = $.ajax(url, this.ajaxSettings).always(always);
}

これを機能させるには、Zepto (Zepto の$.ajax()関数は引数を 1 つだけ取り、{options}オブジェクトの一部として URL を含めます) を次のように変更します。

var that = this, jqXhr = pendingRequests[url], ajaxOptions = {'url': url};
if (!jqXhr) {
  incrementPendingRequests();
  $.extend(ajaxOptions, this.ajaxSettings);
  jqXhr = pendingRequests[url] = $.ajax(ajaxOptions).always(always);
}

このアプローチは、Zepto と jQuery の両方で機能します。次に、typaeahead.js の下部に、次のような jQuery への 2 つのハードコードされた参照があります。

    jQuery.fn.typeahead = function(method) {
      if (methods[method]) {
        return methods[method].apply(this, [].slice.call(arguments, 1));
      } else {
        return methods.initialize.apply(this, arguments);
      }
    };
  })();
})(window.jQuery);

これは、より互換性のあるものに簡単に変更できます。

    $.extend($.fn, {
      typeahead: function(method) {
        if (methods[method]) {
          return methods[method].apply(this, [].slice.call(arguments, 1));
        } else {
          return methods.initialize.apply(this, arguments);
        }
      }
    });
  })();
})(window.$);

最後に、typeahead.js は、foundation.css の一部でこの混乱を初期化するときに DOM にマークアップを追加するため、それに対抗する (そして、Foundation により適合するように作成する HTML のスタイルを設定する) ためです。この CSS を追加しました:

span.tt-dropdown-menu {
  background-color: #fff;
  border: 1px solid #ccc;
  margin-top: -15px;
  width: 100%;
}
div.tt-suggestion.tt-is-under-cursor {
  background-color: #ccc;
}
div.tt-suggestion > p {
  margin: 0;
  line-height: 35px;
}
span.twitter-typeahead {
  width: 100%;
}

これにより、他の誰かが私が整理するのにかかった時間を節約できることを願っています:)

于 2013-10-16T23:22:27.420 に答える
0

軽量の zepto オートコンプリート プラグイン https://www.npmjs.org/package/zepto.autocomplete

于 2014-08-14T03:27:39.513 に答える