• مشکی
  • سفید
  • سبز
  • آبی
  • قرمز
  • نارنجی
  • بنفش
  • طلایی
انجمن ها > انجمن گرافیک > صفحه اول بحث
لطفا در سایت شناسائی شوید!
گرافیک (بازدید: 350)
دوشنبه 9/5/1391 - 4:44 -0 تشکر 484895
با jsColor یک Color Picker یا انتخابگر رنگ زیبا داشته باشید !

شاید براتون پیش اومده باشه که در فرم هاتون از کاربر درخواست یک رنگ html رو میکنید و از اونجایی که شاید کاربر با کد html رنگ ها آشنا نباشه ، دوست دارید که یک باکس انتخاب رنگ برای اون قرار بدید ، تا به جای نوشتن کد رنگ ، خود رنگ رو انتخاب کنه و فیلد رنگ شما به صورت خودکار کد اون رنگ رو در بر بگیره !
:: امروز یک library زبان جاوااسکریپت رو به شما معرفی می کنیم که این امکان رو به راحتی هر چه تمامتر در اختیار شما قرار میده .
به طور مثال شما نمایش این انتخابگر رنگ یا همون Color Picker رو در زیر می تونید ببینید :

رنگ مورد نظر خود رو انتخاب کنید :

:: کتابخانه javascript مفید و کاربردی که این امکان رو برای ما فراهم میکنه jsColor هست . برای داشتن چنین انتخابگر رنگی در صفحات وب خود فقط کافیه دو خط کد به صفحه وب خودتون اضاف کنید . به همین راحتی !
:: این دو خط رو به این شکل به صفحه وب خودتون اضافه کنید :
1) افزودن فایل کتابخانه jsColor به صفحه وب
:: شما اول از همه باید کتابخانه jsColor رو در صفحه وب خودتون لود کنید . برای اینکار کافیه این خط رو درون تگ head صفحه وب خودتون استفاده کنید :

<script type="text/javascript" src="http://jscolor.com/jscolor/jscolor.js">
</script>

:: البته می تونید فایل های این کتابخانه جاوااسکریپت رو از اینجا دانلود کنید و در هاست شخصی قرار بدید و از آدرس خودتون استفاده کنید .
۲) قرار دادن فیلد input انتخابگر رنگ در صفحه وب
:: بعد از اینکه jsColor رو به شکلی که در بالا گفتیم به صفحه وبتون اضافه کردید ، برای اینکه یک انتخاب کننده ی رنگ در صفحه وب خودتون داشته باشید ، کافیه از یک تگ input نوع text استفاده کنید و کلاس color رو به اون اضافه کنید . در کل یعنی یه چنین تگی رو در هر کجای صفحه وب که دوست دارید Color Picker نمایش داده بشه استفاده کنید :

 <input type="text" class="color" />

:: اگر بخواید رنگ پیشفرضی رو برای فیلد انتخابگر رنگ داشته باشید کافیه کد اون رو در ویژگی value تگ input استفاده کنید . مثلا در خط زیر کد رنگ پیشفرض سبز تیره رو به صورت پیشفرض در نظر گرفتیم :

 <input type="text" class="color" value="008000"/>


:: پیشنهاد می کنم برای آشنایی بیشتر با رنگ ها در صفحات وب مطلب کد و نام رنگ ها در html و CSS رو ببینید .

برو به انجمن
انجمن فعال در هفته گذشته
مدیر فعال در هفته گذشته
آخرین مطالب
  • آلبوم تصاویر بازدید از کلیسای جلفای...
    آلبوم تصاویر بازدید اعضای انجمن نصف جهان از کلیسای جلفای اصفهان.
  • بازدید از زیباترین کلیسای جلفای اصفهان
    جمعی از کاربران انجمن نصف جهان، در روز 27 مردادماه با همکاری دفتر تبیان اصفهان، بازدیدی را از کلیسای وانک، به عمل آورده‌اند. این کلیسا، یکی از کلیساهای تاریخی اصفهان به شمار می‌رود.
  • اعضای انجمن در خانه شهید بهشتی
    خانه پدری آیت الله دکتر بهشتی در اصفهان، امروزه به نام موزه و خانه فرهنگ شهید نام‌گذاری شده است. اعضای انجمن نصف جهان، در بازدید دیگر خود، قدم به خانه شهید بهشتی گذاشته‌اند.
  • اطلاعیه برندگان جشنواره انجمن‌ها
    پس از دو ماه رقابت فشرده بین کاربران فعال انجمن‌ها، جشنواره تابستان 92 با برگزاری 5 مسابقه متنوع در تاریخ 15 مهرماه به پایان رسید و هم‌اینک، زمان اعلام برندگان نهایی این مسابقات فرارسیده است.
  • نصف جهانی‌ها در مقبره علامه مجلسی
    اعضای انجمن نصف جهان، در یك گردهمایی دیگر، از آرامگاه علامه مجلسی و میدان احیا شده‌ی امام علی (ع) اصفهان، بازدیدی را به عمل آوردند.