報表中怎樣實現滾動的公告效果
Dashboard 以豐富的動態、可互動的視覺化介面為使用者提供了更好的資料使用體驗,讓決策者能夠更高效的瞭解企業的重要資訊和細節層次。在 DBD 的各種動態效果中,滾屏是較為常見的一種,例如下圖中的資料列表因為佈局是固定的,因此就需要滾動顯示資料。
通常報表中見到的滾屏是因為“頁面大、視窗小”,也就是開啟的視窗區域容納不了整個頁面的內容,需要靠鍵盤的方向鍵或滑鼠滾輪來移動檢視。而在 DBD 中,為了更好的互動效果,需要滾動自動持續進行,只有當滑鼠移到該區域時才暫停。這種方式雖說已經比較常見了,但一般來說報表廠商卻並沒有直接提供,而是需要透過 jquery,JS 來實現。現在我就給大家介紹一下如何實現這種文字滾屏效果。
我們將在潤乾報表設計器自帶的“裝置故障分析.rpx”基礎上實現文字滾屏例項。
1. 資料集整理
對於從資料庫讀取的資料,可以透過集算器,將資料整理成下面截圖中的效果。為了方便做效果,這裡我直接將 ds2 這個內建資料中的所有欄位的值整理到“裝置”這個欄位中,並且在裡面加上了些空格,以便頁面上縮排的效果好看些。
2. 合併單元格
將 G15 列刪除,B15—F15 選中,合併。
3. 單元格資料型別設定為 html
4. 設定單元格表示式,如上圖所示。下面是具體的表示式。
=“”+replace(string@q(ds2.select( 裝置)),“,”,“
”)+“”
其中:
表示當滑鼠以上區域的時候滾動停止;
表示當滑鼠移開的時候繼續滾動。
5. 調整樣式
原 B15-F15 設定了各行異色,因為我們的文字滾動項作為統一的一串內容,所以按照以上設定,效果感覺會有些突兀,如下圖所示。
去掉 B15-F15 背景色的設定,這樣滾動區域就整體渾然一體。
經過以上步驟我們的資料列表就在 DBD 皮膚中滾動起來了,並且當滑鼠指向資料的時候就會停止滾動,滑鼠移開的時候就繼續滾動了,這樣的互動效果無疑會為你的大屏展現錦上添花。
上面這個小例子簡單實現了文字滾動顯示的效果。下面我具體講解下看似神奇的標籤的各個屬性值,相信看過後一定會幫助您實現更好的文字滾動效果:
另外,您也可以將 < marquee> 和 </ marquee> 之間的內容替換成影像或其它物件。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69900830/viewspace-2664968/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 實現報表滾動到底部翻頁效果
- 那些特殊邊框效果在報表中要怎樣實現?
- 如何實現報表滾動到底部進行翻頁的效果
- 前端實現文字滾動效果前端
- 怎樣實現動態列報表,也就是列數不固定的報表?
- 什麼是視差滾動?如何實現視差滾動的效果?
- 巢狀滾動效果實現討論巢狀
- 使用純 CSS 實現滾動陰影效果CSS
- unity 實現輪盤方式的按鈕滾動效果Unity
- 怎樣實現填報表定時提交
- OverScroll彈性滾動和慣性滾動效果的實現原理——CoordinatorLayout+Behavior
- web 中怎麼實現斜線表頭效果?Web
- 大屏報表元件間的聯動互動效果實現方法元件
- H5頁面滾動阻尼效果實現H5
- JavaFx 實現水平滾動文字(跑馬燈效果)Java
- HTMl 中marquee標籤實現無縫滾動跑馬燈效果HTML
- 填報表實現隔行異色的效果
- Android 實現GridView的橫向滾動,實現仿京東秒殺效果AndroidView
- 類似微信首頁彈性滾動和慣性滾動效果的實現——OverScroll
- 報表展現時如何實現固定表頭效果
- 直播軟體搭建,Android實現文字滾動播放效果Android
- web 報表專案中想嵌入地圖?用什麼工具實現?怎樣實現?Web地圖
- 報表如何實現行列互換效果?
- css實現修改預設滾動條樣式CSS
- js、jQuery實現文字上下無縫輪播、滾動效果JSjQuery
- 微信小程式功能之全屏滾動效果的實現程式碼微信小程式
- 隱藏滾動條保留滾動效果
- 大屏報表中如何實現多圖表間的聯動?
- 報表工具能實現怎麼的匯出效果?
- CSS動畫-數字輪盤滾動效果實現(元件封裝,快速使用)CSS動畫元件封裝
- 十行程式碼實現網頁標題滾動效果!行程網頁
- Winfrom中怎樣可以做到這樣的彈框效果
- div滾動條樣式,水平滾動
- 直播app原始碼開源,Android 滾動的公告欄APP原始碼Android
- 巧妙利用 iframe,實現和 Ajax 一樣的非同步提交表單效果非同步
- 滑鼠滑輪上下滾動設定方法_怎樣設定滑鼠上下滾動
- 請問 appium 中如何實現滾動截圖APP
- 怎樣開發 T+0 實時報表