|
با سلام من قصد قالب بندی یک صفحه وب را دارم می خوام صفحه به دو قسمت کلی عمودی تقسیم شود به نام های Left_side و right_side خود بخش left نیز به دو بخش افقی تقسیم می شود. این کار را با div انجام داده ام.
سوالم اینه که آیا شیوه نوشتن CSS و تگ های HTML ام صحیح است و یا باید به شکل دیگری که اصولی است این کار صورت گیرد. لطفا راهنمایی فرمایید.
<html>
<head>
<style>
#container {
width: 960px;
margin-left: auto;
margin-right: auto
}
#left_side {
width: 75%;
float: left
}
#top {
height:100px;
background-color: gray
}
#body {
height: 400px;
background-color: blue;
}
#right_side {
height:500px;
background-color: green;
width: 25%;
float: right
}
</style>
</head>
<body>
<div id="container">
<div id = "left_side" >
<div id="top" >top</div>
<div id="body">body</div>
</div>
<div id="right_side">right side</div>
</div>
</body>
</html>
بخش دوم سوال: عرض قسمت چپ صفحه (با آیدی left_side) برابر است با 75 درصد از عرض کل که در div اصلی تعیین کردم.
حالا با کمک jQuery گفتم اگه روی دکمه ای کلیک شد بخش راست صفحه سایت مخفی و آشکار شود.
حالا سوالم این است که چطور زمانی که بخش راست صفحه مخفی شد بخش سمت چپ کل عرض صفحه را پر کند و زمانی که بخش راست صفحه آشکار شد مجدد 75 درصد از صفحه را اشغال کند؟ لطفا راهنمایی فرمایید.
تگ button در تگ div با آیدی body
<button id="b">click me!</button>
کد jQuery در بخش body
<script>
$('#b').click(function(){
$('#right_side').toggle();
})
</script>
سلام . درسته همین کدی که نوشتید.
فقط یادتون باشه که تو استایل ها آخرین پراپرتی رو که نوشتید، حتما بعدش ";" بذارید. درسته بدون اونم راه میفته کار ولی استانداردش اینه که بذارید.
اینم خروجی کد شما
موفق باشید.
-----------------------------------------------
خب ،بخش دوم جواب شما...
من تو همون صفحه ، جوابم رو اپدیت کردم و کد جی کوئری رو گذاشتم.
من از ToggleClass استفاده کردم و استایل ها رو تغییر دادم .
برای قشنگی کار هم از Transition استفاده کردم.
$('#b').click(function(){
$( ".right_side" ).toggleClass( "rightToggle", 1000 );
$( ".left_side" ).toggleClass( "leftToggle", 1000 );
});
.left_side {
width: 75%;
float: left;
background-color:red;
height:500px;
transition :all 0.5s ease 200ms;
}
.right_side {
height:500px;
background-color: green;
width: 25%;
float: right;
transition :all 0.5s ease 200ms;
}
.rightToggle{
width:0;
transition :all 0.5s ease 200ms;
}
.leftToggle{
width:100%;
transition :all 0.5s ease 200ms;
}
آقا خیلی ممنون. با این متد toggleClass آشنا نبودم. کدتان را در اسرع وقت و سر فرصت حتما بررسی خواهم کرد.
(06 ژوئیه '14, 14:33)
soltani
کار متد toggleClass : فرض کنید شما برای یک تگ ،دو کلاس در استایل ها تعریف میکنید. مثلا: کلاس a میگه طول این تگ 150px باشه و کلاس b میگه طول این تگ 50px باشه.حالا متد toggleClass ، بین این دوتا کلاس سوییچ میکنه.کاری که تو مثال بالا نشون دادم.توضیحات بیشتر رو تو لینک زیر بخونید. http://jqueryui.com/toggleClass/
(07 ژوئیه '14, 09:07)
talebihamid
ممنون. متوجه شدم درواقع کار دو متد addClassName و removeClassNamevh را انجام میدهد.
(07 ژوئیه '14, 12:12)
soltani
سوالات مرتبط
راهنمای استفاده از ویرایشگر
تگها:
- *ایتالیک* یا __ایتالیک__
- **ضخیم** یا __ضخیم__
- آدرس:[متن](http://url.com/ "عنوان")
- عکس?
- لیست عددی: 1. Foo 2. Bar
- برای رفتن به خط بعد، هر جا مایلید که خط جدید شروع شود دو کاراکتر فاصله (space) قرار دهید
- تگ‌های ساده HTML هم پشتیبانی می‌شوند
این سوال را دنبال کنیدتوسط ایمیل:
ایمیل شما (باید معتبر باشد, هرگز به دیگران نمایش داده نمیشود):
توسط RSS:
هنگامی که شما به سیستم وارد شوید،قادر خواهید بود برای بروز رسانی ها مشترک شوید.
توسط RSS:
زکات علم نشر آن است.