JavaScript MDCRipple を Ajax ロード済みボタンに追加
このチュートリアルでは、AJAX をロードした HTML ボタンに MDCRipple を追加する方法を説明します。 UNPKG CDN の CSS および JavaScript ファイルを介して MDC を使用します。
JavaScript MDCRipple を Ajax ロード済みボタンに追加
AJAX リクエストはサーバー上で機能するため、ライブ サーバーにアクセスできる場合は、このセクションをスキップできます。 ただし、ライブ サーバーにアクセスできない場合は、XAMPP をダウンロード してください。
XAMPP をインストールしたら、XAMPP インストールで htdocs フォルダーを見つけて、作業ディレクトリを作成します。 このディレクトリには、この記事のコード サンプル プロジェクトが含まれます。
HTML コードは、UNPKG CDN から MDC CSS および JavaScript ファイルを読み込みます。 また、HTML <button> で構成される <main> 要素が含まれます。
このボタンには、値が関数である onclick イベント属性があります。 この関数は、ユーザーがボタンをクリックして AJAX リクエストを開始したときに呼び出されます。
したがって、次のコードは HTML です。
<head>
<meta charset="utf-8">
<title>MDC with Ajax</title>
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
</head>
<body>
<main id="mdc-button-container">
<button type="button" onclick="loadMDCButton()">CLICK ME</button>
</main>
</body>
</html>
次に、作業ディレクトリに別の HTML ファイルを作成して保存します。 ファイルにmdc-button.htmlという名前を付けることができます。
このファイルには、HTML ボタンのコードが含まれます。 さらに、ボタンには MDC クラス名があります。
したがって、JavaScript を介して MDCRipple を簡単にアタッチできます。 以下は、mdc-button.html のコードです。
<button class="mdc-button mdc-button--raised">
<span class="mdc-button__ripple"></span>
<span class="mdc-button__label">Click for Ripple</span>
</button>
JavaScript コードは AJAX 接続を作成し、次のように動作します。
- 新しい
XMLHttpRequestを作成します。 XMLHttpRtouestのonloadメソッドを使用して、次のことを行います。
2.1<main>要素の ID を取得します。
2.2innerHTMLプロパティをXMLHttpRequestの応答テキストに設定します。
2.3mdc-button.htmlのボタンに MDCRipple を添付します。mdc-button.htmlファイルへのGETリクエストを開きます。mdc-button.htmlを<main>要素のボタンの代わりに送信します。
以下は、JavaScript 関数のコードです。
function loadMDCButton() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById('mdc-button-container').innerHTML =
this.responseText;
mdc.ripple.MDCRipple.attachTo(document.querySelector('.mdc-button'));
} xhttp.open('GET', 'mdc-button.html', true);
xhttp.send();
}
以下は、サンプル プロジェクトの完全なコードです。
<head>
<meta charset="utf-8">
<title>MDC with Ajax</title>
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
</head>
<body>
<main id="mdc-button-container">
<button type="button" onclick="loadMDCButton()">CLICK ME</button>
</main>
<script type="text/javascript">
function loadMDCButton() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("mdc-button-container").innerHTML = this.responseText;
mdc.ripple.MDCRipple.attachTo(document.querySelector('.mdc-button'));
}
xhttp.open("GET", "mdc-button.html", true);
xhttp.send();
}
</script>
</body>
出力：
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn