イベントを使ってドラッグを無効にする
C1WebSplitterコントロールは、クライアント側でイベントを使えるようになっています。このイベント処理は、コントロールのイベントハンドラと違い、クライアント側で呼び出される JavaScript関数を作成し、専用のプロパティにその関数名を設定します。
| プロパティ名 | イベント発生のタイミング |
| OnClientSize | 分割バーのドラッグを開始するとき |
| OnClientSized | 分割バーのドラッグ終了後 |
| OnClientSizing | 分割バーのドラッグ中 |
| OnClientCollapse | Panel1が縮小される前 |
| OnClientCollapsed | Panel1が縮小されたとき |
| OnClientExpand | Panel1が展開される前 |
| OnClientExpanded | Panel1が展開されたとき |
JavaScript関数は、Webフォームのソースページに記述します。この関数には、イベント発生のSenderとなるC1WebSplitterを定義する「ID」とイベントのデータを含む「eventArgs」の2つのパラメータを持たせます。
例えば、分割バーのドラッグを禁止にしたいときは、Cancelプロパティを「true」に設定します。この関数をJavaScriptで作成し、OnClientSizedプロパティに関数名を設定します。
1
Webページの「ソース」をクリックし、HTMLのソースコードを表示します。
2
<body>タグのすぐ下に、「ClientSized」という関数を作成します。中身は、引数「eventArgs」を使って「Cancel 」プロパティを「true」に設定するコードだけです。
<body>
<script type="text/javascript">
function ClientSized(id, eventArgs)
{
eventArgs.Cancel = true;
}
</script>
3
「デザイン」に戻り、プロパティウィンドウでC1WebSplitterコントロール「C1WebSplitter1」のプロパティを表示し、プロパティ「OnClientSized」に、作成した関数名「ClientSized」を設定します。
これで、分割バーのドラッグ終了後、分割バーのドラッグ操作はキャンセルされ、分割バーのドラッグからマウスを離すと、分割バーは元の位置に戻るようになります。
このようにして、イベントに関連するプロパティに、行わせたい処理を書いたJavaScript関数を作成して、その関数名をプロパティの値に設定することで、いくつかのイベント処理を組み込むことができます。
まとめ
今回は、分割パネルコンポーネント「C1WebSplitter」の便利な使い方を紹介しました。
コンポーネントのデザインにスタイルシートを使用するので、デザインを変えたいときはスタイルシートを修正・変更するだけで済みますので、Webページのメンテナンスがやりやすくなります。
デザインに素人の私でも、簡単に分割パネルを持ったWebページを作成できるので、プロのデザイナの方が使えば、もっと魅力的なWebページが作れると思います。
