دورة تصميم Web2

السلام عليكم و رحمة الله تعالى و بركاته...

لا تتصور أخي الكريم bastr3 مقدار ما تعلمته في نصف ساعة من قراءة هذا الدرس الرائع!

كتب الله لك به صدقة جارية و جعله في ميزان حسناتك

بالتوفيق و ننتظر المزيد :)

اقتباس

أخي اللي اقصده مثلاً انت اسخدمت الامر

rel="stylesheet"

وش يدل عليه الامر ذا انت استخدمت لربط الاستايل بصفحة التصميم بسطر كامل فيه كذا امر وحاب اعرف الجزئيه اللي قلتلك عليها

يعني مثلا انا فهمت منك ان الامر herf="css/style.css"

<link ربط

Rel علاقة

=STYLESHEET صفحة ستايل

type النوع

Text/css صفحة خاصة بستايل

Href الرابط التشعبي

css/style.css اسم ملف الستايل

مع الإعتذار ولكن الخصائص واضحة :)

السلام عليكــم ورحمـة الله وبركاتــه ،،

الدرس السابع

قائمة منسدله

من العنوان الدرس عن عمل قائمة , بس القائمة هاي مش مثل القوائم إللي منشوفها في ترويسة الموقع بحيث تظهر الصفحات الفرعية من كل صفحة إنما هي قائمة رأيتها كثيرا في مواقع تقدم ترجمة للموقع بعدة لغات فيكون في الأعلى كلمة لغات وعند تحريك المؤشر عليها تظهر قائمة اللغات المتوفرة ووجدتها أيضا في موقع فيرفوكس عند الذهاب إلى الإضافات تجد قائمة لجميع أقسام الإضافات وكنت أتمنى استخدام مثل هذه القائمة في موقعيأدوات مدارك ولكن خفت أن تكون شيفرتها كبيره لذلك امتنعت عنها إلى أن قمت بعملها بطريقة بسيطه وبدون استخدام الجافاسكريبت , فقط ستايل مع شيفرة هتمل !! طبعا حتى أنا استغربت هالحكي لآني أخذتها من موقع :) بعدين عدلت عليها

هاي صورة بتشرح الفكرة قبل أن نبدأ

لنفكر في عمل مثل هذه القائمة ....

أول مانفكر فيه كما تعلمنا هو عمل طبقه لتحوي جميع القائمة أو مانريد عمله , لماذا؟ لكي نستطيع تحريك القائمة بتحريك الطبقة الرئيسيه

نسمى الطبقه بإسم يمثل نوع ماتحتويه وهنا سأسميها أقسام أو categories

الآن نرى أن القائمة تحتوي على قسمين أساسيين الأول هو الزر الذي يحتوي كلمة أدوات

والثاني هو القسم الذي يحتوي على الأقسام أو القائمة

لإنشاء القسم الأول من القائمة نحتاج إلى ماشرحناه في الدرس الثالث .. عمل زر ولاحظ أن درس عمل زر أفادنا كثيرا في درس نموذج بحث أيضا

عمل الزر يحتاج إلى طبقة *للعلم الطبقة لا تعني بالضرورة الديف div ولكن يمكننا إستخدام السبان أو الإتش ن وتو span , h1,h2,h3

والقسم الثاني يحتاج إلى طبقه رئيسيه لإخفائها وإظهارها عن تحريك المؤشر على الطبقة الأولى والتي تمثل الزر

وطبقات داخليه تمثل الأقسام الخاصه بالقائمة

نبدأ بسم الله ...

الحاوية الرئيسيه 
      <div id="categories">
//الزر الخاص باظهار القائمة 
        <h3></h3>
</div>

الستايل الخاص بالزر هو :

#categories h3 { position: absolute; left: 80px; top: 0px; z-index: 1100; width: 132px; height: 20px; padding: 10px; padding-left: 20px; background-image: url('http://www.urorbit-tools.com/images/categories.png'); background-repeat: no-repeat;cursor: pointer; }
#categories:hover h3 { background-position: bottom left; }

الآن أصبح لدينا زر القائمة جاهز , فيما سبق لاجديد إلا

z-index وهي لجعل الطبقه فوق أو تحت طبقة أخرى فكلما زادت قيمة هذه الخاصيه كلما كانت الطبقة فوق ماهو قيمته أقل لذلك إستخدمت هذا الرقم الكبير :) حتى تكون القائمة فوق أي شيء آخر على صفحة الإنترنت

