Top subiecte apreciate

Optiuni experimentale
  • Foloseste AJAX in formulare ori de cate ori este posibil

Navigare rapidă

Ultimele subiecte
» Wireless ipb theme [punBB]
Scris de WinaTickets Astazi la 11:37
» [Animate] Recent Topic IPB
Scris de DenisPasca Lun 5 Dec - 22:44
» Ipb Counter-strike Special FG
Scris de DenisPasca Sam 3 Dec - 22:52
» Special Theme Extrem Tutorials
Scris de cosminelu21 Vin 2 Dec - 23:48
Cuvinte-cheie

Metin2  navigare  Mesaje  html  animate  punbb  tema  ultimele  menu  subforumuri  legenda  phpBB2  meniu  tutorial  reclama  banner  drop  profil  avatar  Bara  chenar  Statistici  cautare  edit  radio  subiecte  

Aspect nou pentru casuta de cautare


Salut,
In acest tutorial veti putea creea o casuta de cautare mult mai frumoasa decat cealalalta.
Demo:
Normal - https://i45.servimg.com/u/f45/17/45/40/76/110.png
La apasarea butonului Avansat - https://i45.servimg.com/u/f45/17/45/40/76/210.png

Pasul 1. Adaugarea codurilor CSS
Mergem in: Panoul de administrare => Afisare => Imagini si culori => Culori => Foaie de stil CSS si adaugam:
Cod:
/* Casuta de cautare */

#cautare {
padding: 1px;
margin-left: 1px;}

/* Casuta de inserare */

#casuta_cautare {
color: #999;
background: #fff;
padding: 5px;
border: 1px solid #ddd;
border-radius: 3px 0px 0px 3px;}

#casuta_cautare:hover {
border: 1px solid #d8d8d8;
color: #777; }

/* Butonul de cautare */

#buton_cautare {
position: relative;
cursor: pointer;
margin-left: -26px;
background: #295CA9 url("http://i45.servimg.com/u/f45/17/45/40/76/start10.png") no-repeat 50% center ;
width: 26px;
height: 26px;
border-radius: 0px 3px 3px 0px;
border: 1px solid #19367B;
border-left: none;}

#buton_cautare:hover { opacity: 0.9;}

/* Butonul avansat */

.optiuni {
display: none;
font-family: Arial;
font-size: 12px;
font-weight: bold;
color: #000;
text-shadow: 1px 1px 1px #fff;
margin-top: 5px;}

.avansat {
font-family: Arial;
font-size: 15px;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 1px #19367B;
bottom: -1px;
display: inline-block;
cursor: pointer;
padding: 3px;
border-radius: 3px 3px 3px 3px;
border: 1px solid #19367B;
background: #295CA9;}

.avansat:hover { opacity: 0.9;}
Pasul 2. Adaugarea codului javascript
Mergem in Panoul de administrare => Module => Gestiunea codurilor javascrip si creem un cod nou:
Titlu - Casuta de cautare
Amplasare - Toate paginile
Cod:
Cod:
$(document).ready(function() {
$(".avansat").click(function() {
$(".optiuni").toggle();
});
});
Pasul 3. Adaugarea librariei javascript
Daca folositi phpbb2 sau punbb, mergeti in Panoul de administrare => Afisare => Template-uri => General => Overall_header si adaugam codul urmator dupa < head>
Cod:
<script src="http://code.jquery.com/jquery-latest.js"></script>
Daca folositi phpbb3 sau invision adaugati codul intr-un widget] afisat pe toate paginile[/b sau in [b]anunturi.
Panoul de administrare => General => Anunturi => Creeaza un anunt.
Panoul de administrare => Module => Widget-urile forumului

Pasul 4. Codurile HTML
Adaugati codurile urmatoare unde doriti:
- Anunturi
- Generalitati
- Header
Daca doriti sa mutati intreaga casuta, nu doar parti din ea cum ar fi butonul avansat, cel de cautare sau casuta de inserare, editati #cautare din CSS.
Cod:
<form method="get" action="/search" id="cautare">

<input name="search_keywords" maxlength="128" value="Cauta..." onclick="if (this.value == 'Cauta...') this.value = '';" onblur="if (this.value == '') this.value = 'Cauta...';" type="text" id="casuta_cautare" /></input>
<input value=" " type="submit" id="buton_cautare"  /></input>
<div class="avansat">Avansat</div>
  <div class="optiuni">
<label for="rposts"><input id="rposts" name="show_results" value="posts" type="radio" /> Mesaje </label>
<label for="rtopics"><input id="rtopics" name="show_results" value="topics" checked="checked" type="radio" /> Subiecte</label>
</div>

</form>

Acest tutorial a fost scris de PlayOn.

Comentariile utilizatorilor
Vizitator
la data de Dum 4 Noi - 7:45
Vizitator Vizitator
Conectat
Frumos Tutorial Bravo

si pentru phpbb3 se putea adauga libraria
Cod:
$(document).ready(function() {
$(".avansat").click(function() {
$(".optiuni").toggle();
});
$.getScript('http://code.jquery.com/jquery-latest.js');
});
Vizitator
la data de Dum 4 Noi - 22:21
Vizitato Vizitator
Conectat
Imi place!
Felicitari.
Membru ET
la data de Dum 4 Noi - 22:51
Soricelul Membru ET
Conectat
Foarte bune si folositor tutorialul! Bravo!
Vizitator
la data de Lun 5 Noi - 15:44
Vizitato Vizitator
Conectat
Multumesc tuturor , voi reveni in curand cu un tutorial nou !
Membru dedicat
la data de Lun 5 Noi - 22:14
mr.franta Membru dedicat
Conectat
Imi place mult,felicitari!
Vizitator
la data de Sam 10 Noi - 13:28
Vizitato Vizitator
Conectat
Mersi mult tuturor !
Membru ET
la data de Lun 12 Noi - 15:30
Alex Membru ET
Conectat
Bun si folositor.Bravo!
Membru ET
la data de Dum 9 Dec - 14:50
Loby Membru ET
Conectat
Frumos tutorial.