mirror of
https://github.com/wassname/DefinitelyTyped.git
synced 2026-08-21 11:09:53 +08:00
944 lines
36 KiB
TypeScript
944 lines
36 KiB
TypeScript
/// <reference path="../Definitions/jquery-1.8.d.ts" />
|
|
/// <reference path="../Definitions/jqueryui-1.9.d.ts" />
|
|
|
|
function tests_draggable() {
|
|
|
|
$("#draggable").draggable({ axis: "y" });
|
|
$("#draggable2").draggable({ axis: "x" });
|
|
$("#draggable3").draggable({ containment: "#containment-wrapper", scroll: false });
|
|
$("#draggable5").draggable({ containment: "parent" });
|
|
$("#draggable").draggable({ cursor: "move", cursorAt: { top: 56, left: 56 } });
|
|
$("#draggable2").draggable({ cursor: "crosshair", cursorAt: { top: -5, left: -5 } });
|
|
$("#draggable3").draggable({ cursorAt: { bottom: 0 } });
|
|
$("#draggable").draggable();
|
|
$("#draggable").draggable({ distance: 20 });
|
|
$("#draggable2").draggable({ delay: 1000 });
|
|
$("#draggable").draggable({
|
|
start: () => { },
|
|
drag: () => { },
|
|
stop: () => { }
|
|
});
|
|
$("#draggable").draggable({ handle: "p" });
|
|
$("#draggable2").draggable({ cancel: "p.ui-widget-header" });
|
|
$("#draggable").draggable({ revert: true });
|
|
$("#draggable2").draggable({ revert: true, helper: "clone" });
|
|
$("#draggable").draggable({ scroll: true });
|
|
$("#draggable2").draggable({ scroll: true, scrollSensitivity: 100 });
|
|
$("#draggable3").draggable({ scroll: true, scrollSpeed: 100 });
|
|
$("#draggable").draggable({ snap: true });
|
|
$("#draggable2").draggable({ snap: ".ui-widget-header" });
|
|
$("#draggable3").draggable({ snap: ".ui-widget-header", snapMode: "outer" });
|
|
$("#draggable4").draggable({ grid: [20, 20] });
|
|
$("#draggable5").draggable({ grid: [80, 80] });
|
|
$("#sortable").sortable({ revert: true });
|
|
$("#draggable").draggable({
|
|
connectToSortable: "#sortable",
|
|
helper: "clone",
|
|
revert: "invalid"
|
|
});
|
|
$("#draggable").draggable({ helper: "original" });
|
|
$("#draggable2").draggable({ opacity: 0.7, helper: "clone" });
|
|
$("#draggable3").draggable({
|
|
cursor: "move",
|
|
cursorAt: { top: -12, left: -20 },
|
|
helper: (event) => { return $("<div class='ui-widget-header'>I'm a custom helper</div>"); }
|
|
});
|
|
$("#set div").draggable({ stack: "#set div" });
|
|
|
|
}
|
|
|
|
function tests_droppable() {
|
|
|
|
$("#draggable, #draggable-nonvalid").draggable();
|
|
$("#droppable").droppable({
|
|
accept: "#draggable",
|
|
activeClass: "ui-state-hover",
|
|
hoverClass: "ui-state-active",
|
|
drop: (event, ui) => {
|
|
$(this)
|
|
.addClass("ui-state-highlight")
|
|
.find("p")
|
|
.html("Dropped!");
|
|
}
|
|
});
|
|
$("#draggable").draggable();
|
|
$("#droppable").droppable({
|
|
drop: (event, ui) => {
|
|
$(this)
|
|
.addClass("ui-state-highlight")
|
|
.find("p")
|
|
.html("Dropped!");
|
|
}
|
|
});
|
|
|
|
var $gallery = $("#gallery"),
|
|
$trash = $("#trash");
|
|
$("li", $gallery).draggable({
|
|
cancel: "a.ui-icon",
|
|
revert: "invalid",
|
|
containment: "document",
|
|
helper: "clone",
|
|
cursor: "move"
|
|
});
|
|
|
|
$trash.droppable({
|
|
accept: "#gallery > li",
|
|
activeClass: "ui-state-highlight",
|
|
drop: (event, ui) => { }
|
|
});
|
|
|
|
$gallery.droppable({
|
|
accept: "#trash li",
|
|
activeClass: "custom-state-active",
|
|
drop: (event, ui) => { }
|
|
});
|
|
|
|
var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>";
|
|
function deleteImage($item) {
|
|
$item.fadeOut(() => {
|
|
var $list = $("ul", $trash).length ?
|
|
$("ul", $trash) :
|
|
$("<ul class='gallery ui-helper-reset'/>").appendTo($trash);
|
|
|
|
$item.find("a.ui-icon-trash").remove();
|
|
$item.append(recycle_icon).appendTo($list).fadeIn(() => {
|
|
$item
|
|
.animate({ width: "48px" })
|
|
.find("img")
|
|
.animate({ height: "36px" });
|
|
});
|
|
});
|
|
}
|
|
|
|
var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>";
|
|
function recycleImage($item) {
|
|
$item.fadeOut(() => {
|
|
$item
|
|
.find("a.ui-icon-refresh")
|
|
.remove()
|
|
.end()
|
|
.css("width", "96px")
|
|
.append(trash_icon)
|
|
.find("img")
|
|
.css("height", "72px")
|
|
.end()
|
|
.appendTo($gallery)
|
|
.fadeIn();
|
|
});
|
|
}
|
|
|
|
function viewLargerImage($link) {
|
|
var src = $link.attr("href"),
|
|
title = $link.siblings("img").attr("alt"),
|
|
$modal = $("img[src$='" + src + "']");
|
|
|
|
if ($modal.length) {
|
|
$modal.dialog("open");
|
|
} else {
|
|
var img = $("<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />")
|
|
.attr("src", src).appendTo("body");
|
|
setTimeout(() => {
|
|
img.dialog({
|
|
title: <string>title,
|
|
width: 400,
|
|
modal: true
|
|
});
|
|
}, 1);
|
|
}
|
|
}
|
|
|
|
$("ul.gallery > li").click((event) => {
|
|
var $item = $(this),
|
|
$target = $(event.target);
|
|
|
|
if ($target.is("a.ui-icon-trash")) {
|
|
deleteImage($item);
|
|
} else if ($target.is("a.ui-icon-zoomin")) {
|
|
viewLargerImage($target);
|
|
} else if ($target.is("a.ui-icon-refresh")) {
|
|
recycleImage($item);
|
|
}
|
|
|
|
return false;
|
|
});
|
|
|
|
|
|
$("#draggable").draggable();
|
|
|
|
$("#droppable, #droppable-inner").droppable({
|
|
activeClass: "ui-state-hover",
|
|
hoverClass: "ui-state-active",
|
|
drop: (event, ui) => {
|
|
$(this)
|
|
.addClass("ui-state-highlight")
|
|
.find("> p")
|
|
.html("Dropped!");
|
|
return false;
|
|
}
|
|
});
|
|
|
|
$("#droppable2, #droppable2-inner").droppable({
|
|
greedy: true,
|
|
activeClass: "ui-state-hover",
|
|
hoverClass: "ui-state-active",
|
|
drop: (event, ui) => {
|
|
$(this)
|
|
.addClass("ui-state-highlight")
|
|
.find("> p")
|
|
.html("Dropped!");
|
|
}
|
|
});
|
|
|
|
$("#draggable").draggable({ revert: "valid" });
|
|
$("#draggable2").draggable({ revert: "invalid" });
|
|
$("#droppable").droppable({
|
|
activeClass: "ui-state-hover",
|
|
hoverClass: "ui-state-active",
|
|
drop: (event, ui) => {
|
|
$(this)
|
|
.addClass("ui-state-highlight")
|
|
.find("p")
|
|
.html("Dropped!");
|
|
}
|
|
});
|
|
$("#catalog").accordion();
|
|
$("#catalog li").draggable({
|
|
appendTo: "body",
|
|
helper: "clone"
|
|
});
|
|
$("#cart ol").droppable({
|
|
activeClass: "ui-state-default",
|
|
hoverClass: "ui-state-hover",
|
|
accept: ":not(.ui-sortable-helper)",
|
|
drop: (event, ui) => {
|
|
$(this).find(".placeholder").remove();
|
|
$("<li></li>").text(ui.draggable.text()).appendTo(this);
|
|
}
|
|
}).sortable({
|
|
items: "li:not(.placeholder)",
|
|
sort: () => {
|
|
// gets added unintentionally by droppable interacting with sortable
|
|
// using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
|
|
$(this).removeClass("ui-state-default");
|
|
}
|
|
});
|
|
|
|
$("#draggable").draggable();
|
|
$("#droppable").droppable({
|
|
hoverClass: "ui-state-active",
|
|
drop: (event, ui) => {
|
|
$(this)
|
|
.addClass("ui-state-highlight")
|
|
.find("p")
|
|
.html("Dropped!");
|
|
}
|
|
});
|
|
|
|
$("#draggable2").draggable();
|
|
$("#droppable2").droppable({
|
|
accept: "#draggable2",
|
|
activeClass: "ui-state-hover",
|
|
drop: (event, ui) => {
|
|
$(this)
|
|
.addClass("ui-state-highlight")
|
|
.find("p")
|
|
.html("Dropped!");
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
|
|
function tests_resizable() {
|
|
$("#resizable").resizable();
|
|
$("#resizable").resizable({
|
|
animate: true
|
|
});
|
|
$("#resizable").resizable({
|
|
containment: "#container"
|
|
});
|
|
$("#resizable").resizable({
|
|
delay: 1000
|
|
});
|
|
$("#resizable2").resizable({
|
|
distance: 40
|
|
});
|
|
$("#resizable").resizable({
|
|
helper: "ui-resizable-helper"
|
|
});
|
|
$("#resizable").resizable({
|
|
maxHeight: 250,
|
|
maxWidth: 350,
|
|
minHeight: 150,
|
|
minWidth: 200
|
|
});
|
|
$("#resizable").resizable({
|
|
aspectRatio: 16 / 9
|
|
});
|
|
$("#resizable").resizable({
|
|
grid: 50
|
|
});
|
|
$("#resizable").resizable({
|
|
alsoResize: "#also"
|
|
});
|
|
$("#also").resizable();
|
|
$("#resizable").resizable({
|
|
handles: "se"
|
|
});
|
|
$("#resizable").resizable({
|
|
ghost: true
|
|
});
|
|
$(".selector").resizable({ alsoResize: "#mirror" });
|
|
var alsoResize = $(".selector").resizable("option", "alsoResize");
|
|
$(".selector").resizable("option", "alsoResize", "#mirror");
|
|
$(".selector").resizable({ animate: true });
|
|
var animate = $(".selector").resizable("option", "animate");
|
|
$(".selector").resizable("option", "animate", true);
|
|
$(".selector").resizable({ animateDuration: "fast" });
|
|
var animateDuration = $(".selector").resizable("option", "animateDuration");
|
|
$(".selector").resizable("option", "animateDuration", "fast");
|
|
$(".selector").resizable({ animateEasing: "easeOutBounce" });
|
|
var animateEasing = $(".selector").resizable("option", "animateEasing");
|
|
$(".selector").resizable("option", "animateEasing", "easeOutBounce");
|
|
$(".selector").resizable({ aspectRatio: true });
|
|
var aspectRatio = $(".selector").resizable("option", "aspectRatio");
|
|
$(".selector").resizable("option", "aspectRatio", true);
|
|
$(".selector").resizable({ autoHide: true });
|
|
var autoHide = $(".selector").resizable("option", "autoHide");
|
|
$(".selector").resizable("option", "autoHide", true);
|
|
$(".selector").resizable({ cancel: ".cancel" });
|
|
var cancel = $(".selector").resizable("option", "cancel");
|
|
$(".selector").resizable("option", "cancel", ".cancel");
|
|
$(".selector").resizable({ containment: "parent" });
|
|
var containment = $(".selector").resizable("option", "containment");
|
|
$(".selector").resizable("option", "containment", "parent");
|
|
$(".selector").resizable({ delay: 150 });
|
|
var delay = $(".selector").resizable("option", "delay");
|
|
$(".selector").resizable("option", "delay", 150);
|
|
$(".selector").resizable({ disabled: true });
|
|
var disabled = $(".selector").resizable("option", "disabled");
|
|
$(".selector").resizable("option", "disabled", true);
|
|
$(".selector").resizable({ distance: 30 });
|
|
var distance = $(".selector").resizable("option", "distance");
|
|
$(".selector").resizable("option", "distance", 30);
|
|
$(".selector").resizable({ ghost: true });
|
|
var ghost = $(".selector").resizable("option", "ghost");
|
|
$(".selector").resizable("option", "ghost", true);
|
|
$(".selector").resizable({ grid: [20, 10] });
|
|
var grid = $(".selector").resizable("option", "grid");
|
|
$(".selector").resizable("option", "grid", [20, 10]);
|
|
$(".selector").resizable({ handles: "n, e, s, w" });
|
|
var handles = $(".selector").resizable("option", "handles");
|
|
$(".selector").resizable("option", "handles", "n, e, s, w");
|
|
$(".selector").resizable({ helper: "resizable-helper" });
|
|
var helper = $(".selector").resizable("option", "helper");
|
|
$(".selector").resizable("option", "helper", "resizable-helper");
|
|
$(".selector").resizable({ maxHeight: 300 });
|
|
var maxHeight = $(".selector").resizable("option", "maxHeight");
|
|
$(".selector").resizable("option", "maxHeight", 300);
|
|
$(".selector").resizable({ maxWidth: 300 });
|
|
var maxWidth = $(".selector").resizable("option", "maxWidth");
|
|
$(".selector").resizable("option", "maxWidth", 300);
|
|
$(".selector").resizable({ minHeight: 150 });
|
|
var minHeight = $(".selector").resizable("option", "minHeight");
|
|
$(".selector").resizable("option", "minHeight", 150);
|
|
$(".selector").resizable({ minWidth: 150 });
|
|
var minWidth = $(".selector").resizable("option", "minWidth");
|
|
$(".selector").resizable("option", "minWidth", 150);
|
|
$(".selector").resizable("option", "disabled", true);
|
|
$(".selector").resizable("option", { disabled: true });
|
|
var widget = $(".selector").resizable("widget");
|
|
}
|
|
|
|
|
|
function tests_selectable() {
|
|
$("#selectable").selectable();
|
|
$("#selectable").selectable({
|
|
stop: function () {
|
|
var result = $("#select-result").empty();
|
|
$(".ui-selected", this).each(function () {
|
|
var index = $("#selectable li").index(this);
|
|
result.append(" #" + (index + 1));
|
|
});
|
|
}
|
|
});
|
|
$(".selector").selectable({ autoRefresh: false });
|
|
var autoRefresh = $(".selector").selectable("option", "autoRefresh");
|
|
$(".selector").selectable("option", "autoRefresh", false);
|
|
$(".selector").selectable({ cancel: "input,textarea,button,select,option" });
|
|
var cancel = $(".selector").selectable("option", "cancel");
|
|
$(".selector").selectable("option", "cancel", "input,textarea,button,select,option");
|
|
$(".selector").selectable({ delay: 150 });
|
|
var delay = $(".selector").selectable("option", "delay");
|
|
$(".selector").selectable("option", "delay", 150);
|
|
$(".selector").selectable({ disabled: true });
|
|
var disabled = $(".selector").selectable("option", "disabled");
|
|
$(".selector").selectable("option", "disabled", true);
|
|
$(".selector").selectable({ distance: 30 });
|
|
var distance = $(".selector").selectable("option", "distance");
|
|
$(".selector").selectable("option", "distance", 30);
|
|
$(".selector").selectable({ filter: "li" });
|
|
var filter = $(".selector").selectable("option", "filter");
|
|
$(".selector").selectable("option", "filter", "li");
|
|
$(".selector").selectable({ tolerance: "fit" });
|
|
var tolerance = $(".selector").selectable("option", "tolerance");
|
|
$(".selector").selectable("option", "tolerance", "fit");
|
|
$(".selector").selectable("destroy");
|
|
var isDisabled = $(".selector").selectable("option", "disabled");
|
|
var options = $(".selector").selectable("option");
|
|
$(".selector").selectable("option", "disabled", true);
|
|
$(".selector").selectable("option", { disabled: true });
|
|
$(".selector").selectable("option", { disabled: true });
|
|
$(".selector").selectable("refresh");
|
|
var widget = $(".selector").selectable("widget");
|
|
}
|
|
|
|
|
|
function tests_sortable() {
|
|
$("#sortable").sortable();
|
|
$("#sortable").disableSelection();
|
|
$("#sortable1, #sortable2").sortable({
|
|
connectWith: ".connectedSortable"
|
|
}).disableSelection();
|
|
$("#sortable1, #sortable2").sortable().disableSelection();
|
|
var $tabs = $("#tabs").tabs();
|
|
var $tab_items = $("ul:first li", $tabs).droppable({
|
|
accept: ".connectedSortable li",
|
|
hoverClass: "ui-state-hover",
|
|
drop: function (event, ui) {
|
|
var $item = $(this);
|
|
var $list = $($item.find("a").attr("href"))
|
|
.find(".connectedSortable");
|
|
ui.draggable.hide("slow", function () {
|
|
$tabs.tabs("select", $tab_items.index($item));
|
|
$(this).appendTo($list).show("slow");
|
|
});
|
|
}
|
|
});
|
|
$("#sortable1").sortable({
|
|
delay: 300
|
|
});
|
|
$("#sortable2").sortable({
|
|
distance: 15
|
|
});
|
|
$("li").disableSelection();
|
|
$("#sortable").sortable({
|
|
placeholder: "ui-state-highlight"
|
|
});
|
|
$("ul.droptrue").sortable({
|
|
connectWith: "ul"
|
|
});
|
|
$("ul.dropfalse").sortable({
|
|
connectWith: "ul",
|
|
dropOnEmpty: false
|
|
});
|
|
$("#sortable1").sortable({
|
|
items: "li:not(.ui-state-disabled)"
|
|
});
|
|
$("#sortable2").sortable({
|
|
cancel: ".ui-state-disabled"
|
|
});
|
|
$(".column").sortable({
|
|
connectWith: ".column"
|
|
});
|
|
$(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
|
|
.find(".portlet-header")
|
|
.addClass("ui-widget-header ui-corner-all")
|
|
.prepend("<span class='ui-icon ui-icon-minusthick'></span>")
|
|
.end()
|
|
.find(".portlet-content");
|
|
$(".portlet-header .ui-icon").click(function () {
|
|
$(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
|
|
$(this).parents(".portlet:first").find(".portlet-content").toggle();
|
|
});
|
|
$(".selector").sortable({ appendTo: document.body });
|
|
var appendTo = $(".selector").sortable("option", "appendTo");
|
|
$(".selector").sortable("option", "appendTo", document.body);
|
|
$(".selector").sortable({ axis: "x" });
|
|
var axis = $(".selector").sortable("option", "axis");
|
|
$(".selector").sortable("option", "axis", "x");
|
|
$(".selector").sortable({ cancel: "a,button" });
|
|
var cancel = $(".selector").sortable("option", "cancel");
|
|
$(".selector").sortable("option", "cancel", "a,button");
|
|
$(".selector").sortable({ connectWith: "#shopping-cart" });
|
|
var connectWith = $(".selector").sortable("option", "connectWith");
|
|
$(".selector").sortable("option", "connectWith", "#shopping-cart");
|
|
$(".selector").sortable({ containment: "parent" });
|
|
var containment = $(".selector").sortable("option", "containment");
|
|
$(".selector").sortable("option", "containment", "parent");
|
|
$(".selector").sortable({ cursor: "move" });
|
|
var cursor = $(".selector").sortable("option", "cursor");
|
|
$(".selector").sortable("option", "cursor", "move");
|
|
$(".selector").sortable({ cursorAt: { left: 5 } });
|
|
var cursorAt = $(".selector").sortable("option", "cursorAt");
|
|
$(".selector").sortable("option", "cursorAt", { left: 5 });
|
|
$(".selector").sortable({ delay: 150 });
|
|
var delay = $(".selector").sortable("option", "delay");
|
|
$(".selector").sortable("option", "delay", 150);
|
|
$(".selector").sortable({ disabled: true });
|
|
var disabled = $(".selector").sortable("option", "disabled");
|
|
$(".selector").sortable("option", "disabled", true);
|
|
$(".selector").sortable({ distance: 5 });
|
|
var distance = $(".selector").sortable("option", "distance");
|
|
$(".selector").sortable("option", "distance", 5);
|
|
$(".selector").sortable({ dropOnEmpty: false });
|
|
var dropOnEmpty = $(".selector").sortable("option", "dropOnEmpty");
|
|
$(".selector").sortable("option", "dropOnEmpty", false);
|
|
$(".selector").sortable({ forceHelperSize: true });
|
|
var forceHelperSize = $(".selector").sortable("option", "forceHelperSize");
|
|
$(".selector").sortable("option", "forceHelperSize", true);
|
|
$(".selector").sortable({ forcePlaceholderSize: true });
|
|
var forcePlaceholderSize = $(".selector").sortable("option", "forcePlaceholderSize");
|
|
$(".selector").sortable("option", "forcePlaceholderSize", true);
|
|
$(".selector").sortable({ grid: [20, 10] });
|
|
var grid = $(".selector").sortable("option", "grid");
|
|
$(".selector").sortable("option", "grid", [20, 10]);
|
|
$(".selector").sortable({ handle: ".handle" });
|
|
var handle = $(".selector").sortable("option", "handle");
|
|
$(".selector").sortable("option", "handle", ".handle");
|
|
$(".selector").sortable({ helper: "clone" });
|
|
var helper = $(".selector").sortable("option", "helper");
|
|
$(".selector").sortable("option", "helper", "clone");
|
|
$(".selector").sortable({ items: "> li" });
|
|
var items = $(".selector").sortable("option", "items");
|
|
$(".selector").sortable("option", "items", "> li");
|
|
$(".selector").sortable({ opacity: 0.5 });
|
|
var opacity = $(".selector").sortable("option", "opacity");
|
|
$(".selector").sortable("option", "opacity", 0.5);
|
|
$(".selector").sortable({ placeholder: "sortable-placeholder" });
|
|
var placeholder = $(".selector").sortable("option", "placeholder");
|
|
$(".selector").sortable("option", "placeholder", "sortable-placeholder");
|
|
$(".selector").sortable({ revert: true });
|
|
var revert = $(".selector").sortable("option", "revert");
|
|
$(".selector").sortable("option", "revert", true);
|
|
$(".selector").sortable({ scroll: false });
|
|
var scroll = $(".selector").sortable("option", "scroll");
|
|
$(".selector").sortable("option", "scroll", false);
|
|
$(".selector").sortable({ scrollSensitivity: 10 });
|
|
var scrollSensitivity = $(".selector").sortable("option", "scrollSensitivity");
|
|
$(".selector").sortable("option", "scrollSensitivity", 10);
|
|
$(".selector").sortable({ scrollSpeed: 40 });
|
|
var scrollSpeed = $(".selector").sortable("option", "scrollSpeed");
|
|
$(".selector").sortable("option", "scrollSpeed", 40);
|
|
$(".selector").sortable({ tolerance: "pointer" });
|
|
var tolerance = $(".selector").sortable("option", "tolerance");
|
|
$(".selector").sortable("option", "tolerance", "pointer");
|
|
$(".selector").sortable({ zIndex: 9999 });
|
|
var zIndex = $(".selector").sortable("option", "zIndex");
|
|
$(".selector").sortable("option", "zIndex", 9999);
|
|
var sorted = $(".selector").sortable("serialize", { key: "sort" });
|
|
var sortedIDs = $(".selector").sortable("toArray");
|
|
var widget = $(".selector").sortable("widget");
|
|
}
|
|
|
|
|
|
function tests_accordion() {
|
|
|
|
$("#accordion").accordion();
|
|
|
|
$("#accordion").accordion({ collapsible: true });
|
|
var icons = {
|
|
header: "ui-icon-circle-arrow-e",
|
|
activeHeader: "ui-icon-circle-arrow-s"
|
|
};
|
|
$("#accordion").accordion({ icons: icons });
|
|
$("#toggle").button().click(() => {
|
|
if ($("#accordion").accordion("option", "icons")) {
|
|
$("#accordion").accordion("option", "icons", null);
|
|
} else {
|
|
$("#accordion").accordion("option", "icons", icons);
|
|
}
|
|
});
|
|
$("#accordion").accordion({ heightStyle: "fill" });
|
|
|
|
$("#accordion-resizer").resizable({
|
|
minHeight: 140,
|
|
minWidth: 200,
|
|
resize: () => {
|
|
$("#accordion").accordion("refresh");
|
|
}
|
|
});
|
|
$("#accordion").accordion({ event: "click hoverintent" });
|
|
$("#accordion").accordion({ heightStyle: "content" });
|
|
$("#accordion")
|
|
.accordion({
|
|
header: "> div > h3"
|
|
})
|
|
.sortable({
|
|
axis: "y",
|
|
handle: "h3",
|
|
stop: (event, ui) => {
|
|
ui.item.children("h3").triggerHandler("focusout");
|
|
}
|
|
});
|
|
$(".selector").accordion({ active: 2 });
|
|
var active = $(".selector").accordion("option", "active");
|
|
$(".selector").accordion("option", "active", 2);
|
|
$(".selector").accordion({ animate: "bounceslide" });
|
|
var animate = $(".selector").accordion("option", "animate");
|
|
$(".selector").accordion("option", "animate", "bounceslide");
|
|
$(".selector").accordion({ collapsible: true });
|
|
var collapsible = $(".selector").accordion("option", "collapsible");
|
|
$(".selector").accordion("option", "collapsible", true);
|
|
$(".selector").accordion({ disabled: true });
|
|
var disabled = $(".selector").accordion("option", "disabled");
|
|
$(".selector").accordion("option", "disabled", true);
|
|
$(".selector").accordion({ event: "mouseover" });
|
|
var event = $(".selector").accordion("option", "event");
|
|
$(".selector").accordion("option", "event", "mouseover");
|
|
$(".selector").accordion({ header: "h3" });
|
|
var header = $(".selector").accordion("option", "header");
|
|
$(".selector").accordion("option", "header", "h3");
|
|
$(".selector").accordion({ heightStyle: "fill" });
|
|
var heightStyle = $(".selector").accordion("option", "heightStyle");
|
|
$(".selector").accordion("option", "heightStyle", "fill");
|
|
$(".selector").accordion({ icons: { "header": "ui-icon-plus", "headerSelected": "ui-icon-minus" } });
|
|
var icons = $(".selector").accordion("option", "icons");
|
|
$(".selector").accordion("option", "icons", { "header": "ui-icon-plus", "headerSelected": "ui-icon-minus" });
|
|
var isDisabled = $(".selector").accordion("option", "disabled");
|
|
$(".selector").accordion("option", { disabled: true });
|
|
}
|
|
|
|
function tests_autocomplete() {
|
|
|
|
$.widget("custom.catcomplete", $.ui.autocomplete, {
|
|
_renderMenu: (ul, items) => {
|
|
var that = this,
|
|
currentCategory = "";
|
|
$.each(items, (index, item) => {
|
|
if (item.category != currentCategory) {
|
|
ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
|
|
currentCategory = item.category;
|
|
}
|
|
that._renderItemData(ul, item);
|
|
});
|
|
}
|
|
});
|
|
|
|
var data = [
|
|
{ label: "anders", category: "" },
|
|
{ label: "andreas", category: "" },
|
|
{ label: "antal", category: "" },
|
|
{ label: "annhhx10", category: "Products" },
|
|
{ label: "annk K12", category: "Products" },
|
|
{ label: "annttop C13", category: "Products" },
|
|
{ label: "anders andersson", category: "People" },
|
|
{ label: "andreas andersson", category: "People" },
|
|
{ label: "andreas johnson", category: "People" }
|
|
];
|
|
|
|
$("#search").catcomplete({
|
|
delay: 0,
|
|
source: data
|
|
});
|
|
|
|
$.widget("ui.combobox", {
|
|
_create: () => {
|
|
var input,
|
|
that = this,
|
|
select = this.element.hide(),
|
|
selected = select.children(":selected"),
|
|
value = selected.val() ? selected.text() : "",
|
|
wrapper = this.wrapper = $("<span>")
|
|
.addClass("ui-combobox")
|
|
.insertAfter(select);
|
|
|
|
function removeIfInvalid(element) {
|
|
var value = $(element).val(),
|
|
matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(value) + "$", "i"),
|
|
valid = false;
|
|
select.children("option").each(() => {
|
|
if ($(this).text().match(matcher)) {
|
|
this.selected = valid = true;
|
|
return false;
|
|
}
|
|
});
|
|
if (!valid) {
|
|
// remove invalid value, as it didn't match anything
|
|
$(element)
|
|
.val("")
|
|
.attr("title", value + " didn't match any item")
|
|
.tooltip("open");
|
|
select.val("");
|
|
setTimeout(() => {
|
|
input.tooltip("close").attr("title", "");
|
|
}, 2500);
|
|
input.data("autocomplete").term = "";
|
|
return false;
|
|
}
|
|
}
|
|
|
|
input = $("<input>")
|
|
.appendTo(wrapper)
|
|
.val(value)
|
|
.attr("title", "")
|
|
.addClass("ui-state-default ui-combobox-input")
|
|
.autocomplete({
|
|
delay: 0,
|
|
minLength: 0,
|
|
source: (request, response) => {
|
|
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
|
|
response(select.children("option").map(() => {
|
|
var text = $(this).text();
|
|
if (this.value && (!request.term || matcher.test(text)))
|
|
return {
|
|
label: text.replace(
|
|
new RegExp(
|
|
"(?![^&;]+;)(?!<[^<>]*)(" +
|
|
$.ui.autocomplete.escapeRegex(request.term) +
|
|
")(?![^<>]*>)(?![^&;]+;)", "gi"
|
|
), "<strong>$1</strong>"),
|
|
value: text,
|
|
option: this
|
|
};
|
|
}));
|
|
},
|
|
select: (event, ui) => {
|
|
ui.item.option.selected = true;
|
|
that._trigger("selected", event, {
|
|
item: ui.item.option
|
|
});
|
|
},
|
|
change: (event, ui) => {
|
|
if (!ui.item)
|
|
return removeIfInvalid(this);
|
|
}
|
|
})
|
|
.addClass("ui-widget ui-widget-content ui-corner-left");
|
|
|
|
input.data("autocomplete")._renderItem = (ul, item) => {
|
|
return $("<li>")
|
|
.data("item.autocomplete", item)
|
|
.append("<a>" + item.label + "</a>")
|
|
.appendTo(ul);
|
|
};
|
|
|
|
$("<a>")
|
|
.attr("tabIndex", -1)
|
|
.attr("title", "Show All Items")
|
|
.tooltip()
|
|
.appendTo(wrapper)
|
|
.button({
|
|
icons: {
|
|
primary: "ui-icon-triangle-1-s"
|
|
},
|
|
text: false
|
|
})
|
|
.removeClass("ui-corner-all")
|
|
.addClass("ui-corner-right ui-combobox-toggle")
|
|
.click(() => {
|
|
if (input.autocomplete("widget").is(":visible")) {
|
|
input.autocomplete("close");
|
|
removeIfInvalid(input);
|
|
return;
|
|
}
|
|
|
|
$(this).blur();
|
|
|
|
input.autocomplete("search", "");
|
|
input.focus();
|
|
});
|
|
|
|
input
|
|
.tooltip({
|
|
position: {
|
|
of: this.button
|
|
},
|
|
tooltipClass: "ui-state-highlight"
|
|
});
|
|
},
|
|
|
|
destroy: () => {
|
|
this.wrapper.remove();
|
|
this.element.show();
|
|
$.Widget.prototype.destroy.call(this);
|
|
}
|
|
});
|
|
$("#combobox").combobox();
|
|
$("#toggle").click(() => { $("#combobox").toggle(); });
|
|
$("#project").autocomplete({
|
|
minLength: 0,
|
|
source: null,
|
|
focus: (event, ui) => {
|
|
$("#project").val(ui.item.label);
|
|
return false;
|
|
},
|
|
select: (event, ui) => {
|
|
$("#project").val(ui.item.label);
|
|
$("#project-id").val(ui.item.value);
|
|
$("#project-description").html(ui.item.desc);
|
|
$("#project-icon").attr("src", "images/" + ui.item.icon);
|
|
return false;
|
|
}
|
|
})
|
|
.data("autocomplete")._renderItem = (ul, item) => {
|
|
return $("<li>")
|
|
.data("item.autocomplete", item)
|
|
.append("<a>" + item.label + "<br>" + item.desc + "</a>")
|
|
.appendTo(ul);
|
|
};
|
|
|
|
$("#developer").autocomplete({
|
|
source: (request, response) => {
|
|
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
|
|
response($.grep(names, (value) => {
|
|
value = value.label || value.value || value;
|
|
return matcher.test(value) || matcher.test(normalize(value));
|
|
}));
|
|
}
|
|
});
|
|
|
|
var availableTags = [
|
|
"ActionScript",
|
|
"AppleScript",
|
|
"Asp",
|
|
"BASIC",
|
|
"C",
|
|
"C++",
|
|
"Clojure",
|
|
"COBOL",
|
|
"ColdFusion",
|
|
"Erlang",
|
|
"Fortran",
|
|
"Groovy",
|
|
"Haskell",
|
|
"Java",
|
|
"JavaScript",
|
|
"Lisp",
|
|
"Perl",
|
|
"PHP",
|
|
"Python",
|
|
"Ruby",
|
|
"Scala",
|
|
"Scheme"
|
|
];
|
|
$("#tags").autocomplete({ source: availableTags });
|
|
$("#birds")
|
|
.bind("keydown", (event) => {
|
|
if (event.keyCode === $.ui.keyCode.TAB &&
|
|
$(this).data("autocomplete").menu.active) {
|
|
event.preventDefault();
|
|
}
|
|
})
|
|
.autocomplete({
|
|
source: (request, response) => {
|
|
$.getJSON("search.php", {
|
|
term: null
|
|
}, response);
|
|
},
|
|
search: () => {
|
|
// custom minLength
|
|
var term = null
|
|
if (term.length < 2) {
|
|
return false;
|
|
}
|
|
},
|
|
focus: () => {
|
|
return false;
|
|
},
|
|
select: (event, ui) => {
|
|
return false;
|
|
}
|
|
});
|
|
$("#tags")
|
|
.bind("keydown", (event) => {
|
|
if (event.keyCode === $.ui.keyCode.TAB &&
|
|
$(this).data("autocomplete").menu.active) {
|
|
event.preventDefault();
|
|
}
|
|
})
|
|
.autocomplete({
|
|
minLength: 0,
|
|
source: (request, response) => { },
|
|
focus: () => {
|
|
return false;
|
|
},
|
|
select: (event, ui) => {
|
|
return false;
|
|
}
|
|
});
|
|
$("#city").autocomplete({
|
|
source: (request, response) => {
|
|
$.ajax({
|
|
url: "http://ws.geonames.org/searchJSON",
|
|
dataType: "jsonp",
|
|
data: {
|
|
featureClass: "P",
|
|
style: "full",
|
|
maxRows: 12,
|
|
name_startsWith: request.term
|
|
},
|
|
success: (data) => {
|
|
response($.map(data.geonames, (item) => {
|
|
return {
|
|
label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
|
|
value: item.name
|
|
}
|
|
}));
|
|
}
|
|
});
|
|
},
|
|
minLength: 2,
|
|
select: (event, ui) => {
|
|
log(ui.item ?
|
|
"Selected: " + ui.item.label :
|
|
"Nothing selected, input was " + this.value);
|
|
},
|
|
open: () => {
|
|
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
|
|
},
|
|
close: () => {
|
|
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
|
|
}
|
|
});
|
|
function log(message) {
|
|
$("<div/>").text(message).prependTo("#log");
|
|
$("#log").attr("scrollTop", 0);
|
|
}
|
|
var cache = {};
|
|
$("#birds").autocomplete({
|
|
minLength: 2,
|
|
source: (request, response) => {
|
|
var term = request.term;
|
|
if (term in cache) {
|
|
response(cache[term]);
|
|
return;
|
|
}
|
|
|
|
$.getJSON("search.php", request, (data, status, xhr) => {
|
|
cache[term] = data;
|
|
response(data);
|
|
});
|
|
}
|
|
});
|
|
$("#birds").autocomplete({
|
|
source: "search.php",
|
|
minLength: 2,
|
|
select: (event, ui) => {
|
|
log(ui.item ?
|
|
"Selected: " + ui.item.value + " aka " + ui.item.id :
|
|
"Nothing selected, input was " + this.value);
|
|
}
|
|
});
|
|
$("#birds").autocomplete({
|
|
source: data,
|
|
minLength: 0,
|
|
select: (event, ui) => {
|
|
log(ui.item ?
|
|
"Selected: " + ui.item.value + ", geonameId: " + ui.item.id :
|
|
"Nothing selected, input was " + this.value);
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
|
|
function tests_button() {
|
|
|
|
$("#check").button();
|
|
$("#format").buttonset();
|
|
$("input[type=submit], a, button")
|
|
.button()
|
|
.click((event) => { event.preventDefault(); });
|
|
|
|
} |