|
|
@@ -7,6 +7,8 @@ thumbPosition: 'top', effect: "//JQUERY ANIMATE OPTIONS"})
|
|
|
$("#container").gallery("currentPosition") //number in gallery array
|
|
|
$("#container").gallery("currentImage") //array with URLS of image and thumbnail
|
|
|
```
|
|
|
+
|
|
|
+
|
|
|
## Тест
|
|
|
```javascript
|
|
|
var tests = [{question: "Сколько вам лет?",
|
|
|
@@ -36,22 +38,78 @@ $("#container").tree(cars); // строит вложенный tree control по
|
|
|
|
|
|
## GridView
|
|
|
```javascript
|
|
|
-$("#container").grid([{name: "aaaa", surname: 'bbbb'},{name: "aaaa", surname: 'bbbb'}], [{key: "name", width: 200, title: "Имя"}, {key: "surname", width: 200, title: "Фамилия"}], 10 /* количество записей на странице */); // строит вложенный tree control по аналогии с деревом папок
|
|
|
+$("#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
|
|
|
```javascript
|
|
|
$("a.hinted").toolTip();
|
|
|
```
|
|
|
+Аналог https://jqueryui.com/tooltip/
|
|
|
|
|
|
## Magnifier
|
|
|
```javascript
|
|
|
-$("#block").magnify(1.5); //увеличивается в полтора раза
|
|
|
+$("#block").magnify(1.5); //увеличивается в полтора раза block
|
|
|
```
|
|
|
|
|
|
## MenuBuilder
|
|
|
+
|
|
|
+Скреативьте плагин `menuBuilder`, которая из структуры
|
|
|
+```javascript
|
|
|
+var menu = [{text: "google", href: "http://google.com"},
|
|
|
+ {text: "ebay", href: "http://ebay.com"},
|
|
|
+ {text: "ya", href: "http://ya.ru"},
|
|
|
+];
|
|
|
+```
|
|
|
+
|
|
|
+создает меню используя `ul`, `li`, `a` в определенном контейнере. `id` контейнера передается в качестве параметра:
|
|
|
+
|
|
|
+```html
|
|
|
+ <body>
|
|
|
+ ...
|
|
|
+ <div id='menuContainer'>
|
|
|
+ </div>
|
|
|
+ ...
|
|
|
+ </body>
|
|
|
+```
|
|
|
+
|
|
|
+```javascript
|
|
|
+$("#menuContainer").menuBuilder(menu); //построить меню в элементе с id "menuContainer".
|
|
|
+```
|
|
|
+
|
|
|
+Сделайте возможность выделения "текущего" пункта меню. У него должен быть другой класс, который можно задать в конфигурации плагина
|
|
|
+
|
|
|
+```javascript
|
|
|
+var config = {
|
|
|
+ hrefClass: 'someClassForHref', //класс, который добавляется в каждую ссылку
|
|
|
+ currentClass: 'currentHref', //класс, который добавляется в текущую ссылку
|
|
|
+ currentHref: 'http://ya.ru', //или
|
|
|
+// currentHref: 2, //второй элемент
|
|
|
+}
|
|
|
+
|
|
|
+$("#menuContainer").menuBuilder(menu, config); //построить меню в элементе с id "menuContainer", с указанием классов и текущей ссылки другого вида
|
|
|
+```
|
|
|
+
|
|
|
## ScrollableFlyingBlock
|
|
|
+Сделать плагин, который обеспечивает "прилепленное" поведение блока на странице (на подобие меню сайта). Меню должно иметь *css* `position: fixed`, однако при скролле мышью, если блок не влазит
|
|
|
+по высоте в страницу, он должен прокручиваться (т. е. временно "прилипать" к остальной странице)
|
|
|
+
|
|
|
+```javascript
|
|
|
+$('#leftMenu').scrollableFlyingBlock(); //контейнер левого меню #leftMenu левитирует над страницей
|
|
|
+$('#right').scrollableFlyingBlock(); //контейнер правого блока меню #right левитирует над страницей
|
|
|
+```
|
|
|
+
|
|
|
## GrafityBox
|
|
|
+
|
|
|
+Оформить рисовалку из дз в форме плагина. Обеспечить работу нескольких плагинов одновременно на странице.
|
|
|
+
|
|
|
+```javascript
|
|
|
+$("#container").grafityBox({width: 400, height: 400}) // создает в div#container вложенные элементы (canvas размерами из конфигурации, выбор цвета-инструмента и т. п.)
|
|
|
+```
|
|
|
+
|
|
|
## ValidatedFormBuilder
|
|
|
+Создает форму, при изменении данных в которой вызываются функции-валидаторы
|
|
|
+
|
|
|
```javascript
|
|
|
$("#form").formBuilder({login: {value: "",
|
|
|
type: "text",
|
|
|
@@ -68,17 +126,44 @@ $("#form").formBuilder({login: {value: "",
|
|
|
```
|
|
|
|
|
|
## GraphPlot
|
|
|
+Рисует график, координатные оси, то ли по точкам, то ли с помощью callback-функции. В конфигурации передаются размеры координатной плоскости
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
```javascript
|
|
|
-$("#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},[{x: -5, y: -2}, {x: 5, y: 2}]) //две точки на графике
|
|
|
|
|
|
-$("#plotContainer").graphPlot({xMin: -5, yMin: -2, xMax: 5, yMax: 2},function(x){
|
|
|
+$("#plotContainer").graphPlot({xMin: -5, yMin: -2, xMax: 5, yMax: 2},function(x){ //функция
|
|
|
return Math.sin(x);
|
|
|
})
|
|
|
```
|
|
|
|
|
|
## SalfetkaDraw
|
|
|
главная настройка - количество секторов (угол между ними). И что бы работало.
|
|
|
+
|
|
|
## PiePlot
|
|
|
+Рисует круговые диаграммы на подобие jqPlot.
|
|
|
+
|
|
|
+```javascript
|
|
|
+$("#container").piePlot([
|
|
|
+{name: 'bucks', value: 100, color: 'green'},
|
|
|
+{name: 'eur', value: 50, color: 'blue'},
|
|
|
+{name: 'uah', value: 5, color: 'red'},
|
|
|
+])
|
|
|
+```
|
|
|
+
|
|
|
+
|
|
|
## UpScroll
|
|
|
-- BlackWhite
|
|
|
-- AnswerView
|
|
|
+
|
|
|
+Создать плагин, который обеспечивает перемотки страницы вверх по нажатию на блок, запоминает при этом позицию на странице и возвращается при нажатии наверху. Перемотку сделать плавной.
|
|
|
+
|
|
|
+```javascript
|
|
|
+$('#up').upScroll({
|
|
|
+ down: "#down", //или
|
|
|
+// down: "<div> ВНИЗ </div>", //различать селектор или html по первому символу ('<' или нет?)
|
|
|
+ interval: 20, //функция animate вызывается раз в 20 ms, используя setInterval
|
|
|
+ animation: function(startPos, step, position){ //координата начала скролла, номер шага, текущая позиция. Функция вызывается раз в interval time и должна возвращать новую позицию страницы.
|
|
|
+ return position - step //новая позиция на номер шага выше предыдущей. Скроллинг постепенно линейно разгоняется вверх, пока не достигается вверх страницы.
|
|
|
+ }
|
|
|
+ })
|
|
|
+```
|
