I. Overview
Sometimes, when there are many contents displayed on the report page, we need special effects in order to highlight some contents
For example, by realizing the dynamic scrolling effect of browser titles, users can see the changes of page contents when viewing other pages. Specifically, when it is required that the total regional sales exceeds 15,000, the page title will be displayed in scrolling text, and when it is lower than 15,000, the page title will be displayed in normal text, as shown below
You will learn |
|---|
|
II. Implementation ideas
The method of setting the title in JS can be used: document.title=“new title “
However, the title set by this method is static, so it is necessary to improve this method and combine the timing function to change the page title.
III. Examples
3.1 Template preparation
Open the template %FR_HOME%\webapps\webroot\WEB-INF\reportlets\GettingStartedEN.cpt, insert a row in the first row, enter the formula =D6 in cell A1, and set the first row to be invisible, as shown below.
3.2 Add a Loading End event
The JS code is as follows:
if(window.interval) clearInterval(window.interval);
$(function(){
var cnt1=$('td[id^=A1]').text();
if(parseInt(cnt1)<=15000) {
t='Accomplished Normally!';
document.title=t;
return;
}
//When the sales is less than or equal to 15,000, the display is normal
var t='';
if(parseInt(cnt1)>15000)
t="Accomplish above quota, revenue is "+parseInt(cnt1)+"...";
//When the sales is more than 15,000, it will be displayed as over-fulfilled and in scrolling text.
var s=t.split("");
function func1(){
s.push(s[0]); //Add a character to the title
s.shift(); //Remove the first element in the title
document.title = s.join("");
}
window.interval=setInterval(func1,1000);////Set to run at timed intervals, refreshing once every second
});
3.3 Save preview
After saving, the preview effect is as shown at the beginning
Note: This method is suitable for a page that is refreshed regularly for a long time in the background. When the content changes, it is judged by JS and the title bar is dynamically scrolled to highlight the results.
Previous：JS Display Hyperlink Options when Mouse Moves in
