Top subiecte apreciate

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

Navigare rapidă

Ultimele subiecte
» Legenda s-a intors XD
Scris de Zeus Mar 27 Sept - 21:23
» Cum retusam imaginile
Scris de cristimare Mar 27 Sept - 14:27
» salut
Scris de Andrei34 Dum 18 Sept - 18:53
» Salut
Scris de Andrei34 Dum 18 Sept - 18:52
Cuvinte-cheie

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

Aspect nou pentru casuta de cautare


Salut,
In acest tutorial veti putea creea o casuta de cautare mult mai frumoasa decat cealalalta.
Demo:
Normal - http://i45.servimg.com/u/f45/17/45/40/76/110.png
La apasarea butonului Avansat - http://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.