آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش ایجاد typeahead در bootstrap

در این آموزش فراخواهید گرفت که چگونه با تویتر بوت استرپ تایپ جلوتر (typeahead) ایجاد کنید.

ایجاد typeahead در تویتر بوت استرپ:

فیلدهای ورودی typeahead در فرم های مدرن وب بسیار محبوب می باشند. مهم ترین هدف typeahead بالا بردن تجربه ی یوزر می باشد با فراهم کردن اشاره یا ارائه ی لیستی از انتخاب های ممکن بر اساس آنچه در هنگام پر کردن فرم یا جستجوی مورد وارد کرده اند، به عنوان نمونه صفحه ی جستجوی گوگل. این امر همچنین باعث ذخیره ی وقت و کم کردن درصد خطا می شود، زیرا از این طریق یوزر کمتر دچار غلط املایی می شود.

نکته:

پلاگین typeahead مربوط به آخرین ورژن بوت استرپ یعنی (v3.0) می باشد.

Typeahead های تویتر یک کتابخانه کامل و سریع می باشد که توسط عملکرد جستجوی twitter.com وارد شده است. برای ایجاد typeahead تویتر ابتدا عنصر typeahead.js را از Github دانلود کرده و وارد پروژه ی خود کنید. پس از آن می توانید هر عنصر متن محور ورودی را در typeahead به کار بگیرید.

ایجاد typeahead تویتر با مجموعه داده ی مکانی:

مثال زیر به شما نشان خواهد داد که چگونه با یک مجموعه داده ی مکانی یک typeahead تویتر ایجاد کنید.

    $(document).ready(function () {

        $('input.typeahead').typeahead({

            name: 'accounts',

            local: ['Audi', 'BMW', 'Bugatti', 'Ferrari', 'Ford', 'Lamborghini', 'Mercedes Benz', 'Porsche', 'Rolls-Royce', 'Volkswagen']

        });

    });

خروجی مثال بالا مانند تصویر زیر خواهد بود:

 آموزش ایجاد typeahead در bootstrap
نکته:

اگر می خواهید از ظاهر شدن منوی پیش فرض مرور گر در typeahead رو به پایین بوت استرپ جلوگیری کنید، autocomplete="off" را برای جعبه ی ورودی تنظیم کنید

ایجاد مجموعه داده خارجی typeahead تویتر:

شما می توانید مجموعه داده ی خارجی را با استفاده از یک اشار گر URL برای یک فایل JSON اختصاص دهید که شامل ردیفی از datum ها می شود. واحدهای مجزایی که مجموه داده ها را تشکیل می دهند datum نامیده می شوند.

مثال:

    $(document).ready(function () {

        $('input.typeahead').typeahead({

            name: 'countries',

            prefetch: 'data/countries.json',

            limit: 10

        });

    });
  • 2997
  •    1476
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .