Javascript API

htmxはライブラリの主要な焦点ではありませんが、主に拡張機能の開発またはイベントの処理を目的とした、小さなAPIヘルパーメソッドを提供しています。

hyperscriptプロジェクトは、htmxベースのアプリケーションにより広範なスクリプトサポートを提供することを目的としています。

#メソッド - htmx.addClass()

このメソッドは、指定された要素にクラスを追加します。

#パラメータ

または

#例
  // add the class 'myClass' to the element with the id 'demo'
  htmx.addClass(htmx.find('#demo'), 'myClass');

  // add the class 'myClass' to the element with the id 'demo' after 1 second
  htmx.addClass(htmx.find('#demo'), 'myClass', 1000);

#メソッド - htmx.ajax()

htmxスタイルのAJAXリクエストを発行します。このメソッドはPromiseを返すため、コンテンツがDOMに挿入された後にコールバックを実行できます。

#パラメータ

または

または

#例
    // issue a GET to /example and put the response HTML into #myDiv
    htmx.ajax('GET', '/example', '#myDiv')

    // issue a GET to /example and replace #myDiv with the response
    htmx.ajax('GET', '/example', {target:'#myDiv', swap:'outerHTML'})

    // execute some code after the content has been inserted into the DOM
    htmx.ajax('GET', '/example', '#myDiv').then(() => {
      // this code will be executed after the 'htmx:afterOnLoad' event,
      // and before the 'htmx:xhr:loadend' event
      console.log('Content inserted successfully!');
    });

#メソッド - htmx.closest()

指定された要素の親から、要素自身を含めて、最も近い一致する要素を見つけます。

#パラメータ
#例
  // find the closest enclosing div of the element with the id 'demo'
  htmx.closest(htmx.find('#demo'), 'div');

#プロパティ - htmx.config

htmxが実行時に使用する構成を保持するプロパティ。

メタタグを使用することが、これらのプロパティを設定するための推奨されるメカニズムであることに注意してください。

#プロパティ
#例
  // update the history cache size to 30
  htmx.config.historyCacheSize = 30;

#プロパティ - htmx.createEventSource

新しいServer Sent Eventソースを作成するために使用されるプロパティ。これは、カスタムSSEセットアップを提供するために更新できます。

#値
#例
  // override SSE event sources to not use credentials
  htmx.createEventSource = function(url) {
    return new EventSource(url, {withCredentials:false});
  };

#プロパティ - htmx.createWebSocket

新しいWebSocketを作成するために使用されるプロパティ。これは、カスタムWebSocketセットアップを提供するために更新できます。

#値
#例
  // override WebSocket to use a specific protocol
  htmx.createWebSocket = function(url) {
    return new WebSocket(url, ['wss']);
  };

#メソッド - htmx.defineExtension()

新しいhtmx 拡張機能を定義します。

#パラメータ
#例
  // defines a silly extension that just logs the name of all events triggered
  htmx.defineExtension("silly", {
    onEvent : function(name, evt) {
      console.log("Event " + name + " was triggered!")
    }
  });

#メソッド - htmx.find()

セレクタに一致する要素を見つけます

#パラメータ

または

#例
    // find div with id my-div
    var div = htmx.find("#my-div")

    // find div with id another-div within that div
    var anotherDiv = htmx.find(div, "#another-div")

#メソッド - htmx.findAll()

セレクタに一致するすべての要素を見つけます

#パラメータ

または

#例
    // find all divs
    var allDivs = htmx.findAll("div")

    // find all paragraphs within a given div
    var allParagraphsInMyDiv = htmx.findAll(htmx.find("#my-div"), "p")

#メソッド - htmx.logAll()

すべてのhtmxイベントをログに記録します。デバッグに役立ちます。

#例
    htmx.logAll();

#メソッド - htmx.logNone()

htmxイベントをログに記録しません。以前にデバッガーを有効にした場合は、これを呼び出して無効にします。

#例
    htmx.logNone();

#プロパティ - htmx.logger

htmxがログ記録に使用するロガー

