ホームページ > ウェブフロントエンド > jsチュートリアル > jquery プラグイン hiAlert は Web ページ ダイアログを実装します。

jquery プラグイン hiAlert は Web ページ ダイアログを実装します。

WBOY
リリース: 2016-05-16 16:01:31
オリジナル
1392 人が閲覧しました

IE ブラウザの警告ウィンドウには、「ブーン」という恐ろしい音とともに、何か悪いことが起こりそうな予感がしてうんざりしています。現在、Web ページのポップアップ警告ボックス (alert)、確認ダイアログ ボックス (confirm)、入力ボックス (prompt) の表示効果は、ブラウザによって異なります。この記事では、hiAlert プラグインを使用してダイアログ ボックスを統一します。あなたのためのウェブページのスタイル。

hiAlert プラグインは、jquery.alerts に基づいて改良されており、一般的に使用されるプロンプト ボックスがいくつか含まれており、グラデーション プロンプト バー効果とポップアップ Web ページ レイヤー効果も提供されています。現在、すべての主流ブラウザと互換性があります。

使用方法

hiAlert には、使用できる 5 つのメソッドが用意されています。

1. ハイアラート

hiAlert(コンテンツ、タイトル、コールバック)
hiAlert メソッドは 3 つのパラメーターを提供します。content: コンテンツ、title: ダイアログ ボックスのタイトル、callback: コールバック関数。何もない場合は、次のように記述しません。

hiAlert("欢迎来到helloweba.com","提示"); 
ログイン後にコピー

2. こんにちは確認してください

hiconfirm(コンテンツ,タイトル,コールバック)
hiconfirm メソッドは 3 つのパラメーターを提供します。content: コンテンツ、title: ダイアログ ボックスのタイトル、callback: コールバック関数。何もない場合は、次のように記述しません。

hiConfirm('你确认此操作吗?','确认框',function(r){ 
  hiOverAlert('你的反馈是: ' + r); 
}); 
ログイン後にコピー

3. プロンプト

hiPrompt(コンテンツ、入力解除、タイトル、コールバック)
hiconfirm メソッドは 4 つのパラメータを提供します。content: コンテンツ、deinput: 入力ボックスのデフォルト値、title: ダイアログ ボックスのタイトル、callback: コールバック関数、何もない場合は、次のように記述しません。

hiPrompt('请填写:','默认值','输入框',function(r){ 
  if(r) hiOverAlert('你填入的内容是“' + r+'”'); 
}); 
ログイン後にコピー

4. ハイボックス

hiBox(obj,title,w,h,submit,cancel,callback)
hiBox メソッドは 7 つのパラメータを提供します。 obj: 開くように指定されたオブジェクト (唯一のオブジェクト)、つまり、ダイアログ ボックスに表示されるコンテンツに関連付けられたオブジェクト、title: タイトル、w: 幅、h: 高さ、submit:設定できる内容のオブジェクトは「submit」です。コールバックがある場合は、ここをクリックしてコールバック動作に戻ります。cancel: ダイアログ ボックス内のキャンセルまたは閉じるボタン オブジェクト、callback: 次のようなコールバック関数。

hiBox('#showbox', '标题',400,'','','.a_close'); 
ログイン後にコピー

5.hiOverAlert

hiOverAlert(コンテンツ,タイムアウト)
hiOverAlert は、このサイトの記事の効果と同様に、情報プロンプト バーの効果を表示するために使用されます。content: プロンプトの内容、timeout: プロンプト時間の 2 つのパラメータが提供されます。デフォルトは 3000 (3 秒) です。例:

hiOverAlert('操作提示条信息',1500); 
ログイン後にコピー

使用する場合は、jQuery ライブラリと hiAlert プラグイン、および対応する CSS スタイルを必ずロードしてください。 CSS を変更してダイアログ ボックスをさらに美しくすることもできます。さらに、ダイアログ ボックスの効果をドラッグする必要がある場合は、jquery.ui.draggable.js をロードする必要があります。詳細については、こちらをご覧ください。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート