ninja4un

استایل جستجو

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

با سلام و خسته نباشید

من میخوام توی منوی سایتم ، سمت چپش ( www.waha.ir ) یه جستجو قرار بدم مث سایت http://www.dbstheme.com/ که هم بازشو هست و توی منو قرار گرفته

آیا امکانش هست !؟ میشه لطفا راهنمایی بفرمایید!

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


لینک به پست


<div class="search-form">
<form>
<input type="text" class="stext" name="s" value="جستجو" onclick="if(this.value == 'جستجو') { this.value = '' }" onblur="if(this.value == '') { this.value = 'جستجو' }" />
<input type="submit" class="ssubmit" value="بیاب !" />
</form>
</div>


.top-bar .search-form {
float: left;
height: 50px;
text-align: center;
padding: 0 10px;
margin-top: 2px;
}
.top-bar .search-form form {
height: 35px;
background: #EEE;
margin-top: 5px;
-moz-box-shadow: inset 0px 0px 2px #AAA;
-webkit-box-shadow: inset 0px 0px 2px #AAA;
box-shadow: inset 0px 0px 2px #AAA;
padding-right: 10px;
padding-left: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transitionp: all 0.4s ease;
transition: all 0.4s ease;
}
.top-bar .search-form form:hover {
background: #FFF;
color: #333;
-moz-box-shadow: inset 0px 0px 4px #AAA;
-webkit-box-shadow: inset 0px 0px 4px #AAA;
box-shadow: inset 0px 0px 4px #AAA;
}
.top-bar .search-form .stext {
width: 40px;
height: 35px;
line-height: 35px;
font: 13px 'DBS-BYekan', B Yekan, Tahoma, Tahoma;
background: none;
border: none;
color: #222;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.top-bar .search-form .stext:focus {
width: 150px;
}
.top-bar .search-form .ssubmit {
width: 18px;
height: 30px;
font-size: 0;
background: url(../img/search.png) left 2px no-repeat;
border: none;
margin-right: 3px;
cursor: pointer;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
opacity: 0.5;
}
.top-bar .search-form .ssubmit:hover {
opacity: 0.8;
}

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


لینک به پست

تشکر از پاسختون ،

فقط من تازه کارم زیاد سر در نمیارم !

فایل دوم که دادید برای استایل هست و تو style.css جاش هست ، کدهای اول هم فک کنم باید تو header بزارم ، من این کارو کردم ولی یه جستجو معمولی بود ، تازه توی منو هم قرار نگرفت !

میشه لطفا بیشتر راهنمایی بفرمایید ممنون

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


لینک به پست

این استایل را بذارید :


.search-form {
float: left;
height: 50px;
text-align: center;
padding: 0 10px;
margin-top: 2px;
}
.search-form form {
height: 35px;
background: #EEE;
margin-top: 5px;
-moz-box-shadow: inset 0px 0px 2px #AAA;
-webkit-box-shadow: inset 0px 0px 2px #AAA;
box-shadow: inset 0px 0px 2px #AAA;
padding-right: 10px;
padding-left: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transitionp: all 0.4s ease;
transition: all 0.4s ease;
}
.search-form form:hover {
background: #FFF;
color: #333;
-moz-box-shadow: inset 0px 0px 4px #AAA;
-webkit-box-shadow: inset 0px 0px 4px #AAA;
box-shadow: inset 0px 0px 4px #AAA;
}
search-form .stext {
width: 40px;
height: 35px;
line-height: 35px;
font: 13px 'DBS-BYekan', B Yekan, Tahoma, Tahoma;
background: none;
border: none;
color: #222;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.search-form .stext:focus {
width: 150px;
}
.search-form .ssubmit {
width: 18px;
height: 30px;
font-size: 0;
background: url(../img/search.png) left 2px no-repeat;
border: none;
margin-right: 3px;
cursor: pointer;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
opacity: 0.5;
}
.search-form .ssubmit:hover {
opacity: 0.8;
}

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


لینک به پست

بازم تشکر ولی این اونی که من میخوام نیست

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


لینک به پست

http://jsfiddle.net/g5gQK/

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


