The datagrid|window| button below will show you how to implement a DataGrid as a three-dimensional table and how to achieve a stereoscopic effect in the image button. In order to complete the above content, we first have to understand the custom style of CSS, and then some simple JS code.
in order to achieve the three-dimensional large datagrid, we need to create a project that has a DataGrid and the data bound to it, as follows:
<asp:datagrid id= "DATAGRID1" runat= "server" gridlines= "horizontal" style= "Border-collapse:separate" >
<itemstyle ></ItemStyle>
</asp:datagrid>
There is one place in the code above that is very important to set the properties of the style, remember to write this
. With this data grid we need to write a CSS style that can achieve stereo effects, as shown in the CSS style:
<style>
. soliddatagrid{
coolsoliddatagrid:expression (applysolidtable (this));
Border-color: #FFFFFF;
border-bottom-width:0px;
border-left-width:0px;
border-right-width:0px;
border-top-width:0px;
}
. soliddatagriditem{
coolsoliddatagridrow:expression (APPLYSOLIDTR (this));
}
</style>
from the code we can see the use of custom style, the style using JS to achieve, so we also have the following JS code to support the above CSS style. The JS code looks like this:
<script language= "JavaScript" >
function applysolidtable (obj) {
obj.cellpadding = "0px";
obj.cellspacing = "0px";
Obj.border = "1px";
obj.width = "100%";
}
function Applysolidtr (obj) {
for (Var i=0;i<=obj.cells.length-1;i++) {
Applysolidtd (Obj.cells (i));
}
}
function Applysolidtd (CURRENTTD) {
Currenttd.bgcolor = "#E1E2E2";
Currenttd.bordercolorlight = "#929292";
Currenttd.bordercolordark = "#FFFFFF";
}
</script>
code Details I do not elaborate, and finally as long as the above CSS application in our DataGrid can achieve a three-dimensional datagrid effect. The final DataGrid looks like this:
<asp:datagrid id= "DATAGRID1" runat= "Server" cssclass= "Soliddatagrid" gridlines= "Horizontal" style= " Border-collapse:separate ">
<itemstyle cssclass= "Soliddatagriditem" ></ItemStyle>
</asp:datagrid>
Next is how to achieve a stereo effect of the image button, in fact, is very simple to achieve the general windows inside the effect of buttons, open Word to move the mouse to the toolbar you can see the effect of the method implementation. The operation is as follows: You can put a ImageButton or the browser finally explained to the image of the control, in order to achieve this effect we need the following JS script, but because we want to reuse the script so I wrote it into an HTC file, the contents of the file are as follows:
<PUBLIC:COMPONENT>
<public:attach event= "onmouseover" onevent= "Buttononmouseover ()"/>
<public:attach event= "onmouseout" onevent= "Buttononmousenormal ()"/>
<public:attach event= "onmousedown" onevent= "Buttononmousedown ()"/>
<public:attach event= "onmouseup" onevent= "Buttononmousenormal ()"/>
<script language= "JavaScript" >
function Buttononmouseover () {
Showmouseover (This.style);
}
function Buttononmousedown () {
Showmousedown (This.style);
}
function Buttononmousenormal () {
Shownormal (This.style);
}
function Showmouseover (elstyle) {
elstyle.borderleft = "1px solid buttonhighlight";
elstyle.borderright = "1px solid Buttonshadow";
elstyle.bordertop = "1px solid buttonhighlight";
Elstyle.borderbottom = "1px solid Buttonshadow";
elstyle.paddingtop = "1px";
elstyle.paddingleft = "2px";
elstyle.paddingbottom = "1px";
elstyle.paddingright = "0px";
}
function Showmousedown (elstyle) {
elstyle.borderleft = "1px solid Buttonshadow";
elstyle.borderright = "1px solid buttonhighlight";
elstyle.bordertop = "1px solid Buttonshadow";
Elstyle.borderbottom = "1px solid buttonhighlight";
elstyle.paddingtop = "1px";
elstyle.paddingleft = "2px";
elstyle.paddingbottom = "1px";
