Web.Designer01
پنج شنبه 21 مرداد 1389, 02:10 صبح
من با استفاده از یکی از تکنیکهای css یه منو درست کردم که با استفاده از این تکنیک طول یه عکس رو نصف کردم و گفتم وقتی کاربر موس رو آورد رو یکی از این منوها نصف پایین عکسو نشون بده و با رفتن موس نصفه بالای عکسو،فرض کنید نصفه بالای عکس به صورت معمولیه و نصفه پایین عکس به صورت highlight شدس،به این ترتیب وفتی کاربر موس رو میبره رو منو اون منو highlight میشه که جلوه زیبایی به سایت میده(دوستان اگه کدشو لازم دارن بگن تا بذارم)
من میخوام وقتی که کاربر روی یکی از این منوها کلیک کرد مثلا News و وارد صفحه News شد منوی News رو به صورت highlight شده نشون بده(یعنی همون نصفه پایین عکسو نشون بده)،طوری که کاربر با نگاه به منو متوجه شه که الان تو صفحه News هستش.
راه حل من:
من برای اینکار برای هر کدوم از منو ها (News,Music,Contact,…) یه کلاس current تعریف کردم:
/*========CurrentClassNews=========*/
#Menulia.currentNews
{
height: 57px;
width: 75px;
background: url( '../../images/MenuImages/News1.png')no-repeat;
line-height: 25px;
}
که در حقیقت این همون قسمت پایین عکسس،همون قسمت highlight شده.
بعد با استفاده از جی کوئری به صورت زیر گفتم که روی هر کدوم از این منوها که کلیک شد این کلاس رو به اون منو اضافه کنه و از قبلی حذف کنه،چون نمیدونستم قبلی کدومه بدین ترتیب گفتم که از همه قبلی ها پاک کنه تا تو یه لحظه تو تا منو با هم HighLight نباشن ، البته کدم یه خورده طولانی شد اما راه دیگه ای بلد نبودم فکر کنم با استفاده از return value بشه کدو کم کرد طوریکه مستقیم بگیم از همون منوی قبلی کلاسو حذف کنه که من اینو بلد نبودم:
<scripttype="text/javascript">
$(document).ready(function(){
$("#BiographyButton").click(function(){
$(this).addClass('currentBiography');
$("#NewsButton").removeClass('currentNews');
$("#MusicButton").removeClass('currentMusic');
.
.
.
})
$("#MusicButton").click(function(){
$(this).addClass('currentMusic');
$("#NewsButton").removeClass('currentNews');
$("#BiographyButton").removeClass('currentBiography');
})
.
.
.
})
.
.
.
در هر حال من این کدو استفاده کردم و جواب گرفتم البته در هنگامیکه از مسترپیج استفاده نکرده بودم.
حالا مشکل من کجاست؟!
مشکل اینه که من از مسترپیج استفاده میکنم،و این کدای جی کوئریو تو مسترپیج زدم،و به خاطر همینم جواب نمیده!،برای یه لحظه کوچیک اون منویی که کلیک کردمو HighLight میکنه ولی بعد از اینکه مسترپیج مربوط به اون ContentForm رو لود میکنه دوباره همون منوی اولو نشون میده که خب درست هم هست در حالت ابتدایی نباید هیچ منویی HighLight باشه.دوستان به نظر شما این مشکلو چه جوری میشه حل کرد؟
من میخوام وقتی که کاربر روی یکی از این منوها کلیک کرد مثلا News و وارد صفحه News شد منوی News رو به صورت highlight شده نشون بده(یعنی همون نصفه پایین عکسو نشون بده)،طوری که کاربر با نگاه به منو متوجه شه که الان تو صفحه News هستش.
راه حل من:
من برای اینکار برای هر کدوم از منو ها (News,Music,Contact,…) یه کلاس current تعریف کردم:
/*========CurrentClassNews=========*/
#Menulia.currentNews
{
height: 57px;
width: 75px;
background: url( '../../images/MenuImages/News1.png')no-repeat;
line-height: 25px;
}
که در حقیقت این همون قسمت پایین عکسس،همون قسمت highlight شده.
بعد با استفاده از جی کوئری به صورت زیر گفتم که روی هر کدوم از این منوها که کلیک شد این کلاس رو به اون منو اضافه کنه و از قبلی حذف کنه،چون نمیدونستم قبلی کدومه بدین ترتیب گفتم که از همه قبلی ها پاک کنه تا تو یه لحظه تو تا منو با هم HighLight نباشن ، البته کدم یه خورده طولانی شد اما راه دیگه ای بلد نبودم فکر کنم با استفاده از return value بشه کدو کم کرد طوریکه مستقیم بگیم از همون منوی قبلی کلاسو حذف کنه که من اینو بلد نبودم:
<scripttype="text/javascript">
$(document).ready(function(){
$("#BiographyButton").click(function(){
$(this).addClass('currentBiography');
$("#NewsButton").removeClass('currentNews');
$("#MusicButton").removeClass('currentMusic');
.
.
.
})
$("#MusicButton").click(function(){
$(this).addClass('currentMusic');
$("#NewsButton").removeClass('currentNews');
$("#BiographyButton").removeClass('currentBiography');
})
.
.
.
})
.
.
.
در هر حال من این کدو استفاده کردم و جواب گرفتم البته در هنگامیکه از مسترپیج استفاده نکرده بودم.
حالا مشکل من کجاست؟!
مشکل اینه که من از مسترپیج استفاده میکنم،و این کدای جی کوئریو تو مسترپیج زدم،و به خاطر همینم جواب نمیده!،برای یه لحظه کوچیک اون منویی که کلیک کردمو HighLight میکنه ولی بعد از اینکه مسترپیج مربوط به اون ContentForm رو لود میکنه دوباره همون منوی اولو نشون میده که خب درست هم هست در حالت ابتدایی نباید هیچ منویی HighLight باشه.دوستان به نظر شما این مشکلو چه جوری میشه حل کرد؟