الآن نأتي للقسم الآخر من القائمة وبما أنها تحتاج إلى طبقة رئيسيه وطبقات أخرى داخل الطبقة الرئيسيه يمكننا إستخدام وسم القائمة أو التعدد وهو

        <ul>
          <li>menu1</li>
          <li>menu2</li>
          <li>menu3</li>
          <li>menu4</li>
          <li>menu5</li>
          <li>menu6</li>
       </ul>

معروفه لدى الجميع صح ؟؟ الطبقة الرئيسيه الآن هي

<ul>

والطبقات الداخليه

<li>menu1</li>

الستايل الخاص بهذه الطبقات

#categories:hover ul { display: block; }
#categories { position: absolute; }
#categories ul { display: none; position: absolute; z-index: 1000; width: 138px; background-color: #f4f4f4; border: 1px solid #a7a7a7; list-style: none; top: 10px; left: 81px; padding: 25px 10px 15px 10px; }

الجديد في الستايل هو :

display: block; وتعني إظهار الطبقة ولاحظ أنها على الحدث حركه (hover) للطبقة الرئيسيه (الحاويه للقائمة) يعني لما يتحرك المؤشر على الطبقة ستظهر ويتغير مكان صورة الخلفية للزر مما يوحي بأن الزر تغير شكله

display: none; يعني أظهر الطبقة

list-style: none; يعني إستخدم الوسم الخاص بالقائمة وهو <ul> كأنه طبقة div فلا تضع له تصميم كرقم أو دائره صغيره قبل كل <li>

الآن تبقى آخر نصيحة وهي عدم استخدام الصور بدل الكلمات لآن هذا يقلل من حظ الصفحة في محركات البحث لآن محركات البحث لايمكنها قراءه النص المكتوب في صورة الزر ... كيف نقوم بكتابة نص وعدم إظهاره في المتصفح للمستخدم وإظهاره لمحرك البحث ؟

نقوم بتابة ماعلى الزر أو شرح بسيط عن محتوى الزر في طبقة الh3 كما يلي

        <h3>main menu</h3>

ثم في ستايل ال h3 نضف خاصية جديده تعمل على تحديد مسافة بدء النص فلو جعلناها بالسالب ستكون مختفيه تماما كما يلي :

text-indent: -10000px;

أنظر إلى الصفحة بدون تصميم ... هذا مهم لإظهار محتوى الصفحة وما تدل عليه في حال عدم إظهار التصميم

بارك الله لي ولكم

الدرس مرفق

L6.rar

للتعليق على هذا الدرس أرجو إتباع هذا الرابط : http://www.urorbit-tools.com/?forum=1&show_thread=48

بصراحة على الرغم من انه لدي خلفية عن الموضوع ... لكني مازلت أقرأ و اتعلم منك الكثيييييييير اخي الكريم ... :)

جزاك الله كل الخير على وقتك و جهدك ...

نبقى نتعلم إلى أن يتوفانا الله ... للعلم أنا أيضا أتعلم من هذه الدروس لآن تقديم الدرس يحتاج إلى العلم بكل تفاصيل السكريبت مما يجعلني أدرس ماكنت أكتبه دون علم , لذا أنصح الجميع بشرح مايتقنوه فهذا فيه فائدة مشتركه للملقي والمتلقي , ولا ننسى الأجر العظيم بإذن الله لآننا نفيد المسلمين

بناء على طلب الأعضاء تم إنشاء موضوع لكل درس وفي آخر كل درس ترى رابط للموضوع لكي تتمكن من الإستفسار عن أي جزئيه في الدرس

مﻻحظه : الدروس في منتدى موقعي :) لذلك عليك التسجيل لكي تتمكن من الرد وأعتذر عن ذلك

شكرا للتثبيت :) , هديه بمناسبة التثبيت

السلام عليكــم ورحمـة الله وبركاتــه ،،

الدرس الثامن

أساسيات في جي كويري

هذا الدرس مهم جدا للبدء في تعلم أجمل الحركات والتصميم في عالم الويب , جي كويري الكل يسمع بها ولكنه لا يعرف مدى قوتها , أولا ماهي الجي كويري :

