JavaScript フレームワーク (xmlplus) コンポーネントの紹介 (2) ボタン

xmlplus は、フロントエンドおよびバックエンド プロジェクトを迅速に開発するための JavaScriptフレームワーク です。この記事では、xmlplus コンポーネント デザイン シリーズの button を主に紹介します。興味のある方は参考にしてください。

アイコン以外に、ボタンが最も単純なコンポーネントである可能性があります。次に、ButtonGroup ピースを定義する方法を見てみましょう。

ネイティブボタンコンポーネントを使用する

xmlplusでは、HTML要素もコンポーネントとして存在します。そのため、buttonタグまたはinputタグを使用して、ボタンコンポーネントを直接使用できます。次の例に示すように:

Example: {
  xml: "<p id=&#39;example&#39;>\
       <button>Default</button>\
       <input type=&#39;submit&#39;>Primary</input>\
     </p>"
}

ネイティブ ボタンの外観はそれほど魅力的ではありませんが、ネイティブ ボタンは特別にパッケージ化されていないため、レンダリングが最も速く、実行が最も効率的です。プロジェクトに特別なビジュアル要件がない場合は、

Bootstrap スタイル ボタン

を使用してください。ブートストラップ スタイルを使用してボタン コンポーネントを定義することをお勧めします。従来の方法でブートストラップ ボタンを使用するには、次のように使用します。

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>

注意深く観察してください、それはあなたが求めている以上のものをあなたに与えてくれると感じますか? type=button がたくさん見つかっただけでなく、btn もたくさん見つかりました。ここにコンポーネントがあります。これはブートストラップ スタイルに基づいていますが、ボタンの使用が大幅に簡素化されています。

Button: {
  xml: "<button type=&#39;button&#39; class=&#39;btn&#39;/>",
  fun: function (sys, items, opts) {
    this.addClass("btn-" + opts.type);
  }
}

このボタンコンポーネントは、元のボタンに繰り返し書き込む必要があるコンテンツをカプセル化します。これを使用する場合、ターゲットボタンを指定するための型属性を指定するだけで済み、より使いやすくなります。新しいボタン コンポーネント の使用方法を以下に示します。

<Button type=&#39;default&#39;>Default</Button>
<Button type=&#39;primary&#39;>Primary</Button>
<Button type=&#39;success&#39;>Success</Button>

アイコン付きボタン

ボタンにはテキストのほかにアイコンを付けることもできます。適切なアイコンを使用すると、ボタンの目的がより鮮明で直感的にわかります。ここでは、EasyUI のアイコン ボタンを例として、アイコン ボタンをカプセル化して使用する方法を説明します。まず、EasyUI アイコン ボタンの本来の使い方を見てみましょう。

<p style="padding:5px 0;">
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:&#39;icon-add&#39;">Add</a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:&#39;icon-remove&#39;">Remove</a>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:&#39;icon-save&#39;">Save</a>
</p>

は、前節の Bootstrap ボタンのカプセル化と似ています。繰り返しの部分が観察によって抽出され、変更された部分が interface の形式で表示されます。上のボタンのアイコンの種類名とテキストのみが可変なので、次のようなデザインを作ることができます:

Button: {
  xml: "<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton"/>",
  fun: function (sys, items, opts) {
    this.attr("data-options" + "iconCls:&#39;icon-" + opts.type);
  }
}

以下は新しいアイコンの使用方法です。これは明らかに元の使用方法よりも簡単です。

<p style="padding:5px 0;">
  <Button type=&#39;add&#39;>Add</Button>
  <Button type=&#39;remove&#39;>Reomve</Button>
  <Button type=&#39;save&#39;>Save</Button>
  <Button type=&#39;cut&#39;>Cut</Button>
</p>

ボタンコンポーネントをカスタマイズ

車輪の再発明を避けるために、Bootstrap、EasyUIなどのオープンソースフレームワークを使用してください。ただし、これらのオープンソース プロジェクトがニーズを満たさない場合は、自分で行う必要があります。

簡単にするために、上記の Bootstrap フレームワークが存在しないと仮定して、上記のボタンのセットをどのように設計するか?この種の練習は非常に有意義であり、ある例から別の例への推論を引き出すのに役立ちます。

ここで、上のボタン コンポーネントをもう一度観察してみましょう。 Bootstrap は、結合できるいくつかのスタイル クラスを設計していることがわかります。その中には、すべてのボタンで btn が必要です。さらに、btn-default、btn-primary などは、必要に応じて btn と結合したスタイル クラスを形成できます。さて、このアイデアに基づいて、次のコンポーネント フレームワークを設計できます。

Button: {
  css: "#btn { 这里是按钮基本的样式 }\
     #default { 这里是default样式 }\
     #primary { 这里是primary样式 }",
  xml: "<button type=&#39;button&#39;/>",
  fun: function (sys, items, opts) {
    this.addClass("#btn #" + opts.type, this);
  }
}

上記の設計アイデアと、以前の Bootstrap スタイル定義ボタンの直接使用の違いは、前者では各グローバル スタイル クラスがすでに定義されており、それを 直接引用するだけするだけであることです。ここでは、ボタン コンポーネント内で関連するスタイル クラスを定義する必要があります。カプセル化の観点から見ると、後者の方がグローバル クラス名を公開しないため、前者よりも一貫性が高くなります。以下は、このコンポーネントの使用例です。

Example: {
  xml: "<p id=&#39;example&#39;>\
       <Button type=&#39;default&#39;>Default</Button>\
       <Button type=&#39;primary&#39;>Primary</Button>\
       <Button type=&#39;success&#39;>Success</Button>\
     </p>"
}

簡単にするために、ここのカスタム ボタン コンポーネントではホバー スタイルとアクティブ スタイルが省略されているため、ブートストラップ ボタンとは多少異なることに注意してください。

この一連の記事は、xmlplus フレームワークに基づいています。 xmlplus についてあまり詳しくない場合は、www.xmlplus.cn にアクセスしてください。詳細な入門ドキュメントはここから入手できます。

以上がJavaScript フレームワーク (xmlplus) コンポーネントの紹介 (2) ボタンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。