I. Overview
1.1 Requirement
How to change toolbar button colors? Use CSS to achieve the effect as shown below:
1.2 Solution
Add a Loading End event to the template, fetch buttons using classes in JavaScript and change font colors using css() .
II. Sample 1: Settings for data entry preview
2.1 Add a Loading End event
Click [Template]＞[Web Attributes] ＞[Data Entry Settings] to add a Loading End event:
Input the following JavaScript codes:
$('.fr-btn-text.x-emb-submit').css('color', 'red'); // Set the color for the Submit button
$('.fr-btn-text.x-emb-export').css('color', 'red'); // Set the color for the Export button
$('.fr-btn-text.x-emb-verify').css('color', 'red'); // Set the color for the Data Verification button
$('.fr-btn-text.x-emb-flashprint').css('color', 'red'); // Set the color for the Print Client button
$('.fr-btn-text.x-emb-print').css('color', 'red'); // Change print color
$('.fr-btn-text.x-emb-email').css('color', 'red'); // Change email text color
$('.fr-btn-text.x-emb-appendrow').css('color','red'); //Change the color of Add Record
$('.fr-btn-text.x-emb-deleterow').css('color', 'red'); // Set the color for Delete Columns/Rows button
2.2 Preview
Save the template and click [Data Preview]. The preview effect is shown as below:
III. Sample 2: Settings for Pagination Preview
3.1 Add a Loading End event
1) Add a toolbar button if you need, as shown in the figure below:
2) Click [Template]＞[Web Attributes] ＞[Pagination Preview] to add a Loading End event:
Input the following JavaScript codes:
$('.fr-btn-text.x-emb-previous').css('color','red');//Change the color for Previous button
$('.fr-btn-text.x-emb-first').css('color','red');//First
$('.fr-btn-text.x-emb-next').css('color','red');//Next
$('.fr-btn-text.x-emb-last').css('color','red');//Last
$('.fr-btn-text.x-emb-excel').css('color','red');//Export as a Excel file
$('.fr-btn-text.x-emb-export').css('color','red');//Set the color for the Export button
$('.fr-btn-text.x-emb-print').css('color','red');//Set the color for the Print color
$('.fr-btn-text.x-emb-email').css('color','red');//Set the color for the Email button
$('.fr-btn-text.x-emb-flashprint').css('color','red');//Set the color for the Print Client button
3.2 Preview
Save the template and click [Pagination Preview]. The preview effect is shown as below:
