Smiley face

عنوان : ایجاد فرم جستجوی کامل صفحه نمایش متحرک با CSS3 و جاوا اسکریپت

1396/11/10 - 07:38:03
زیبایی در تمام مرورگرها و دستگاه های مدرن.


ایجاد فرم جستجوی کامل صفحه نمایش متحرک با CSS3 و جاوا اسکریپت

 

نمايش دمو

UI خوب طراحی شده و قابل دسترسی، کاربران را تشویق می کند تا با تابع جستجو سایت شما ارتباط بیشتری برقرار کنند، که منجر به رضایت بیشتر کاربران و افزایش نمایش صفحات می شود. برای این منظور، و با تسلط دستگاههای صفحه نمایش کوچک، باعث رشد جعبه های جستجو شده است که آنها را بسیار بزرگ و جسورانه كرده است. در این آموزش، ما گام به گام به نحوه ایجاد یک فرم جستجوی دقیق مي پردازيم كه به خوبی در تمام مرورگرها به زيبيايي نمايش داده مي شود.

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

searchform

شکل شماره 1: سربرگ با 3 آيتم انعطاف پذیر در داخل آن

The HTML:

<header>

    <a id="logo" href="http://www.javascriptkit.com"><img src="jklogosmall.gif" /></a>

         <ul>

    <li><a href="#">Item 1</a></li>

    <li><a href="#">Item 2</a></li>

    <li><a href="#">Item 3</a></li>

    <li><a href="#">Item 4</a></li>

    </ul>

      <label for="search-terms" id="search-label"><img src="search.png" /></label>

</header>

 

:The CSS

body{

    padding-top: 70px; // set top padding to house the fixed header

}

 

header{

    position: fixed;

    width: 100%;

    display: flex;

    top: 0;

    left: 0;

    justify-content: space-between; /* space flex items evenly horizontally */

    align-items: center; /* center flex items vertically */

    background: white;

    padding: 10px 5px;

    font: bold 16px 'Bitter', sans-serif; /* use google font */

}

 

header, header *,

form#search, form#search *{

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

}

 

header ul{

    list-style: none;

    margin: 0;

    padding: 0;

    margin-left: auto; /* right align this flex child */

    margin-right: 10px;

}

 

header ul li{

    display: inline;

}

 

header ul li a{

    text-decoration: none;

    padding: 5px;

}

 

header #search-label{

    cursor: pointer;

    display: flex;

    justify-content: center;

    align-items: center; /* center flex items inside vertically */

    width: 60px;

    height: 40px;

    z-index: 100;

}

 

سربرگ تنظیم شده است که در موقعیت و صفحه نمایش قرار می گیرد: انعطاف پذیری، که سه عناصر فرزند را در داخل - آرم، منوی UL و جعبه جستجوگر - را به عناصر انعطاف پذیر تبدیل می کند، و این کار را آسان می کند تا این عناصر را به نحوی که ما می خواهیم قرار دهیم . به طور خاص، با اضافه کردن محتوا: فضای بین هدر، سه عنصر فرزند به صورت افقی به صورت یکنواخت فاصله می گیرند (ما بعد از آن از منوی تنظیمات UL خسته می شویم)، و با align-items: center، تمام عناصر فرزند عمودی در داخل هدر قرار دارد.

تنظیمات جعبه انعطاف پذیری ما در این مرحله دارای سه عدد هدر است که به طور مساوی در محور افقی قرار گرفته است، هرچند من شخصا منو را ترجیح می دهم تا در کنار برچسب جعبه جستجوی ترجیح داده شود. برای انجام این کار در کادر فشرده CSS، ما فقط margin-left را اضافه می کنیم.

و در نهایت، برای جعبه جستجو جعبه، یا دروازه به فرم جستجوی تمام صفحه ما، ما انتخاب می کنیم از یک برچسب به جای یک DIV یا محدوده منظم استفاده کنیم، پس وقتی آن را کلیک کنید، تمرکز به صورت خودکار بر روی عنصر مرتبط INPUT تنظیم می شود. در مرورگرهای تلفن همراه، این رفتار همچنین به طور خودکار صفحه کلید تلفن همراه را راه اندازی می کند که باعث طراحی خوب می شود. بهترین انتخاب طراحی چیست؟ استفاده از یک تصویر برای نماد "جستجو" چیست؟ هنگامی که در واقع شما در حال استقرار هستید، ممکن است بخواهید یک فونت SVG یا آیکون را انتخاب کنید که بدون کاهش رزولوشن، مانند يك IcoMoon، بسيار عالي مقیاس پذیر باشد.


ایجاد فرم جستجوی تمام صفحه

اکنون زمان واقعی سرگرمي فرا رسيده است، ایجاد فرم جستجو که توسط برچسب جستجو که پیشتر تعریف شده است، ایجاد می شود:

searchform2

شکل 2: فرم جستجوی تمام صفحه که وقتی  بر روی برچسب "جستجو" کلیک می شود، ظاهر می شود.

 

ما می خواهیم زمانی که کاربر با کلیک بر روی برچسب آیکون جستجو (یا ضربه محکم و ناگهانی در مرورگرهای تلفن همراه) کلیک کند شکل ظاهر شود و هنگامی که کاربر روی برچسب دوباره کلیک کند یا در خارج از فیلد جستجو كليك كند، آن محو شود.
 

:The HTML

<div id="searchcontainer">

    <form id="search" action="#" method="post">

    <input type="text" name="search-terms" id="search-terms" placeholder="Enter search terms...">

    <div>Press Enter to Search</div>

    </form>

</div>

 

:The CSS

div#searchcontainer{

    position: fixed;

    width: 100%;

    height: 100%;

    z-index: 100;

    display: block;

    background: purple;

    left: -100%; /* initially position search container out of view */

    top: 90px; /* shift container downwards so the header is still visible when search is shown */

    padding-top: 50px;

    opacity: 0;

    cursor: crosshair;

    text-align: center;

    font: bold 16px 'Bitter', sans-serif; /* use google font */

    -webkit-transform: scale(.9) translate3d(-0, -50px, 0);

    transform: scale(.9) translate3d(-0, -50px, 0);

    -webkit-transition: -webkit-transform .5s, opacity .5s, left 0s .5s;

    transition: transform .5s, opacity .5s, left 0s .5s;

}

 

div#searchcontainer div{

    padding: 5px;

    color: white;

}

 

div#searchcontainer form{

    opacity: 0;

    -webkit-transform: translate3d(0, 50px, 0);

    transform: translate3d(0, 50px, 0);

    -webkit-transition: all .5s 0s;

    transition: all .5s 0s;

}

 

div#searchcontainer form input[type="text"]{

    width: 90%;

    top: 0;

    left: 0;

    z-index: 99;

    padding: 10px;

    border: none;

    border-bottom: 2px solid gray;

    outline: none;

    font-size: 3em;

    background: #eee;

}

 

 

div#searchcontainer.opensearch{

    left: 0;

    opacity: 1;

    -webkit-transform: scale(1) translate3d(0, 0, 0);

    transform: scale(1) translate3d(0, 0, 0);

    -webkit-transition: -webkit-transform .5s, opacity .5s, left 0s 0s;

    transition: transform .5s, opacity .5s, left 0s 0s;

}

 

div#searchcontainer.opensearch form{

    opacity: 1;

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    transition: all .5s .5s;

    transition: all .5s .5s;

}

 

@media (max-width: 480px){

    div#searchcontainer form input[type="text"]{

    width: 95%;

}

}

اجازه دهيد بخشهاي مهم در CSS بشكافيم. برای #searchcontainer DIV، ما آن را به "position: fixed" با "top: 90px" تنظیم میکنیم تا عنصر هدر را هنگام مشاهده در هنگام بقیه صفحه مشاهده نکنیم. و صحبت از دید، DIV ابتدا مخفی شدن آن را به 0، و همچنین علاوه بر آن، مالکیت چپ آن را به -100٪ مخفی می کند. این تضمین می کند که DIV صفحه را پوشش نمی دهد (و مانع آن می شود) زمانی که روی صفحه نمایش قابل مشاهده نیست. ما برای استفاده از "دید: پنهان" انتخاب نکردیم، زیرا هرگونه شکل ورودی داخل آن از دریافت فوکوس جلوگیری می کند، که مزیت استفاده از المان فرم LABEL را برای نمایش ظاهر کانتینر جستجو را منع می کند.

