We then use functions to perform actions on our selections. For example, to append the text "Hello World!" to all divs with the class 'foo', then set the color to red, we'd use the following code:
$("div.foo").append("Hello World!").css("color","red");
Easy! Normally, this task would require two lines of code, like so:
$("div.foo").append("Hello World!");
$("div.foo").css("color","red")
Demo Effect
50+ Amazing Jquery Examples- Part1
How to create a stunning and smooth popup using jQuery
Simple Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
function PopWindow_Click(ID)
{
var $dialog = $('<div></div>')
.html('Sorry we can not display target page.')
.dialog({height: 200, width:600, modal: true, autoOpen: false,title: 'Popup Dialog Box',hide:'blind'});
$dialog.css({"opacity": "0.2"});
var options = {};
// $dialog.dialog({close:function(event, ui) { ... }});
// $dialog.effect( 'blind', options, 500);
// $dialog.fadeIn("slow");
// $dialog.fadeOut("slow");
// $('#close_message').click(function(){$dialog.effect({ top:"+ px",opacity:0 }, "slow");}});
$dialog.load("sample.asp?ID=" + ID);
$dialog.dialog('open');
// //scroll the message box to the top offset of browser's scrool bar
// $(window).scroll(function()
// {
// $('#message_box').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350});
// });
}
</script>
<title>JQuery test - Popup Window</title>
</head>
<body>
This is JQuery Test<br />
<u id="popupwindow" style="cursor: pointer" onclick="PopWindow_Click(2)">popup window</u>
</body>
</html>
No comments:
Post a Comment