jquery.blockUI.zip100% 이해하긴 힘들지만... ㅜㅜ 노력해봅시당.
/******************************************** call_1.html ********************************************/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0" maximum-scale=1.0, user-scalable=no;/>
<style>
#testt
{
background-color: #000099;
width: 120px;
height: 100px;
color: #ffff66;
float: left;
}
</style>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="./js/jquery.blockUI.js"></script> <!-- 연속으로 중복클릭 방지용 ^^ -->
<script language="JavaScript">
//ajax사용하여 값 되돌려받기.!
$(document).ready(function(){
$("#action_btn").on("click",function(){ //클릭되면 하고싶은것!
//$("#action_btn").onclick(function(){
var text_1 = $("#text_1").val();
var text_2 = $("#text_2").val();
var num=/^[0-9]*$/; //숫자만 입력받는 조건
if(num.test(text_1))
{
if(num.test(text_2))
{
}
else
{
alert("두번째 값에 숫자만 입력해주세요.");
$("#text_2").focus();
return true;
}
}
else
{
alert("첫번째 값에 숫자만 입력해주세요.");
$("#text_1").focus();
return true;
}
///////////////////////////////////////////////////////////////////////////
if(text_1.length > 0 )
{
if (text_2.length > 0)
{
$.blockUI();
setTimeout($.unblockUI, 800); //중복방지
$.ajax({
url:'call_2.php',
type:'POST',
data: "text_1.val().&.text_2.val()",
//data:{'text_1':$("#text_1").val(), 'text_2':$("#text_2").val()},
// id로 input개체 select
data:$("#form").serialize(), //form id로 form 요소 전체 select
timeout:2000, //
error:function()
{
alert('Error');
},
success:function(msg)
{
$("#content").html(msg);
}
});
}
else
{
alert('두번째 값을 입력해주세요');
$("#text_2").focus();
}
}
else
{
alert('첫번째 값을 입력해주세요');
$("#text_1").focus();
}
});
});
</script>
<title> 지금, 만나러갑니다 </title>
</head>
<body>
<!-- page -->
<div data-role="page" id="p_page3">
<!-- header -->
<div data-role="header">
<h1> 지금, 만나러갑니다 </h1>
<a href="call_1.html" data-icon="home" data-iconpos="notext">Home</a> <!-- data-icon = 아이콘모양 -->
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a href="call_1.html" data-icon="grid" rel="external">index</a></li>
</ul>
</div>
</div>
<!-- content -->
<div data-role="content" border="1" id="test">
<!-- form -->
<form name="form" id="form" method="post" runat="server">
<label for="text_1">첫번째 값</label>
<!-- 첫번째 값을 클릭하면 for=''가 가르키는 id를 가지고있는 input=''이 활성화가 된다 -->
<input type="text" id="text_1" name="text_1" data-inline="true" data-mini="true" tabindex='1' value="">
<label for="text_2">두번째 값</label>
<input type="text" id="text_2" name="text_2" data-inline="true" data-mini="true" value="">
<input type="button" id="action_btn" name="action_btn" data-inline="true" data-mini="true" value="외부 페이지 호출(사칙연산)">
</form>
<div id="content"></div> <!-- content 불러온다 -->
</div>
<!-- footer ---------->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="" data-role="button" data-icon="arrow-u">Page1</a></li>
<li><a href="" data-role="button" data-icon="star">Page2</a></li>
<li><a href="" data-icon="alert" class="ui-btn-active ui-state-persis">Page3</a></li><!--활성화-->
<li><a href="">Page4</a></li>
<li><a href="" data-icon="info" rel="external">Page5</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
/******************************************** call_2.php ********************************************/
<html>
<head>
<script type="text/javascript">
</script>
<meta charset="utf-8">
</head>
<body>
<p>호출되었습니다.</p>
<?
$text_1 = ($_POST['text_1']);
$text_2 = ($_POST['text_2']);
$plus = $text_1 + $text_2;
$minus = $text_1 - $text_2;
$multi = $text_1 * $text_2;
$division = $text_1 / $text_2;
echo "덧셈 : ".$plus."<br>";
echo "뺄셈 : ".$minus."<br>";
echo "곱셈 : ".$multi."<br>";
echo "나눗셈 : ".$division."<br>";
?>
</body>
</html>
/****** 결과 ******/
1.
2.
'Web > jQuery' 카테고리의 다른 글
| 마우스 좌,우 클릭 // 휠 상,하 방지 ^^ (2) | 2014.02.24 |
|---|
