با گسترش تلفن های همراه هوشمند و اپلیکیشن های موبایل فیلد جستجو تبدیل به یکی از موارد مهم در طراحی سایت شده است و باید به نحوی در سایت قرار بگیرد که بتوان توسط وسایل مختلف هوشمند به راحتی قابل تایپ و جستجو باشد.
در این مقاله طراحی سایت نحوه قرار دادن فیلد جستجو در سایت را باهم می آموزیم، با سروش پرداز همراه باشید.
ویژگی های این آموزش: بدون نیاز به کدهای جی کوئری بدون نیاز به اضافه کردن کدهای جاوا اسکریپت ویجتی ساده با سرعت بارگذاری سریع امکان تطبیق با هر مرورگری کدهای نوشته شده با CSS3
برای ایجاد فیلد جستجو کد زیر را در بلاگ یا سایت خود قرار دهید:
کد CSS: در کد زیرid فیلد را search-box تعریف کرده ایم و با قرار دادن position:relative کد را به نحوی تعریف کرده ایم که فیلد ایجاد شده در هر وسیله ای قابل نمایش و واکنشگرا باشد.
<style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}
در قسمت Search-form طول، عرض و ارتفاع و رنگ فیلد جستجو را تعیین کرده ایم.قطعه کد با ای دی Search-text برای تعیین رنگ و سایز و ویژگی های فونت تایپی فیلد می باشد.
#search-form {
height: 40px;
border: 1px solid #999 ;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff ;
overflow: hidden;
} #search-box : مقادیر ورودی جستجو را از کاربر دریافت می کندهمانطور که می بینید مقادیر ورودی از نوع text تعریف شده است.
#search-text {
font-size: 14px;
color: #ddd ;
border-width: 0;
background: transparent;
} در کد زیر id برای دریافت مقادیر ورودی تعریف شده، نوع ورودی از نوع text تعریف شده که تمامی ورودی های اعم از حروف و اعداد را دریافت می کند.
#search-box input[type="text"] { width: 90%; padding: 11px 0 12px 1em; color: #333; outline: none; } و در نهایت برای دکمه جستجو کد زیر تعریف می شود که موقعیت آن absolute تعریف شده است همانطور که دیدید در قطعه کد search-box موقعیت را بصورت relative تعریف کردیم که فیلد جستجو در تمامی صفحات واکنشگرا باشد حال موقعیت دکمه را absolute تعریف می کنیم که نسبت به فیلد جستجو در صفحه جابجا شود به نحوی که واکنشگرایی سایت حفظ شود.
#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff ;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #2EB0EC ;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>
<style>
#popup_searchBox {position:fixed;top:0;left:0;width:100%;height:100 %;background:#000000;opacity:0.8;z-index:9999999;}
#popup_searchBox {position:fixed;top:0;left:0;width:100%;height:100 %;background:#000000;opacity:0.8;}
#popup_searchBox _Data{position:absolute;top:50%;left:50%;width:300 px;height:100px;margin:-50px 0 0 -150px;color: #fff FFF;z-index:9999;}
</style>
<style>
.search-form-wrapper{background:#000;background:rgba(0,0,0,.8); z-index:99;position:fixed;width:100%;height:100%;lef t:0;top:0;display:none}.search-form,.search-form-label,.search-form-overlay,.search-text{position:absolute;left:0}.search-form{width:100%;height:1px;top:40%;text-align:center}.search-form-label{bottom:100%;width:100%;display:block;color: #fff ;font-size:40px;font-weight:100}.search-text{top:100%;width:50%;right:0;margin:20px auto 0;background:0 0;border:none;border-bottom:1px dashed #ddd ;font-size:60px;color: #fff ;text-align:center;outline:0;min-width:300px}.search-form-overlay{width:100%;height:100%;top:0}
</style>
در زیر قطعه کد html ای دی های کد css بالا نوشته شده است:
کد HTML: <div id="search-box">
<form action="/search" id="search-form" method="get" target="_top">
<input onclick="document.getElementById('popup_search Box').style.display = 'block';" id="search-text" name="q" placeholder="" type="text" />
</form>
</div>
<div id="popup_searchBox" style="display:none;">
<div id="popup_searchBox_Data">
<!-- Search Box -->
<div class="search-form-wrapper" style="display: block;">
<div class="search-form-overlay"></div>
<form action="/search" class="search-form" method="get">
<label class="search-form-label">Type something and Enter <button onclick="document.getElementById('popup_searchBox' ).style.display = 'none';">Close</button></label>
<input class="search-text" name="q" type="text" value="">
<button class="hide search-submit" style="display:none;" type="submit"><trans>Search</trans></button>
</form>
</div>
<!-- Search Box -->
</div></div>
منبع:سروش پرداز|طراحی سایت
