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

[السلفي الأثري]

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

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

اليوم نأتي لكم بدرس جديد و مميز و فيد في نفس الوقت الا و هو كيفية اضافة حركة تكبير / تصغير خطوط النصوص - 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 >