大數(shù)據(jù)報(bào)表中如何實(shí)現(xiàn)滾動(dòng)的公告效果-創(chuàng)新互聯(lián)

小編今天帶大家了解大數(shù)據(jù)報(bào)表中如何實(shí)現(xiàn)滾動(dòng)的公告效果,文中知識(shí)點(diǎn)介紹的非常詳細(xì)。覺(jué)得有幫助的朋友可以跟著小編一起瀏覽文章的內(nèi)容,希望能夠幫助更多想解決這個(gè)問(wèn)題的朋友找到問(wèn)題的答案,下面跟著小編一起深入學(xué)習(xí)“大數(shù)據(jù)報(bào)表中如何實(shí)現(xiàn)滾動(dòng)的公告效果”的知識(shí)吧。

“專(zhuān)業(yè)、務(wù)實(shí)、高效、創(chuàng)新、把客戶(hù)的事當(dāng)成自己的事”是我們每一個(gè)人一直以來(lái)堅(jiān)持追求的企業(yè)文化。 成都創(chuàng)新互聯(lián)是您可以信賴(lài)的網(wǎng)站建設(shè)服務(wù)商、專(zhuān)業(yè)的互聯(lián)網(wǎng)服務(wù)提供商! 專(zhuān)注于成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、軟件開(kāi)發(fā)、設(shè)計(jì)服務(wù)業(yè)務(wù)。我們始終堅(jiān)持以客戶(hù)需求為導(dǎo)向,結(jié)合用戶(hù)體驗(yàn)與視覺(jué)傳達(dá),提供有針對(duì)性的項(xiàng)目解決方案,提供專(zhuān)業(yè)性的建議,創(chuàng)新互聯(lián)建站將不斷地超越自我,追逐市場(chǎng),引領(lǐng)市場(chǎng)!

Dashboard 以豐富的動(dòng)態(tài)、可交互的可視化界面為用戶(hù)提供了更好的數(shù)據(jù)使用體驗(yàn),讓決策者能夠更高效的了解企業(yè)的重要信息和細(xì)節(jié)層次。在 DBD 的各種動(dòng)態(tài)效果中,滾屏是較為常見(jiàn)的一種,例如下圖中的數(shù)據(jù)列表因?yàn)椴季质枪潭ǖ?,因此就需要滾動(dòng)顯示數(shù)據(jù)。

大數(shù)據(jù)報(bào)表中如何實(shí)現(xiàn)滾動(dòng)的公告效果

通常報(bào)表中見(jiàn)到的滾屏是因?yàn)椤绊?yè)面大、窗口小”,也就是打開(kāi)的窗口區(qū)域容納不了整個(gè)頁(yè)面的內(nèi)容,需要靠鍵盤(pán)的方向鍵或鼠標(biāo)滾輪來(lái)移動(dòng)查看。而在 DBD 中,為了更好的交互效果,需要滾動(dòng)自動(dòng)持續(xù)進(jìn)行,只有當(dāng)鼠標(biāo)移到該區(qū)域時(shí)才暫停。這種方式雖說(shuō)已經(jīng)比較常見(jiàn)了,但一般來(lái)說(shuō)報(bào)表廠商卻并沒(méi)有直接提供,而是需要通過(guò) jquery,JS 來(lái)實(shí)現(xiàn)?,F(xiàn)在我就給大家介紹一下如何實(shí)現(xiàn)這種文字滾屏效果。

我們將在潤(rùn)乾報(bào)表設(shè)計(jì)器自帶的“設(shè)備故障分析.rpx”基礎(chǔ)上實(shí)現(xiàn)文字滾屏實(shí)例。

1. 數(shù)據(jù)集整理

對(duì)于從數(shù)據(jù)庫(kù)讀取的數(shù)據(jù),可以通過(guò)集算器,將數(shù)據(jù)整理成下面截圖中的效果。為了方便做效果,這里我直接將 ds2 這個(gè)內(nèi)建數(shù)據(jù)中的所有字段的值整理到“設(shè)備”這個(gè)字段中,并且在里面加上了些空格,以便頁(yè)面上縮進(jìn)的效果好看些。

大數(shù)據(jù)報(bào)表中如何實(shí)現(xiàn)滾動(dòng)的公告效果

2. 合并單元格

將 G15 列刪除,B15—F15 選中,合并。

3. 單元格數(shù)據(jù)類(lèi)型設(shè)置為 html

大數(shù)據(jù)報(bào)表中如何實(shí)現(xiàn)滾動(dòng)的公告效果

大數(shù)據(jù)報(bào)表中如何實(shí)現(xiàn)滾動(dòng)的公告效果

4. 設(shè)置單元格表達(dá)式,如上圖所示。下面是具體的表達(dá)式。

=“”+replace(string@q(ds2.select( 設(shè)備)),“,”,“
”)+“”

其中:

表示當(dāng)鼠標(biāo)以上區(qū)域的時(shí)候滾動(dòng)停止;

表示當(dāng)鼠標(biāo)移開(kāi)的時(shí)候繼續(xù)滾動(dòng)。

5. 調(diào)整樣式

原 B15-F15 設(shè)置了各行異色,因?yàn)槲覀兊奈淖譂L動(dòng)項(xiàng)作為統(tǒng)一的一串內(nèi)容,所以按照以上設(shè)置,效果感覺(jué)會(huì)有些突兀,如下圖所示。

大數(shù)據(jù)報(bào)表中如何實(shí)現(xiàn)滾動(dòng)的公告效果

去掉 B15-F15 背景色的設(shè)置,這樣滾動(dòng)區(qū)域就整體渾然一體。

大數(shù)據(jù)報(bào)表中如何實(shí)現(xiàn)滾動(dòng)的公告效果

經(jīng)過(guò)以上步驟我們的數(shù)據(jù)列表就在 DBD 面板中滾動(dòng)起來(lái)了,并且當(dāng)鼠標(biāo)指向數(shù)據(jù)的時(shí)候就會(huì)停止?jié)L動(dòng),鼠標(biāo)移開(kāi)的時(shí)候就繼續(xù)滾動(dòng)了,這樣的交互效果無(wú)疑會(huì)為你的大屏展現(xiàn)錦上添花。

上面這個(gè)小例子簡(jiǎn)單實(shí)現(xiàn)了文字滾動(dòng)顯示的效果。下面我具體講解下看似神奇的標(biāo)簽的各個(gè)屬性值,相信看過(guò)后一定會(huì)幫助您實(shí)現(xiàn)更好的文字滾動(dòng)效果:

大數(shù)據(jù)報(bào)表中如何實(shí)現(xiàn)滾動(dòng)的公告效果

另外,您也可以將 <marquee> 和 </marquee> 之間的內(nèi)容替換成圖像或其它對(duì)象。

感謝大家的閱讀,以上就是“大數(shù)據(jù)報(bào)表中如何實(shí)現(xiàn)滾動(dòng)的公告效果”的全部?jī)?nèi)容了,學(xué)會(huì)的朋友趕緊操作起來(lái)吧。相信創(chuàng)新互聯(lián)小編一定會(huì)給大家?guī)?lái)更優(yōu)質(zhì)的文章。謝謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持!

當(dāng)前標(biāo)題:大數(shù)據(jù)報(bào)表中如何實(shí)現(xiàn)滾動(dòng)的公告效果-創(chuàng)新互聯(lián)
文章鏈接:http://muchs.cn/article16/djgpgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供建站公司企業(yè)網(wǎng)站制作、網(wǎng)站排名、虛擬主機(jī)標(biāo)簽優(yōu)化、云服務(wù)器

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

成都app開(kāi)發(fā)公司