gitgod/FrontendLectures: some prepods stuff @ ebe2d4db1a1e6010b2cbdf38427db99ffa64248d

var tasks = []
$("h2").each(function(){
    var text = $(this).text().split(' ')
    var name = text[0]
    var weight = text[1]
    tasks.push({name: name, weight: weight}) 
})

var rate = 10;
var randomValues = tasks.map(function(item){
    return Math.random()*(10-Math.abs(rate - item.weight))
})

//alert(tasks[randomValues.indexOf(Math.max.apply(Math, randomValues))].name)
alert(tasks.splice(randomValues.indexOf(Math.max.apply(Math, randomValues)),1)[0].name)

Галерея 8

Галерея (img, prev, next) + лента thumbnails. Hashlinks (?)

$("#container").gallery([['url1.jpg','thumb1.jpg'],['url2.jpg', 'thumb2.jpg']],{thumbSize: 100, 
thumbPosition: 'top', effect: "//JQUERY ANIMATE OPTIONS"})

$("#container").gallery("currentPosition") //number in gallery array
$("#container").gallery("currentImage")    //array with URLS of image and thumbnail

Тест 8

var tests = [{question: "Сколько вам лет?",
              answers: ["<5","5..10","10..20"]},
              {question: "Ваш пол?",
              answers: ["мужской", "женский"]}]
$("#container").test(tests);
//....
$("#container").test("results"); // ["10..20", "мужской"]

TreeControl 9

var cars = {
    minivan: {
        mercedes: ["b250", "2102"],
        volkswagen: ["touran"]
    },
    sedan: {
        bmw: ["328", "530"],
        lada: ["2107"]
    },
}

$("#container").tree(cars); // строит вложенный tree control по аналогии с деревом папок

GridView 6

$("#container").grid([{name: "aaaa", surname: 'bbbb'},{name: "aaaa", surname: 'bbbb'}], [{key: "name", width: 200, title: "Имя"}, {key: "surname", width: 200, title: "Фамилия"}], 10 /* количество записей на странице */); 
// строит grid control по типу slickgrid, jqgrid.

ToolTip 3

$("a.hinted").toolTip();

Аналог https://jqueryui.com/tooltip/

Magnifier 3

$("#block").magnify(1.5);  //увеличивается в полтора раза block

MenuBuilder 5

Скреативьте плагин menuBuilder, которая из структуры

var menu = [{text: "google", href: "http://google.com"},
            {text: "ebay", href: "http://ebay.com"},
            {text: "ya", href: "http://ya.ru"},
];

создает меню используя ul, li, a в определенном контейнере. id контейнера передается в качестве параметра:

    <body>
        ...
        <div id='menuContainer'>
        </div>
        ...
    </body>

$("#menuContainer").menuBuilder(menu); //построить меню в элементе с id "menuContainer".

Сделайте возможность выделения "текущего" пункта меню. У него должен быть другой класс, который можно задать в конфигурации плагина

var config = {
    hrefClass: 'someClassForHref', //класс, который добавляется в каждую ссылку
    currentClass: 'currentHref', //класс, который добавляется в текущую ссылку
    currentHref: 'http://ya.ru', //или
//    currentHref: 2,  //второй элемент
}

$("#menuContainer").menuBuilder(menu, config); //построить меню в элементе с id "menuContainer", с указанием классов и текущей ссылки другого вида

ScrollableFlyingBlock 6

Сделать плагин, который обеспечивает "прилепленное" поведение блока на странице (на подобие меню сайта). Меню должно иметь css position: fixed, однако при скролле мышью, если блок не влазит по высоте в страницу, он должен прокручиваться (т. е. временно "прилипать" к остальной странице)

$('#leftMenu').scrollableFlyingBlock(); //контейнер левого меню #leftMenu левитирует над страницей
$('#right').scrollableFlyingBlock(); //контейнер правого блока меню #right левитирует над страницей

GrafityBox 4

Оформить рисовалку из дз в форме плагина. Обеспечить работу нескольких плагинов одновременно на странице.

$("#container").grafityBox({width: 400, height: 400}) // создает в div#container вложенные элементы (canvas размерами из конфигурации, выбор цвета-инструмента и т. п.)

ValidatedFormBuilder 6

Создает форму, при изменении данных в которой вызываются функции-валидаторы

$("#form").formBuilder({login: {value: "",
                                type: "text",
                                hint: "Логин"},
                        password: {value: "",
                                  type: "password",
                                  hint: "Пароль"
                                  validator: function(){}},
                        password2: {value: "",
                                  type: "password",
                                  hint: "Пароль 2"
                                  validator: function(){}},
                                  });  //увеличивается в полтора раза

GraphPlot 8

Рисует график, координатные оси, то ли по точкам, то ли с помощью callback-функции. В конфигурации передаются размеры координатной плоскости

$("#plotContainer").graphPlot({xMin: -5, yMin: -2, xMax: 5, yMax: 2},[{x: -5, y: -2}, {x: 5, y: 2}]) //две точки на графике

$("#plotContainer").graphPlot({xMin: -5, yMin: -2, xMax: 5, yMax: 2},function(x){ //функция
    return Math.sin(x);
})

SalfetkaDraw 9

главная настройка - количество секторов (угол между ними). И что бы работало.

PiePlot 6

Рисует круговые диаграммы на подобие jqPlot.

$("#container").piePlot([
{name: 'bucks', value: 100, color: 'green'},
{name: 'eur',   value: 50, color: 'blue'},
{name: 'uah',   value: 5, color: 'red'},
])

UpScroll 8

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

$('#up').upScroll({
    down: "#down", //или
//    down: "<div> ВНИЗ </div>", //различать  селектор или html по первому символу ('<' или нет?)
    interval: 20, //функция animation вызывается раз в 20 ms, используя setInterval
    animation: function(startPos, step, position){ //координата начала скролла, номер шага, текущая позиция. Функция вызывается раз в interval time и должна возвращать новую позицию страницы.
        return position - step //новая позиция на номер шага выше предыдущей. Скроллинг постепенно линейно разгоняется вверх, пока не достигается вверх страницы.
    }
    })

module_.md 7.9 KB История Исходник