JSパラメータパネルの表示/非表示設定

1.1 問題説明

パラメータパネルは折り畳むボタンで隠すことは可能ですが、あるユーザはこのボタンは細くて不便だと思っています。

今回は下記のような効果を実現します。

マウスオーバーする時自動的に展開し、なければ自動的に折り畳む。

1.2 実現方法

パラメータパネルの展開と隠す動作は下記のJavascript文で実現来ます。

$('.parameter-container-collapseimg-down').click(); //展開
$(".parameter-container-collapseimg-up").click() //隠す

マウスクリック、マウスオーバーとマウスアウトイベントによって展開と隠すことをコントロールできます。

2.1 事例１マウスオーバー

パラメータパネルにマウスオーバーする時展開、帳票内容にマウスオーバーする時隠すこと

1) テンプレートGettingStarted.cptを利用してサンプルを作成します。

2) [テンプレート]>[テンプレートWEB属性]>[改ページプレビュー]をクリック、「テンプレート個別設定」を選び「ロード完了後」イベントを追加。下記のよう：

Javascript文:

$('.fr-horizontalboxlayout').bind('mouseover',function(){
    $('.parameter-container-collapseimg-down').click();//パラメータパネルにマウスオーバーする時展開
});
$('.content-container').bind('mouseover',function(){
    $('.parameter-container-collapseimg-up').click();//内容にマウスオーバーする時隠す
});

3) テンプレートを「パラメータパネル表示非表示-01.cpt」として保存、「改ページプレビュー」ボタンをクリックする

2.2 事例２マウスクリック

帳票内容部分を左クリックすると、パラメータパネルが隠すこと

1)「ロード完了後」イベントを下記のように変更：

Javascript文:

$('.content-container').bind('click',function(){
    $('.parameter-container-collapseimg-up').click(); //クリックすると非表示
});

2)テンプレートを「パラメータパネル表示非表示-02.cpt」として保存、「改ページプレビュー」ボタンをクリックする

2.3 事例３プレビュー後

テンプレートをプレビューする後にパラメータパネルが自動的に隠すこと

1)パラメータパネルに「初期化後」イベントを追加。下記のよう：

Javascript文:

setTimeout(function() {
    $('.parameter-container-collapseimg-up').trigger("click");
}, 100);  //100ミリ秒後自動的に隠す

2)テンプレートを「パラメータパネル表示非表示-03.cpt」として保存、「改ページプレビュー」ボタンをクリックする

3.1 事例１

パラメータパネル表示非表示-01.cpt

3.2 事例２

パラメータパネル表示非表示-02.cpt

3.3 事例３

パラメータパネル表示非表示-03.cpt