顯示具有 JQuery 標籤的文章。 顯示所有文章
顯示具有 JQuery 標籤的文章。 顯示所有文章

2014年6月26日 星期四

[JQuery] Block parent window when popup the child window




Top frame


<head>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/blockUI.js"></script>
</head>
<script language="javascript">
<!--
function blockUI() {
$
.blockUI({ message: null });
}

function unblockUI() {
$
.unblockUI();
}
-->
</script>

HTML



<div>
<iframe id="myframe"></iframe>
</div>




Second frame


<script language="javascript">
<!--
function AddDevice(content)
{
window
.open( content ,'PopupWindow','resizable=yes,scrollbars=yes,width=740,height=600,top=20,left=100');
top
.blockUI();
}
-->
</script>



<button id="DHCPBtn" onclick="AddDevice('../a.htm');">DHCP</button>




Popup window


When user click the DHCPBtn button of second frame, then popup the window. After setting, user press the close button.



<button class="button floatright" onClick="window.opener.top.unblockUI();self.close();" type="button">Close</button>

The funcion will call function unblockUI of first frame.


Reference



  1. [Javascript] Call top frame function by using javascript


[JQery] How to use jqery


 



First download jqery.js



HTML code



<!doctype html>
<html>
<head>
<script type="text/javascript" src="../js/jquery.js"></script> // import jquery.js
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>

<script language="javascript">
$
( document ).ready(function() {
$
( "a" ).click(function( event ) {
alert
( "Hello Jquery. This is my first JQuery" );
event
.preventDefault();
});
});
</script>

</body>
</html>


Result



 


 



enter image description here

enter image description here



Reference




  1. jquery


  2. Posted in: About jQuery How jQuery Works



  3. jQuery BlockUI Plugin


2013年5月6日 星期一

2013年5月2日 星期四

[JQuery] Using the jquery at the first time


[JQuery] Using the jquery at the first time



Create a html was called test.htm

Post following content to test.htm



 



 <html>


 <head>


 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>


 <script type="text/javascript">


   $(document).ready(function() {


   $("a").click(function() {


     alert("Hello world!");


   });


 });


 </script>


 </head>


 <body>


    <a href="">Link</a>


 </body>


 </html>


 


Open the test.htm


Click Link will appear alarm message "Hello world".


 


Reference :



  1. Tutorials:Getting Started with jQuery