검색결과 리스트
HTML에 해당되는 글 2건
- 2009.08.12 좁은 창의 내용을 새로운 팝업창으로
- 2009.07.29 AJAX 달력 컨트롤
글
좁은 칸에 아래 위로 짤리는 글씨.. 스크롤로 왔다갔다 하면서 보기 힘드시죠?
그래서 새로운 팝업창을 통해 그 안의 내용을 확인할 수 있는 소스를 공개하겠습니다.
위와 같은 글 내용입니다.
아래쪽에 스크롤이 왔다갔다 하고.. 내용이 커서 한눈에 잘 보이지 않는 불편함이 있지요?
그래서 위에 미리보기 버튼을 누르면
이렇게 팝업으로 크게 볼 수 있도록 합니다.
오른쪽 위에 프린트할 수 있는 버튼과 닫기 버튼이 보이시죠?ㅎㅎ
밑에 소스는 미리보기 버튼을 눌렀을 때 호출하는 함수입니다.
function view(){
var msg = document.getElementById('<%=lblMsg.ClientID%>').innerHTML;
var html = window.open();
html.document.writeln('<HTML><HEAD><title>Print Preview</title>')
html.document.writeln('<base target="_self"></HEAD>')
html.document.writeln('<body MS_POSITIONING="GridLayout" bottomMargin="0" leftMargin="0" topMargin="0" rightMargin="0">');
html.document.writeln('<form method="post">');
html.document.writeln('<TABLE width=100%><TR><TD></TD></TR><TR><TD align=right><INPUT ID="PRINT" type="button" value=" PRINT " onclick="javascript:location.reload(true);window.print();"><INPUT ID="CLOSE" type="button" value=" CLOSE " onclick="window.close();"></TD></TR><TR><TD></TD></TR></TABLE>');
html.document.writeln(msg);
html.document.writeln('</form></body></HTML>');
}
좀 복잡해보이지만 대충 이해하셨을거라고 생각됩니다.
lblMsg는 우리가 크게 뿌려줄 내용을 담은 라벨이구요.
이것을 msg변수에 너어줍니다.
^^
설정
트랙백
댓글
글
이런 형식 많이 보셨죠? 텍스트 박스를 클릭하면 날짜형식 포맷이 뜨고
옆에 달력버튼을 클릭하면 달력이 떠서 날짜를 선택할 수 있습니다.
그리고 날짜를 클릭하게 되면 이렇게 자동으로 날짜가 들어오지요.
자, 이제 소스를 보겠습니다.
--------------------------------------------------------------------------------
<asp:Label ID="Label3" runat="server" Text="날짜"></asp:Label>
<asp:TextBox ID="txtEdate" runat="server" Width="70px"></asp:TextBox>
<asp:Button ID="ibtnTxtEdate" runat="server" Text="달력" />
일단 레이아웃을 이렇게 넣어야 겠지요.
Label로 "날짜"를 찍어주고, 옆에 텍스트박스 붙여주고 그리고 "달력"이라는 Text를 가진 버튼까지 완료입니다.
<cc1:CalendarExtender ID="CalendarExtender2" runat="server" Format="yyyy-MM-dd" PopupButtonID="ibtnTxtEdate" TargetControlID="txtEdate"></cc1:CalendarExtender>
음.. 제일 중요(?)한 부분입니다. 사실 저 아래에 두 이벤트는 있으면 좋지만 없어도 되거든요.
이 부분이 바로 달력에서 날짜를 클릭하면 yyyy-MM-dd형식으로 텍스트 박스에 뿌려주는 부분입니다.
<cc1:MaskedEditExtender ID="MaskedEditExtender2" runat="server" AcceptNegative="Left" ClearTextOnInvalid="true" DisplayMoney="Left" ErrorTooltipEnabled="True" Mask="9999/99/99" MaskType="Date" MessageValidatorTip="true" OnFocusCssClass="MaskedEditFocus" OnInvalidCssClass="MaskedEditError" TargetControlID="txtEdate"></cc1:MaskedEditExtender>
이 부분은 텍스트박스를 클릭했을 때 날짜 형식으로 보이게 합니다.
MaskType이 "Date"로 되어있는 게 보이시죠?
<cc1:MaskedEditValidator ID="MaskedEditValidator2" runat="server" ontrolExtender="MaskedEditExtender2" ControlToValidate="txtEdate" Display="Dynamic" EmptyValueMessage="날짜를 입력해주세요." ErrorMessage="MaskedEditExtender2" InvalidValueMessage="유효하지 않은 날짜입니다." MaximumValue="2100-01-01" MaximumValueMessage="날짜는 2100년 보다 작아야합니다." MinimumValue="1900-01-01" MinimumValueMessage="날짜는 1900년 보다 커야합니다." ValidationGroup="MKE"></cc1:MaskedEditValidator>
이 부분은 날짜의 범위를 정해주는 곳이구요.
이 부분은 날짜의 범위를 정해주는 곳이구요.
아직 걸음마 수준이네요. css도 잘 몰라서 배우는 중입니다.
다음부턴 더 예쁘게 꾸며서 블로깅하도록 노력해보겠습니다. (하지만 시간이 좀 걸리겠네요..)
