سكريبت لعرض ال RSS لموقعك بطريقة أجاكسية رائعة..

[M. Al-Dhafeeri]

[align=center]السلام عليكم ورحمة الله وبركاته..

اليوم حبيت أترجم لكم الدرس من موقع
dhtmlgoodies

مثال للسكريبت: (استخدمت رابط ال RSS لمدونتي عالم مستربن)
اضغط هني

لتحميل السكريبت
اضغط هني

اذا تبي تقرى الدرس وتتعلم:
الدرس عباره عن عرض ال RSS بطريقة Slide Show أجاكس الطريقة رائعه وعجيبه..

بسم الله نبدي:
الخطوه الأولى:

راح نسوي ال RSS Box ونحدد الرابط اللي ناخذ منه ال feed مال ال RSS :
طبعا السكريبت يقوم بعرض ال RSS من عنوان خارجي (رابط خارجي) بواسطة div راح يكون بموقعك،

وأول شي لازم نسويه انه نسوي div فاضي لكي نعرض فيه ال RSS Box، مثال:

<div id="rssBox">
</div>

الخطوة التالية:
يجب ان نحدد التالي:
-) عنوان الرابط اللي راح ناخذ منه ال RSS feed.
-) اي div راح نحتاجه لكي نستخدمه لإظهار ال RSS feed (طبعا بهالدرس راح نستخدم ال div اللي أنشأناه في الخطوه الأولى).
-) جم عدد المواضيع اللي راح نقراها من المصدر (المصدر اهوا العنوان الخارجي اللي راح ناخذ منه ال RSS).
-) الوقت المحدد بين كل موضوع وآخر لكي يظهر بال Slide Show.

طبعا كل هذي الأشياء (اللي حددناها فوق بالخطوه الثانيه) سوف تتم باستدعاء ملف جافاسكريبت اسمه insertAjaxContent

مثال:

insertAjaxContent('rssBox','http://www.dhtmlgoodies.com/rss/dhtmlgoodies.xml',5,3);

rssBox اهوا يعبر عن ال div الفارغ اللي انشأناه في الخطوه الأولى، ومن خلاله راح نحدد الرابط الخارجي لل RSS feed ونحدد أيضا عدد المواضيع اللي نبيها (طبعا احنا استخدمنا بالسكريبت عدد 5 مواضيع) وايضا نحدد الوقت بين كل موضوع (واحنا حددنا بالسكريبت 3 ثواني بين كل موضوع والآخر)

وطبعا راح نستخدم CSS عادي مو ملف خارجي ويكون داخل صفحة الموقع
ويكون بهذا الشكل (كما هو في المثال والسكريبت):

#rssBox{
  width:300px;
  margin:5px;
  float:right;
  height:300px;  
  border:1px dotted #317082;
  padding:3px;
  font-size:0.8em;
  background-color:#E2EBED;

}    
#rssBox .slide{ /* A specific slide */
  background-color:#E2EBED; /* Light blue background color */
}
.rssBoxDate{
  display:none;  /* I don't want to show the date */
}
.rssBoxHeading{  /* Heading of RSS item */
  font-weight:bold;
  color:#317082;
  margin:0px;
}
.rssBoxDescription{  /* Description of RSS item */

}  
.rssBoxLink{  /* Read more link */
  color:#F00;
  text-decoration:none;
}
.rssBoxLink:hover{  /* Read more link - mouse over */
  text-decoration:underline;
}

الخطوه التالية:
تحديد متغيرات الجافا:
بالمثال والسكريبت استخدمنا متغيرين

var rssBoxTxt_readMore = 'Read more';
var rssBoxOpenLinksInNewWindow = true;
var rssBoxPadding = 2;
var rssBox_slideSpeed = 7;
var rssBox_waitBetweenEachSlideStep = 5;

الحين راح أشرح المتغيرات اللي موجوده بالجافا:
-) rssBoxTxt_readMore = Link label
واحنا بالمثال وضعنا مكان ال Link label وضعنا Read More
واهوا طبعا العنوان اللي نحطه (لقراءة المزيد) بحيث انه يضغط عليه الزائر ليذهب للموضوع الكامل.

-) rssBoxOpenLinksInNewWindow = true;
هذا الخيار لفتح رابط الموضوع في صفحة خارجيه، طبعا true يعني سوف يتم الفتح بصفحه خارجيه، و false يعني تعطيل هذا الخيار وسوف تفتح بنفس الصفحه.

-) rssBox_slideSpeed and rssBox_waitBetweenEachSlideStep = Determines speed of sliding
وهالخيارين لتحديد سرعة التنقل بين كل موضوع وآخر..



أتمنى كان شرحي حلو وسهل وواضح << أول مره يسوي درس متعلق بالبرمجه والأكواد ops: مع انه معرّب..

أي سؤال أنا حاضر

رابط الدرس (المصدر)

بالتوفيق.. [/align]

[الساجي]

بارك الله فيك

وتسلم على السكربت ..

[M. Al-Dhafeeri]

الله يسلمك يالغالي

[tarabi]

مشكور اخوي

[M. Al-Dhafeeri]

العفو حياك ربي

[Wleed.Com]

عجبتني بطريقة أجاكسية لووول ’’
شوكراُ ’’
مفيد جداً

[M. Al-Dhafeeri]

لوووووووووول

حياك ربي :nice:

شاكر مرورك

[Abu Fahd]

ممكن سؤال؟ شنو فايدة السكربت (مجرد سؤال)!

[M. Al-Dhafeeri]

هلا بوفهد

مو بس سؤال واحد اسأل 10 :nice:

فايدة السكريبت انه اذا عندك مواقع وايد.. مثلا على سبيل المثال عندك موقعين

وتبي تربط واحد بالثاني!! بكل بساطه ركب السكريبت وعدل عنوان ال RSS للموقع الاول وضعه في موقعك الثاني
والعكس صحيح.. فاللي يدش موقعك الثاني يشوف مثلا (آخر اضافات او آخر دروس او آخر المدونات) لموقعك الأول

وايضا تقدر تستخدمه بدال هاك آخر 10 مواضيع...

تركب هذا السكريبت وبس وتربطه بأي موقع تبي

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


بالتوفيق..