WRONG WAY
2015-06-08, 06:24 AM
http://store1.up-00.com/2015-03/142529458521.png
أهلا و مرحبا بكم أعضاء و زوار معهد بسمة مصرية (http://www.egybasma.com/forum) ,,
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
موضوعنا اليوم عن طريقة تغيير الأيقونة عند الضغط عليها لمستخدمى مكتبة الـ Font Awesome ,,
how to change font awesome icons on click
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
هذه الطريقة تفيد الكثير من المنتديات التى تستخدم هذه المكتبة فى تصميماتها حيث انك تستطيع بكل سهولة تغيير الأيقونة بأخرى عند الضغط عليها ومثالاً على ذلك ,,
فلنفترض اننا نريد ان تتغير الأيقونة الخاصة بـ ضم الأقسام كهذه ,,
http://store1.up-00.com/2015-06/1433732676621.png
فالطريقة سهلة بإذن الله فقط كل ما عليك هو التركيز قليلاً ,,
طريقة عمل الكود ,,
يتم تغيير الـ class عند الضغط على الأيقونة عن طريق الجافا سكريبت :-
نستنتج من ذلك اننا يمكننا استخدام نفس الكود فى مهام اخرى ؟ ,,
نعم يمكنك ذلك !
ناتى للكود ,,
ولنفترض ان الأيقونة الموجودة هى ,, علامة الـ (-) أو Minus ونريد إستبدالها بـ علامة (+) أو Plus ,,
سيكون الكود على النحو التالى ,,
<script type="text/javascript">
$(function() {
$('a').click(function() {
$(this).find('i').toggleClass('fa-minus-square-o fa-plus-square-o');
});
});
</script>
وهذا مثال مباشر على ذلك ,,
Toggle Font Awesome Class (http://jsfiddle.net/WRONG_WAY/ub5jumo0/)
يجب استخدام مكتبة Jquery
و إلى هنا نكون قد وصلنا إلى نهاية موضوعنا اليوم ,,
دمتم بود ,,
http://store1.up-00.com/2015-03/1425294585292.png
أهلا و مرحبا بكم أعضاء و زوار معهد بسمة مصرية (http://www.egybasma.com/forum) ,,
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
موضوعنا اليوم عن طريقة تغيير الأيقونة عند الضغط عليها لمستخدمى مكتبة الـ Font Awesome ,,
how to change font awesome icons on click
*-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-*
هذه الطريقة تفيد الكثير من المنتديات التى تستخدم هذه المكتبة فى تصميماتها حيث انك تستطيع بكل سهولة تغيير الأيقونة بأخرى عند الضغط عليها ومثالاً على ذلك ,,
فلنفترض اننا نريد ان تتغير الأيقونة الخاصة بـ ضم الأقسام كهذه ,,
http://store1.up-00.com/2015-06/1433732676621.png
فالطريقة سهلة بإذن الله فقط كل ما عليك هو التركيز قليلاً ,,
طريقة عمل الكود ,,
يتم تغيير الـ class عند الضغط على الأيقونة عن طريق الجافا سكريبت :-
نستنتج من ذلك اننا يمكننا استخدام نفس الكود فى مهام اخرى ؟ ,,
نعم يمكنك ذلك !
ناتى للكود ,,
ولنفترض ان الأيقونة الموجودة هى ,, علامة الـ (-) أو Minus ونريد إستبدالها بـ علامة (+) أو Plus ,,
سيكون الكود على النحو التالى ,,
<script type="text/javascript">
$(function() {
$('a').click(function() {
$(this).find('i').toggleClass('fa-minus-square-o fa-plus-square-o');
});
});
</script>
وهذا مثال مباشر على ذلك ,,
Toggle Font Awesome Class (http://jsfiddle.net/WRONG_WAY/ub5jumo0/)
يجب استخدام مكتبة Jquery
و إلى هنا نكون قد وصلنا إلى نهاية موضوعنا اليوم ,,
دمتم بود ,,
http://store1.up-00.com/2015-03/1425294585292.png