このトピックは WebUpload コントロールをカスタマイズして、カスタムのルック アンド フィールを設定する方法を紹介します。コントロールをスタイルするために必要なスクリプトとスタイルについても学習します。
Ultimate UI for ASP.NET アップロード コントロール (または WebUpload) は、他の jQuery ウィジェットのように、スタイリングに jQuery UI CSS Framework を使用します。Ultimate UI for ASP.NET には、Infragistics および Metro と呼ばれるカスタム jQuery UI テーマが含まれています。これらのテーマによって、Infragistics ウィジェットおよび標準の jQuery UI ウィジェットが、プロフェッショナルで魅力的な外観になります。
Infragistics および Metro テーマに加えて、Infragistics ウィジェットの基本 CSS レイアウトに必要な structure ディレクトリがあります。
Infragistics および Metro テーマは、jQuery/css フォルダー内のインストール ディレクトリに配置されています。テーマをアプリケーションに追加するには、css フォルダー全体 (structure および themes ディレクトリを含む) をサイトの場所にコピーします。
図 1: 製品インストール時に含まれるテーマ フォルダー
Infragistics テーマは、jQuery UI テーマに通常存在するすべてのスタイルを含むカスタム テーマです。このテーマは、別のテーマで置き換えることができますが、ASP.NET コントロールを正しく表示するには、{IG Resources ルート}/jQuery/css/structure/infragistics.css ファイルへの参照が必要です。
Metro テーマは、クリーン、モダンかつ高速な Metro デザイン言語の実装です。れには、Infragistics テーマと同様に、{IG Resources ルート}/jQuery/css/structure/infragistics.css と同じ要件があります。
WebUpload コントロールには、標準の jQuery UI テーマのスタイルシートへのリンクが必要です。IG テーマの場合、テーマのスタイルシートへの参照をページに含める必要があります:
HTML の場合:
<link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
<link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />Metro テーマは、jQuery テーマの後に参照されます。以下のスタイルシートは必要となります:
HTML の場合:
<link href="css/themes/metro/infragistics.theme.css " rel="stylesheet" type="text/css" />
<link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />アップロード CSS プロパティは、コントロールのすべてのスタイルが適用されるメンバーです。表 1 は CSS オブジェクト プロパティのすべてのプロパティとそれらに適用されるすべてのルールを示します。これによって、特定のクラスを上書きすることで固有のテーマを作成する自由が与えられます。
注: 表にリストされたクラスを上書きするだけでテーマ ローリングはコントロールをテーマ化します。詳細は、 WebUpload テーマ ローラー サンプルを参照してください。
注: アップロード コントロールでクラスのすべてがカスタムとは限りません。一部は jQuery UI CSS Framework から再利用されます。
Upload プロパティ showFileExtensionIcon が True に設定されると、コントロールは、アップロードされるファイルのタイプを示すアイコンをファイル名の左に表示します。
図 3: アップロードの間のファイル拡張子アイコン
デフォルトで、よく使用される拡張子のほとんどには組み込みアイコンがあります。アイコンでサポートされる種類は以下のカテゴリのとおりです。
図 4 に、複数ファイルのアップロード操作の間にアイコンのデフォルト値がどのように表示されるかを示します。
図 4: 複数ファイルのアップロード処理の間のアップロード コントロール
注: ファイルの種類が組み込み以外の場合にはデフォルトのアイコンが適用されます。
ファイル拡張子アイコンをカスタマイズしたい場合には、新しいアイコンを fileExtensionIcons プロパティに提供することでデフォルト値をオーバーライドできます。
fileExtensionIcons プロパティは各ファイルの種類にマップするオブジェクトの配列を受け入れます。リスト 1 は既存の拡張子のスタイルを新しい CSS クラスに関連付ける方法を示します。
リスト 1: デフォルトのファイル拡張子のオーバーライド
JavaScript の場合:
fileExtensionIcons: [ { ext: ['gif', 'jpg', 'jpeg', 'png', 'bmp', 'yuv', 'tif', 'thm', 'psd'],
css: 'image-class',
def: true
},
{
ext: ['mp3', 'wav', 'mp4', 'aac', 'mid', 'wma', 'ra', 'iff', 'aif', 'm3u', 'mpa'],
css: 'audio-class',
def: false
}
]各マッピングは以下の 3 つの値を考慮する必要があります。
ext : アイコンを共有するファイル拡張子の配列
css : ext プロパティで定義された拡張子を持つ各ファイルに適用される CSS クラス
def : これが ext 配列で定義されなかったタイプに適用されるデフォルトのルールかどうかを指定します。
複数のデフォルトのプロパティが設定されたファイル拡張子アイコンがある場合には、最後の定義が優先されます。