.NETで縮小・展開可能な分割パネルを持ったWebページを作る－その2

スタイルシートを利用して、C1WebSplitterコンポーネントをデザインする

イベントを使ってドラッグを無効にする

　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ページが作れると思います。