Ajax Russia : Аякс по-русски

Не знаю как Вы, но я просто в восторге от Google Suggest. Для тех кто не в курсе, это знакомый всем поисковик от Google с одним отличием. Когда Вы начинаете что то писать - Google делает Вам подсказки. Для этого Ваш кусочек текста посылается при помощи аякса на сервер и сервер возвращает список слов которые Вы скорее всего ищете. Очень удобно.

А как же встроить такую классную штуку у себя на сайте? Всё просто. Можно сесть и написать свой JavaScript, а можно позаимствовать уже готовый. А именно Autosuggest / Autocomplete with Ajax. По моему выглядит привлекательнее, чем на Google.

Инструкция:

1) Подгружаем 1 JavaScript файл

2) Добавляем к любому текстовому полю функциональность Autosuggest. Допустим что у нашего поля id="ajaxed_field".

Теперь, когда Вы начнёте печатать что нибудь в этом поле, браузер будет делать асинхронный запрос на http://www.yourdomain.com/suggest.php?mytext=то-что-вы-напечатали

На сервере не обязательно должен быть PHP. Это может быть Ruby on Rails, Java, ASP, не важно. Главное это в каком виде вернуть данные браузеру. Autosuggest скрипт поддерживает XML и JSON.

JSON объект должен иметь следующую структуру:

И всё. Чтобы результат выглядел также красиво, как в видео - используйте CSS, который можно скачать в комплекте с JavaScript файлом с сайта разработчика.

Как Вы думаете, при помощи какой программы построен этот график? Excel? DPlot? Какой нибудь PHP скрипт? Нет, этот график сделан при помощи JavaScript и CSS. Называется этот JavaScript - Canvas 3D Graph.

Использовать этот замечательный скрипт очень просто.

1. Подгружаем 2 JS файла. (excanvas.js нужен для IE, который не поддерживает тэг <canvas>)
   PLAIN TEXT
   HTML:

   1. <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
   2. <script src="canvas3DGraph.js" type="text/javascript"></script>

2. Создаём пару DIV-ов и нужный нам тэг CANVAS.
   PLAIN TEXT
   HTML:

   1. <div id="g-holder">
   2.     <div id="canvasDiv">
   3.         <canvas id="graph" width="600" height="600"></canvas>
   4.         <div id="gInfo"></div>
   5.     </div>
   6.     <div id="controls">
   7.     <!-- (put your controls here, if you need any) -->
   8.     </div>
   9. </div>

3. Добавляем немного CSS.
   PLAIN TEXT
   CSS:

   1. #g-holder {
   2.     height:620px;
   3.     position:relative;
   4. }
   5.  
   6. #canvasDiv{
   7.     border:solid 1px #e1e1e1;
   8.     width:600px;
   9.     height:600px;
   10.     position:absolute;
   11.     top:0px; left:0px;
   12.     z-index:10;
   13. }
   14. #x-label{
   15.     position:absolute;
   16.     z-index:2;
   17.     top:340px;
   18.     left:580px;
   19. }
   20.  
   21. #y-label{
   22.     position:absolute;
   23.     z-index:2;
   24.     top:10px;
   25.     left:220px;
   26. }
   27.  
   28. #z-label{
   29.     position:absolute;
   30.     z-index:2;
   31.     top:540px;
   32.     left:10px;
   33. }
   34.  
   35. #gInfo div.gText{
   36.     position:absolute;
   37.     z-index:-1;
   38.     font:normal 10px Arial;
   39. }

4. Готово. Теперь создаём объект и даём ему координаты того, что нужно нарисовать.
   PLAIN TEXT
   HTML:

   1. <script type="text/javascript">
   2.  
   3.     window.onload=function(){
   4.            
   5.         //Initialise Graph
   6.         var g = new canvasGraph('graph');
   7.                
   8.         //define some data
   9.         gData=new Array();
   10.                
   11.         gData[0]={x:500,y:500,z:500};
   12.         gData[1]={x:500,y:400,z:600};
   13.         gData[2]={x:500,y:300,z:700};
   14.         gData[3]={x:500,y:200,z:800};
   15.         gData[4]={x:500,y:100,z:900};
   16.  
   17.         // sort data - draw farest elements first      
   18.         gData.sort(sortNumByZ);
   19.                
   20.         //draw graph
   21.         g.drawGraph(gData); 
   22.  
   23.     }
   24. </script>

Можно придумать очень много сценариев для использования этой полезной библиотеки с аяксом. Например показывать на графике в реальном времени посещения web сайта. Нужно всего лишь периодически запрашивать сервер, есть ли новые данные о посетителях, и если есть - дополнять график.

Автор сайта scrollovers.com предлагает интересный способ, как сделать ссылки более привлекательными. Для этого нужно всего лишь 1 JavaScript файл размером 8К, и пара строк CSS. Получается вот такой забавный эффект:

Инструкция:

1. Подгружаем JS файл.
   PLAIN TEXT
   HTML:

   1. <script src="http://www.scrollovers.com/js/scrollovers.js" type="text/javascript"></script>

2. Добавляем следующий CSS:
   PLAIN TEXT
   CSS:

   1. a.scrollover {
   2. /* Default Colour/Styles here */
   3. color: #557AFF;
   4. }
   5. a.scrollover em:first-line {
   6. /* Rollover Colour/Styles here */
   7. color: #FF5B3C;
   8. }

Готово. Теперь, чтобы применить новый эффект на ссылке, даём ей class и type "scrollover".