شرح تصميم Twitter الجديدة باستخدام CSS&jQuery







بسم الله الرحمن الرحيم درس بسيط وممتع عن قائمة Twitter سأقوم بشرحة بالتفصيل.. أولا يمكنك تجربة النتيجة النهائية: مثال للدرس وأيضا سيبدو العمل في النهاية كذلك:

1- أولا نقوم بانشاء عنصر DIV ومعرف ID الخاص به هو container وهذا العنصر سيحتوي علي عنصرين DIV ومعرف Class احدهما Right و Left كما نري بالصورة:

وهذا هو الكود :

رمز Code:
<div id='container'> 
<div class='right'></div> 
<div class='left'></div>
</div>

2 - ثانيا نقوم بأنشاء عنصر DIV والذي سيحتوي علي قيمة panel-frame وهو جامع الطبقات وسنضعة داخل عنصر container. وهذا العنصر سيحتوي علي DIV المتحرك وستكون قيمتة panel شاهد الكود وستوضح الفكرا.

وسيكون الان الكود بعد إضافة العنصر كالتالي :

رمز Code:
<div id='container'> 
<div class='right'></div>
<div id="panel-frame"> 
<div class="panel"></div>
</div>
<div class='left'></div> 
</div>

3- ثالثا سيكون كود Html النهائي كالتالي:

رمز Code:
<div id='container'> 
// الجزء الايمن
<div class='right'> 
</div> 

<div id="panel-frame"> 
<div class="panel"> 
<div class="head"> <a href="#" class="close">Close</a></div> 
<div class="data">
// jquery id
</div> 
</div> 
</div> 

//الجزء الايسر
<div class="left"> 
// إطارات عرض النصوص كل اطار سيحتوي علي نص مختلف مثلا
<div class="block" id="add your text here">1</div>
<div class="block" id="add your text here">2</div>
...............................
...............................
</div>

</div>

والان يمكننا استخدام كود jQuery الذي سيقوم بتحريك <div class='panel'>...</div> والذي سيعرض بداخلة إطارات النصوص لدينا للتوضيح:

4 - رابعا كود JavaScript الذي سيحتوي علي دالة باسم كلاس block الذي سيحتوي علي النصوص وهو كالتالي:

رمز Code:
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() 
{

$('.block').click(function()
{
varid= $(this).attr('id'); // .block ID
vardata_id= $(".data").html(); // .data DIV value
varpanel= $('.panel');
varpanel_width=$('.panel').css('left'); // rolling panel width


if(data_id==id)
{
// Rolling Animation
panel.animate({left: parseInt(panel.css('left'),0) == 0 ? +panel.outerWidth() :0});
}
else
{
// panel width CSS width:340px + border:1px = 341px
if(panel_width=='341px')
{
// No rolling animation
}
else
{
// Rolling Animation
panel.animate({left: parseInt(panel.css('left'),0) == 0 ? +panel.outerWidth() :0});
}
}
// passing id value to <div class='data'$gt; </div>
$('.data').html(id);
return false;
});

// panel close link
$('.close').click(function() 
{
varpanel= $('.panel');
panel.animate({left: parseInt(panel.css('left'),0) == 0 ? +panel.outerWidth() :0});
return false;
});

});
</script>

5 - خامسا وأخيرا كود CSS الخاص بنا وهو :

رمز Code:
#container
{
width:700px;
margin:0 auto;
background-color:#ffffff; 
min-height:500px; 
overflow:auto;
-moz-border-radius:5px;
-webkit-border-radius:6px;
border:solid 1px #999999;
}
.left
{
float:left; 
background-color:#fff; 
width:350px; min-height:300px;
position:relative;
}
.right
{
float:right; width:350px;
}
#panel-frame
{
position:relative;
max-width:700px; 
position:fixed;
}
.panel
{
background-color:#f2f2f2; 
width:340px; 
height:550px;
margin-top:20px;
position:relative;
position:absolute;
border:solid 1px #999999;
border-left:0px;
left:0; 
}
.head
{
background-color:#ffc72e;
padding:10px;
text-align:right;
}

وأخيرا انتهينا والحمد لله.. وأود لفت النظر انني في مثالي الحي قمت بتغيير الاتجاة من اليسار لليمين ويمكنكم مشاهدتة: المثال المباشر


farfoush : http://www.traidnt.net/vb/traidnt2554248