القائمة

كيفية إضافة زر عائم إلى موقعك بتصميم ماتيريال ديزاين

تاريخ النشر : 2017-11-30


الزر العائم (Floating Action Button) هو أيقونة صغير محاط بدائرة تطفو أسفل الشاشة، وهي موجودة بكثرة في تطبيقات أندرويد ذات تصميم ماتيريال ديزاين (Material Design)، ودور هذا الزر أنه يسمح لك بالوصول إلى بعض الخاصيات الموجودة في التطبيق بسرعة وسهولة، أو إرسال رسالة من التطبيق أو إظهار قائمة لأزرار عائمة لإجراء أشياء أساسية أخرى، والكثير لأنه كل زر عائم يحتوي على دور خاص على حسب التطبيق.

في هذه التدوينة سوف سوف أريكم كيفية إضافة هذا الزر إلى موقعك على الويب، مع إظهار قائمة لروابط  عندما يتم النقر على الزر، لتجعله يظهر كا الزر العائم الموجودة في تطبيقات أندرويد (يمكنك رؤية التجريبي هنا)، وكل ما عليك فعله لإضافة الزر العائم هو إتباع هذه الخطوات: 

1- أولا إضافة أكواد CSS إلى موقعك - إنسخ وألصق هذا الكود إلى موقعك فوق علامة </head>.

<link rel="stylesheet" href="https://cdn.rawgit.com/Parrou/webbloog.com/w01/kc.fab.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>

2- إضافة الزر العائم - إنسخ وألصق هذا الكود إلى موقعك أسفل علامة  <body>.

<div class="kc_fab_wrapper">
</div>

3- إضافة كود jquery - إنسخ وألصق هذا الكود إلى موقعك فوق علامة </body>.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/Parrou/webbloog.com/w01/scriptfab.js"></script>
<script>
$(document).ready(function(){
var links = [
{
  "bgcolor":"#03A9F4",
  "icon":"+",
},
{
  "bgcolor":"#DB4A39",
  "color":"#fffff",
  "icon":"<i class='fa fa-google-plus'></i>",
  "url":"http://plus.google.com",
  "target":"_blank",
},
{
  "bgcolor":"#00ACEE",
  "color":"#fffff",
  "icon":"<i class='fa fa-twitter'></i>",
  "url":"http://www.twitter.com",
  "target":"_blank",
},
{
  "bgcolor":"#3B5998",
  "color":"#fffff",
  "icon":"<i class='fa fa-facebook'></i>",
  "url":"http://www.facebook.com",
  "target":"_blank",
},
{
  "bgcolor":"#263238",
  "color":"#fffff",
  "icon":"<i class='fa fa-home'></i>",
  "url":"http://www.webbloog.com",
  "target":"_blank",
},
 ]
$('.kc_fab_wrapper').kc_fab(links);
})
</script>

- لتغيير لون خلفية الأيقونة غير الكود #000000 الموجود أمام bgcolor إلى إلى كود اللون الذي تريد.
- لتغيير لون الأيقونة غير الكود #fffff الموجود أمام color إلى إلى كود اللون الذي تريد.
- لتغيير الأيقونة غير الكود fa fa-name-icon الموجود أمام icon إلى إلى كود الأيقونة التي تريد.
- لتغيير الرابط الذي يفتح عند الضغط على الأيقونة غير الرابط http://www.domain.com الموجود أمام url إلى إلى الرابط الذي تريد.
- إذا أردت أن يفتح الرابط في نفس الصفحة موقعك قم بإزالة الكود "target":"_blank"
- لإضافة أيقونة أخرى فقط قم بنسخ هذا الكود  أسفل الكود الذي يشبه
{
  "bgcolor":"#000000",
  "color":"#fffff",
  "icon":"<i class='fa fa-home'></i>",
  "url":"http://www.domain.com",
  "target":"_blank",
},

◄ هنا يمكنك إيجاد جميع أكواد الالوان : https://goo.gl/bWsmq1
◄ هنا يمكنك إيجاد جميع أكواد الأيقونات  : https://goo.gl/wdgKWx

إذا كنت تريد إضافة هذا الزر إلى مدونتك بلوجر شاهد الكيفية في هذا الفيديو أدناه ولأي إستفسار أضفه في التعليق :

كيفية إضافة زر عائم ماتيريال ديزاين إلى مدونتك بلوجر