الدرس -1- تكبير / تصغير خطوط النصوص

~~السلفي الأثري~~ · 2010-07-07, 09:44

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

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

اليوم نأتي لكم بدرس جديد و مميز و فيد في نفس الوقت الا و هو كيفية اضافة حركة تكبير / تصغير خطوط النصوص - jQuery Font Resizer
اولا خلينا نوضح ما نقصده من جلال المثال التالي و طبعا مع ملفات التطبيق كامل

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

كود java script

اقتباس:

01<script type="text/javascript" src="jquery.min.js"></script>
02<script type="text/javascript">
03$(document).ready(function () {
04 //min font size
05 var min=11;
06 //max font size
07 var max=22;
08
09 //grab the default font size
10 var reset = $('p').css('fontSize');
11
12 //font resize these elements
13 var elm = $('p.intro, p.ending');
14
15 //set the default font size and remove px from the value
16 var size = str_replace(reset, 'px', '');
17
18 //Increase font size
19 $('a.fontSizePlus').click(function() {
20
21 //if the font size is lower or equal than the max value
22 if (size<=max) {
23
24 //increase the size
25 size++;
26
27 //set the font size
28 elm.css({'fontSize' : size});
29 }
30
31 //cancel a click event
32 return false;
33
34 });
35
36 $('a.fontSizeMinus').click(function() {
37
38 //if the font size is greater or equal than min value
39 if (size>=min) {
40
41 //decrease the size
42 size--;
43
44 //set the font size
45 elm.css({'fontSize' : size});
46 }
47
48 //cancel a click event
49 return false;
50
51 });
52
53 //Reset the font size
54 $('a.fontReset').click(function () {
55
56 //set the default font size
57 elm.css({'fontSize' : reset});
58 });
59
60});
61
62//A string replace function
63function str_replace(haystack, needle, replacement) {
64 var temp = haystack.split(needle);
65 return temp.join(replacement);
66}
67</script>

ما يهمنا فيها 3 اشياء و هي :

var min=11; الحد الادنى لحجم الخط بعد تصغيره

var max=22; الحد الاقصى لحجم الخط بعد تكبيره

var elm = $('p.intro, p.ending'); هنا هذه النقطة يلزمها شرح تبسيطي لها

نلاحظ ان الكود يحوي p و هو الوسم المضمن لنص المراد تمرير الحركة عليه يعني لازم يكون محصور بين الوسم < p>

و لو كان النص محصور بين وسوم اخرى يجب تعديلها في هذا الكود .

و نلاحظ ايضا اننا عملنا 2 كلاس الاول intro ة الثاني ending - يكفي ان نضيف احداهما لوسم < p>

الذي يقع النص ضمنه كما ذكرنا

و هذا مثال توضيحي حيث يمكننا ان نعمله بهذا الشكل

كود Xml / html

اقتباس:

1
<p class="intro" >jQuery Font Resizer</p >

و هكذا

كود Xml / html

اقتباس:

1<p class="ending" >jQuery Font Resizer</p >

~~السلفي الأثري~~ · 2010-07-07, 10:24

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

كود Xml / html

اقتباس:

001 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
002 <html xmlns="https://www.w3.org/1999/xhtml">
003 <head>
004 <**** **********="*******-Type" *******="text/html;charset=windows-1256"/>
005
006 <script type="text/javascript" src="jquery.min.js"></script>
007 <script type="text/javascript">
008 $(document).ready(function () {
009 //min font size
010 var min=11;
011 //max font size
012 var max=22;
013
014 //grab the default font size
015 var reset = $('p').css('fontSize');
016
017 //font resize these elements
018 var elm = $('p.intro, p.ending');
019
020 //set the default font size and remove px from the value
021 var size = str_replace(reset, 'px', '');
022
023 //Increase font size
024 $('a.fontSizePlus').click(function() {
025
026 //if the font size is lower or equal than the max value
027 if (size<=max) {
028
029 //increase the size
030 size++;
031
032 //set the font size
033 elm.css({'fontSize' : size});
034 }
035
036 //cancel a click event
037 return false;
038
039 });
040
041 $('a.fontSizeMinus').click(function() {
042
043 //if the font size is greater or equal than min value
044 if (size>=min) {
045
046 //decrease the size
047 size--;
048
049 //set the font size
050 elm.css({'fontSize' : size});
051 }
052
053 //cancel a click event
054 return false;
055
056 });
057
058 //Reset the font size
059 $('a.fontReset').click(function () {
060
061 //set the default font size
062 elm.css({'fontSize' : reset});
063 });
064
065 });
066
067 //A string replace function
068 function str_replace(haystack, needle, replacement) {
069 var temp = haystack.split(needle);
070 return temp.join(replacement);
071 }
072 </script>
073 <style type="text/css">
074 body {
075 font-size:12px;
076 font-family:Tahoma, Helvetica, Arial, sans-serif;
077 }
078
079 a {
080 color:#c00;
081 text-decoration:none;
082 }
083
084 a:hover {
085 color:#f00;
086 text-decoration:underline;
087 }
088 .intro {
089 BORDER-RIGHT: #87CEFA 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 4px; BACKGROUND: #f8f8f8 repeat-x left top; PADDING-BOTTOM: 4px; BORDER-LEFT: #e0e0e0 1px solid; PADDING-TOP: 4px; BORDER-BOTTOM: #e0e0e0 1px solid
090 ;
091 margin: 2px 0px 2px 0px;
092 padding: 5px;
093
094 border: 1px solid #87CEFA;
095
096 }
097 </style>
098 </head>
099 <body>
100 <p style="text-align: right">
101 <a href="" class="fontSizePlus">تكبير</a> |
102 <a href="" class="fontReset">استعادة</a> |
103 <a href="" class="fontSizeMinus">تصغير</a>
104
105
106 <p class="intro" style="text-align: right">
107 طموحنا و هدفنا هو أن نساهم في تطوير مجتمع الويب العربي و لو بالشيئ اليسير و دعمه بتطبيقات الأجاكس الرائعة و تقديمها بارقى و أبسط الأساليب .
108 </p>
109 </p>
110 </body>
111 </html>

