حالت کلیک در یک منو [بایگانی]

Morteza.B

شنبه 24 تیر 1391, 09:25 صبح

سلام به دوستان عزیز...
من آموزش یک منو رو میخوام که در حالت عادی سایت 200*200 داشته باشه ولی وقتی روش کلیک کرد سایزش از 200*200 به 300*300 عوض بشه...
میشه منو راهنمایی کنید....

ممنون:قلب:

Saber Mogaddas

شنبه 24 تیر 1391, 09:59 صبح

سلام
با دستور jquery این کار به راحتی انجام میشه :

<script type="text/javascript">
$("#Element").click(function(){
$(this).animate({
height: "100px",
}, 1500 );
});
</script>

زمانی که روی element کلیک می کنیم با سرعت 1500 ارتفاع دیو رو تغییر میدیم برای اینکه با دوبار کلیک کردن به حالت قبلی برگردد از event ای به نام toggle استفاده میکنیم به این صورت که باید یک تابع مجزا نیز برای حالت دومین کلیک بنویسیم.در مورد دستور toggle در jQuery تحقیق کنید.
موفق باشید..

--لطفا سوالات مربوط به فریم ورک های جاوااسکریپت رو در تالار مرتبط با آن مطرح کنید..!

Morteza.B

شنبه 24 تیر 1391, 10:16 صبح

ممنون... ولی من نتونستم انجامش بدم...
کتابخانه رو آوردم...
کدش هم زدم ولی نشد...

plague

شنبه 24 تیر 1391, 13:47 عصر

فایرباگ نصب کن ببین چه ارروری میده

Morteza.B

شنبه 24 تیر 1391, 17:53 عصر

من از این کد استفاده میکنم...
/** بدون a href هم زدم نشد**/

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<style>
#test{
width:250px;
height:150px;
border:3px dashed #000;
background:#FCF;
border-radius:6px;
}
</style>
</head>

<body>
<script type="text/javascript">

$("#test").click(function(){

$(this).animate({

height: "400px",

}, 1500 );

});

</script>
<a href="#test">
<div id="test">test test</div></a>
</body>
</html>

plague

شنبه 24 تیر 1391, 18:22 عصر

$(function(){
$("#test").click(function(){
alert(1);
$(this).animate({

height: "400px",

}, 1500 );

});
})

Morteza.B

شنبه 24 تیر 1391, 18:50 عصر

فقط فانکشن کم داشته؟؟؟؟؟

خوب حالا برای برگشتن به حالت قبل چی؟؟؟؟

مثلا بیرون از کادر کلیک کنه برگرده به حالت قبل....

و یک چیز دیگه....
اگه بخوام از طرف بالا بزرگتر بشه چی؟؟؟

الان وقتی کلیک میکنم رو به پایین بزرگ میشه .... میخوام رو به بالا بزرگتر بشه ..

مرسی

plague

شنبه 24 تیر 1391, 20:47 عصر

1- بله اونت ها رو باید در تابع به این شکل قرار بدی همون داکیومنت ردی هستش در واقع
2- باید ببینید قبل از کش اومدن مقدارش چقدر بوده (مثلا 200 ) بعد همین کد رو برای کلیک در محیط خارج از اون دیو بنویسید ولی مقدار 200 بهش بدین (معمولا اینو برای کلیک نمینویسن برا رفتن موس بر روی المنت یا همون هاور مینویسن )

3- از بالا که نمیشه صفحه وب رو به پایین میره و بالا نقطه شروعه ! اگه بخای از بالا بزرگ تر بشه راهش اینه که از بالا به دیو مارجین بدی یعنی جمع بشه پایین بعد وقتی روش کلیک شد مقدار اون مارجین رو کم کنی اینجوری به نظر میاد که داره از بالا کش میاد

Morteza.B

یک شنبه 25 تیر 1391, 13:03 عصر

من نتونستم کد کوچک شدن رو بنویسم ... :گریه::گریه:

میشه کدش رو برام بنویسی؟؟؟

Variable

سه شنبه 27 تیر 1391, 02:25 صبح

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<style>
#test{
position: absolute;;
width:250px;
height:150px;
top:500px;

border:3px dashed #000;
background:#FCF;
border-radius:6px;
}
</style>
</head>

<body>

<a href="#test">
<div id="test">test test</div>
</a>

<script type="text/javascript">
(function(){
$("#test").hover(function(){
$(this).animate({
height:"+=100" ,
top:'-=100'
}, 500 );

},
function(){
$(this).animate({
height:"-=100" ,
top:'+=100'
}, 500 );

}
);
})();
</script>
</body>
</html>

Morteza.B

چهارشنبه 28 تیر 1391, 09:15 صبح

مرسی .... خیلی خیلی ممنون...
میشه یه توضیح مختصری بدی ؟؟؟؟ :لبخند:

Variable

چهارشنبه 28 تیر 1391, 21:30 عصر

در قسمت استایل که مشکل نداری ؟ فقط یه باکس ساختم ..

مهم خصوصیت hover هست که تابع اول برای وقتی که موس وارد باکس میشه و تابع دوم برای وقتی که موس از باکس خارج میشه .

خب چون ارتفاع از پایین زیاد میشد نه از بالا . منم یه عمل معکوس رو زدم . یعنی با زیاد شدن ارتفاع . همون مقدار از خصوصیت top کم کردم که اینجوری اون مشکل ارتفاع رو حل کنم
همین عمل رو هم برای خارج شد از باکس انجام دادم . یعنی اون ارتفاع رو که قراره بگردونم سرجاش . خصوصیت تاپ هم برگردوندم سرجاش ...