[英]How to resize spotfire text area dynamically
即使我隱藏了過濾器,文本區域中的過濾器也會消耗空間。 我想隱藏整個文本區域,以便為我的可視化提供更多空間。
文本區域應該是動態的,如果用戶想要任何過濾器,應該有切換按鈕來幫助打開過濾器,如果他們不想要,那么應該隱藏文本區域
<SpotfireControl id="c970da0f1b5549a88d27f368f6770f2f" />
<DIV id="showHidecontainer">
<TABLE style="WIDTH: 550.5pt" cellSpacing=0 cellPadding=0 width=751 border=0>
<COLGROUP>
<COL style="WIDTH: 118pt; mso-width-source: userset; mso-width-alt: 5741" width=157>
<COL style="WIDTH: 21.5pt; mso-width-source: userset; mso-width-alt: 1133" width=31>
<COL style="WIDTH: 118pt; mso-width-source: userset; mso-width-alt: 5741" width=157>
<COL style="WIDTH: 21.5pt; mso-width-source: userset; mso-width-alt: 1133" width=31>
<COL style="WIDTH: 118pt; mso-width-source: userset; mso-width-alt: 5741" width=157>
<COL style="WIDTH: 21.5pt; mso-width-source: userset; mso-width-alt: 1133" width=31>
<COL style="WIDTH: 118pt; mso-width-source: userset; mso-width-alt: 5741" width=157>
<TBODY>
<TR style="HEIGHT: 15.75pt" height=21>
<TD class=xl65 style="BORDER-TOP: windowtext 1.5pt solid; BORDER-RIGHT: windowtext 1.5pt solid; WIDTH: 240pt; BORDER-BOTTOM: windowtext 1.5pt solid; BORDER-LEFT: windowtext 1.5pt solid; BACKGROUND-COLOR: #3166ff" width=157>
<P align=center><STRONG><FONT color=#ffffff size=4 face=Calibri>Metric Selection</FONT></STRONG></P></TD>
<TD style="BORDER-TOP-COLOR: #f7fdfa; WIDTH: 21.5pt; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" width=31></TD>
<TD class=xl65 style="BORDER-TOP: windowtext 1.5pt solid; BORDER-RIGHT: windowtext 1.5pt solid; WIDTH: 118pt; BORDER-BOTTOM: windowtext 1.5pt solid; BORDER-LEFT: windowtext 1.5pt solid; BACKGROUND-COLOR: #3166ff" width=157>
<P align=center><STRONG><FONT color=#ffffff size=4 face=Calibri>Channel</FONT></STRONG></P></TD>
<TD style="BORDER-TOP-COLOR: #f7fdfa; WIDTH: 21.5pt; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" width=31></TD>
<TD class=xl65 style="BORDER-TOP: windowtext 1.5pt solid; BORDER-RIGHT: windowtext 1.5pt solid; WIDTH: 128pt; BORDER-BOTTOM: windowtext 1.5pt solid; BORDER-LEFT: windowtext 1.5pt solid; BACKGROUND-COLOR: #3166ff" width=157>
<P align=center><STRONG><FONT color=#ffffff size=4 face=Calibri>Trade Panel Selection</FONT></STRONG></P></TD>
<TR style="HEIGHT: 15pt" height=20>
<TD class=xl66 style="BORDER-RIGHT: windowtext 1.5pt solid; BORDER-TOP-COLOR: windowtext; BORDER-BOTTOM: black 1.5pt solid; BORDER-LEFT: windowtext 1.5pt solid; BACKGROUND-COLOR: transparent" rowSpan=7><FONT size=4 face=Calibri><P><STRONG><U>Metric Selection:</U></STRONG></P>
<P><STRONG>Metric:</STRONG> <SpotfireControl id="96184134b79e4dd4a0fb06aba8af4442" /> </P>
<P><STRONG>Threshold: </STRONG><SpotfireControl id="0695ba526b4045a5ba87408ff3b508e3" /></P>
<P><STRONG>Plan Type: </STRONG><SpotfireControl id="b8617a4560804448823d6bd61bba9235" /></P></FONT></TD>
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD>
<TD class=xl66 style="BORDER-RIGHT: windowtext 1.5pt solid; BORDER-TOP-COLOR: #f7fdfa; BORDER-BOTTOM: black 1.5pt solid; BORDER-LEFT: windowtext 1.5pt solid; BACKGROUND-COLOR: transparent" rowSpan=7><FONT size=4 face=Calibri><SpotfireControl id="8f9ef7c8a16d451889733e5d3d9f8a43" /></FONT></TD>
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD>
<TD class=xl66 style="BORDER-RIGHT: windowtext 1.5pt solid; BORDER-TOP-COLOR: #f7fdfa; BORDER-BOTTOM: black 1.5pt solid; BORDER-LEFT: windowtext 1.5pt solid; BACKGROUND-COLOR: transparent" rowSpan=7><FONT size=4 face=Calibri><SpotfireControl id="1e977330ab2b4e1e94bfd62c710b11ef" /></FONT></TD>
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD>
<TR style="HEIGHT: 15pt" height=20>
<TD style="HEIGHT: 15pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=20></TD>
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD>
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD></TR>
<TR style="HEIGHT: 15pt" height=20>
<TD style="HEIGHT: 15pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=20></TD>
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD>
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD></TR>
<TR style="HEIGHT: 15pt" height=20>
<TD style="HEIGHT: 15pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=20></TD>
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD>
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD></TR>
<TR style="HEIGHT: 15pt" height=20>
<TD style="HEIGHT: 15pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=20></TD>
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD>
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD></TR>
<TR style="HEIGHT: 15pt" height=20>
<TD style="HEIGHT: 15pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=20></TD>
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD>
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD></TR>
<TR style="HEIGHT: 15.75pt" height=21>
<TD style="HEIGHT: 15.75pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=21></TD>
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD>
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD></TR>
<TR style="HEIGHT: 15.75pt" height=21>
<TD style="HEIGHT: 15.75pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=21></TD>
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD>
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD>
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD>
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD>
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD>
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD></TR>
</TBODY></TABLE> </div>
$("#c970da0f1b5549a88d27f368f6770f2f").on('change',function(){
$("option:selected",this).text()=="Show"?
$("#showHidecontainer").fadeIn():
$("#showHidecontainer").fadeOut()
})
您的 $("#c970da0f1b5549a88d27f368f6770f2f") 是哪種類型的點火控制? 如果是下拉菜單,您可以執行以下操作:
$('#c970da0f1b5549a88d27f368f6770f2f').on('DOMSubtreeModified',function(){
seleciton = $(this).text()
if (seleciton=="show"){$("#showHidecontainer").show()}
if (seleciton=="hide"){$("#showHidecontainer").hide()}
})
這種方法適用於 7.5+,因為它使用 HTML5
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.