PDA

View Full Version : Jquery and div Tag



peymannaji
پنج شنبه 28 آبان 1388, 17:27 عصر
با سلام

بدون مقدمه خدمتتون عرض کنم . من میخوام با کمک jquery به محض کلیک یک دکمه یک تگ div که دارای عرض و طول 100% هست بروی صفحه ظاهر بشه و کل المنت ها زیر این div قرار بگیرند طوری که کاربر نتونه رو بروی المنتی کلیک کنه .

با تشکر

bahman_akbarzadeh
سه شنبه 01 دی 1388, 14:15 عصر
سلام
اين خصوصيت رو ميشه با CSS هم ايجاد كرد :



#loginBack
{
position: fixed;
_position: absolute;
z-index: 99;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
_height: expression(document.body.offsetHeight + "px");
background-color: #BBBBCC;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60 );
opacity: 0.6;
}


نمونه كد كامل :



<!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>
<title>Untitled Page</title>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<style type="text/css">
#loginBack
{
position: fixed;
_position: absolute;
z-index: 99;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
_height: expression(document.body.offsetHeight + "px");
background-color: #BBBBCC;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60 );
opacity: 0.6;
}
</style>
</head>
<body>
<input type="button" value="Show" onclick="$('#loginBack').fadeIn('slow');" />
<div id="loginBack">
<br /><br /><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
<input type="button" value="Hide" onclick="$('#loginBack').fadeOut('slow');" />
</div>

<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 />
</body>
</html>



البته يه مقدار توي IE6 مشكل داره.

bahman_akbarzadeh
چهارشنبه 02 دی 1388, 11:43 صبح
من اون كد رو تصحيح كردم و مشكلش تو IE حل شد.
با يك دكمه FadeIn ميشه و داخلش يه دكمه ديگه هست كه FadeOut ميكنه.
فقط اگه ميخواين محتويات داخلش Transparent نباشه، تو يه DIV جدا بزارين و همون كارارو روش انجام بدين.

مهناز مسیبی
سه شنبه 22 دی 1388, 08:38 صبح
سلام
دوست عزیز اگر شما یک برنامه نویس هستید نباید اینقدر br یا &nbsp استفاده کنید.
برای این کار به سایتwww.jqquery.comرفته در قسمت jquery libraryو در سمت چپ قسمت cssنمونه های مختلف ان را ببینید تا کد مورد نظر خود را یافته حتی نحوه استفاده از کدهای jquery را در همان سایت مطالعه کنید.

مهناز مسیبی
سه شنبه 22 دی 1388, 09:45 صبح
سلام
دوست من اگر شما برنامه نویس هستید نباید اینقدر BR یا &NBSP داشته باشید.
من یک نمونه کد GQUERY برای شما میگذارم فکر کنم مشکلتون حل بشه.

برای راهنمایی بیشتر به سایتwww.gquery.com (http://www.gquery.com) رفته و در قسمتjquery with library سمت چپ نمونه های مختلف را میتوانید ببینید و استفاده کنید.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(document).ready(function(){

$("div:visible").click (http://docs.jquery.com/Events/click)(function () {
$(this).css (http://docs.jquery.com/CSS/css)("background", "yellow");
});
$("button").click (http://docs.jquery.com/Events/click)(function () {
$("div:hidden (http://docs.jquery.com/Selectors/hidden)").show (http://docs.jquery.com/Effects/show)("fast");
});

});
</script>
<style>
div { width:100px; height:100px; margin:5px; border:3px outset green; float:left; }
.starthidden { display:none; }
</style>
</head>
<body>
<button>Show hidden to see they don't change</button>
<div class="starthidden"></div>
</body>
</html

bahman_akbarzadeh
سه شنبه 22 دی 1388, 12:55 عصر
سلام
دوست عزیز اگر شما یک برنامه نویس هستید نباید اینقدر br یا &nbsp استفاده کنید.

سلام
من اينو همين جوري گذاشتم :لبخند:
به وبسايتي كه لينكشو تو امضام گذاشتم، يه نگاهي بندازين تا متوجه بهينگي كار من بشين.

فكر كنم باز يكي از اين مديران محترم (MIDOSE (http://barnamenevis.org/forum/member.php?u=86226)) بياد بگه بحث رو به انحراف كشيدم و يه كارت زرد ديگه بده و اخراجم كنه :قهقهه: