الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

تحديد منفذ العرض (( اللينك ) بإستخدام ال JS

بدأه cornerofart في 14 سبتمبر 2010 · 2 رد · 489 مشاهدة · في منتدى تصميم صفحات الويب
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

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

اليوم سأعمل على إعطائكم درس جميل و سهل جداً لمصممي المواقع بإستخدام الجافا سكريبت.

هذا الدرس ينص على :

عند الضغط على اللينك (الرابط) ستنتقل الصفحة إلى الكتابة الموجودة

و أيضاً عندما ننتقل بالصفحة عن طريق ال scroll سيتم تحديد اللينك المناسب لهذا المكان.

الدرس كالتالي:

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

<body>
<nav>
  <ul>
    <li><a class="selected" href="#first">first</a></li>
    <li><a class="" href="#second">second</a></li>
    <li><a class="" href="#third">third</a></li>
    <li><a class="" href="#fourth">fourth</a></li>
  </ul>
</nav>

تم تعريف ال nav كستايل شيت في أعلى الصفحة و سوف نقوم بإعطائكم الستايل.

في روابط ال <li>

تم تعريف التالي: عند الضغط على هذا الرابط يجب عليه أن يعمل على سحب الستايل تحت إسم class="selected"

و بعد ذلك يجب عليه أن ينتقل إلى الرابطherf و أعطيته id أي إسم نقل أو تعريف و من ثم إلى المكان المعرف في الhtml مثلا "#first"

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

<div id="content">
  <section id="first">
    <h1>First content section</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
 mollit anim id est laborum.</p>
  </section>


  <section id="second">
    <h1>Second content section</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
 mollit anim id est laborum.</p>
    <h2>Second content more h1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
 mollit anim id est laborum.</p>
  </section>

  <section id="third">
    <h1>Third content section</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
 mollit anim id est laborum.</p>
  </section>

  <section id="fourth">
    <h1>Fourth content section</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
 mollit anim id est laborum.</p> 
  </section>
  <div id="spacer"><!-- هذا فقط درس تجريبي --></div>

</body></html>

<div id="content">

هذا فقط لتعريف مكان المعلومات داخل هذه الصفحة و أيضاً لحصر هذه المعلومات و سيكون هناك ستايل بإسم #content

لو نظرنا إلى هذا الكود لوجدنا أنني قد وضعت 

  <section id="first">

وهنا أنا أقول للرابط إذا تم تفعيلك بالنقر عليك أن تنتقل إلى المسمى first تحت عنوان التعريف id و ال section هو عبارة عن ستايل لهذا الرابط.

الآن ما علينا سوى وضع الستايل و روابط الجافا سكريبت :) الدرس سهل جدا أليس كذلك ؟

الستايل css :

<style>
body {
  margin: 0;
  font: 24px/1.4em georgia;
}
nav {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 180px;
  display: block;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav a,
#selectedBacking {
  display: block;
  color: #aaa;
  text-decoration: none;
  padding: 10px;
  border: 2px solid #ccc;
  margin: 10px 0;
  border-radius: 30px;
  -moz-border-radius: 30px;
  padding-left: 20px;
  height: 30px;
  z-index: 2;
  position: relative;
}
nav a:hover {
  border: 2px solid #333;
  background: #999;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#999), to(#999), color-stop(.6,#666));
  color: #fff;
}
nav a.selected,
#selectedBacking {
  border: 2px solid #333;
  background: #666;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#666), color-stop(.6,#333));
  background: -moz-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#666), color-stop(.6,#333));
  background: gradient(linear, 0% 0%, 0% 100%, from(#666), to(#666), color-stop(.6,#333));
  color: #fff;
}
#selectedBacking {
  z-index: 1;
  position: absolute;
  top: 0;
  width: 145px;
}
#content {
  margin-left: 220px;
  width: 600px;
}
#content section {
  display: block;
  padding-top: 10px;
}
#spacer {
  height: 600px;
}
</style>

طبعاً بإمكانك وضعها في نفس الصفحة بالأعلى و بإمكانك أن تجعل هذا الستايل عبارة عن ملف يمكنك إستدعائه.

الستايل من بدايته حتى نهايته مفهوم و سهل ولا أريد شرحه لسهولته لكن إن كان هناك أي إستفسار فيمكنك فوراً مراسلتي و سؤالي و ستجد الإجابه إن شاء الله .

الآن علينا وضع روابط الجافا سكريبت وهي:

<script src="js/jquery_002.js"></script>
<script src="js/jquery.js"></script>

وهذا يمكنك وضعه في أعلى الصفحة أو قبل إنهاء الصفحة أي فوق : 

</body></html>

------------ يمكنك الإستفادة من هذا الموقع كمرجع ------------------- http://www.appelsiini.net/projects/viewport ---------------------------

الآن بقي علينا كتابة هذا الكود بإستخدام ال java script وهو :

<script>