الجي كويري مكتبه مبنيه على الجافاسكريبت , بها الكثير من الدوال التي تجعل شيفرة البرمجه بسيطه وسهله الفهم , في السابق كانت عمليه إضافة تأثير ما وحركه لطبقة معينه يحتاج إلى الكثير من سيفرة الجافاسكريبت ويمكن أن يعمل على متصفح ولا يعمل على آخر وتكون الشيفرة طويله جدا, أما مع جي كويري الآمر أصبح أشبه بكتابه جمله توضح ماتريد وإنتهى , لتحميل مكتبهالجي كويري , نبدأ بسم الله :

نحتاج غلى إستدعاء المكتبه من خلال هذا الكود :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

سنبدأ بأمثله بسيطه وبعد ذلك نقوم ببناء سكريبتات مهمه بناء على فهمناه من هذا الدرس بإذن الله

المثال الأول : إخفاء طبقة

<div onclick="test()">أخفي الطبقات</div>
<div  >طبقة 1</div>
<div >طبقة 2</div>
<div >طبقة 3 </div>
<h1>هذا سيبقى </h1>
<script>
 function test(){
   $("div").hide();
 }
</script>

لاحظ السكريبت أو كود الجافاسكريبت عبارة عن سطر يقوم بإخفاء جميع الطبقات في الصفحة ولو أردت إخفاء جميع الروابط فقط قم بتغيير إسم الوسم div إلى a لتصبح

  $("a").hide();

وإذا أردنا إظهار الطبقه نقوم بإنشاء داله جديده وتغيير الhide إلى show كما في المثال :

<div onclick="hide()">أخفي الطبقات</div>
<div  >طبقة 1</div>
<div >طبقة 2</div>
<div >طبقة 3 </div>
<h1>هذا سيبقى </h1>
<span onclick="show()">أظهر الطبقات </span>

<script>
 function hide(){
   $("div").hide();
 }

 function show(){
   $("div").show();
 }
</script>

ماذا عن المؤثرات !! لنجرب مؤثر الإخفاء والإضهار وطريقة إستدعائه كما يلي :

$("div").show("slow");

بعد التجربه لنقم بعمل قائمة جانيبه بحيث يتم الظغر على أي رابط في القائمة يتم إظهار قائمة فرعيه ...

<ul>
<li onclick="menu('a1')">الرابط الأول
    <ul id="a1">
        <li>1الرابط الأول</li>
        <li>2الرابط الأول</li>
        <li>3الرابط الأول</li>
    </ul>
</li>

<li onclick="menu('a2')">الرابط الثاني
    <ul id="a2">
        <li>1الرابط الثاني</li>
        <li>2الرابط الثاني</li>
        <li>3الرابط الثاني</li>
    </ul>
</li>

<li onclick="menu('a3')">الرابط الثالث
    <ul id="a3">
        <li>1الرابط الثالث</li>
        <li>2الرابط الثالث</li>
        <li>3الرابط الثالث</li>
    </ul>
</li>
</ul>

<script>
 function menu(id){
   $("#"+id).toggle("slow");
 }
</script>

في هذا المثال نرى أوامر جديده للجي كويري وهي toggle وتعني تبديل يعني إذا كانت مخفية أظهرها وإذا كانت ظاهر أخفيها , أيضا علامة المربع # وتعني أن مابعدها هو المعرف الخاص بالوسم id

عند تطبيق المثال السابق ستلاحظ القائمة بكل مافيها من روابط وعند الضغط على قائمة رئيسيه تختفي الروابط الفرعيه لها وعند الضغط مرة أخرى تظهر الروابط الفرعيه , لنبدأ بتطوير الفكرة أكثر قليلا :) في البداية نقوم بإنشاء تصميم للقائمة كما يلي :

<ul class="main_menu">
<li class="main" onclick="menu('a1')">الرابط الأول
    <ul id="a1">
        <li>1الرابط الأول</li>
        <li>2الرابط الأول</li>
        <li>3الرابط الأول</li>
    </ul>
</li>

<li class="main" onclick="menu('a2')">الرابط الثاني
    <ul id="a2">
        <li>1الرابط الثاني</li>
        <li>2الرابط الثاني</li>
        <li>3الرابط الثاني</li>
    </ul>
</li>

<li class="main" onclick="menu('a3')">الرابط الثالث
    <ul id="a3">
        <li>1الرابط الثالث</li>
        <li>2الرابط الثالث</li>
        <li>3الرابط الثالث</li>
    </ul>
