JavaScript フレームワーク (xmlplus) コンポーネントの紹介 (2) ボタン-jsチュートリアル-php.cn

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

零下一度

リリース： 2017-05-04 10:21:21

オリジナル

1075 人が閲覧しました

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 サイトの他の関連記事を参照してください。