keyboard_return  چسبون مقالات آموزشی آموزش ایجاد Typeahead در بوت استرپ توئیتر
  1. آموزش ایجاد Typeahead در بوت استرپ توئیتر

آموزش نحوه استفاده از کامپوننت Typeahead در بوت استرپ توئیتر

بوت استرپ مجموعه ای از ابزارهای رایگان برای ایجاد صفحات ریسپانسیو (واکنشگرا) می باشد. این فریم ورک با تمامی مرورگرهای استاندارد هم خوانی داشته و مشکلات طراحان سایت را در طراحی صفحات ریسپانسیو و نمایش یکسان آن در مرورگر های مختلف را بر طرف کرده است. برای شروع کار با بوت استرپ باید با HTML، CSS و جاوا اسکریپت تا حدی آشنا باشید.

فیلدهای ورودی یکی از قسمت های مهم یک سایت محسوب می شود و امروزه استفاده از فیلدهایی از نوع Typeahead بسیار رایج شده است. فیلد ورودی Typeahead یک لیست از قبل تعیین شده را به کاربر نمایش می دهد. بنابراین زمانی که کاربر یک حرف از کلمه ای را تایپ کند تمام کلماتی که با آن حرف شروع شده اند در قالب یک منوی کرکره ای نمایش داده خواهند شد بدین صورت امکان تایپ اشتباه کلمات ورودی توسط کاربر نیز بسیار کمتر خواهد شد.

در این جلسه قصد داریم نحوه ایجاد یک typeahead زیبا با بوت استرپ را به شما دوستان عزیز آموزش دهیم. با ما همراه باشید:

ابتدا باید فایل های بوت استرپ (فایل های CSS و JS) و همچنین اسکریپت typeahead.js را به پروژه خود اضافه کنید:

<!DOCTYPE html>
<html>

<head>
    <title>Chasboon.ir/Bootstrap Learning</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
</head>

<body>
  
    <!-- javascript -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/typeahead.min.js"></script>
</body>
</html>

اسکریپت Typeahead را می توانید از گیت هاب دانلود نمایید (دانلود Typeahead.js)

حالا یک Input از نوع Text ایجاد کرده و کلاس typeahead را به آن اختصاص دهید:

<input type="text" class="typeahead form-control" autocomplete="off" spellcheck="false">

دقت داشته باشید حتما خاصیت autocomplete را برابر با off  قرار دهید.

در آخر نوبت به اضافه کردن اسکریپت Typeahead روی فیلد مورد نظر می باشد. اسکریپت زیر را در انتهای تگ body اضافه کنید.

<script type="text/javascript">
$(document).ready(function(){
  $('input.typeahead').typeahead({
    name: 'Cars',
    local: ['ASP.Net' , 'CSS', 'HTML' , 'Java Script', 'jQuery' , 'My Sql' , 'PHP' , 'SQL']
  });
});  
</script>

به منظور زیبا تر شدن کادر متن و منو استایل زیر را به صفحه خود اضافه کنید:

<style type="text/css">
.typeahead, .tt-query, .tt-hint {
  border: 1px solid #CCCCCC;
  font-size: 24px;
  height: 30px;
  line-height: 30px;
  outline: medium none;
  padding: 0 12px;
}
.typeahead {
  background-color: #FFFFFF;
}
.typeahead:focus {
  border: 1px solid #0097CF;
}
.tt-hint {
  color: #999999;
}
.tt-dropdown-menu {
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  margin-top: 12px;
  padding: 8px 0;
  width: 100%;
}
.tt-suggestion {
  font-size: 24px;
  line-height: 24px;
  padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
  background-color: #0097CF;
  color: #FFFFFF;
}
.tt-suggestion p {
  margin: 0;
}
</style>

در صورتیکه مراحل را به درستی دنبال کرده باشید باید تصویری مشابه زیر مشاهده کنید:

Bootstrap-Typeahead-Result

خب امیدوارم که این آموزش مورد استفاده شما دوستان عزیز قرار بگیرد.

چسبون مرجع برنامه نویسی و طراحی وب

آموزش ایجاد Typeahead در بوت استرپ توئیتر - 4.2 از 5 بر اساس 150 رای

امتیاز کاربران

آموزش ایجاد Typeahead در بوت استرپ توئیتر
دیدگاه‌ها

دیدگاهی وجود ندارد

2024 © Copyright کليه حقوق مادی و معنوی براي چسبون محفوظ است و هرگونه کپی برداری پیگرد قانونی دارد.