この記事は機械翻訳のミラー記事です。元の記事にジャンプするにはこちらをクリックしてください。

眺める: 20094|答える: 2

[HTML/HTML5] とても美しいアラートメッセージボックス SweetAlert

[リンクをコピー]
掲載地 2015/12/24 12:00:48 | | | |





Sweet Alertは、従来のJavascrip{filter}t Alertに代わる美しいリマインド効果です。 SweetAlertは自動的にページの中央に合わせ、デスクトップパソコン、スマホ、タブレットのいずれを使っても見栄えが良いです。 さらに、柔軟な制御のために幅広いカスタム設定オプションが利用可能です。

使い方:

紹介:

<scrip{filter}t src="dist/sweetalert.min.js"></scrip{filter}t> <link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
では、簡単な例を挙げます:

swal({ タイトル:「エラー!」、テキスト:「これが私のエラーメッセージ!」、タイプ: "error", confirmButtonText: "Cool" });
添付ファイルパッケージ: sweetalert-master.zip (650.13 KB, ダウンロード数: 9, 售价: 2 粒MB)

議論
デフォルト値

Descrip{filter}tion
タイトルnull(必須)モーダルのタイトルです。 これは「title」キーの下でオブジェクトに追加するか、関数の最初のパラメータとして渡されるかのいずれかです。
テキストヌルモーダルのためのdescrip{filter}tion。 これは「テキスト」キーの下にオブジェクトに加えるか、関数の2番目のパラメータとして渡すことができます。
種類ヌルモーダルの種類。 SweetAlertには4つの組み込みタイプがあり、対応するアイコンアニメーションを表示します。警告", "エラー", "成功「そして」情報」. 「入力「プロンプトモーダルを得るために」 キー「タイプ」の下にオブジェクトに入れるか、関数の3番目のパラメータとして渡すことができます。
allowEscapeKeytrueもし に設定した場合trueユーザーはEscapeキーを押すことでモーダルを無効にできます。
カスタムクラスヌルモーダル用のカスタムCSSクラスです。 「customClass」キーのもとでオブジェクトに追加できます。
allowOutsideClickfalseもし に設定した場合trueユーザーはモーダルの外側をクリックして終了できます。
ショーキャンセルボタンfalseもし に設定した場合true「キャンセル」ボタンが表示され、ユーザーはクリックしてモーダルを終了できます。
showConfirmButtontrueもし に設定した場合false「OK/確認」ボタンは隠されています。 利用時はタイマーを設定するか、AllowOutsideClickをtrueに設定してユーザーを迷惑にならないようにしてください。
確認ボタンテキスト「わかった」これを使って「確認」ボタンのテキストを変更してください。 showCancelButtonがtrueに設定されている場合、確認ボタンは自動的に「OK」ではなく「Confirm」を表示します。
confirmButtonColor「#AEDEF4」これを使って「確認」ボタンの背景色(HEX値が必要です)を変更してください。
cancelButtonText「キャンセル」これを使って「キャンセル」ボタンのテキストを変更してください。
確認を閉じるtrue設定falseユーザーが「確認」ボタンを押してもモーダルを開いたままにしたい場合。 これは「確認」ボタンに付随する機能が別のSweetAlertの場合に特に便利です。
キャンセル終了truecloseOnConfirmと同じですが、キャンセルボタンが有効です。
imageURL(画像URL)ヌルモーダル用のカスタマイズアイコンを追加してください。 画像へのパスを含む文字列を含むべきです。
imageサイズ「80x80」imageUrlが設定されている場合、imageSizeを指定して、アイコンのpxサイズを表現できます。 「x」で区切られた2つの値を入力します。 最初の値は幅、2つ目は高さです。
タイマーヌルモーダルの自動クローズタイマー。 ミリ秒単位で設定しています。
HTMLfalsetrueに設定すると、タイトルとテキストのパラメータから抜けません。 (XSS攻撃を心配する場合はfalseに設定してください。)
アニメーションtrueもし に設定した場合falseモーダルのアニメーションは無効になります。 可能な(文字列)値:ポン(アニメーションがtrueに設定された場合、デフォルト)上からスライド式, 下から滑る
inputType「テキスト」入力フィールドの種類を変更する際はtype: "input"(例えば、ユーザーにパスワードを入力してもらう場合に役立ちます)。
inputPlaceholderヌル入力タイプを使う際には、ユーザーを助けるためのプレースホルダーを指定することができます。
inputValueヌル入力時に表示したいデフォルトのテキスト値を指定してくださいtype: "input"
showLoaderOnConfirmfalse設定trueボタンを無効にして、何かが読み込まれていることを示すために。





先の:HTTPSのあのもの(1) HTTPSの原理(再版)
次に:ASPXとMVCのページキャプチャ
 地主| 掲載地 2017/02/25 18:36:23 |
掲載地 2017/12/08 15:20:55 |
Layuiのポップフレームも使い心地が良いです
免責事項:
Code Farmer Networkが発行するすべてのソフトウェア、プログラミング資料、記事は学習および研究目的のみを目的としています。 上記の内容は商業的または違法な目的で使用されてはならず、そうでなければ利用者はすべての結果を負うことになります。 このサイトの情報はインターネットからのものであり、著作権紛争はこのサイトとは関係ありません。 ダウンロード後24時間以内に上記の内容を完全にパソコンから削除してください。 もしこのプログラムを気に入ったら、正規のソフトウェアを支持し、登録を購入し、より良い本物のサービスを受けてください。 もし侵害があれば、メールでご連絡ください。

Mail To:help@itsvse.com