I. Overview
1.1 Requirement
In the data entry preview mode, the Data Entry widget will have black borders around it on mousemove or mousedown.
In some scenarios, it is necessary to change the border colors on mousemove and mousedown.
Before modification:
After modification:
1.2 Solution
Set the colors of the widget borders on mousemove: contentPane.curLGP.$glance
Set the colors of the widget borders on mousedown: _g().curLGP.$fD
Reset CSS styles of the top, bottom, left and right borders on mousemove and mousedown. In this way, you are enabled to customize border colors
II. Sample
Change the border colors to blue (#0000ff) on mousemove and to red (#ff0000) on mousedown.
2.1 Add an event
In the Designer’s menu bar, click [Template]-[Web Attributes]-[Data Entry Settings], select [Individually set for the template], and add a Loading End event, as shown below:
Input the following JavaScript codes:
// Set the colors of the cell borders on mousedown
_g().curLGP.$fD.fleft.css('background','#ff0000');// Set the color of the left border on mousedown
_g().curLGP.$fD.fright.css('background','#ff0000');// Set the color of the right border on mousedown
_g().curLGP.$fD.ftop.css('background','#ff0000');// Set the color of the top border on mousedown
_g().curLGP.$fD.fbottom.css('background','#ff0000');// Set the color of the bottom border on mousedown
// Set the colors of the cell borders on mousemove
_g().curLGP.$glance.left.css('background','#0000ff');// Set the color of the left border on mousemove
_g().curLGP.$glance.right.css('background','#0000ff');// Set the color of the right border on mousemove
_g().curLGP.$glance.top.css('background','#0000ff');// Set the color of the top border on mousemove
_g().curLGP.$glance.bottom.css('background','#0000ff');// Set the color of the bottom border on mousemove
2.2 Preview
Save the template and click [Data Entry Preview]. The preview effect is shown as below:
Previous：Cell Text Twinkling via CSS and Conditional Formatting
