ورود

View Full Version : div بازشو در بالای سایت


shmata
شنبه 15 بهمن 1390, 09:20 صبح
به این سایت توجه کنید
http://www.netstarter.com.au/
هنگامی که برروی دکمه Get A Qote کلیک میکنیم چه اتفاقی میافتد . این کار مربوط به css است یا JQuery به چه صورت میتوانم در سایت این کاررا پیاده کنم ؟
با تشکر.
MMSHFE
شنبه 15 بهمن 1390, 10:15 صبح
با سلام، این کد از jQuery استفاده میکنه. فایل مربوطه رو در کنار این کد به نام jqmin.js ذخیره کنید و بعد اجراش کنید:


<!doctype html>
<html>
<head>
<title>Hello</title>
<meta charset="utf-8"/>
<script src="jqmin.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var flag = false;
$("#block").hide();
$("#sh").click(function() {
if(flag) {
$("#block").slideUp("slow");
flag = false;
}
else {
$("#block").slideDown("slow");
flag = true;
}
})
});
</script>
<style type="text/css">
#block {
border: solid thin #000000;
height: 100px;
}
</style>
</head>
<body>
<div id="block"></div>
Text
<input id="sh" type="button" value="Show/Hide"/>
</body>
</html>

موفق باشید.
shmata
شنبه 15 بهمن 1390, 11:09 صبح
باتشکر عالی بود .
اگر بخواهم بجای input از یک لینک استفاده کنم در قسمت JS داخل html فقط باید id رو تغییر بدم ؟
khanlo.javid
شنبه 15 بهمن 1390, 11:49 صبح
درسته باید id رو تغییر بدی و با همون آی دی کدو فراخونی کنی
MMSHFE
یک شنبه 16 بهمن 1390, 17:37 عصر
بله. فقط یادتون باشه برای اینکه لینک کار نکنه (کاربر رو به صفحه خاصی هدایت نکنه)، باید خاصیت href اون رو با # مقداردهی کنید:

<a href="#" id="sh">Show/Hide</a>موفق باشید.
Saber Mogaddas
دوشنبه 17 بهمن 1390, 08:28 صبح
سلام
علامت # باعث refresh صفحه میشه تو تگ a شما میتونید با دستور javascript:void(0) بدون postback صفحه استفاده کنید به صورت مثال زیر..


<a href="javascript:void(0)" id="sh">Show/Hide</a>

موفق باشی..
MMSHFE
دوشنبه 17 بهمن 1390, 08:39 صبح
دوست عزیز چرا شایعه سازی میکنین؟ :چشمک: کی گفته # باعث میشه صفحه Refresh بشه؟ این کد رو تست کنید:


<!doctype html>
<html>
<head>
<title>Hello</title>
<meta charset="utf-8"/>
<script src="jqmin.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var flag = false;
$("#block").hide();
$("#sh").click(function() {
if(flag) {
$("#block").slideUp("slow");
flag = false;
}
else {
$("#block").slideDown("slow");
flag = true;
}
})
});
</script>
<style type="text/css">
#block {
border: solid thin #000000;
height: 100px;
}
</style>
</head>
<body>
<div id="block"></div>
Text
<a href="#" id="sh">Show/Hide</a>
</body>
</html>

موفق باشید.
Saber Mogaddas
سه شنبه 18 بهمن 1390, 09:32 صبح
سلام
شایعه نیست روش هستش.. refresh که نه ولی اگه تگ a با # رو تو آخر صفحه ای که اسکرول داره قرار بدید باعث میشه که به بالا سکرول شه ..با این کد این اتفاق نمی فته..کد شما رو بدون تگ a هم میشه نوشت و بجای click از toggle هم میشه استفاده کرد واسه کوتاهی کدها..اینو واسه کد شما نگفتم شما راحت باش..
بهتره که دوستان این روش رو هم بدونن واسه اطلاعات عمومی خیلی خوب هست..ما اینجایم که به هم کمک کنیم مدیر بخش جان نه؟ :چشمک:
موفق باشید..
MMSHFE
سه شنبه 18 بهمن 1390, 16:11 عصر
درسته دوست عزیز. من هم شوخی کردم. ضمناً در اولین بار کلیک کردن روی تگ a با href برابر با # اسکرول به بالا انجام میشه و از اون به بعد کار نمیکنه. موفق باشید.