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

[اميرة عبد الدايم]

بسم الله الرحمن الرحيم


درس بسيط وممتع عن قائمة Twitter سأقوم بشرحة بالتفصيل..
اقتباس
شرح تصميم Twitter الجديدة باستخدام CSS&jQuery - مكتبة ترايدنت التعليمية


أولا يمكنك تجربة النتيجة النهائية:
مثال للدرس


وأيضا سيبدو العمل في النهاية كذلك:

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; }
وأخيرا انتهينا والحمد لله.. وأود لفت النظر انني في مثالي الحي قمت بتغيير الاتجاة من اليسار لليمين ويمكنكم مشاهدتة:
المثال المباشر