سعید شعبانی

ساخت دکمه جستجو توسط css و html

10 پست در این موضوع قرار دارد

دوستان سلام

من می خواهم با استفاده از css و html یک دکمه برای بخش جستجو درست کنم.

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

تاحدی پیش رفتم ولی درست کار نمی کند. لطفا راهنمایی کنید

http://jsbin.com/ajacor/1

به اشتراک گذاری این پست


لینک به پست

سلام

اینو دانلود کن 3 نمونه خیلی خوشگل داره همینی که میخوای هست ببین به کارت میاد یا نه :

Demo.zip

به اشتراک گذاری این پست


لینک به پست

سلام

اینو دانلود کن 3 نمونه خیلی خوشگل داره همینی که میخوای هست ببین به کارت میاد یا نه :

Demo.zip

میشه یک نمونه را بدید که از جی کئوری استفاه نکرده باشه

به اشتراک گذاری این پست


لینک به پست

کد جاوا این را میشه داخل یک فایل که از قبل برای تب ها هست گذاشت؟

بله مشکلی ندارد

به اشتراک گذاری این پست


لینک به پست

این یه نمونه است که یه طرفه ولی بدون جی کوئری


http://jsbin.com/exirog/1

به اشتراک گذاری این پست


لینک به پست

این یه نمونه است که یه طرفه ولی بدون جی کوئری


http://jsbin.com/exirog/1

iهمین کد برای هر دو حالت باز و بسته (بدون js)

http://jsbin.com/exirog/3/

کد جاوا این را میشه داخل یک فایل که از قبل برای تب ها هست گذاشت؟

کد را در هر فایل js بگذارید فرقی ندارد و به کد فراخوانیش دقت کنید


showhidden('searchform')

به جای searchform می توانید id باکس های دیگر را بگذارید و در واقع با همین کد هر تعداد که خواستید جعبه مخفی شونده (یا هر اسمی که بشه روش گذاشت) بسازید، همینطور منوهای درختی

به اشتراک گذاری این پست


لینک به پست

سلام

دوستان من یه همچین فرمی برای search دارم


<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control serarch-btn" placeholder="جستجو کنید ..." name="search">
</div>
<button type="submit" class="serarch-su" name="search-su" value=""></button>
</form>

که خروجیش این میشه

ioi2_dfsdgsdfg.png

در حالت عادی فیلد متن جستجو پنهان هست

میخوام وقتی روی input سرچ کلیک شد فیلد متن جستجو نمایش داده بشه

و وقتی هم که برای بار دوم کلیک شد جستجو انجام بشه

پیشاپیش ممنون از کمکتون

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط t-admin
      سلام دوستان.
      من از قالب shoppystore استفاده می کنم.قسمت جستجوی قالب بجز 5 کالا در کالاهای دیگه جستجو نمیکنه!!! یعنی مثلا 5 لباس رو میشه سرچ کرد و نتایج اون پنج کالا رو نشون میده اما هرچی کالای دیگه که اضافه کردم توی نتایج جستجو نشون داده نمیشن.
      البته سرچ خود سایت درست عمل میکنه.اما کالاها رو بصورت پست نشون میده که مناسب فروشگاه نیست.
      میتونید راهنمایی کنید مشکل از کجاست؟
      این کد search.php سایت هست.
      <?php $ya_header_style     = ya_options()->getCpanelValue('header_style'); ?>
      <?php get_header( $ya_header_style ) ?>
      <div class="container">
          <?php
              $post_type = isset( $_GET['search_posttype'] ) ? $_GET['search_posttype'] : '';
              if( isset( $post_type ) &&  locate_template( 'templates/search-' . $post_type . '.php' ) ){
                  get_template_part( 'templates/search', $post_type );
              }else{
                  get_template_part('templates/content');
              }
          ?>
      </div>
      <?php get_footer(); ?>
    • توسط montazer
      سلام به همه دوستان
      من از طریق افزونه (AFC (Advanced Custom Fields  چندتا زمینه دلخواه ساختم.
      حالا با استفاده از افزونه جستجو یا فیلتر نیاز دارم تا از طریق اون بتونم این زمینه های دلخواه رو هم درش درنظر بگیره. امام موفق نشدم.
      از افزونه Ultimate WP Query Search Filter و Search & Filter هم استفاده کردم. ولی نمیدونم کجای کار میلنگه.
      ممنون میشم راهنمایی کنین.
      با تشکر
    • توسط sirousjj
      سلام دوستان
      خسته نباشید
      یه افزونه یا راهکاری میخوام برای سایت وردپرس که 
      از یه مخزن تصاویر یا فایل پی دی اف جستجو کنه و یه خروجی برگردونه
      به عبارته دیگه
      کاربر یه کد دراختیارش داشته باشه
      وقتی اون کد رو سرچ میکنه داخل یه تکست باکس
      از بین تصاویر موجود داخل اون مخزن 
      تصویر متناظر با اون کد رو برگردونه براش
      فقط و فقط یه نتیجه برگردونه
      نه نتایج مشابه رو
    • توسط enyac
      با سلام
       
      من یه فروشگاه موبایل دارم  میخوام یه جستجو تو صفح اول بزارم که کاربرم بتونه  مشخصات یک گوشی رو خودش انتخاب کنه و نزدیکترین مشخصات به خواسته کاربر نمایش داده بشه
       
      مثلا بتونه برند  تعداد هسته  حافظه اصلی و حاهظه داخلی  گیفیت دوربین محدوده قیمت این جور چیزا باشه
       
      هست همچین افزونه ای
    • توسط bzdesign
      با سلام خدمت همه عزیزان
      ببخشید من یه سوال از دوستان داشتم.
      چطور میشه فرم جستجو فابریک وردپرس رو مثل همه سایتهای دیگر ajax کرد؟ البته میخوام فقط بین محصولات جستجو کنه. افزونه های زیادی برای سرچ وجود دارند ولی همشون خودشون یه فرم جستجو مخصوص خودشون رو دارند و تغییر در فرم جستجو سایت ایجاد نمیکنند. و مشکل همشون اینه که فیلد جستجوشون فوق العاده ساده و زشت و مهمتر از همه انگیلیسی هست و به محض راست چین کردن بهم میریزن. خود فیلد جستجو ajax ووکامرس هم بدرد نمیخوره. چون فقط ازش میشه تو صفحات استفاده کرد، نه تو هدر سایت.
      این قالب من هست

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

       
      این هم نمونه یک سایت ایرانی که همون چیزی رو که من میخوام داره. یعنی به محض تایپ کردن تو فیلد جستجو بالای سایتش نتیجه هارو سورت میکنه