</li>
</ul>

<script>
 function menu(id){
   $("li.main ul").hide("slow");
   $("#"+id).toggle("slow");
 }
</script>

<style>
ul.main_menu{
  width: 138px; color: #333333; background-color: #CCCCCC; border: 1px solid #a7a7a7; list-style: none; padding: 5px;
}
li.main{
  width: 130px; background-color: #f4f4f4; border: 1px solid #a7a7a7; list-style: none; padding: 5px;
}
</style>

مالذي تغير ؟ حسنا , قمنا بإنشاء تصميم للقائمة الرئيسيه لبس له علاقه بدرسنا :) يعني فقط منظر (وياريت منظر حلو :blush: )

وضعنا تصميم لكل رابط رئيسي وله علاقه بالتصميم وبدرسنا (class="main") وهذا لكي نميز القائمة الأساسيه عن القوائم الرئيسيه في عمليه إخفاء جماعي :blink: أقصد إخفاء جميع القوائم بإستثناء قوائم أخرى

سأشرح ذلك بوضع الشيفره الخاصه بما أقصد

$("li.main ul").hide("slow");

أنظر إلى الشيفرة .. قلت له أخفي الوسم li ولكن الذي يحتوي على التصميم main ,, ليس هذا فقط وإنما أخي مابداخل هذا الوسم والذي تصميمه main من الوسوم li << تعقد الموضوع أكثر , لو ماشرحت هيك كان فهمت أكثر :lol:

ماسبق هو مايحدث عند تصميم جزء معين كيف يتم إستدعاؤه!! تذكرت في الدرس الأول ؟ هذا ما أقصده

الآن أصبح لديك قائمة جميله جدا لو تضع في ال body عند الحدث تحميل نفس الداله ستكون القائمة جاهزه كما يلي :

 <body onload="menu()">

الأمثله مرفقة L8.rar

هذا الدرس الأول من سلسله دروس الجي كويري فما بالك بالدرس الثاني :P إذا إحتجت للتعلق على هذا الدرس إتبع الرابط

http://www.urorbit-tools.com/?forum=1&show_thread=49

السلام عليكــم ورحمـة الله وبركاتــه ،،

الدرس التاسع

عمل ألبوم صور

بالإعتماد على مكتبه الجي كويري فكرت في عمل ألبوم صور .. ستستغرب من سهوله الشيفره بالإضافه إلى قلة عدد الأسطر فيها

أولا كود HTML

نستدعي من خلاله 12 صورة داخل طبقه إسمها ألبوم ونقوم بإنشاء طبقه أخرى بإسم أظهر هذا وفيها صورة فارغه وعنوان فيه كلمة رجوع << طبعا الكلام بالعربي بس داخل الهتمل إنجليزي :)

<div class="box" id="gallery">
<img src="images/a1.jpeg" />
<img src="images/a2.jpeg" />
<img src="images/a3.jpeg" />
<img src="images/a4.jpeg" />
<img src="images/a5.jpeg" />
<img src="images/a6.jpeg" />
<img src="images/a7.jpeg" />
<img src="images/a8.jpeg" />
<img src="images/a9.jpeg" />
<img src="images/a10.jpeg" />
<img src="images/a11.jpeg" />
<img src="images/a12.jpeg" />
</div>

<div id="show_it" class="box">
<img src="images/a12.jpeg" />
<span> BACK </span>
</div>

الشيفره السابقه مفهومه ومابدها شرح

الآن نقوم بوضع اللمسات الفنيه :happy: على أساس إني فنان بالتصميم

<style>
.box{
  padding: 10px;
  background: #333333;
  border:#000000 2px solid;
  width: 430px;
}
#gallery img{
  width:100px;
  height: 100px;
  background: #333333;
  border:#000000 2px solid;
  cursor: pointer;
}
#show_it img{
  width:430px;
  height: 330px;
  background: #333333;
  border:#000000 2px solid;
}
#show_it span{
  cursor: pointer;
  color:#FFF;
}
</style>

برضو التصميم مافيه أي إختراع إلى الآن كل الإختراعات الموجوده تم شرحها مسبقا

الآن نأتي إلى شيفرة الجافاسكريبت والمبنيه على مكتبه جي كويري

