- ASP.NET - 자바스크립트로 RadioButtonList 값 Access
- 자바스크립트에서 현재의 마우스 위치
- 이벤트 처리 우선 순위
- 레이어 팝업 및 클릭시 마우스 위치
ASP.NET - 자바스크립트로 RadioButtonList 값 Access
//자바스크립트로 RadioButtonList 값 Access
//.aspx 페이지
<script type="text/javascript">
//라디오버튼 선택한 값을 가져온다.
function GetRadioBtnListSelectedValue(obj)
{
var list = document.getElementById(obj);
var radios = list.getElementsByTagName('input');
var idx;
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
idx = i;
break;
}
}
return radios[idx].value;
}
//출력구분이 변경되면 금액구분 DropDownList 사용여부 토글
function ChangeSortType(sortTypeId, orderTypeId) {
var list = document.getElementById(sortTypeId);
var radios = list.getElementsByTagName('input');
var idx;
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
idx = i;
break;
}
}
var obj = document.getElementById(orderTypeId);
if (idx == 2) {
obj.value = '2';
obj.disabled = false;
}
else {
obj.value = '2';
obj.disabled = true;
}
}
</script>
<asp:RadioButtonList ID="rblSortType" runat="server" RepeatLayout="Flow" RepeatDirection="Horizontal">
<asp:ListItem Selected="True" Value="0">도서별</asp:ListItem>
<asp:ListItem Value="1">회원별</asp:ListItem>
<asp:ListItem Value="2">일자별</asp:ListItem>
</asp:RadioButtonList>
//.cs 페이지
rblSortType.Attributes.Add("onClick"
, "javascript:ChangeSortType('" + rblSortType.ClientID + "', '"+ ddlOrderType.ClientID +"')");
자바스크립트에서 현재의 마우스 위치
이벤트 처리 우선 순위
<input class="btn" id="btn1" onclick="xxx()" />
1. input 태그 안의 onclick에 포함된 xxx() 함수
2. $("#btn1").click(function() { xxx }); // jquery script 구문
3. $(".btn1").click(function() { xxx }); //
3. $("input").click(function() { xxx }); //
$(function() { xxx }); // xxx 부분에 이벤트 처리 함수가 들어 가면 된다.
레이어 팝업 및 클릭시 마우스 위치
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>레이어 팝업 및 클릭시 마우스 위치</title>
<script src="jquery-1.8.2.js"></script>
<style type="text/css">
body{margin:0; padding:0;}
#layer_1{
display:block;
width:500px;
height:500px;
background:#d7d7d7;
border:1px dotted #FF0000;
}
#contents{background:#00F;}
.layerBtn_1{display:inline-block; padding:5px; height:1%; border:1px dotted #ccc;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#layer_1").hide();
$("#layer_2").hide();
$("body").css("position","relative");
$(".layerBtn_1").click(function(){
$(this).attr("title","현재 열린팝업");
$("#layer_1").show();
$("#layer_1").css({"position":"absolute","left":"50px","top":"50px"});
return false;
});
$("#layer_1 button").click(function(){
$(".layerBtn_1").removeAttr("title");
$("#layer_1").removeAttr("style");
$("#layer_1").hide();
return false;
});
$("#contents").click(function(e) {
//alert(e.pageX); 현재 X 위치
//alert(e.pageY); 현재 Y 위치
$(this).attr("title","현재 열린팝업");
$("#layer_1").show();
$("#layer_1").css({"position":"absolute","left":e.pageX-50+"px","top":e.pageY+"px"});
return false;
});
});
</script>
</head>
<body>
<a href="#layer_1" class="layerBtn_1">클릭으로 레이어팝업1 열기</a>
<div id="contents">내용이 들어가는 곳<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>v끝</div>
<div id="layer_1">레이어팝업 1영역<button type="button">닫기</button></div>
</body>
</html>
'HTML' 카테고리의 다른 글
| 모바일 웹에서 이미지, 폰트 크기, abcupload,나누미,asp날짜 (0) | 2024.02.17 |
|---|---|
| 웹 사이트 최적화 기법 (1) | 2024.02.15 |
| 웹표준과 HTML, CSS (0) | 2024.02.15 |
| JQuery 이미지롤링 배너 (1) | 2024.02.15 |
| ASP-ajax 에서 한글처리, jQuery 레이어 호출 및 ajax 파일 호출 (0) | 2024.02.15 |
