طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

ساخت قابلیت افزودن برچسب (Tag) با Bootstrap


ساخت قابلیت افزودن برچسب (Tag) با Bootstrap

تگ ها روشی برای گروه بندی و سازمان دهی محتویات است. برای مثال در WordPress , تگ ها به عنوان Taxonomy برای گروه بندی محتوا ارایه شدند.

در این آموزش, قصد داریم به شما نحوه افزودن برچسب ها یا همان Tag با استفاده از پلاگین tagsinput در بوت استرپ را نشان بدیم. این پلاگین jQuery به ما قابلیت افزودن تگ ها را در داخل فیلد ورودی فرم را می دهد.

در این مثال, یک فرم HTML با فیلد input داریم. ما تابع کتابخانه “Tags Input ” را بر اساس id فیلد فراخوانی می کنیم. هنگام افزودن تگ, یک باکس پیشنهاد autoComplete با استفاده از انجین Bloodhound نمایش داده می شود. که از لیست کشور های ذخیره شده در فایل JSON استفاده می کند.

ساخت قابلیت افزودن برچسب (Tag) با Bootstrap

ساخت قابلیت افزودن برچسب (Tag) با Bootstrap

کد jQuery زیر برای فراخوانی تابع پلاگین “Bootstrap Tags Input” استفاده شده است. از این کد برای تبدیل یک فیلد HTML برای افزودن تگ یا همان برچسب بهره بردیم.

برای افزودن قابلیت Auto Complete نیز از پلاگین Typeaheadjs استفاده کردیم. با استفاده از پلاگین Tags می توانیم تگ ها را بر اساس داده JSON اضافه کنیم و همچنین تگ های تعریف شده قبلی توسط خودمان را نیز بصورت auto complete لیست کنیم.

خروجی ساخت قابلیت افزودن برچسب (Tag)

اسکرین شات زیر به شما اینترفیس  افزودن تگ بصورت autocomplete را نشان می دهد.

حتما بخوانید  ساخت اسلایدشو ریسپانسیو با jQuery

ساخت قابلیت افزودن برچسب (Tag) با Bootstrap

امیدوارم از آموزش ساخت قابلیت افزودن برچسب (Tag) نهایت استفاده را برده باشید .

برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید

حسن شفیعی
مدرس ، پنتستر ، توسعه دهنده اپلیکیشن های تحت وب ، عضو مرکز حامی نخبگان و از مدیران و اعضای رسمی تیم امنیتی آشیانه هستم . علاقه خاصی به زبان php و امنیت شبکه و لینوکس دارم و هر روز تلاش می کنم به این حوزه ها مسلط تر شوم و اطلاعاتم را در وب به اشتراک بگذارم

دیدگاه کاربران

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

جدیدترین آموزش های آنلاین



دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

افزایش امنیت سایت

مجوزهای ما


logo-samandehi نماد اعتماد الکترونیک

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

دانلود کتاب

عضویت در خبرنامه