<script>
$(document).ready(function(){
   $("#gallery img").click(function(){
      $("#gallery").hide("slow");
      $("#show_it").show("slow");
      var src = $(this).attr("src");
      $("#show_it img").attr("src",src);

    });
   $("#show_it span").click(function(){
      $("#show_it").hide("slow");
      $("#gallery").show("slow");
    });
});

</script>

السطر الأول

$(document).ready(function(){

هو عباره عن داله ليتم تنفيذ مابداخلها عند إتمام تحميل الصفحة

السطر الثاني جميل ومهم

   $("#gallery img").click(function(){

هنا يتم إخبار الصفحة أن هناك حدث وهو هنا كليك ويتم تنفيذه على أي صورة داخل الطبقه ألبوم

السطر الثالث والرابع أخناهم بالحصه إللي فاتت :P

السطر الخامس

      var src = $(this).attr("src");

عرفنا متغير يحمل قيمة الخصائص للصورالتي تم الضغط عليها وتحمل هنا الإسم this والخاصيه المطلوبه هي SRC أي مكان الصورة لو أردنا خاصيه أخرى مثل alt نكتب التالي

      var src = $(this).attr("alt");

وضحت الصور << أقصد يعني مفهوم إلى الآن ؟

طيب نكمل :

      $("#show_it img").attr("src",src);

السطر السابع وهو عمل عكسي للسطر السادس يعني نغير قيمة الخاصيه src للصورة الموجوده في طبقة أظهر هذا إلى قيمة الصورة التي تم الضغط عليها والتي خزناها في المتغير src

باقي الكود مكرر يعني شرحناه وهو عند عمليه الضغط على كلمه رجوع

صور من البوم الصور

الدرس مرفق وماتنسونا من الدعاء جزانا الله وإياكم الجنه

L9.rar

للتعليق على هذا الدرس إتبع الرابط http://www.urorbit-tools.com/?forum=1&show_thread=50

السلام عليكم ورحمة الله وبركاته

الدرس العاشر

إنشاء الألسنه (TAPS)

بعد طول تفكير في في ماذا يمكن أن أقدم لهذه الدوره توصلت إلى درس اليوم وهو عن كيفيه عمل الألسنه والتي نراها في كثير من المواقع , صورة للألسنه التي أتكلم عنها

في البداية ترددت لآن عمل الألسنه يحتاج الكثير من الكود وبهذا الكثير من الشرح وأنا في هذه الدورة أريد شرح كودات بسيطه لكي يستطيع القارئ فهم مايحدث على أكمل وجه , على كل خلونا من الكلام الكثير إللي بسمع بصدق :blink:

نبلش بشيفرة الهتمل كالمعتاد

<ul id="navlist">
<li><a href="#" id="box1">Item two</a></li>
<li><a href="#" id="box2">Item three</a></li>
<li><a href="#" id="box3">Item one</a></li>
<li><a href="#" id="box4">Item one</a></li>
<li><a href="#" id="box5">Item four</a></li>
<li><a href="#" id="box6">Item five</a></li>
</ul>
<div class="content" id="box1cont">text1</div>
<div class="content" id="box2cont">text2</div>
<div class="content" id="box3cont">text3</div>
<div class="content" id="box4cont">text4</div>
<div class="content" id="box5cont">text5</div>
<div class="content" id="box6cont">text6</div>

شو الموجود ؟ قائمة بتحتوي على أسماء الألسنه وتحتها مجموعه من الطبقات كل طبقه تعني مابداخل كل لسان

الآن نبدأ في التصميم

.content{
   border-bottom: 1px solid #ccc;
   color:#CC0000;
padding: 10px;
padding: 10px;display: none;

}


#navlist
{
border-bottom: 1px solid #ccc;
margin: 0;
padding-bottom: 19px;
padding-left: 10px;
}

#navlist ul, #navlist li
{
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
}

#navlist a
{
background: #E8EBF0;
border: 1px solid #ccc;
color: #666;
float: left;
font-size: small;
font-weight: normal;
line-height: 14px;
margin-right: 8px;
padding: 2px 10px 2px 10px;
text-decoration: none;
}

مالذي في الستايل ؟

أول شيء نريد إخفاء جميع الطبقات لآنها يجب أن تظهر عند الضغط على اللسان وباقي التصميم مفهوم لعمل أشكال الألسنه وتعديل منظرها وما إلى ذلك , كله شرحناه سابقا

الآن نأتي إلى الجافاسكريبت ومكتبة الجي كويري الرائعه ...

لاحظوا قبل أن أبدا في كود السكريبت ماذا فعلت في تسمية الطقات والقائمة \

الطبقات لها معرف شبيه في المعرف الخاص بالألسنه ولكنه يزيد عنها بكلمة ( كنت ) أو (cont) وبهذا تستطيع أن تميز كل لسان يتبع أي طبقه

ثاني شيء وضعت ستايل للطبقات بنفس الإسم لكي أستخدمه في إخفاء جميع الطبقات

نأتي لكود الجافاسكريبت :

$(document).ready(function(){
$("#navlist li a").click(function(){
$("#navlist li a").css({ "background": "#E8EBF0","border": "1px solid #ccc","color": "#666" });
$(this).css({ "background": "#fff","border-bottom": "1px solid #fff","color": "#000" });
      $("div.content").hide("slow");
      var id = $(this).attr("id");
      $("#"+id+"cont").show("slow");

    });
 });

الكود بسيط وشارح حاله لحاله

شوفوا لوين وصلنا !! صار عمل الألسنه بهذه البساطه ولو نريد عمل فتح اللسان بتقنية الأجاكس فهذا أبسط وسأقوم بشرحه في الحلقة القادمة بإذن الله , أنتظرونا ...

المثال مرفق :

L10.rar

للتعليق على هذا الدرس يرجى إتباع الرابط : http://www.urorbit-tools.com/?forum=1&show_thread=51

سوف احاول متابعة هذه الدروس القيمة.

شكرا ويقية ممتعة.

شكرا لك علي الشرح في انتظار بقيت الدروس

الدرس الحادي عشر

عناوين وخبر

السلام عليكم ورحمة الله وبركاته

رأيت في هذا المنتدى موضوع من يأتيني بهذه الحركة , الحركه يمكن عملها من خلال درس ألبوم الصور الدرس التاسع من هذه السلسله , ولكن ربما أن البعض مازال يجد صعوبه في تطبيق الدروس لذلك هناك سؤال يدور في ذهني ... لماذا لا تسأل ؟؟؟

على كل الحركه هذه هي صورتها وهي درس اليوم

لاحظوا نفس تصميم الألبوم :)

الحركة عباره عن مواضيع تحتوي على صور أو أي شيء وعند مرور المؤشر فوق أي عنوان يتم عرض صورة العنوان بشكل كبير ومعلومات بسيطه عن موضوع العنوان

لنفكر قبل البدء بأي شيء ماذا نحتاج لعمل هذه الحركة ؟

1- الطبقة الرئيسيه لتحتوي على جميع مدخلات هذه الحركة

2- طبقة تحتوي على العناوين على الجهه اليسرى وتحتوي بداخلها على :

أ- صورة صغيره

ب- نص لكتابه الموضوع يمكن إستخدام طبقة أو سبان أو h1 أو أي شيء

ج- نص لكتابة نبذه عن هذا الخبر ويجب أن يكون مخفي حتى يظهر عن مرور المؤشر على الموضوع

3- طبقة تحتوي على الصورة الكبيره

4- طبقة تحتوي على نبذه عن موضوع العنوان

نبدأ بشيفرة html :

<div class="box">
    <div id="gallery">
        <h1> this is title 1 :  <img src="images/a1.jpeg" /> <span> here a description for 1 </span> </h1>
        <h1> this is title 2 :  <img src="images/a2.jpeg" /> <span> here a description for 2 </span> </h1>
        <h1> this is title 3 :  <img src="images/a3.jpeg" /> <span> here a description for 3 </span> </h1>
        <h1> this is title 4 :  <img src="images/a4.jpeg" /> <span> here a description for 4 </span> </h1>
    </div>

    <div id="show_it">
        <img src="images/a1.jpeg" /> <br />
    </div>

    <div class="clear"></div>

    <div class="moretext"></div>
</div>

<div class="clear"></div>

شيفرة التنسيق style

.box{
  padding: 10px;
  background: #333333;
  border:#000000 2px solid;
  width: 430px;
}
#gallery img{
  width:50px;
  height: 50px;
  background: #333333;
  border:#000000 2px solid;
  cursor: pointer;
}
#gallery h1{
  font-size:  smaller;
  cursor: pointer;
  color:#fff;
}
#gallery span{
  display: none;
}
#show_it img{
  width:250px;
  height: 250px;
  background: #333333;
  border:#000000 2px solid;
}
#show_it span{
  cursor: pointer;
  color:#FFF;
}
#gallery{
    float: left;
}
#show_it{
    padding: 10px;
    float: right;
}
.clear{
    clear: both;
}
.moretext{
  color: #fff;
}

