Архивы по Категориям: JavaScript

Передача массива в Asp.NET через ajax

http://stackoverflow.com/questions/309115/how-can-i-post-an-array-of-string-to-asp-net-mvc-controller-without-a-form

function test()
{
    var stringArray = new Array();
    stringArray[0] = "item1";
    stringArray[1] = "item2";
    stringArray[2] = "item3";
    var postData = { values: stringArray };
 
    $.ajax({
        type: "POST",
        url: "/Home/SaveList",
        data: postData,
        success: function(data){
            alert(data.Result);
        },
        dataType: "json",
        traditional: true
    });
}
public JsonResult SaveList(List<String> values)
{
    return Json(new { Result = String.Format("Fist item in list: '{0}'", values[0]) });
}

Построение графов

Библиотеки для визуализации графов.
Смотрела arborjs (картинка «живая», постоянно движется), jsplumb (выглядит формально, хорошо для сурьезных отчетов), sigmajs (красивый эффект «рыбьего глаза» и др. эффекты).

Список из коммента на хабре (http://habrahabr.ru/post/128047/)

arborjs.org/
flare.prefuse.org/ //flex-flash
www.graphviz.org/Gallery.php
thejit.org/demos/
js-graph-it.sourceforge.net/index.html
jsplumb.org/jquery/demo.html
mbostock.github.com/protovis/ex/
raphaeljs.com/
www.graphdracula.net/de/showcase/
github.com/mbostock/d3/wiki/Gallery
cytoscapeweb.cytoscape.org/demos
sigmajs.org/examples.html
javascript.open-libraries.com/utilities/drawing/canviz-javascript-library/

и вот еще
eax.me/dracula/
graphdracula.net/

JQuery UI

Цикл уроков по jquery и плагинам на русском языке
http://www.site-do.ru/js/jquery.php

Особенно интересны draggable, droppable, resizable, sortable, selectable.

Можно глянуть еще http://www.dropzonejs.com/

Календарик

Под катом полная версия на 2013 год и код генератора на любой год.

Читать далее »

Instacode

Нашла сервис для создания инстакартинок из кода.
http://instacod.es/

Читать далее »

Дерево Пифагора

С Википедии

<html> 
<head>
  <title>Дерево Пифагора</title>
  <script type="text/javascript">
    // функция рисует под углом angle линию из указанной точки длиной ln
    function drawLine(x, y, ln, angle)
    {
      context.moveTo(x, y);
      context.lineTo(Math.round(x + ln * Math.cos(angle)), Math.round(y - ln * Math.sin(angle)));
    }
    // Функция рисует дерево
    function drawTree(x, y, ln, minLn, angle)
    {
      if (ln > minLn)
      {
        ln = ln * 0.75;
        drawLine(x, y, ln, angle);
        x = Math.round(x + ln * Math.cos(angle));
        y = Math.round(y - ln * Math.sin(angle));
        drawTree(x, y, ln, minLn, angle + Math.PI / 4);
        drawTree(x, y, ln, minLn, angle - Math.PI / 6);
        // если поставить угол Math.PI/4 , то выйдет классическое дерево
      }
    }
    // Инициализация переменных
    function init()
    {
      var canvas  = document.getElementById("tree");
      var x       = 100 + (canvas.width / 2);
      var y       = 170 + canvas.height;  // положении ствола
      var ln      = 120;                  // начальная длина линии
      var minLn   = 5;                    // минимальная длина линии
 
      canvas.width  = 480; // Ширина холста
      canvas.height = 320; // высота холста
 
      context             = canvas.getContext("2d");
      context.fillStyle   = "#ddf"; // цвет фона
      context.strokeStyle = "#020"; //цвет линий
      context.fillRect(0, 0, canvas.width, canvas.height);
      context.lineWidth = 2; // ширина линий
      context.beginPath();
      drawTree(x, y, ln, minLn, Math.PI / 2);
      context.stroke();
    }
 
    window.onload = init;
  </script>
</head>
<body>
  <canvas id="tree"></canvas>
</body> 
</html>

document.write

http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice

Определение ОС и браузера пользователя

Определение ОС и браузера пользователя на стороне клиента
Читать далее »

Переключалка пунктов меню

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var selectNavItem =
    {
        load: function(elem){
            $(elem).addClass("active"); 
            $(elem).siblings(".nav li").removeClass("active");
        },
 
        menuClick: function(){
            $(".nav li").click(function () {
                $(this).toggleClass("active");
                $(this).siblings().removeClass("active");
            });
        }
    }

Почему я не люблю AJAX-автоподгрузку

https://habrahabr.ru/post/140781/

Почему я не люблю AJAX-автоподгрузку и предпочитаю ссылки с номерами страниц

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

В этом посте речь пойдёт в основном не о социальных сетях, а об обычных сайтах, которые можно просмотреть без регистрации и которые используют автоподгрузку новостей, обзоров, рецензий. На написание поста сподвиг этот сайт.

Я не люблю автоподгрузку новых элементов на страницу потому что:

1) Она не даёт понимания о количестве страниц сайта.
Примитивная манипуляция, чтобы человек смотрел и смотрел, не зная сколько ему ещё предстоит потратить на это времени. Как только ты досмотрел страницу и готов заняться другим делом, псевдодружелюбный сайт подгружает новую страницу.

Без автоподгрузки я всегда знаю сколько страниц я просмотрел, сколько хочу просмотреть и сколько их всего, а тут меня держат за осла перед которым привязана морковка. Передо мной неизвестность. Она создаёт ощущение, что просматривание этого сайта никогда не кончится. А я не настолько люблю сайты, чтобы смотреть их сутками. Даже социальные сети.

2) Нет никакой гарантии, что ссылки и новости доступные через автоподгрузку проиндексируются в поисковиках. Допустим на странице показывается 10 последних элементов, в перерыв между заходами робота было опубликовано ещё 20, робот увидит только последние 10 и предпоследние 10 не проиндексируются. Если ваш сайт не твиттер и не имеет специального договора с гуглом, то рассчитывать на 100%-ю индексацию не стоит. Некоторое увеличение шансов индексации даёт наличие RSS.

Применительно к сайту-примеру мы имеем проиндексированными 170 страниц из более чем 240, что составляет менее 71% страниц.

3) Если у сайта есть страницы, то кроме того, что дать прямую ссылку, я всегда могу сказать кому-то: ты там на N-странице, на M-месте. А если автоподгрузка: ты крути страницу и гляди внимательнее. Видимо поэтому в поисковой выдаче AJAX-автоподгрузка используется редко.

4) Для навигации наличие всего лишь одной автоподгрузки — это катастрофа. Вместо того, чтобы крупными прыжками попасть в интересующую тебя область приходится крутить и крутить. (спасибо за подсказку vk2)

Если провести аналогию с книгами, то вначале были свитки, потом книги с номерами страниц, а потом кто-то догадался к свитку прикрутить электромотор и типа номера уже не нужны. Хочешь попасть в ленте на 2 года назад — прикрути маленький моторчик к колесу мыши и иди попей кофе.

Итог: не стоит использовать технологию везде только потому что она модная. А если использовать, то лучше с активного одобрения пользователя, чтобы он видел сколько страниц он просмотрел и сколько их всего.

Переход по страницам по Ctrl + «стрелка»

Такой красивый скриптик используется у Лебедева в Бизнес-линче, на страницах о путешествиях, и даже на Яндексе.
Читать далее »