コンポーネントの作成

ホーム > 基本的な例 > 例01

説明

DEXTUploadX5コンポーネントを使用するには、dextuploadx5-configuration.jsファイルとdextuploadx5.jsファイルをインクルードする必要があります。

<script src="../dx5/dextuploadx5-configuration.js"></script>
<script src="../dx5/dextuploadx5.js"></script>

ブラウザがdextuploadx5.jsスクリプトファイルを読むと、DEXTUploadX5を管理するdx5オブジェクトが自動的に作成されます。

コンポーネントを作成するには、コンポーネントを含むコンテナ要素が必要で、ページの最後にdx5.create関数を使ってコンポーネントを作成します。

コンポーネントのサイズは、コンポーネントを保持するコンテナのサイズに基づいています。したがって、コンテナのサイズを指定する必要があります。

<div id="dext5-container" style="width:500px; height:300px;"><!-- コンポーネントを保持するコンテナ要素 --></div>
<script>
dx5.create({
	// id 属性でコンポーネントに DOM ID を与えます。
	// parentIdはコンテナIDを指定する。
	id: "dext5", parentId: "dext5-container",
	// コンポーネントにはボタンがないので、ボタン要素を作成する必要があります。 
	// ボタン要素(input [type = button])を作成し、btnFileプロパティにターゲットIDを指定すると、ファイル追加機能が自動的にリンクされます。
	btnFile: "btn-add-files"
});
</script>

もし "DEXTUploadX5 component loading failed!"メッセージが出る場合、dextuploadx5-configuration.jsのproductPathプロパティの設定に問題があるので、パスが正しいか確認してください。

DEXTUploadX5が正しく作成された場合、onDX5Createdコールバック関数を呼び出します。使用中にエラーが発生した場合は、onDX5Error関数を呼び出すように設定されています。

function onDX5Error(id, code, msg) {
	// コンポーネントの使用中にエラーが発生した場合に呼び出されます。
}

function onDX5Created(id) {
	// コンポーネントが作成されたときに呼び出されます。
}