$(window).scroll(function () {
  var inview = '#' + $("#content > section > h1:in-viewport:first").parent().attr('id'),
      $link = $('nav a').filter('[hash=' + inview + ']');

  if ($link.length && !$link.is('.selected')) {
    $('nav a').removeClass('selected');
    $link.addClass('selected');
  }
});

</script>

في السطر الأول أنا أقول للجافا:

$(window).scroll(function () {

أنا أعرف scroll function للذي سيتبع

في السطر الثاني :

   var inview = '#' + $("#content > section > h1:in-viewport:first").parent().attr('id'),
      $link = $('nav a').filter('[hash=' + inview + ']');

أقول له عند تفعيل الرابط وهو شعاره # في الجافا و هو تحت مسمى content الذي بداخل section و بدأ من h1 وهو العنوان الرئيسي الذي ستبدأ به المعلومات و عند التفعيل الرابط إنتقل إلى id name :) سهل صح :)

و الآن في الجمله الثانية:

if ($link.length && !$link.is('.selected')) {
    $('nav a').removeClass('selected');
    $link.addClass('selected');
  }

هذه الجمله عبارة عن تفعيل اللينك أي جعله (( مثلاً يضوي أي بنور )) و جعله غير مفعل

و أقول للينك إذا كان اللينك مفعل إذا إستدعي لي الستايل .selected

و عند المضي للأسفل و ذهبت ال id إعمل remove للستايل ال .selected و بعد ذلك أعطي هذا الستايل للي بعده أي للرابط الذي يليه وهكذا

كود الصفحة بالشكل الكامل :

<!DOCTYPE HTML>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">


<meta charset="utf-8">
<title>Scroll linked navigation - Corner of art design studio</title>
<style>
body {
  margin: 0;
  font: 24px/1.4em georgia;
}
nav {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 180px;
  display: block;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav a,
#selectedBacking {
  display: block;
  color: #aaa;
  text-decoration: none;
  padding: 10px;
  border: 2px solid #ccc;
  margin: 10px 0;
  border-radius: 30px;
  -moz-border-radius: 30px;
  padding-left: 20px;
  height: 30px;
  z-index: 2;
  position: relative;
}
nav a:hover {
  border: 2px solid #333;
  background: #999;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#999), to(#999), color-stop(.6,#666));
  color: #fff;
}
nav a.selected,
#selectedBacking {
  border: 2px solid #333;
  background: #666;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#666), color-stop(.6,#333));
  background: -moz-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#666), color-stop(.6,#333));
  background: gradient(linear, 0% 0%, 0% 100%, from(#666), to(#666), color-stop(.6,#333));
  color: #fff;
}
#selectedBacking {
  z-index: 1;
  position: absolute;
  top: 0;
  width: 145px;
}
#content {
  margin-left: 220px;
  width: 600px;
}
#content section {
  display: block;
  padding-top: 10px;
}
#spacer {
  height: 600px;
}
</style>

</head>

<body>
<nav>
  <ul>
    <li><a class="selected" href="#first">first</a></li>
    <li><a class="" href="#second">second</a></li>
    <li><a class="" href="#third">third</a></li>
    <li><a class="" href="#fourth">fourth</a></li>
  </ul>
</nav>


<div id="content">
  <section id="first">
    <h1>First content section</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
 mollit anim id est laborum.</p>
  </section>


  <section id="second">
    <h1>Second content section</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
 mollit anim id est laborum.</p>
    <h2>Second content more h1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
 mollit anim id est laborum.</p>
  </section>

  <section id="third">
    <h1>Third content section</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
 mollit anim id est laborum.</p>
  </section>

  <section id="fourth">
    <h1>Fourth content section</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
 mollit anim id est laborum.</p>


  </section>
  <div id="spacer"><!-- هذا فقط درس تجريبي --></div>
</div>
<script src="js/jquery_002.js"></script>
<script src="js/jquery.js"></script>
<script>

$(window).scroll(function () {
  var inview = '#' + $("#content > section > h1:in-viewport:first").parent().attr('id'),
      $link = $('nav a').filter('[hash=' + inview + ']');

  if ($link.length && !$link.is('.selected')) {
    $('nav a').removeClass('selected');
    $link.addClass('selected');
  }
});

</script>
</body></html>

ولمزيد من المعلومات أرجو منكم تنزيل الرابط المرفق مع هذا المقال :) scroll.zip

و السلام عليكم

2

welcome to my portfolio:

www.cornerofart.net

Submit you design

here
#2

جميل جدا جزاك الله خيرا :)

Ibrahim Khalil

Web Developer

www.jawhersys.com

#3
JawherSYS كتب:

جميل جدا جزاك الله خيرا :)

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

الصحيح هو :

<script src="js/jquery_002.js"></script>
<script src="js/jquery.js"></script>

بالتوفيق

1

welcome to my portfolio:

www.cornerofart.net

Submit you design

here

مواضيع مشابهة

عدد الزوار حالياً

المتواجدون خلال آخر دقيقتين · يتحدّث كل ٣٠ ثانية

—الإجمالي—أعضاء مسجّلون—زوار بدون تسجيل

جارٍ التحقق من المتواجدين…