Nouvelle version de la recherche
This commit is contained in:
Chouchen
parent
1e79cafb35
commit
136be98daa
@ -7,21 +7,22 @@ class search extends Module {
|
||||
public $params = array();
|
||||
|
||||
public function __construct($params){
|
||||
echo '<center>
|
||||
<form method="get" action="http://www.google.fr/custom" target="_top" name="form" id="form">
|
||||
<table bgcolor="#ffffff" id="recherche">
|
||||
<tr><td nowrap="nowrap" valign="top" align="left" height="32">
|
||||
<input type="text" name="q" id="q" size="31" maxlength="255" value=""></input>
|
||||
<input type="submit" name="sa" value="Rechercher" class="searchbutton"></input>
|
||||
<input type="hidden" name="client" value="pub-5878090856826866"></input>
|
||||
<input type="hidden" name="forid" value="1"></input>
|
||||
<input type="hidden" name="ie" value="ISO-8859-1"></input>
|
||||
<input type="hidden" name="oe" value="ISO-8859-1"></input>
|
||||
<input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1;"></input>
|
||||
<input type="hidden" name="hl" value="fr"></input>
|
||||
</td></tr></table>
|
||||
</form>
|
||||
</center>';
|
||||
echo '<link rel="stylesheet" type="text/css" href="css/search.css">
|
||||
<script type="text/javascript" src="js/jquery.search.js"></script>
|
||||
<form id="searchForm" method="post">
|
||||
<fieldset>
|
||||
<input id="s" type="text" />
|
||||
<input type="submit" value="Submit" id="submitButton" />
|
||||
|
||||
<ul class="icons">
|
||||
<li class="web" title="Web Search" data-searchType="web">Web</li>
|
||||
<li class="images" title="Image Search" data-searchType="images">Images</li>
|
||||
<li class="news" title="News Search" data-searchType="news">News</li>
|
||||
<li class="videos" title="Video Search" data-searchType="video">Videos</li>
|
||||
</ul>
|
||||
|
||||
</fieldset>
|
||||
</form>';
|
||||
}
|
||||
|
||||
private function setParams($params){
|
||||
|
||||
164
css/search.css
Normal file
164
css/search.css
Normal file
@ -0,0 +1,164 @@
|
||||
#searchForm{
|
||||
/* The search form. */
|
||||
width:525px;
|
||||
/*background-color:#4C5A65;
|
||||
padding:50px 50px 30px;*/
|
||||
margin:0 auto;
|
||||
position:relative;
|
||||
|
||||
-moz-border-radius:16px;
|
||||
-webkit-border-radius:16px;
|
||||
border-radius:16px;
|
||||
}
|
||||
|
||||
fieldset{
|
||||
border:none;
|
||||
}
|
||||
|
||||
#s{
|
||||
/* The search text box. */
|
||||
|
||||
border:none;
|
||||
color:#888888;
|
||||
/*background:url("../images/interface/searchBox.png") no-repeat;*/
|
||||
background:url('../images/interface/zoom.png') 10px center no-repeat;
|
||||
border:1px solid #888888;
|
||||
float:left;
|
||||
font-family:Arial,Helvetica,sans-serif;
|
||||
font-size:15px;
|
||||
height:36px;
|
||||
line-height:36px;
|
||||
margin-right:12px;
|
||||
outline:medium none;
|
||||
padding:0 0 0 35px;
|
||||
text-shadow:1px 1px 0 white;
|
||||
width:385px;
|
||||
-moz-border-radius:10px;
|
||||
-webkit-border-radius:10px;
|
||||
border-radius:10px;
|
||||
-moz-box-shadow: 2px 2px 3px #888;
|
||||
-webkit-box-shadow: 2px 2px 3px #888;
|
||||
box-shadow: 2px 2px 3px #888;
|
||||
/* For IE 8 */
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#888888')";
|
||||
/* For IE 5.5 - 7 */
|
||||
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#888888');
|
||||
|
||||
}
|
||||
.icons{
|
||||
background:#4C5A65;
|
||||
padding:3px 3px 10px 3px;
|
||||
list-style:none;
|
||||
margin:10px 0;
|
||||
height:19px;
|
||||
position:relative;
|
||||
-moz-border-radius:5px;
|
||||
-webkit-border-radius:5px;
|
||||
border-radius:5px;
|
||||
}
|
||||
|
||||
.icons li{
|
||||
background:url("../images/interface/icons.png") no-repeat;
|
||||
float:left;
|
||||
height:19px;
|
||||
text-indent:-999px;
|
||||
cursor:pointer;
|
||||
margin-right:5px;
|
||||
}
|
||||
|
||||
/* Styling each icon */
|
||||
|
||||
li.web{ width:15px;}
|
||||
li.web.active,
|
||||
li.web:hover{ background-position:left bottom;}
|
||||
|
||||
li.images{ width:22px; background-position:-18px 0;}
|
||||
li.images.active,
|
||||
li.images:hover{ background-position:-18px bottom;}
|
||||
|
||||
li.news{ width:14px; background-position:-44px 0;}
|
||||
li.news.active,
|
||||
li.news:hover{ background-position:-44px bottom;}
|
||||
|
||||
li.videos{ width:17px; background-position:right 0;}
|
||||
li.videos.active,
|
||||
li.videos:hover{ background-position:right bottom;}
|
||||
|
||||
span.arrow{
|
||||
/* The little arrow that moves below the icons */
|
||||
|
||||
width:11px;
|
||||
height:6px;
|
||||
margin:21px 0 0 5px;
|
||||
position:absolute;
|
||||
background:url('../images/interface/arrow.png') no-repeat;
|
||||
left:0;
|
||||
}
|
||||
|
||||
/* The submit button */
|
||||
|
||||
#submitButton{
|
||||
background:url('../images/interface/buttons.png') no-repeat;
|
||||
width:83px;
|
||||
height:36px;
|
||||
text-indent:-9999px;
|
||||
overflow:hidden;
|
||||
text-transform:uppercase;
|
||||
border:none;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
#submitButton:hover{
|
||||
background-position:left bottom;
|
||||
}
|
||||
|
||||
/* Web & news results */
|
||||
|
||||
.webResult{ text-shadow:1px 1px 0 #586a75;margin-bottom:50px;}
|
||||
.webResult h2{
|
||||
background-color:#5D6F7B;
|
||||
font-size:18px;
|
||||
font-weight:normal;
|
||||
padding:8px 20px;
|
||||
|
||||
/* Applying CSS3 rounded corners */
|
||||
-moz-border-radius:18px;
|
||||
-webkit-border-radius:18px;
|
||||
border-radius:18px;
|
||||
}
|
||||
.webResult h2 b{ color:#fff; }
|
||||
.webResult h2 a{ color:#eee;border:none;}
|
||||
.webResult p{ line-height:1.5;padding:15px 20px;}
|
||||
.webResult p b{ color:white;}
|
||||
.webResult > a{ margin-left:20px;}
|
||||
|
||||
/* Image & video search results */
|
||||
|
||||
.imageResult{
|
||||
float:left;
|
||||
height:170px;
|
||||
margin:0 0 20px 40px;
|
||||
text-align:center;
|
||||
width:150px;
|
||||
}
|
||||
.imageResult img{ display:block;border:none;}
|
||||
.imageResult a.pic{
|
||||
border:1px solid #fff;
|
||||
outline:1px solid #777;
|
||||
display:block;
|
||||
margin:0 auto 15px;
|
||||
}
|
||||
|
||||
/* The show more button */
|
||||
|
||||
#more{
|
||||
width:83px;
|
||||
height:24px;
|
||||
background:url('../images/interface/more.png') no-repeat;
|
||||
cursor:pointer;
|
||||
margin:40px auto;
|
||||
}
|
||||
|
||||
#more:hover{
|
||||
background-position:left bottom;
|
||||
}
|
||||
BIN
images/interface/arrow.png
Normal file
BIN
images/interface/arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 244 B |
BIN
images/interface/buttons.png
Normal file
BIN
images/interface/buttons.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
images/interface/icons.png
Normal file
BIN
images/interface/icons.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
images/interface/more.png
Normal file
BIN
images/interface/more.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
images/interface/zoom.png
Normal file
BIN
images/interface/zoom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 692 B |
184
js/jquery.search.js
Normal file
184
js/jquery.search.js
Normal file
@ -0,0 +1,184 @@
|
||||
$(document).ready(function(){
|
||||
|
||||
var config = {
|
||||
type : 'web',
|
||||
perPage : 8, // A maximum of 8 is allowed by Google
|
||||
page : 0 // The start page
|
||||
}
|
||||
|
||||
// The small arrow that marks the active search icon:
|
||||
var arrow = $('<span>',{className:'arrow'}).appendTo('ul.icons');
|
||||
|
||||
$('ul.icons li').click(function(){
|
||||
var el = $(this);
|
||||
|
||||
if(el.hasClass('active')){
|
||||
// The icon is already active, exit
|
||||
return false;
|
||||
}
|
||||
|
||||
el.siblings().removeClass('active');
|
||||
el.addClass('active');
|
||||
|
||||
// Move the arrow below this icon
|
||||
arrow.stop().animate({
|
||||
left : el.position().left,
|
||||
marginLeft : (el.width()/2)-4
|
||||
});
|
||||
|
||||
// Set the search type
|
||||
config.type = el.attr('data-searchType');
|
||||
$('#more').fadeOut();
|
||||
});
|
||||
|
||||
// Focusing the input text box:
|
||||
$('#s').focus();
|
||||
|
||||
$('#searchForm').submit(function(){
|
||||
googleSearch();
|
||||
return false;
|
||||
});
|
||||
|
||||
function googleSearch(settings){
|
||||
|
||||
// If no parameters are supplied to the function,
|
||||
// it takes its defaults from the config object above:
|
||||
|
||||
settings = $.extend({},config,settings);
|
||||
settings.term = settings.term || $('#s').val();
|
||||
|
||||
// URL of Google's AJAX search API
|
||||
var apiURL = 'http://ajax.googleapis.com/ajax/services/search/'+settings.type+
|
||||
'?v=1.0&callback=?';
|
||||
|
||||
$.getJSON(apiURL,{
|
||||
q : settings.term,
|
||||
rsz : settings.perPage,
|
||||
start : settings.page*settings.perPage
|
||||
},function(r){
|
||||
|
||||
var results = r.responseData.results;
|
||||
$('#more').remove();
|
||||
|
||||
if(results.length){
|
||||
|
||||
// If results were returned, add them to a pageContainer div,
|
||||
// after which append them to the #resultsDiv:
|
||||
|
||||
var pageContainer = $('<div>',{className:'pageContainer'});
|
||||
|
||||
for(var i=0;i<results.length;i++){
|
||||
// Creating a new result object and firing its toString method:
|
||||
pageContainer.append(new result(results[i]) + '');
|
||||
}
|
||||
|
||||
var cursor = r.responseData.cursor;
|
||||
|
||||
// Checking if there are more pages with results,
|
||||
// and deciding whether to show the More button:
|
||||
|
||||
if( +cursor.estimatedResultCount > (settings.page+1)*settings.perPage){
|
||||
$('<div>',{id:'more'}).appendTo(pageContainer).click(function(){
|
||||
googleSearch({append:true,page:settings.page+1});
|
||||
$(this).fadeOut();
|
||||
});
|
||||
}
|
||||
|
||||
pageContainer.append('<div class="clear"></div>').hide();
|
||||
|
||||
$.fancybox(
|
||||
$(pageContainer).html(),
|
||||
{
|
||||
'autoDimensions' : false,
|
||||
'width' : 400,
|
||||
'height' : 'auto',
|
||||
'showNavArrows' : false,
|
||||
'transitionIn' : 'elastic'
|
||||
}
|
||||
);
|
||||
$('#more').click(function(){
|
||||
googleSearch({append:true,page:settings.page+1});
|
||||
});
|
||||
}
|
||||
else {
|
||||
|
||||
var pageContainer = $('<div>',{className:'pageContainer'});
|
||||
// No results were found for this search.
|
||||
|
||||
$('<p>',{
|
||||
className : 'notFound',
|
||||
html : 'No Results Were Found!'
|
||||
}).appendTo(pageContainer);
|
||||
// .hide().appendTo(resultsDiv).fadeIn();
|
||||
$.fancybox(
|
||||
$(pageContainer).html(),
|
||||
{
|
||||
'autoDimensions' : false,
|
||||
'width' : 400,
|
||||
'height' : 'auto',
|
||||
'showNavArrows' : false,
|
||||
'transitionIn' : 'elastic'
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function result(r){
|
||||
|
||||
// This is class definition. Object of this class are created for
|
||||
// each result. The markup is generated by the .toString() method.
|
||||
|
||||
var arr = [];
|
||||
|
||||
// GsearchResultClass is passed by the google API
|
||||
switch(r.GsearchResultClass){
|
||||
|
||||
case 'GwebSearch':
|
||||
arr = [
|
||||
'<div class="webResult">',
|
||||
'<h2><a href="',r.url,'">',r.title,'</a></h2>',
|
||||
'<p>',r.content,'</p>',
|
||||
'<a href="',r.url,'">',r.visibleUrl,'</a>',
|
||||
'</div>'
|
||||
];
|
||||
break;
|
||||
case 'GimageSearch':
|
||||
arr = [
|
||||
'<div class="imageResult">',
|
||||
'<a href="',r.url,'" title="',r.titleNoFormatting,
|
||||
'" class="pic" style="width:',r.tbWidth,'px;height:',r.tbHeight,'px;">',
|
||||
'<img src="',r.tbUrl,'" width="',r.tbWidth,'" height="',
|
||||
r.tbHeight,'" /></a>','<div class="clear"></div>',
|
||||
'<a href="',r.originalContextUrl,'">',r.visibleUrl,'</a>',
|
||||
'</div>'
|
||||
];
|
||||
break;
|
||||
case 'GvideoSearch':
|
||||
arr = [
|
||||
'<div class="imageResult">',
|
||||
'<a href="',r.url,'" title="',r.titleNoFormatting,
|
||||
'" class="pic" style="width:150px;height:auto;">',
|
||||
'<img src="',r.tbUrl,'" width="100%" /></a>',
|
||||
'<div class="clear"></div>','<a href="',
|
||||
r.originalContextUrl,'">',r.publisher,'</a>',
|
||||
'</div>'
|
||||
];
|
||||
break;
|
||||
case 'GnewsSearch':
|
||||
arr = [
|
||||
'<div class="webResult">',
|
||||
'<h2><a href="',r.unescapedUrl,'">',r.title,'</a></h2>',
|
||||
'<p>',r.content,'</p>',
|
||||
'<a href="',r.unescapedUrl,'">',r.publisher,'</a>',
|
||||
'</div>'
|
||||
];
|
||||
break;
|
||||
}
|
||||
|
||||
// The toString method.
|
||||
this.toString = function(){
|
||||
return arr.join('');
|
||||
}
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user