Latest前のバージョン
:JSパラメータパネルの表示/非表示設定 Back to Doc
編集時間:
Doc Length:Image Number:Directory Number:
変更理由:
1.説明编辑
1.1 問題説明
パラメータパネルは折り畳むボタンで隠すことは可能ですが、あるユーザはこのボタンは細くて不便だと思っています。
今回は下記のような効果を実現します。
マウスオーバーする時自動的に展開し、なければ自動的に折り畳む。
1.2 実現方法
パラメータパネルの展開と隠す動作は下記のJavascript文で実現来ます。
$('.parameter-container-collapseimg-down').click(); //展開
$(".parameter-container-collapseimg-up").click() //隠す
マウスクリック、マウスオーバーとマウスアウトイベントによって展開と隠すことをコントロールできます。
2.事例编辑
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」として保存、「改ページプレビュー」ボタンをクリックする