#値
#例
    htmx.logger = function(elt, event, data) {
        if(console) {
            console.log("INFO:", event, elt, data);
        }
    }

#メソッド - htmx.off()

要素からイベントリスナーを削除します

#パラメータ

または

#例
    // remove this click listener from the body
    htmx.off("click", myEventListener);

    // remove this click listener from the given div
    htmx.off("#my-div", "click", myEventListener)

#メソッド - htmx.on()

要素にイベントリスナーを追加します

#パラメータ

または

#例
    // add a click listener to the body
    var myEventListener = htmx.on("click", function(evt){ console.log(evt); });

    // add a click listener to the given div
    var myEventListener = htmx.on("#my-div", "click", function(evt){ console.log(evt); });

    // add a click listener to the given div that should only be invoked once
    var myEventListener = htmx.on("#my-div", "click", function(evt){ console.log(evt); }, { once: true });

#メソッド - htmx.onLoad()

htmx:loadイベントのコールバックを追加します。これは、例えばJavaScriptライブラリでコンテンツを初期化するなど、新しいコンテンツを処理するために使用できます。

#パラメータ
#例
    htmx.onLoad(function(elt){
        MyLibrary.init(elt);
    })

#メソッド - htmx.parseInterval()

htmxが行う方法と一致する間隔文字列を解析します。タイミング関連の属性を持つプラグインに役立ちます。

注意：整数に続けてsまたはmsを受け入れます。その他のすべての値はparseFloatを使用します

#パラメータ
#例
    // returns 3000
    var milliseconds = htmx.parseInterval("3s");

    // returns 3 - Caution
    var milliseconds = htmx.parseInterval("3m");

#メソッド - `htmx.process()`

新しいコンテンツを処理し、htmxの動作を有効にします。これは、通常のhtmxリクエストサイクル以外でDOMに追加されたコンテンツがあり、それでもhtmx属性を機能させたい場合に役立ちます。

#パラメータ
#例
  document.body.innerHTML = "<div hx-get='/example'>Get it!</div>"
  // process the newly added content
  htmx.process(document.body);

#メソッド - htmx.remove()

DOMから要素を削除します

#パラメータ

または

#例
  // removes my-div from the DOM
  htmx.remove(htmx.find("#my-div"));

  // removes my-div from the DOM after a delay of 2 seconds
  htmx.remove(htmx.find("#my-div"), 2000);

#メソッド - htmx.removeClass()

指定された要素からクラスを削除します

#パラメータ

または

#例
  // removes .myClass from my-div
  htmx.removeClass(htmx.find("#my-div"), "myClass");

  // removes .myClass from my-div after 6 seconds
  htmx.removeClass(htmx.find("#my-div"), "myClass", 6000);

#メソッド - htmx.removeExtension()

htmxから指定された拡張機能を削除します

#パラメータ
#例
  htmx.removeExtension("my-extension");

#メソッド - htmx.swap()

HTMLコンテンツのスワップ（およびセトリング）を実行します

#パラメータ
#例
    // swap #output element inner HTML with div element with "Swapped!" text
    htmx.swap("#output", "<div>Swapped!</div>", {swapStyle: 'innerHTML'});

#メソッド - htmx.takeClass()

兄弟要素から指定されたクラスを取得するため、兄弟要素の中で、指定された要素だけがクラスを持ちます。

#パラメータ
#例
  // takes the selected class from tab2's siblings
  htmx.takeClass(htmx.find("#tab2"), "selected");

#メソッド - htmx.toggleClass()

要素の指定されたクラスを切り替えます

#パラメータ
#例
  // toggles the selected class on tab2
  htmx.toggleClass(htmx.find("#tab2"), "selected");

#メソッド - htmx.trigger()

要素で指定されたイベントをトリガーします

#パラメータ
#例
  // triggers the myEvent event on #tab2 with the answer 42
  htmx.trigger("#tab2", "myEvent", {answer:42});

#メソッド - htmx.values()

htmx値解決メカニズムを介して指定された要素に対して解決される入力値を返します

#パラメータ
#例
  // gets the values associated with this form
  var values = htmx.values(htmx.find("#myForm"));