شيفرة الجافاسكريبت

$(document).ready(function(){
   $("#gallery h1").hover(function(){
     var img=$(this).find('img');
     var desc=$(this).find('span');
      var src = img.attr("src");

      $("#show_it img").attr("src",src);
      $(".moretext").text(desc.text());

    });
});

الأمر غاية بالبساطه زي ما إنتوا شايفين , عملنا الحركة من خلال دروس سابقة مازاد من الكود غير أمرين الأول

     var desc=$(this).find('span');

ويعني عرف متغير هو الوسم الذي فوقه المؤشر إبحث بداخله عن وسم سبان فيصبح المتغير هو

$("h1 span")

والأمر الثاني

desc.text()

وأعتقد أنه مفهوم عمله

الموضوع جميل جدا واشكرك جدا جدا

إن شاء الله تكون مستمرا

الله يجازيك بالخير

إن شاء الله

لم أنسى هذه الدورة ولكني بصدد إطلاق النسخة التجريبيه من مجله BSS CMS بإذن الله قريبا

شكرا لك :)

ما شاء الله عليك ....

استمر بالشرح ..

وجزاك الله ألف ألف خير ...

جزاك الله خيراُ أخي العزيز على الشرح الرائع وموقعك الرائع أيضاًً

وفقنا الله وأياك إلى ما يحب ويرضى

