1
jQuery приложения
Публикувано от
Beatfan
,
в
HTML, PHP, Javascript
10 March 2013
·
2074 views
jquery приложения javascript ajax
1. JQuery Toggle for 1 Div Only
2. Jquery Show/Hide content
3. JQuery Ajax Refresh of Div content
4. JQuery Ajax Refresh Div with Button
<div class="slide" style="cursor: pointer;">Show/Hide</div>
<div class="view">
This will get shown/hidden depending on the toggle above.
</div>
<script type="text/javascript">
$(document).ready(function() {
// Hide the "view" div.
$('div.view').hide();
// Watch for clicks on the "slide" link.
$('div.slide').click(function() {
// When clicked, toggle the "view" div.
$('div.view').slideToggle(400);
return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('div.view').hide();
$('div.slide').toggle(function() {
$(this).siblings('div.view').fadeIn('slow');
}, function() {
$(this).siblings('div.view').fadeOut('fast');
return false;
});
});
</script>
2. Jquery Show/Hide content
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
</script>
<a href="#" class="show_hide">Show/Hide</a>
<div class="slidingDiv">
Here is the hidden content
</div>
.slidingDiv {
height:300px;
background-color: #99CCFF;
padding:20px;
margin-top:10px;
border-bottom:5px solid #3399FF;
}
.show_hide {
display:none;
}
3. JQuery Ajax Refresh of Div content
<script>
jQuery.noConflict();
jQuery(document).ready(function($){
var auto_refresh = setInterval(
function()
{
$('#recentTopicsWrapper').fadeOut('fast').load(' #recentTopicsWrapper').stop(true, true).fadeIn('fast');
}, 120000);
$('recentTopicsWrapper').unwrap();
});
</script>
4. JQuery Ajax Refresh Div with Button
<script>
jQuery.noConflict();
jQuery(document).ready(function($){
$(function() {
$("#refresh").click(function() {
$("#status_wrapper").fadeOut('fast').load(" #status_wrapper").fadeIn('slow');
$('status_wrapper').unwrap();
});
});
});
</script>
<a href="#" id="refresh">Refresh</a>
