jQuery UIを使用したダイアログの使い方のチュートリアル

私は少し怠け者なので、jquery ui に関するチュートリアルは更新されていません 申し訳ありませんが、jquery ui の概要、使い方、および一般的な構造について簡単に説明します。この記事では、jquery ui で コンポーネントを使用する具体的な方法について説明します。この記事では、 jquery ui ダイアログ の使用方法について説明します。

はい、jquery ui ダイアログはこのために生まれました。 , jquery ui ダイアログは、通常は多くの

javascript コードを必要とする効果を実現するためのシンプルな インターフェイス を提供します。jquery ui ダイアログを使用して、ログイン、登録、メッセージ プロンプトやその他の機能などの多くの機能を実現できます。

ダイアログ コンポーネントを使用する前に、まずダイアログが依存する js ファイルをページに導入する必要があります。これらのファイルには js ファイルと css ファイルが含まれており、ダイアログ スタイルのサンプル コードはすべて /development-bundle/demos/dialog にあります。 / ディレクトリ 次に、ソース コードを開いて、ダイアログの種類の使用方法を確認します。私が何を言っているのか理解できない場合は、jquery UI をダウンロードした後にその使用方法を確認してください。 jquery ui コード パッケージをまだ持っていない場合は、まずダウンロードする必要があります: jquery UI の各バージョンをダウンロードします

/development-bundle/demos/dialog/default.html を例として、その概要を見てみましょう。 jquery ui ダイアログのヘッダー ファイル

<!--载入主题样式-->
<script type="text/javascript" src="../../jquery-1.6.2.js"></script>
<!--载入 jquery 核心类库-->
<script type="text/javascript" src="../../external/jquery.bgiframe-2.1.2.js"></script>
<!--这个主要是为了兼容 IE6 而载入的一个插件-->
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<!--载入 jquery ui 核心类库-->
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<!--载入 jquery ui 组件核心类库-->
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
<!--载入 jquery ui 鼠标相关组件-->
<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
<!--载入 jquery ui 拖动相关组件，主要是为了让 dialog 能够被拖动-->
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
<!--载入 jquery ui 位置相关组件，主要是为了让 dialog 能够居中或者控制位置-->
<script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script>
<!--载入 jquery ui 调整大小相关组件，主要是为了让 dialog 的大小能够通过鼠标来调整-->
<script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script>
<!--载入 jquery ui 对话框组件-->

これらのインポートされたファイルの一部は必要ではなく、ダイアログのパラメーターに従って決定する必要があります。たとえば、ダイアログのサイズを調整する必要がない場合は、必要ありません。 jquery.ui.resizable.js ファイルをロードして、ダイアログを確認する必要があります。ダイアログはどのように表示されるのでしょうか?

<script type="text/javascript">
$(function() {      $( "#dialog" ).dialog();    });
</script>

はい、ダイアログの使い方はとても簡単です。多くの複雑な関数については後で説明しますが、基本的には同じです。

以上がjQuery UIを使用したダイアログの使い方のチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。