プリローダーを標準のBitrix AJAXに簡単かつ迅速にインストールする方法は？

エントリー

私は長い間Habrを訪れましたが、今だけ記事に決めました。 そしてそれでも、これはまったく記事ではなく、Ajax自体でカーネルとトラブルを編集せずに、簡単に負担をかけずに、標準の悲惨なbitrixプリローダーウィンドウを独自の任意のHTML / CSSコードに置き換えて置き換える方法に関するメモです。 始めましょうか？

問題の説明

1C-Bitrixの開発者は、この問題について、そしてすべての未経験者について知っておく必要があります-私は説明します。 このCMSは、標準のテンプレートとコンポーネントでカスタムjqueryとajaxを使用します。 ドキュメントは入手可能ですが、基本的なことを行うためにドキュメントを勉強したい人はどれくらいいますか？..
原則として、標準テンプレートに何も触れない場合、「ネイティブ」のbitrix ajaxはうまく機能しません。 しかし、何かを真剣に修正しようとする場合、または独自のレイアウトをネイティブのajaxと組み合わせようとする場合、タンバリンとのダンスが始まり、デフォルトの悲惨なプリローダーを置き換えるなどの基本的なことは退屈なグーグルになり、CMSコアのコードを学習します。

この点でのBitrix TPの位置は、一般的に驚くべきものです。

残念ながら、標準のプリローダーを変更する標準的な方法はありません

最も素朴でだまされやすい人はすべて「不可能」と言うでしょう。 まあ、OK ...」そして彼らは彼らのajaxリクエストを書きに行きます。 そして、私たちはそれを受け取ってそれをします！

実装

一番下の行は簡単です-標準のajaxには2つの関数BX.showWaitとBX.closeWaitがあり、 これらはajaxからの応答を待っている間にページ上のアクションを処理します。 これらを使用して、デフォルトのプリローダーの代わりにデフォルトをロードします。

最初に、プリローダー自体を見つけます。 たとえば、Windows 8のスタイルの純粋なHTML / CSSで気に入っています。次に、テンプレートのfooter.phpを開き、タグの前にコードを入力します。

<div id="win8_wrapper"> <div class="windows8"> <div class="wBall" id="wBall_1"> <div class="wInnerBall"></div> </div> <div class="wBall" id="wBall_2"> <div class="wInnerBall"></div> </div> <div class="wBall" id="wBall_3"> <div class="wInnerBall"></div> </div> <div class="wBall" id="wBall_4"> <div class="wInnerBall"></div> </div> <div class="wBall" id="wBall_5"> <div class="wInnerBall"></div> </div> </div> </div> 

長いCSSシートを挿入しません（最後にすべてのソースがあります）。 次に、標準のプリローダーの代わりにプリローダーを読み込む関数の呼び出しを含むスクリプトを挿入します。

 var lastWait = []; /* non-xhr loadings */ BX.showWait = function (node, msg) { node = BX(node) || document.body || document.documentElement; msg = msg || BX.message('JS_CORE_LOADING'); var container_id = node.id || Math.random(); var obMsg = node.bxmsg = document.body.appendChild(BX.create('DIV', { props: { id: 'wait_' + container_id, className: 'bx-core-waitwindow' }, text: msg })); setTimeout(BX.delegate(_adjustWait, node), 10); $('#win8_wrapper').show(); lastWait[lastWait.length] = obMsg; return obMsg; }; BX.closeWait = function (node, obMsg) { $('#win8_wrapper').hide(); if (node && !obMsg) obMsg = node.bxmsg; if (node && !obMsg && BX.hasClass(node, 'bx-core-waitwindow')) obMsg = node; if (node && !obMsg) obMsg = BX('wait_' + node.id); if (!obMsg) obMsg = lastWait.pop(); if (obMsg && obMsg.parentNode) { for (var i = 0, len = lastWait.length; i < len; i++) { if (obMsg == lastWait[i]) { lastWait = BX.util.deleteFromArray(lastWait, i); break; } } obMsg.parentNode.removeChild(obMsg); if (node) node.bxmsg = null; BX.cleanNode(obMsg, true); } }; function _adjustWait() { if (!this.bxmsg) return; var arContainerPos = BX.pos(this), div_top = arContainerPos.top; if (div_top < BX.GetDocElement().scrollTop) div_top = BX.GetDocElement().scrollTop + 5; this.bxmsg.style.top = (div_top + 5) + 'px'; if (this == BX.GetDocElement()) { this.bxmsg.style.right = '5px'; } else { this.bxmsg.style.left = (arContainerPos.right - this.bxmsg.offsetWidth - 5) + 'px'; } } 

まあ、標準的な方法でプリローダーのCSSスタイルを追加することを忘れないでください-template_styles.cssにコピーするか、 header.phpに別のファイルとして接続します。

サイト上の何かをクリックしようとしています。 出来上がり-プリローダーが置き換えられました。 より「正しい」方法については、フッター接続を別の含まれる領域に移動することをお勧めします。

GitHubソース

ご清聴ありがとうございました！