برای تغییر انتقال CSS که کانت جستجو و فیلد جستجو را نشان می دهد و پنهان می کند، ما به صورت پویا "openSearch" کلاس CSS را به #searchcontainer DIV اضافه می کنیم. درون کلاس "opensearch"، دو مجموعه از انتقال ها را تعریف می کنیم، یکی از آنها #searchcontainer DIV را هدف قرار می دهد، و دیگری INPUT درون آن. این دو به طور پیوسته اجرا می شوند، با استفاده از تاخیر گذرا در داخل ویژگی انتقال کوتاه CSS، تغییر وضعیت پس از آن، خاتمه می یابد. اولین گذار بلافاصله پس از فعال شدن، محو شدن و کمی پایین رفتن به صفحه بازسازی نهایی #searchcontainer DIV اجرا می شود. توجه داشته باشید که "چپ" تنظیم شده است به صراحت انتقال و بدون تاخیر (0s 0s سمت چپ)، بنابراین در مختصات مناسب به صورت افقی بلافاصله پس از بازشدن ظاهر می شود. با حذف کردن کلاس "باز کردن" از آن، کنتراست با زمانی که زمان آن مخفی کردن مخزن است. تنظیمات پیش فرض انتقال، انتقال در داخل #searchcontainer مشخص می کند که بخش چپ در آن مورد نیز نباید انتقال یابد، اما پس از تاخیر ".5s" (سمت چپ 0s .5s) به مقدار اعلام شده "-100٪"، پس دیگر خواص انتقال مانند "کدري" و "تبدیل" برای بازی کردن برای اولین باراست.

انتقال دوم به فرم داخل #searchcontainer (div # searchcontainer.opensearch form {}) اعمال می شود و بعد از اولین بار به جستجو در می آید.

 

:The JavaScript

var ismobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) != null

var touchorclick = (ismobile)? 'touchstart' : 'click'

var searchcontainer = document.getElementById('searchcontainer')

var searchfield = document.getElementById('search-terms')

var searchlabel = document.getElementById('search-label')

 

searchlabel.addEventListener(touchorclick, function(e){ // when user clicks on search label

    searchcontainer.classList.toggle('opensearch') // add or remove 'opensearch' to searchcontainer

    if (!searchcontainer.classList.contains('opensearch')){ // if hiding searchcontainer

        searchfield.blur() // blur search field

        e.preventDefault() // prevent default label behavior of focusing on search field again

    }

    e.stopPropagation() // stop event from bubbling upwards

}, false)

 

searchfield.addEventListener(touchorclick, function(e){ // when user clicks on search field

    e.stopPropagation() // stop event from bubbling upwards

}, false)

 

document.addEventListener(touchorclick, function(e){ // when user clicks anywhere in document

    searchcontainer.classList.remove('opensearch')

    searchfield.blur()

}, false)

درآخر ما به بخش جاوا اسکریپت می رسیم. خط اول یک بولین را نشان می دهد که نشان می دهد آیا نماینده کاربر در یکی از دسته های اصلی دستگاه های تلفن همراه قرار می گیرد. ما از این بولی استفاده میکنیم تا تصمیم بگیریم که آیا به رویداد "کلیک" یا "touchstart" در عناصر مختلف پیوند داشته باشیم. دستگاه های موبایل همچنین از هر نوع کلیک بر روی "کلیک" موبایلی استفاده می کنند که موبایلی ما به درستی دسته بندی دستگاه تلفن همراه را در استفاده نداشته باشد، هر چند "touchstart" سریع تر عمل می کند، بدون تاخیر 300 میلی ثانیه در "کلیک" بر روی دستگاه های تلفن همراه.

هنگامی که کاربر بر روی علامت جستجو در داخل عنصر هدر کلیک می کند، ما با کشیدن کلاس "CSS" "باز کردن" در آن، قابلیت مشاهده کانتینر کامل صفحه را تغییر می دهیم. اگر اقدام فعلی برای بستن کانتینر جستجو باشد، با بررسی اینکه کلاس "opensearch" از ظرف خارج شده است، ما فیلد جستجو INPUT را تضعیف می کنیم در حالی که سرکوب عملکرد برچسب پیشفرض تنظیم تمرکز بر عنصر است. عمل تنظیم فوکوس و تارشدگی در یک فیلد فرم دارای مزیت افزوده شده به طور خودکار افزایش و رها کردن صفحه کلید مجازی در بیشتر مرورگرهای تلفن همراه است.

برای از بین بردن محتوا جستجو هنگامی که کاربر هر جایی که سند را به جای برچسب یا فیلد جستجو جستجو می کند، یک رویداد "click / touchstart" را به عنصر سند انجام می دهد که این را انجام می دهد. فراخوانی e.stopPropagation () در داخل برچسب و فیلد جستجو مانع همان اقدام درون این عناصر از رسیدن به سند می شود.

و در نهایت، جاوا اسکریپت ما از API ClassList برای دسته بندی CSS ها استفاده می کند که در IE9 یا پایین تر پشتیبانی نمی شود. اگر شما نیاز به پشتیبانی از مرورگرهای قدیمی دارید، یک classList خوب وجود دارد.

1396/11/10 - 07:38:03
برچسب هاي مطلب :



شما اولين نفري باشيد كه نظر ارسال مي كند.

فرم ثبت نظر

نام و نام خانوادگی
ایمیل
وبلاگ
نظر و کامنت
كد امنيتي