رفتن به مطلب

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


پست های پیشنهاد شده

دوستان سلام

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

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

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

http://jsbin.com/ajacor/1

لینک به ارسال

سلام

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

Demo.zip

لینک به ارسال

سلام

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

Demo.zip

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

لینک به ارسال

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

لینک به ارسال

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

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

لینک به ارسال

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


http://jsbin.com/exirog/1

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

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

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

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


showhidden('searchform')

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

لینک به ارسال
  • 2 سال بعد...

سلام

دوستان من یه همچین فرمی برای 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 سرچ کلیک شد فیلد متن جستجو نمایش داده بشه

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

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

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...