بارك الله فيك دروس رائعه جدا

الدرس الثاني عشر

إستخدام تقنية الأجاكس

الجميع بسأل عن تقنية الأجاكس ولا نراها كثيرا في المواقع العربيه مع أنها أصبحت سائدة في عالم تصميم المواقع , واستغرب عندما يسأل شخص كيف أقوم بوضع صورة جاري التحميل مثلا , الأمر غايه في البساطه مع إستخدام مكتبة جي كويري الرائعه

نبدأ بتصميم صفحة هتمل عادية وتحتوي على رابط لمكتبة جي كويري كما يلي :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<head>
  <title></title>
</head>

<body>

</body>

</html>

سنقوم بعمل موقع ثابت يحتوي على أربع صفحات وصفحة رئيسيه تحتوي على روابط للصفحات الأخرى ويتم تحميل الصفحات داخل الصفحة الرئيسيه بتقنية الأجاكس

مايهمنا هو الصفحة الرئيسيه والتي ستحتوي على التصميم كامل وباقي الصفحات تحتوي على نصوص هتمل فقط بدون أي ستايل ليكون تصفحها أسرع

.....

بعد أن قمنا يتصميم الأربع صفحات وستجد المشروع في المرفقات , سنقوم بالبدء في عمليه كتابة الشيفره اللازمه لتصميم الصفحة الرئيسيه

لاحظ بدون تصميم , الآن نقوم بوضع اللمسات الفنيه :)

مع التصميم فرق الموقع :) , الفكرة في كيفيه إستخدام الستايل للصفحة الرئيسيه لباقي الصفحات التي تأتي عن طريق الأجاكس ففي صفحات الأجاكس نستخدم فقط الهيكل (html) بدون ستايل كما ذكرت لزيادة سرعة تحميل الصفحات

الآن بعد أن قمنا بعمل الصفحة نحتاج إلى عمل الروابط وهنا لب الموضوع ,

هناك أكثر من طريقة لإستخدام تقنية الأجاكس من خلال مكتبة جي كويري , سأذكر ما أعرف منها

الأولى هي load بسيطه جدا فقط إستدعي الوسم عن طريق الآي دي أو الستايل أو إسم الوسم ثم نقطه ثم الخاصيه تحميل وبعدها الرابط

مش مفهومه :) الآن الصفحة التي نريد ربطها في الرابط الأول page1 هي الصفحة الأولى ولنفرض أن إسمها page1.html

وأين سيتم تحميلها ؟ في الطبقة التي تحتوي على الستايل جسم body

نكتب الأمر التالي

$('.body').load('page1.html')

سنقوم بعمل داله في الجافاسكريبت ونستدعي ملف الهتمل الخاص بكل صفحة كما يلي