لینک به پست

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

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

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

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


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

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

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


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

  • مطالب مشابه

    • توسط sirousjj
      سلام دوستان
      خسته نباشید
      یه افزونه یا راهکاری میخوام برای سایت وردپرس که 
      از یه مخزن تصاویر یا فایل پی دی اف جستجو کنه و یه خروجی برگردونه
      به عبارته دیگه
      کاربر یه کد دراختیارش داشته باشه
      وقتی اون کد رو سرچ میکنه داخل یه تکست باکس
      از بین تصاویر موجود داخل اون مخزن 
      تصویر متناظر با اون کد رو برگردونه براش
      فقط و فقط یه نتیجه برگردونه
      نه نتایج مشابه رو
    • توسط enyac
      با سلام
       
      من یه فروشگاه موبایل دارم  میخوام یه جستجو تو صفح اول بزارم که کاربرم بتونه  مشخصات یک گوشی رو خودش انتخاب کنه و نزدیکترین مشخصات به خواسته کاربر نمایش داده بشه
       
      مثلا بتونه برند  تعداد هسته  حافظه اصلی و حاهظه داخلی  گیفیت دوربین محدوده قیمت این جور چیزا باشه
       
      هست همچین افزونه ای
    • توسط bzdesign
      با سلام خدمت همه عزیزان
      ببخشید من یه سوال از دوستان داشتم.
      چطور میشه فرم جستجو فابریک وردپرس رو مثل همه سایتهای دیگر ajax کرد؟ البته میخوام فقط بین محصولات جستجو کنه. افزونه های زیادی برای سرچ وجود دارند ولی همشون خودشون یه فرم جستجو مخصوص خودشون رو دارند و تغییر در فرم جستجو سایت ایجاد نمیکنند. و مشکل همشون اینه که فیلد جستجوشون فوق العاده ساده و زشت و مهمتر از همه انگیلیسی هست و به محض راست چین کردن بهم میریزن. خود فیلد جستجو ajax ووکامرس هم بدرد نمیخوره. چون فقط ازش میشه تو صفحات استفاده کرد، نه تو هدر سایت.
      این قالب من هست

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

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

    • توسط M@hdi71
      سلام
      می خوام یه برگه درست کنم و یکسری مطالب داخلش بذارم و نیاز هست که کاربر بتونه بین کلمات جستجو کنه به همین دلیل نیاز دارم به یک کادر جستجو مثل Ctrl+F فایرفاکس که کاربر بتونه توی متن جستجو کنه.
      کد زیر رو پیدا کردم ولی مشکل اینه که بعد از نوشتن کلمه مورد نظر باید کلید Alt رو یکبار فشار بدی و بعد روی دکمه جستجو کلیک کنید. می خواستم بدونم افزونه یا کدی (مثل Ctrl+F فایرفاکس) برای اینکار هست که درست کار کنه یا میشه همین کد رو درست کرد که دیگه نیاز به زدن کلید Alt نباشه؟
      با تشکر
      <html> <body> <script> <!-- Hide from old browsers /****************************************** * Find In Page Script -- Submitted/revised by Alan Koontz (alankoontz@REMOVETHISyahoo.com) * Visit Dynamic Drive (http://www.dynamicdrive.com/) for full source code * This notice must stay intact for use ******************************************/ // revised by Alan Koontz -- May 2003 var TRange = null; var dupeRange = null; var TestRange = null; var win = null; // SELECTED BROWSER SNIFFER COMPONENTS DOCUMENTED AT // http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html var nom = navigator.appName.toLowerCase(); var agt = navigator.userAgent.toLowerCase(); var is_major = parseInt(navigator.appVersion); var is_minor = parseFloat(navigator.appVersion); var is_ie = (agt.indexOf("msie") != -1); var is_ie4up = (is_ie && (is_major >= 4)); var is_not_moz = (agt.indexOf('netscape')!=-1) var is_nav = (nom.indexOf('netscape')!=-1); var is_nav4 = (is_nav && (is_major == 4)); var is_mac = (agt.indexOf("mac")!=-1); var is_gecko = (agt.indexOf('gecko') != -1); var is_opera = (agt.indexOf("opera") != -1); // GECKO REVISION var is_rev=0 if (is_gecko) { temp = agt.split("rv:") is_rev = parseFloat(temp[1]) } // USE THE FOLLOWING VARIABLE TO CONFIGURE FRAMES TO SEARCH // (SELF OR CHILD FRAME) // If you want to search another frame, change from "self" to // the name of the target frame: // e.g., var frametosearch = 'main' //var frametosearch = 'main'; var frametosearch = self; function search(whichform, whichframe) { // TEST FOR IE5 FOR MAC (NO DOCUMENTATION) if (is_ie4up && is_mac) return; // TEST FOR NAV 6 (NO DOCUMENTATION) if (is_gecko && (is_rev <1)) return; // TEST FOR Opera (NO DOCUMENTATION) if (is_opera) return; // INITIALIZATIONS FOR FIND-IN-PAGE SEARCHES if(whichform.findthis.value!=null && whichform.findthis.value!='') { str = whichform.findthis.value; win = whichframe; var frameval=false; if(win!=self) { frameval=true; // this will enable Nav7 to search child frame win = parent.frames[whichframe]; } } else return; // i.e., no search string was entered var strFound; // NAVIGATOR 4 SPECIFIC CODE if(is_nav4 && (is_minor < 5)) { strFound=win.find(str); // case insensitive, forward search by default // There are 3 arguments available: // searchString: type string and it's the item to be searched // caseSensitive: boolean -- is search case sensitive? // backwards: boolean --should we also search backwards? // strFound=win.find(str, false, false) is the explicit // version of the above // The Mac version of Nav4 has wrapAround, but // cannot be specified in JS } // NAVIGATOR 7 and Mozilla rev 1+ SPECIFIC CODE (WILL NOT WORK WITH NAVIGATOR 6) if (is_gecko && (is_rev >= 1)) { if(frameval!=false) win.focus(); // force search in specified child frame strFound=win.find(str, false, false, true, false, frameval, false); // The following statement enables reversion of focus // back to the search box after each search event // allowing the user to press the ENTER key instead // of clicking the search button to continue search. // Note: tends to be buggy in Mozilla as of 1.3.1 // (see www.mozilla.org) so is excluded from users // of that browser. if (is_not_moz) whichform.findthis.focus(); // There are 7 arguments available: // searchString: type string and it's the item to be searched // caseSensitive: boolean -- is search case sensitive? // backwards: boolean --should we also search backwards? // wrapAround: boolean -- should we wrap the search? // wholeWord: boolean: should we search only for whole words // searchInFrames: boolean -- should we search in frames? // showDialog: boolean -- should we show the Find Dialog? } if (is_ie4up) { // EXPLORER-SPECIFIC CODE revised 5/21/03 if (TRange!=null) { TestRange=win.document.body.createTextRange(); if (dupeRange.inRange(TestRange)) { TRange.collapse(false); strFound=TRange.findText(str); if (strFound) { //the following line added by Mike and Susan Keenan, 7 June 2003 win.document.body.scrollTop = win.document.body.scrollTop + TRange.offsetTop; TRange.select(); } } else { TRange=win.document.body.createTextRange(); TRange.collapse(false); strFound=TRange.findText(str); if (strFound) { //the following line added by Mike and Susan Keenan, 7 June 2003 win.document.body.scrollTop = TRange.offsetTop; TRange.select(); } } } if (TRange==null || strFound==0) { TRange=win.document.body.createTextRange(); dupeRange = TRange.duplicate(); strFound=TRange.findText(str); if (strFound) { //the following line added by Mike and Susan Keenan, 7 June 2003 win.document.body.scrollTop = TRange.offsetTop; TRange.select(); } } } if (!strFound) alert ("String '"+str+"' not found!") // string not found } // --> </script> <!-- EXAMPLE FORM OF FIND-IN-PAGE SEARCH USING SUBMIT (ALLOWING 'ENTER/RETURN' KEY PRESS EVENT) --> <form name="form1" onSubmit="search(document.form1, frametosearch); return false"><input type="text" name="findthis" size="15" title="Press 'ALT s' after clicking submit to repeatedly search page"> <input type="submit" value="Find in Page" ACCESSKEY="s"></form> </body> </html>  
    • توسط vahid313
      سلام
      دوستان من تو سایتم چند صفحه دارم که در هر کدام 200 لوگوی شرکت قرار داره. و این شرکت ها به نام 30 استان دسته بندی شدند (30 دسته). 
      می خوام که کاربر بتونه با استفاده از یک فیلد (هر چه زیباتر بهتر) یک دسته رو انتخاب کنه و سرچ کنه.
      موضوع این هست که این لوگوها رو باید در صفحه قرار بدم و جنسشون تگ یا دسته یا نوشته و ... نیستند و تنها در یک صفحه عکس لوگو به همراه اسم شرکت قرار گرفته.
      ممنون میشم راهنمایی کنید. هرچی سرچ میکنم افزونه برای سرچ در بین تگ ها و دسته ها و ... می یان.
      اگر نظری در مورد صفحات این چنینی دارید ممنون میشم لطف کنید و راهنمایی کنید.
      با تشکر