ملاحظة : اضفنا بعض اللمسات التنسيقية باستخدام الانماط الانسيابية css بالكود التالي
كود css

اقتباس:

01 <style type="text/css">
02 body {
03 font-size:12px;
04 font-family:Tahoma, Helvetica, Arial, sans-serif;
05 }
06
07 a {
08 color:#c00;
09 text-decoration:none;
10 }
11
12 a:hover {
13 color:#f00;
14 text-decoration:underline;
15 }
16 .intro {
17 BORDER-RIGHT: #87CEFA 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #fff 1px solid; PADDING-LEFT:4px; BACKGROUND: #f8f8f8 repeat-x left top; PADDING-BOTTOM: 4px; BORDER-LEFT: #e0e0e0 1px solid; PADDING-TOP: 4px; BORDER-BOTTOM: #e0e0e0 1px solid
18 ;
19 margin: 2px 0px 2px 0px;
20 padding: 5px;
21
22 border: 1px solid #87CEFA;
23
24 }
25 </style>

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

تحميل الملفات مع المثال هنا

الـ^ـسَّــآآحِـ^ــرْ ، · 2010-07-07, 17:04

بآرك الله فيك و أصارحك أني لم افهم ممكن تعطينا مثال عن صفحة ؟

~~السلفي الأثري~~ · 2010-07-07, 17:06

اقتباس:

المشاركة الأصلية كتبت بواسطة ع،ـبد اللـّطيف ₪ الجَــزائِــرے

بآرك الله فيك و أصارحك أني لم افهم ممكن تعطينا مثال عن صفحة ؟

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

~~السلفي الأثري~~ · 2010-07-07, 17:18

يمكنك تحميل ورؤية المثال من هنا

الأستاذ سامي · 2010-07-07, 17:58

السلا م عليكم اخي لرفع الملفات استعمل media fire
و ساعود لاحقا للدرس لكن رغم انني ليس لي اي مشكل في البرمجة و بعدة لغات الا انني لم افهم فما بالك بمبتديء

~~السلفي الأثري~~ · 2010-07-07, 18:06

اقتباس:

المشاركة الأصلية كتبت بواسطة samighz

و ساعود لاحقا للدرس لكن رغم انني ليس لي اي مشكل في البرمجة و بعدة لغات الا انني لم افهم فما بالك بمبتديء

لم افهمك ماتقصد أخي سامي

الـ^ـسَّــآآحِـ^ــرْ ، · 2010-07-07, 18:01

عذرا على الإزعاج ولكن الخط لم يتغير سواء أقل أو أكبر

~~السلفي الأثري~~ · 2010-07-07, 18:04

اقتباس:

المشاركة الأصلية كتبت بواسطة ع،ـبد اللـّطيف ₪ الجَــزائِــرے

عذرا على الإزعاج ولكن الخط لم يتغير سواء أقل أو أكبر

ربما المتصفح ,غير المتصفح ان كنت تستعمل الاكسبلوري فهو يتيم ولا يدعم بعد css3 , استعمل موزيلا او شروم
ولا تنسى

الـ^ـسَّــآآحِـ^ــرْ ، · 2010-07-07, 18:25

اقتباس:

المشاركة الأصلية كتبت بواسطة السلفي الأثري

ربما المتصفح ,غير المتصفح ان كنت تستعمل الاكسبلوري فهو يتيم ولا يدعم بعد css3 , استعمل موزيلا او شروم
ولا تنسى

أخي أستعمل فايرفكس 3.6.6 آخر إصدار

~~السلفي الأثري~~ · 2010-07-07, 18:27

اقتباس:

المشاركة الأصلية كتبت بواسطة ع،ـبد اللـّطيف ₪ الجَــزائِــرے

أخي أستعمل فايرفكس 3.6.6 آخر إصدار

اسمح للمحتوى الممنوع

وماهو المشكل بالتحديد الذي قابلك

الـ^ـسَّــآآحِـ^ــرْ ، · 2010-07-07, 18:48

شكرا أخي ولكن جربت تكبير النص في أحد صفحات الانترنت فكانت النتيجة إيجابية مثال بعد إذن المشرف :

https://www.echibek.net/ar/equipe-nationale/5175.html

حجم الخط:

~~السلفي الأثري~~ · 2010-07-07, 19:03

اقتباس:

المشاركة الأصلية كتبت بواسطة ع،ـبد اللـّطيف ₪ الجَــزائِــرے

شكرا أخي ولكن جربت تكبير النص في أحد صفحات الانترنت فكانت النتيجة إيجابية مثال بعد إذن المشرف :

https://www.echibek.net/ar/equipe-nationale/5175.html

حجم الخط:

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

fatimazahra2011 · 2010-08-08, 17:47

b.brahim · 2010-11-15, 13:23

بارك الله غيك وبوركت جهودك اخي