function open_page(val){
   $('.body').load(val);

وفي الرابط نكتب :

<a href="javascript:open_page('page1.html')">page1</a>

نكمل فيما بعد بإذن الله

مرفق هذا الجزء من الدرس : L12.rar

نبقى مع الطريقة الأولى ...

لخاصيه اللود في الجيكويري خيارات مهمه , يمكنك إستدعاء جزء من الصفحة التي تريد إستدعاؤها

مثلا الصفحة الأولى تحتوي على مجموعة طبقات سنختار طبقة ونستدعيها في جزء الجسم body لصفحتنا الرئيسيه

قبل أي شيء سنرى شيفرة الصفحة التي سنستدعيها :

      <h1>is a new kind of JavaScript Library1111</h1>
      1111 jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write<a href="#"> JavaScript</a>.
<img src="http://www.memx.com/images/ratchet.jpg" alt="" />
<div id="thisone">hi this is part from page1</div>

الآن سنستدعي الجزء thisone والذي يحتوي على هذا النص :

hi this is part from page1

نقوم بكتابة الرابط كما يلي :

<a href="javascript:open_page('page1.html #thisone')">page2</a>

لاحظ كيف تم تحديد الطبقة من خلال الآي دي وبعد رابط الصفحة

هذا يوفر الكثر من التعب فيمكنك عمل أربع طبقات وإستدعاء كل طبقة في كل رابط بكل سهوله :)

سؤال : ماذا لو كانت الصفحة غير موجوده أو حدث خطأ أثناء إستدعاء الصفحة ماذا سيحدث ؟

الجواب : تبقى الطبقة التي نستدعي فيها الصفحة فارغه وهذا غير محبذ خصوصا أن الزائر يتوقع تحميل ماطلب لذلك سنرى كيف يمكن أن نستخدم رسائل الخطا , وجدت أن أبسط الرسائل هي تعديل الداله في الجافاسكريبت إلى :

function open_page(val){
   $('.body').load(val, function(response, status) {
  if(status!="success")  $('.body').html('<font color="red">Sorry this we have an error</font>');
});
}

بعد إستدعاء الصفحة قمنا بإدخال داله جديده تحتوي على متغيرين الأول الإستجابة والثاني الحاله , معنى ذلك أن بعد عملية تحميل الصفحة سيتم إعطاء قيمة للحاله إما نجاح أو غير ذلك ومعنى غير ذلك أن هناك حالة فشل بسبب عدم وجود الصفحة أو خلل في الإتصال أو غيرها ولا يهمنا ماهي الحاله :) الأن لأن هذا درس وإذا كنت تريد الأفضل راجع هذه الصفحة من جي كويري : http://api.jquery.com/load/

في حاله عدم النجاح نضع رساله داخل الطبقة تفيد بأن هناك خطأ حدث ,

ماذا لو كان حجم الصفحة التي سيتم إستدعاؤها كبير وتحتوي على صور وغير ذلك ماذا سيحصل ؟

عند الضغط على الرابط سيتم إستدعاء الصفحة ولكنها ستأخذ وقت وبذلك سيظن الزائر أنه لم يضغط على الرابط ... إذا يجب أن نطور العمليه ليظهر قبل عملية إستدعاء الصفحة رساله تفيد بأن الإستدعاء مازال جاريا وهي صورة اللودينغ التي نراها في مواقع تستخدم تقنيه الأجاكس

مرفق هذا الدرس L12.rar

في الدرس القادم لنا بقية بإذن الله

الله يعطيك الف عافية يارب.. انا بديت بالدروس من اولها وكلها فايدة واكتر من رائعة

شكرا كتير الك

جزاك الله كل خير أخى الكريم وزادك علما

أسأل الله أن تكون هذة الدروس فى ميزان حسناتك

شكرا لك من اعماق قلبي

كيف يمكنني عمل لانكات التنقل حسب عدد المحتوي الموجود في قاعدة البيانات ؟؟

هذا يعتمد على لغة البي أتش بي أخي الاكريم , ولكن يمكنك عرض محتوى قاعدة البيانات بطريقة الأجاكس أيضا وبإعتمادك على البي أتش بي بطريقة أفضل , سأقوم بشرح ذلك في منتدى البي أتش بي قريبا إن شاء الله :)

في انتظار الدرس وذلك لأحتياجي لتلك النقطة بشكل ضروري