如何使用java脚本在表单中增加控件顶部大小 [英] How can I increase controls top size in form using java script

问题描述

设计时我们是带控件的设计页面，但是我们需要根据条件增加和减少控件最大尺寸如何通过在asp.net中使用javascript或jquery来解决这个问题，下面提到我的控件代码我需要的一些控件显示默认和我需要根据条件显示的一些控件，但控件对齐总是顶部



我尝试过：

Quote：

< asp：label id =lblEmpIDstyle =Z- INDEX：100; LEFT：8px; POSITION：absolute; TOP：42pxrunat =serverCssClass =labelBoldClass>员工ID

< asp：label id =lblDispEmpIDstyle = Z-INDEX：115; LEFT：136px; POSITION：absolute; TOP：42pxrunat =serverCssClass =fieldClass>员工ID

< asp：label id =lblFirstName style =Z-INDEX：100; LEFT：8px; POSITION：absolute; TOP：74pxrunat =serverCssClass =labelBoldClass>名字

< asp：textbox i d =txtFirstNamestyle =Z-INDEX：115;左：136px;位置：绝对; TOP：72pxrunat =serverWidth =250pxMaxLength =14CssClass =fieldClasstabIndex =1>

< cc1：AbraRequiredFieldValidator ID =arfvFirstNameControlToValidate =txtFirstNamestyle =LEFT：126px;位置：绝对; TOP：77pxrunat =server>

< asp：label id =lblMiddleNamestyle =Z-INDEX：116;左：8px;位置：绝对; TOP：106pxrunat =serverCssClass =labelBoldClass>中间名

< asp：textbox id =txtMiddleNamestyle =Z-INDEX：113;左：136px;位置：绝对; TOP：106pxtabIndex =2runat =serverWidth =250pxMaxLength =14CssClass =fieldClass>

< asp：label id =lblLastNamestyle =Z-INDEX：101;左：8px;位置：绝对; TOP：138pxrunat =serverCssClass =labelBoldClass>姓氏

< asp：textbox id =txtLastNamestyle =Z-INDEX：111;左：136px;位置：绝对; TOP：138pxtabIndex =3runat =serverWidth =250pxMaxLength =25CssClass =fieldClass>

解决方案

< blockquote>使用控件的id并使用css设置顶部。例如（JQuery），假设您想要将第一个名称标签的顶部增加250

  var  newtop = 
 
 
（'  #lblFirstName'）。position（）。top +  250 ; 
  
（' ＃lblFirstName'）。css（'  top'，newtop + '  px'）; 

请记住，ASP会改变标签，你必须考虑到这一点。申请你可能会更好要调整的元素的公共类，然后您可以通过引用类一次调整所有字段。

 var newtop =  
 
design time we are design page with controls but we need to increase and decrease controls top size based on condition how can i resolve this by using javascript or jquery in asp.net, below mentioned my controls code some of controls i need to display default and some of controls i need to display based on condition but the controls allignment always top



What I have tried:



Quote:
<asp:label id="lblEmpID" style="Z-INDEX: 100; LEFT: 8px; POSITION: absolute; TOP: 42px" runat="server" CssClass="labelBoldClass">Employee ID

            <asp:label id="lblDispEmpID" style="Z-INDEX: 115; LEFT: 136px; POSITION: absolute; TOP: 42px" runat="server" CssClass="fieldClass">Employee ID

			<asp:label id="lblFirstName" style="Z-INDEX: 100; LEFT: 8px; POSITION: absolute; TOP: 74px" runat="server" CssClass="labelBoldClass">First Name

			<asp:textbox id="txtFirstName" style="Z-INDEX: 115; LEFT: 136px; POSITION: absolute; TOP: 72px" runat="server" Width="250px" MaxLength="14" CssClass="fieldClass" tabIndex="1">

            <cc1:AbraRequiredFieldValidator ID="arfvFirstName" ControlToValidate="txtFirstName" style="LEFT: 126px; POSITION: absolute; TOP: 77px"  runat="server">

			<asp:label id="lblMiddleName" style="Z-INDEX: 116; LEFT: 8px; POSITION: absolute; TOP: 106px" runat="server" CssClass="labelBoldClass">Middle Name

			<asp:textbox id="txtMiddleName" style="Z-INDEX: 113; LEFT: 136px; POSITION: absolute; TOP: 106px" tabIndex="2" runat="server" Width="250px" MaxLength="14" CssClass="fieldClass">

			<asp:label id="lblLastName" style="Z-INDEX: 101; LEFT: 8px; POSITION: absolute; TOP: 138px" runat="server" CssClass="labelBoldClass">Last Name

			<asp:textbox id="txtLastName" style="Z-INDEX: 111; LEFT: 136px; POSITION: absolute; TOP: 138px" tabIndex="3" runat="server" Width="250px" MaxLength="25" CssClass="fieldClass">
解决方案
Use the control's id and set the top with css.  For example (JQuery), let's say you wanted to increase the top of the first name label by 250



var newtop =

('#lblFirstName').position().top + 250;

('#lblFirstName').css('top', newtop + 'px');

Please keep in mind that ASP will change the lables and you will have to account for that. You would probably be better off applying a common class to the elements you want to adjust and then you could adjust all fields at once by reference the class.

var newtop =


                        
这篇关于如何使用java脚本在表单中增加控件顶部大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！