فرم جستجو بازشو jquery
۱- کد html برای نمایش فرم جستجو :
۱ ۲ ۳ ۴ ۵ ۶ ۷ | <div class="container"> <form class="searchbox"> <input type="search" placeholder="Search......" name="search" class="searchbox-input" onkeyup="buttonUp();" required> <input type="submit" class="searchbox-submit" value="بگرد"> <span class="searchbox-icon">بگرد</span> </form> </div> |
۲- استایل دادن به فرم :
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ ۳۳ ۳۴ ۳۵ ۳۶ ۳۷ ۳۸ ۳۹ ۴۰ ۴۱ ۴۲ ۴۳ ۴۴ ۴۵ ۴۶ ۴۷ ۴۸ ۴۹ ۵۰ ۵۱ ۵۲ ۵۳ ۵۴ ۵۵ ۵۶ ۵۷ ۵۸ ۵۹ ۶۰ ۶۱ ۶۲ ۶۳ ۶۴ ۶۵ ۶۶ ۶۷ ۶۸ ۶۹ ۷۰ ۷۱ ۷۲ ۷۳ ۷۴ ۷۵ ۷۶ ۷۷ ۷۸ ۷۹ ۸۰ ۸۱ ۸۲ ۸۳ ۸۴ | .container{ width:۶۰۰px; margin:۵۰px auto; } .searchbox{ position:relative; min-width:۵۰px; width:۰%; height:۵۰px; float:right; overflow:hidden; -webkit-transition: width ۰.۳s; -moz-transition: width ۰.۳s; -ms-transition: width ۰.۳s; -o-transition: width ۰.۳s; transition: width ۰.۳s; } .searchbox-input{ top:۰; right:۰; border:۰; outline:۰; background:#dcddd8; width:۱۰۰%; height:۵۰px; margin:۰; padding:0px ۵۵px 0px ۲۰px; font-size:۲۰px; color:red; } .searchbox-input::-webkit-input-placeholder { color: #d74b4b; } .searchbox-input:-moz-placeholder { color: #d74b4b; } .searchbox-input::-moz-placeholder { color: #d74b4b; } .searchbox-input:-ms-input-placeholder { color: #d74b4b; } .searchbox-icon, .searchbox-submit{ width:۵۰px; height:۵۰px; display:block; position:absolute; top:۰; font-family:verdana; font-size:۲۲px; right:۰; padding:۰; margin:۰; border:۰; outline:۰; line-height:۵۰px; text-align:center; cursor:pointer; color:#dcddd8; background:#۱۷۲b3c; } .searchbox-open{ width:۱۰۰%; } .byline{ position:absolute; top:۱۵۰px; left:۳۰%; text-align:center; font-size:۱۸px; } .byline a{ text-decoration:none; color: #d74b4b; } |
۳- کد جی کوئری برای اینکه وقتی روی دکمه فرم کلیک شد ، تکس باکس فرم باز شود :
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ ۳۳ ۳۴ ۳۵ ۳۶ ۳۷ ۳۸ ۳۹ | $(document).ready(function(){ var submitIcon = $('.searchbox-icon'); var inputBox = $('.searchbox-input'); var searchBox = $('.searchbox'); var isOpen = false; submitIcon.click(function(){ if(isOpen == false){ searchBox.addClass('searchbox-open'); inputBox.focus(); isOpen = true; } else { searchBox.removeClass('searchbox-open'); inputBox.focusout(); isOpen = false; } }); submitIcon.mouseup(function(){ return false; }); searchBox.mouseup(function(){ return false; }); $(document).mouseup(function(){ if(isOpen == true){ $('.searchbox-icon').css('display','block'); submitIcon.click(); } }); }); function buttonUp(){ var inputVal = $('.searchbox-input').val(); inputVal = $.trim(inputVal).length; if( inputVal !== ۰){ $('.searchbox-icon').css('display','none'); } else { $('.searchbox-input').val(''); $('.searchbox-icon').css('display','block'); } } |
