Logo for Parsclick

جم Twitter Colour Picker

  محمد محمودی محمد محمودی
  April 9, 2016 at 4:17 PM
  ۲۱ فروردین، ۱۳۹۵ ساعت ۱۶:۱۷

تو چند تا پست می خوام طرز کارکردن با جم هایی که مستقیما روی استایل و جاوااسکریپت تاثییر می زارند بنویسم . حالا کار این جم چی هست و قراره برای ما چی کار کنه ؟ با استفاده از این جم ما می تونیم یه select color برای کاربر درست کنیم(مثله تب دیزاین توییتر که مستقیما به کاربر نشون می ده که چه رنگی رو می تونن انتخاب کنن )!

۱- یه پروژه ریلز جدید ایجاد کنید !

rails new blog -O


نکته: -O رو زمانی استفاده می کنیم پروژه ما نیازی به دیتابیس نداشته باشد (البته ربطی به این جم نداره)

۲- جم فایلتون رو باز کنید و اسم جم رو با دقت وارد کنید

gem 'twitter-colour-picker'

همچنین می تونید به صورت لوکال هم نصب کنید


gem install twitter-colour-picker

۳- دستور باندل رو در کامندلاین وارد کنید تا Gemfile.lock رو اپدیت کنه

Bundle update

خوب اگر تا اینجا بدون ارور اومدید جم به خوبی نصب شده و می تونید جم رو تو جم لیست مشاهده کنید !

۴-مرحله بعد require کردن فایل های جاوااسکریپت و استایل شیت هاهست که بسته به داکیومنتی که سازنده جم تو گیت هاب منتشر کرده باید عمل کنید ! (آدرس گیت هاب جمی که ما باهاش کار میکنیم)

داخل فایل application.js کد زیرو وارد کنید تا جاوااسکریپتی که سازنده جم نوشته وارد پروژه تون بشه!

//= require colour-picker

و همچنین application.css

*= require colour-picker

خوب می ریم داخل کنترلر و اکشنی که قراره سلکت تگ داشته باشه و رنگ هامون رو تعیین می کنیم !

@colors = [
"3097d1",
"1abc9c",
"2ecc71",
"3498db",
"9b59b6",
"34495e",
"f39c12",
"d35400",
"c0392b",
"bdc3c7",
"7f8c8d",
"f1c40f"
]


پیوست: این رنگ ها فلت هستن شما می تونید لیست کامل رنگ هارو درسایت flatuicolors.com ببینید!

خوب وارد ویو میشیم و یه سلکت تگ عادی باز می کنیم ! و رنگ هایی که تعیین کردیم رو فراخوانی می کنیم

<select id='theme_color' style="display:none;">
<% @colors.each do |color| %>
<option value="<%= color %>"><%= color %></option>
</select>

یا با فرم سازهای ریلز یه سلکت تگ می سازیم

<%= form.select ( :theme_color, options_for_select (
@colors, selected: 'user selected'),
{},
{
:class => "...",
:id => 'theme_color',
:style => 'display:none;'
}
) %>

حالا باید کتابخونه ی جاوااسکریپت رو تو ویو فراخوانی کنیم ! به انتهای ویو برید وکد زیرو وارد کنید

نکته:همیشه جاوااسکریپت هاتون رو اخر صفحه وارد کنید که اول ظاهر سایت کامل بالا بیاد بعد جاوااسکریپت (اگر این کارو نکنید باعث میشه کاربر مدت زبادی منتظر بمونه)


$(document).ready(function(e) {
$('#theme_color').colorpicker({
size: 35,
label: 'Theme Color: ',
hide: false
});
});

خوب حالا با خیال راحت برید و نتیجه کارو ببینید ! و نکته بعدی این که حتما اگر از جمی استفاده می کنید و رضایت بخش بود اون جم رو فیو و فالو کنید!

لینک های جم: گیت هاب

برای گزارش یا سوال می تونید توی توییتر یا گیت هاب @mm580486 رو سرچ کنید!

برای ارتباط با من می تونید از ایمیل پارس کلیک استفاده کنید(فقط وفقط در مورد پست هام ایمیل بزنید ولاغیر!) : mohammad@parsclick.net