mirror of
https://github.com/zhigang1992/DefinitelyTyped.git
synced 2026-04-01 12:42:58 +08:00
Ryan Cavanaugh
@@ -23,5 +23,8 @@
|
||||
"devDependencies": {
|
||||
"dtslint": "Microsoft/dtslint#production",
|
||||
"types-publisher": "Microsoft/types-publisher#production"
|
||||
},
|
||||
"dependencies": {
|
||||
"jslint": "^0.10.3"
|
||||
}
|
||||
}
|
||||
|
||||
842
types/zui/index.d.ts
vendored
Normal file
842
types/zui/index.d.ts
vendored
Normal file
@@ -0,0 +1,842 @@
|
||||
// Type definitions for zui 1.7
|
||||
// Project: http://zui.sexy
|
||||
// Definitions by: YuanXu <https://github.com/yuanxu>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.3
|
||||
|
||||
/// <reference types="jquery" />
|
||||
|
||||
type CallBack = () => void;
|
||||
/**
|
||||
* bootstrap
|
||||
*/
|
||||
interface ModalOptions {
|
||||
backdrop?: boolean | string;
|
||||
keyboard?: boolean;
|
||||
show?: boolean;
|
||||
remote?: string;
|
||||
}
|
||||
|
||||
interface ModalOptionsBackdropString {
|
||||
backdrop?: string; // for "static"
|
||||
keyboard?: boolean;
|
||||
show?: boolean;
|
||||
remote?: string;
|
||||
}
|
||||
|
||||
interface ScrollSpyOptions {
|
||||
offset?: number;
|
||||
target?: string;
|
||||
}
|
||||
|
||||
interface TooltipOptions {
|
||||
animation?: boolean;
|
||||
html?: boolean;
|
||||
placement?: string | CallBack;
|
||||
selector?: string;
|
||||
title?: string | CallBack;
|
||||
trigger?: string;
|
||||
template?: string;
|
||||
delay?: number | object;
|
||||
container?: string | boolean;
|
||||
viewport?: string | CallBack | object;
|
||||
}
|
||||
|
||||
interface PopoverOptions {
|
||||
animation?: boolean;
|
||||
html?: boolean;
|
||||
placement?: string | CallBack;
|
||||
selector?: string;
|
||||
trigger?: string;
|
||||
title?: string | CallBack;
|
||||
template?: string;
|
||||
content?: any;
|
||||
delay?: number | object;
|
||||
container?: string | boolean;
|
||||
viewport?: string | CallBack | object;
|
||||
}
|
||||
|
||||
interface CollapseOptions {
|
||||
parent?: any;
|
||||
toggle?: boolean;
|
||||
}
|
||||
|
||||
interface CarouselOptions {
|
||||
interval?: number;
|
||||
pause?: string;
|
||||
wrap?: boolean;
|
||||
keyboard?: boolean;
|
||||
}
|
||||
|
||||
interface TypeaheadOptions {
|
||||
source?: any;
|
||||
items?: number;
|
||||
minLength?: number;
|
||||
matcher?(item: any): boolean;
|
||||
sorter?(items: any[]): any[];
|
||||
updater?(item: any): any;
|
||||
highlighter?(item: any): string;
|
||||
}
|
||||
|
||||
interface AffixOptions {
|
||||
offset?: number | CallBack | object;
|
||||
target?: any;
|
||||
}
|
||||
|
||||
interface TransitionEventNames {
|
||||
end: string;
|
||||
}
|
||||
|
||||
interface JQuery {
|
||||
modal(options?: ModalOptions | ModalOptionsBackdropString): JQuery;
|
||||
modal(command: string): JQuery;
|
||||
|
||||
dropdown(command?: string): JQuery;
|
||||
|
||||
scrollspy(options?: ScrollSpyOptions | string): JQuery;
|
||||
|
||||
tab(command?: string): JQuery;
|
||||
|
||||
tooltip(options?: TooltipOptions): JQuery;
|
||||
tooltip(command: string, params?: string): JQuery;
|
||||
|
||||
popover(options?: PopoverOptions | string): JQuery;
|
||||
|
||||
alert(command?: string): JQuery;
|
||||
|
||||
button(command?: string): JQuery;
|
||||
|
||||
collapse(options?: CollapseOptions | string): JQuery;
|
||||
|
||||
carousel(options?: CarouselOptions | string): JQuery;
|
||||
|
||||
typeahead(options?: TypeaheadOptions): JQuery;
|
||||
|
||||
affix(options?: AffixOptions): JQuery;
|
||||
|
||||
emulateTransitionEnd(duration: number): JQuery;
|
||||
}
|
||||
|
||||
interface JQuerySupport {
|
||||
transition: boolean | TransitionEventNames;
|
||||
}
|
||||
|
||||
/**
|
||||
* datetime picker
|
||||
*/
|
||||
|
||||
interface DatetimepickerChangeEventObject extends DatetimepickerEventObject {
|
||||
oldDate: any;
|
||||
}
|
||||
|
||||
interface DatetimepickerEventObject extends JQueryEventObject {
|
||||
date: any;
|
||||
}
|
||||
|
||||
interface DatetimepickerIcons {
|
||||
time?: string;
|
||||
date?: string;
|
||||
up?: string;
|
||||
down?: string;
|
||||
}
|
||||
|
||||
interface DatetimepickerOptions {
|
||||
weekStart?: number;
|
||||
todayBtn?: number | boolean;
|
||||
autoclose?: number | boolean;
|
||||
todayHighlight?: number | boolean;
|
||||
startView?: number;
|
||||
forceParse?: number | boolean;
|
||||
showMeridian?: boolean | number;
|
||||
minView?: number;
|
||||
maxView?: number;
|
||||
pickDate?: boolean;
|
||||
pickTime?: boolean;
|
||||
useMinutes?: boolean;
|
||||
useSeconds?: boolean;
|
||||
useCurrent?: boolean;
|
||||
minuteStepping?: number;
|
||||
minDate?: Date | string | any;
|
||||
maxDate?: Date | string | any;
|
||||
showToday?: boolean;
|
||||
collapse?: boolean;
|
||||
language?: string;
|
||||
defaultDate?: Date | string | any;
|
||||
disabledDates?: Array<Date | string | object>;
|
||||
enabledDates?: Array<Date | string | object>;
|
||||
icons?: DatetimepickerIcons;
|
||||
useStrict?: boolean;
|
||||
direction?: string;
|
||||
sideBySide?: boolean;
|
||||
daysOfWeekDisabled?: number[];
|
||||
calendarWeeks?: boolean;
|
||||
format?: string | boolean;
|
||||
locale?: string;
|
||||
showTodayButton?: boolean;
|
||||
viewMode?: string;
|
||||
inline?: boolean;
|
||||
toolbarPlacement?: string;
|
||||
showClear?: boolean;
|
||||
ignoreReadonly?: boolean;
|
||||
}
|
||||
|
||||
interface Datetimepicker {
|
||||
date(date: Date | string | object): void;
|
||||
date(): object;
|
||||
minDate(date: Date | string | object): void;
|
||||
minDate(): boolean | object;
|
||||
maxDate(date: Date | string | object): void;
|
||||
maxDate(): boolean | object;
|
||||
show(): void;
|
||||
disable(): void;
|
||||
enable(): void;
|
||||
destroy(): void;
|
||||
toggle(): void;
|
||||
}
|
||||
|
||||
interface JQuery {
|
||||
datetimepicker(options?: DatetimepickerOptions): JQuery;
|
||||
|
||||
// off(events: "dp.change", selector?: string, handler?: (eventobject: DatetimepickerChangeEventObject) => any): JQuery;
|
||||
// off(events: "dp.change", handler: (eventobject: DatetimepickerChangeEventObject) => any): JQuery;
|
||||
|
||||
// on(events: "dp.change", selector: string, data: any, handler?: (eventobject: DatetimepickerChangeEventObject) => any): JQuery;
|
||||
// on(events: "dp.change", selector: string, handler: (eventobject: DatetimepickerChangeEventObject) => any): JQuery;
|
||||
// on(events: 'dp.change', handler: (eventObject: DatetimepickerChangeEventObject) => any): JQuery;
|
||||
|
||||
// off(events: "dp.show", selector?: string, handler?: (eventobject: DatetimepickerEventObject) => any): JQuery;
|
||||
// off(events: "dp.show", handler: (eventobject: DatetimepickerEventObject) => any): JQuery;
|
||||
|
||||
// on(events: "dp.show", selector: string, data: any, handler?: (eventobject: DatetimepickerEventObject) => any): JQuery;
|
||||
// on(events: "dp.show", selector: string, handler: (eventobject: DatetimepickerEventObject) => any): JQuery;
|
||||
// on(events: 'dp.show', handler: (eventObject: DatetimepickerEventObject) => any): JQuery;
|
||||
|
||||
// off(events: "dp.hide", selector?: string, handler?: (eventobject: DatetimepickerEventObject) => any): JQuery;
|
||||
// off(events: "dp.hide", handler: (eventobject: DatetimepickerEventObject) => any): JQuery;
|
||||
|
||||
// on(events: "dp.hide", selector: string, data: any, handler?: (eventobject: DatetimepickerEventObject) => any): JQuery;
|
||||
// on(events: "dp.hide", selector: string, handler: (eventobject: DatetimepickerEventObject) => any): JQuery;
|
||||
// on(events: 'dp.hide', handler: (eventObject: DatetimepickerEventObject) => any): JQuery;
|
||||
|
||||
// off(events: "dp.error", selector?: string, handler?: (eventobject: DatetimepickerEventObject) => any): JQuery;
|
||||
// off(events: "dp.error", handler: (eventobject: DatetimepickerEventObject) => any): JQuery;
|
||||
|
||||
// on(events: "dp.error", selector: string, data: any, handler?: (eventobject: DatetimepickerEventObject) => any): JQuery;
|
||||
// on(events: "dp.error", selector: string, handler: (eventobject: DatetimepickerEventObject) => any): JQuery;
|
||||
// on(events: 'dp.error', handler: (eventObject: DatetimepickerEventObject) => any): JQuery;
|
||||
|
||||
data(key: 'DateTimePicker'): Datetimepicker;
|
||||
}
|
||||
|
||||
/**
|
||||
* store
|
||||
*/
|
||||
interface StoreStatic {
|
||||
enable: boolean;
|
||||
storage: any;
|
||||
length(): number;
|
||||
remove(key: string): any;
|
||||
get<T>(key: string): T;
|
||||
set<T>(key: string, value?: T): any;
|
||||
key(index: number): string;
|
||||
forEach<T>(cb: (key: string, value: T) => any): any;
|
||||
serialize(value: any): string;
|
||||
deserialize<T>(value: string): T;
|
||||
getAll<T>(): T;
|
||||
removeItem(key: string): any;
|
||||
getItem(key: string): string;
|
||||
setItem(key: string, value: any): any;
|
||||
clear(): void;
|
||||
|
||||
page: any;
|
||||
pageGet(key: string): any;
|
||||
pageSet(key: string, value: any): any;
|
||||
pageRemove(key: string): any;
|
||||
pageSave(): any;
|
||||
pageClear(): any;
|
||||
}
|
||||
|
||||
/**
|
||||
* messager
|
||||
*/
|
||||
declare enum MessagerTypeEnum {
|
||||
'default', 'primary', 'success', 'info', 'warning', 'danger', 'important', 'special'
|
||||
}
|
||||
interface Action {
|
||||
name?: string;
|
||||
icon?: string;
|
||||
text?: string;
|
||||
html?: string;
|
||||
action?: ActionFunc;
|
||||
}
|
||||
|
||||
type ActionFunc = () => boolean;
|
||||
|
||||
type OnActionFunc = (name: string, action: string, messager: Messager) => any;
|
||||
|
||||
interface MessagerOption {
|
||||
type?: MessagerTypeEnum | string;
|
||||
placement?: string;
|
||||
time?: number;
|
||||
message?: string;
|
||||
parent?: string;
|
||||
icon?: string;
|
||||
close?: boolean;
|
||||
fade?: boolean;
|
||||
scale?: boolean;
|
||||
actions?: Action[];
|
||||
onAction?: OnActionFunc;
|
||||
cssClass?: string;
|
||||
contentClass?: string;
|
||||
show?: boolean;
|
||||
}
|
||||
interface Messager {
|
||||
show(cb?: CallBack): any;
|
||||
show(message: string, cb?: CallBack): any;
|
||||
|
||||
hide(cb?: CallBack): any;
|
||||
}
|
||||
interface MessagerStatic {
|
||||
new(option?: MessagerOption): Messager;
|
||||
new(message: string, option?: MessagerOption): Messager;
|
||||
}
|
||||
|
||||
interface ZuiStatic {
|
||||
// $.zui.messager
|
||||
messager: Messager;
|
||||
Messager: MessagerStatic;
|
||||
|
||||
store: StoreStatic;
|
||||
}
|
||||
|
||||
/**
|
||||
* modal trigger
|
||||
*/
|
||||
interface ModalTriggerOption {
|
||||
name?: string;
|
||||
className?: string;
|
||||
type?: string;
|
||||
url?: string;
|
||||
remote?: string;
|
||||
iframe?: string;
|
||||
size?: string;
|
||||
width?: string;
|
||||
height?: string;
|
||||
showHeader?: boolean;
|
||||
title?: string;
|
||||
icon?: string;
|
||||
fade?: boolean;
|
||||
postion?: string;
|
||||
backdrop?: boolean;
|
||||
keyboard?: boolean;
|
||||
moveable?: boolean;
|
||||
rememberPos?: boolean;
|
||||
waittime?: number;
|
||||
loadingIcon?: string;
|
||||
|
||||
show?(): any;
|
||||
onShow?(): any;
|
||||
onHide?(): any;
|
||||
hidden?(): any;
|
||||
loaded?(): any;
|
||||
broken?(): any;
|
||||
}
|
||||
|
||||
interface ModalTrigger {
|
||||
show(option?: ModalTriggerOption): any;
|
||||
close(): any;
|
||||
toggle(option?: ModalTriggerOption): any;
|
||||
adjustPostion(option?: ModalTriggerOption): any;
|
||||
}
|
||||
interface ModalTriggerStatic {
|
||||
new(option?: ModalTriggerOption): ModalTrigger;
|
||||
}
|
||||
|
||||
interface JQuery {
|
||||
modalTrigger(option?: ModalTriggerOption): JQuery; // $('#modal').modalTrigger()
|
||||
data(value: string): JQuery;
|
||||
}
|
||||
|
||||
interface ZuiStatic {
|
||||
ModalTrigger: ModalTriggerStatic;
|
||||
modalTrigger: ModalTrigger;
|
||||
}
|
||||
|
||||
interface JQueryStatic {
|
||||
zui: ZuiStatic;
|
||||
}
|
||||
|
||||
/**
|
||||
* color
|
||||
*/
|
||||
|
||||
interface Color {
|
||||
rgb(rgbaColor?: string): object;
|
||||
hue(hue: string): string;
|
||||
darken(percent: number): string;
|
||||
lighten(percent: number): string;
|
||||
clone(): Color;
|
||||
fade(percent: number): any;
|
||||
toHsl(): object;
|
||||
luma(): string;
|
||||
saturate(): string;
|
||||
contrast(dark: string, light: string, threshold: number): string;
|
||||
hexStr(): string;
|
||||
toCssStr(): string;
|
||||
}
|
||||
|
||||
interface ColorStatic {
|
||||
new(r: number, g: number, b: number, a?: number): Color;
|
||||
new(hexStrOrrgbColorOrRgbaColorOrName?: string): Color;
|
||||
isColor(str: string): boolean;
|
||||
names: string[];
|
||||
}
|
||||
interface ColorSet {
|
||||
get(name: string): Color;
|
||||
}
|
||||
interface ZuiStatic {
|
||||
Color: ColorStatic;
|
||||
colorset: ColorSet;
|
||||
}
|
||||
|
||||
/**
|
||||
* draggable
|
||||
*/
|
||||
|
||||
interface Postion {
|
||||
left: number;
|
||||
top: number;
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
interface DraggableEvent {
|
||||
event?: object;
|
||||
element?: JQuery | object;
|
||||
target?: JQuery | object;
|
||||
pos?: Postion;
|
||||
offset?: object;
|
||||
smallOffset?: object;
|
||||
startOffset?: object;
|
||||
}
|
||||
interface DraggableOption {
|
||||
container?: string;
|
||||
move?: boolean;
|
||||
selector?: string;
|
||||
handle?: string;
|
||||
mouseButton?: string;
|
||||
stopPropagation?: boolean;
|
||||
before?(e?: DraggableEvent): boolean;
|
||||
drag?(e: DraggableEvent): void;
|
||||
finish?(e: DraggableEvent): void;
|
||||
}
|
||||
interface JQuery {
|
||||
draggable(option: DraggableOption | string): JQuery;
|
||||
}
|
||||
|
||||
/**
|
||||
* droppable
|
||||
*/
|
||||
|
||||
interface Postion {
|
||||
left: number;
|
||||
top: number;
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
interface DroppableEvent {
|
||||
event?: object;
|
||||
element?: JQuery;
|
||||
target?: JQuery;
|
||||
pos?: Postion;
|
||||
offset?: object;
|
||||
smallOffset?: object;
|
||||
startOffset?: object;
|
||||
}
|
||||
|
||||
interface DroppableOption {
|
||||
container?: string;
|
||||
selector?: string;
|
||||
handle?: string;
|
||||
target: JQuery | string;
|
||||
|
||||
flex?: boolean;
|
||||
deviation?: number;
|
||||
sensorOffsetX?: number;
|
||||
sensorOffsetY?: number;
|
||||
|
||||
before?(e?: DroppableEvent): boolean;
|
||||
start?(e?: DroppableEvent): void;
|
||||
drag?(e: DroppableEvent): void;
|
||||
beforeDrop?(e: DroppableEvent): boolean;
|
||||
drop?(e: DroppableEvent): void;
|
||||
finish?(e: DroppableEvent): void;
|
||||
always?(e: DroppableEvent): void;
|
||||
}
|
||||
interface JQuery {
|
||||
droppable(option: DroppableOption | string): JQuery;
|
||||
}
|
||||
|
||||
/**
|
||||
* sortable
|
||||
*/
|
||||
|
||||
interface SortEvent extends Event {
|
||||
list: Array<JQuery | object>;
|
||||
element: JQuery | object;
|
||||
}
|
||||
|
||||
interface SortableOption {
|
||||
selector?: string;
|
||||
trigger?: string;
|
||||
reverse?: boolean;
|
||||
dragCssClass?: string;
|
||||
sortingClass?: string;
|
||||
mouseButton?: string;
|
||||
start?(e?: SortEvent): void;
|
||||
order?(e?: SortEvent): void;
|
||||
finish?(e?: SortEvent): void;
|
||||
}
|
||||
interface JQuery {
|
||||
sortable(option?: SortableOption | string): JQuery;
|
||||
}
|
||||
|
||||
/**
|
||||
* selectable
|
||||
*/
|
||||
|
||||
interface SelectableEvent extends Event {
|
||||
selections: Map<number, boolean>;
|
||||
selected: number[];
|
||||
}
|
||||
interface SelectableOption {
|
||||
selector?: string;
|
||||
trigger?: string;
|
||||
rangeStyle?: string | object;
|
||||
clickBehavior?: string;
|
||||
mouseButton?: string;
|
||||
ignoreVal?: number;
|
||||
|
||||
start?(e?: SelectableEvent): boolean;
|
||||
finish?(e?: SelectableEvent): void;
|
||||
select?(e?: SelectableEvent): void;
|
||||
unselect?(e?: SelectableEvent): void;
|
||||
}
|
||||
|
||||
interface Selectable {
|
||||
toggle(elementOrId?: string | object | JQuery): any;
|
||||
select(elementOrId?: string | object | JQuery): any;
|
||||
unselect(elementOrId?: string | object | JQuery): any;
|
||||
}
|
||||
interface JQuery {
|
||||
selectable(option?: SelectableOption): JQuery;
|
||||
}
|
||||
|
||||
/**
|
||||
* image cutter
|
||||
*/
|
||||
|
||||
interface ImageCutterOption {
|
||||
coverColor?: string;
|
||||
coverOpacity?: number;
|
||||
defaultWidth?: number;
|
||||
defaultHeight?: number;
|
||||
fixedRatio?: boolean;
|
||||
minWidth?: number;
|
||||
minHeight?: number;
|
||||
post?: string;
|
||||
get?: string;
|
||||
}
|
||||
interface ImageData {
|
||||
originWidth: number;
|
||||
originHeight: number;
|
||||
scaled: boolean;
|
||||
scaleHeight: number;
|
||||
scaleWidth: number;
|
||||
// width: number;
|
||||
// height: number;
|
||||
left: number;
|
||||
right: number;
|
||||
top: number;
|
||||
bottom: number;
|
||||
}
|
||||
interface ImageCutter {
|
||||
resetImage(img: string): any;
|
||||
getData(): ImageData;
|
||||
}
|
||||
|
||||
interface JQuery {
|
||||
imgCutter(option: ImageCutterOption): JQuery;
|
||||
data(cmd: string): ImageCutter;
|
||||
}
|
||||
|
||||
/**
|
||||
* treeview
|
||||
*/
|
||||
|
||||
interface TreeNode {
|
||||
title?: string;
|
||||
url?: string;
|
||||
html?: string;
|
||||
children?: TreeNode[];
|
||||
open?: boolean;
|
||||
id?: string;
|
||||
}
|
||||
interface TreeMenuOption {
|
||||
animate?: boolean;
|
||||
initialState?: string;
|
||||
data?: TreeNode[];
|
||||
itemCreator?(li: JQuery | object, item: TreeNode): any;
|
||||
itemWrapper?: boolean;
|
||||
}
|
||||
|
||||
interface TreeMenu {
|
||||
expand(params?: JQuery, disableAnimate?: boolean): void;
|
||||
|
||||
collapse(params?: JQuery, disableAnimate?: boolean): void;
|
||||
|
||||
toggle(params?: JQuery, disableAnimate?: boolean): void;
|
||||
|
||||
show(params?: JQuery, disableAnimate?: boolean): void;
|
||||
|
||||
add(element: JQuery, items: TreeNode[], expand?: boolean, disabledAnimate?: boolean): void;
|
||||
toData($ul?: JQuery, filter?: string): object;
|
||||
|
||||
reload(data: TreeNode[]): void;
|
||||
remove(): void;
|
||||
empty(): void;
|
||||
}
|
||||
|
||||
interface JQuery {
|
||||
tree(option?: TreeMenuOption): JQuery;
|
||||
}
|
||||
|
||||
interface Column {
|
||||
width?: number;
|
||||
text?: string;
|
||||
type?: string;
|
||||
flex?: boolean;
|
||||
colClass?: string;
|
||||
sort?: string;
|
||||
ignore?: boolean;
|
||||
}
|
||||
interface Row {
|
||||
id?: string;
|
||||
checked?: boolean;
|
||||
cssClass?: string;
|
||||
css?: string;
|
||||
data?: [number, string, string];
|
||||
}
|
||||
interface DataTableData {
|
||||
rows: Row[];
|
||||
cols: Column[];
|
||||
}
|
||||
interface AfterLoadEvent extends Event {
|
||||
data: DataTableData;
|
||||
}
|
||||
interface SortEvent extends Event {
|
||||
sorter: {
|
||||
index: number;
|
||||
sortUp: boolean;
|
||||
};
|
||||
}
|
||||
interface SizeChangeEvent extends Event {
|
||||
changes: {
|
||||
change: string;
|
||||
oldWidth: number;
|
||||
newWidth: number;
|
||||
colIndex: number;
|
||||
};
|
||||
}
|
||||
interface ChecksChangeEvent extends Event {
|
||||
checks: {
|
||||
checkedAll: boolean;
|
||||
checks: number[];
|
||||
};
|
||||
}
|
||||
interface DataTableOption {
|
||||
checkable?: boolean;
|
||||
checkByClickRow?: boolean;
|
||||
checkedClass?: string;
|
||||
storage?: boolean;
|
||||
sortable?: boolean;
|
||||
fixedHeader?: boolean;
|
||||
fixedHeaderOffset?: number;
|
||||
fixedLeftWidth?: string;
|
||||
fixedRightWidth?: string;
|
||||
flexHeadDrag?: boolean;
|
||||
scrollPos?: string;
|
||||
rowHover?: boolean;
|
||||
colHover?: boolean;
|
||||
fixCellHeight?: boolean;
|
||||
minColWidth?: number;
|
||||
minFixedLeftWidth?: number;
|
||||
minFixedRightWidth?: number;
|
||||
minFlexAreaWidth?: number;
|
||||
selectable?: boolean | object;
|
||||
|
||||
afterLoad?(event: AfterLoadEvent): void;
|
||||
ready?(): void;
|
||||
sort?(event: SortEvent): void;
|
||||
sizeChanged?(event: SizeChangeEvent): void;
|
||||
checksChanged?(event: ChecksChangeEvent): void;
|
||||
}
|
||||
|
||||
interface DataTable {
|
||||
checks: { checkedAll: boolean, checks: number[] };
|
||||
}
|
||||
|
||||
interface JQuery {
|
||||
datatable(option?: DataTableOption): JQuery;
|
||||
datatable(command: string, optionOrData: DataTableOption | DataTableData): JQuery;
|
||||
}
|
||||
|
||||
/**
|
||||
* uploader
|
||||
*/
|
||||
|
||||
interface UploaderOption {
|
||||
drop_element?: string;
|
||||
browse_button?: string;
|
||||
url: string;
|
||||
qiniu?: object;
|
||||
filters?: {
|
||||
mime_type: Array<{
|
||||
title?: string;
|
||||
extensions?: string;
|
||||
}>,
|
||||
max_file_size?: string;
|
||||
prevent_duplicates?: string;
|
||||
};
|
||||
fileList?: string;
|
||||
fileTemplate?: string;
|
||||
fileFormater?($file: JQuery, file: FileObj, status: STATUS): void;
|
||||
fileIconCreator?(fileType: string, file: FileObj, uploader: Uploader): void;
|
||||
staticFiles?: Array<{
|
||||
id?: string;
|
||||
name?: string;
|
||||
type?: string;
|
||||
size?: string;
|
||||
origSize?: string;
|
||||
lastModifiedDate?: Date;
|
||||
}>;
|
||||
rename?: boolean;
|
||||
renameExtension?: boolean;
|
||||
renameByClick?: boolean;
|
||||
autoUpload?: boolean;
|
||||
browseByClickList?: boolean;
|
||||
dropPlaceholder?: boolean;
|
||||
previewImageIcon?: boolean;
|
||||
sendFileName?: boolean;
|
||||
sendFileId?: boolean;
|
||||
responseHandler?: boolean | CallBack;
|
||||
limitFilesCount?: boolean | number;
|
||||
deleteConfirm?: boolean | string;
|
||||
removeUploaded?: boolean;
|
||||
statusCreator?(total: UploadProgress, state: STATUS, uploader: Uploader): void;
|
||||
previewImageSize?: { width: number, height: number };
|
||||
uploadedMessage?: boolean;
|
||||
deleteActionOnDone?: boolean;
|
||||
renameActionOnDone?: boolean;
|
||||
headers?: object;
|
||||
multipart?: boolean;
|
||||
multipart_params?: object | CallBack;
|
||||
max_retries?: number;
|
||||
chunk_size?: string;
|
||||
resize?: {
|
||||
width?: number;
|
||||
height?: number;
|
||||
crop?: boolean;
|
||||
quuality?: number;
|
||||
preserve_headers?: boolean;
|
||||
};
|
||||
multi_selection?: boolean;
|
||||
unique_names?: boolean;
|
||||
runtimes?: string;
|
||||
file_data_name?: string;
|
||||
flash_swf_url?: string;
|
||||
silverlight_xap_url?: string;
|
||||
lang?: string;
|
||||
|
||||
onInit?(): void;
|
||||
onFilesAdded?(fiels: FileObj[]): void;
|
||||
onUploadProgress?(file: FileObj): void;
|
||||
onFileUploaded?(file: FileObj, responseObject: ResponseObject): void;
|
||||
onUploadComplete?(files: FileObj[]): void;
|
||||
onFilesRemoved?(files: FileObj[]): void;
|
||||
onChunkUploaded?(file: FileObj, responseObject: ResponseObject): void;
|
||||
onUploadFile?(file: FileObj): void;
|
||||
onBeforeUpload?(file: FileObj): void;
|
||||
onStateChanged?(status: STATUS): void;
|
||||
onQueueChanged?(): void;
|
||||
onError?(error: { error: ERRORS, message: string, file: FileObj }): void;
|
||||
}
|
||||
interface ResponseObject {
|
||||
response?: string;
|
||||
responseHeaders?: object;
|
||||
status?: number;
|
||||
offset?: number;
|
||||
total?: number;
|
||||
}
|
||||
declare enum STATUS {
|
||||
STOPPED = 1, STARTED = 2, QUEUED = 1, UPLOADING = 2, FAILED = 3, DONE = 4
|
||||
}
|
||||
interface FileObj {
|
||||
id?: string;
|
||||
name?: string;
|
||||
type?: string;
|
||||
ext?: string;
|
||||
isImage?: boolean;
|
||||
previewImage?: string;
|
||||
size?: number;
|
||||
origSize?: number;
|
||||
loaded?: number;
|
||||
percent?: number;
|
||||
status?: STATUS;
|
||||
lastModifiedDate?: Date;
|
||||
getNative(): File;
|
||||
destroy(): void;
|
||||
}
|
||||
interface UploadProgress {
|
||||
size?: number;
|
||||
loaded?: number;
|
||||
uploaded?: number;
|
||||
failed?: number;
|
||||
queued?: number;
|
||||
percent?: number;
|
||||
bytesPerSec?: number;
|
||||
}
|
||||
declare enum ERRORS {
|
||||
GENERIC_ERROR = -100,
|
||||
HTTP_ERROR = -200,
|
||||
IO_ERROR = -300,
|
||||
SECURITY_ERROR = -400,
|
||||
INIT_ERROR = -500,
|
||||
FILE_SIZE_ERROR = -600,
|
||||
FILE_EXTENSION_ERROR = -601,
|
||||
FILE_DUPLICATE_ERROR = -602,
|
||||
IMAGE_FORMAT_ERROR = -700,
|
||||
IMAGE_MEMORY_ERROR = -701,
|
||||
IMAGE_DIMENSIONS_ERROR = -702
|
||||
}
|
||||
interface Uploader {
|
||||
showMessage(message: string, type: string, time?: number): void;
|
||||
hideMessage(): void;
|
||||
start(): void;
|
||||
stop(): void;
|
||||
getState(): STATUS;
|
||||
isStarted(): boolean;
|
||||
isStopped(): boolean;
|
||||
getFiles(): FileObj[];
|
||||
getTotal(): UploadProgress;
|
||||
disableBrowse(disable: boolean): void;
|
||||
getFile(id: string): FileObj;
|
||||
showFile(file: FileObj | FileObj[]): void;
|
||||
removeFile(file: FileObj): void;
|
||||
destroy(): void;
|
||||
showStatus(): void;
|
||||
}
|
||||
|
||||
interface JQuery {
|
||||
uploader(option: UploaderOption): JQuery;
|
||||
}
|
||||
5
types/zui/package.json
Normal file
5
types/zui/package.json
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"moment": ">=2.14.0"
|
||||
}
|
||||
}
|
||||
24
types/zui/tsconfig.json
Normal file
24
types/zui/tsconfig.json
Normal file
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"es6",
|
||||
"dom"
|
||||
],
|
||||
"target": "es6",
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": true,
|
||||
"baseUrl": "../",
|
||||
"typeRoots": [
|
||||
"../"
|
||||
],
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"zui-tests.ts"
|
||||
]
|
||||
}
|
||||
1
types/zui/tslint.json
Normal file
1
types/zui/tslint.json
Normal file
@@ -0,0 +1 @@
|
||||
{ "extends": "dtslint/dt.json" }
|
||||
335
types/zui/zui-tests.ts
Normal file
335
types/zui/zui-tests.ts
Normal file
@@ -0,0 +1,335 @@
|
||||
/// <reference types="node" />
|
||||
|
||||
new $.zui.Messager();
|
||||
|
||||
new $.zui.Messager('提示消息：成功', {
|
||||
type: 'success' // 定义颜色主题
|
||||
}).show();
|
||||
new $.zui.Messager("message");
|
||||
let messagarOption: MessagerOption = {};
|
||||
new $.zui.Messager(messagarOption);
|
||||
new $.zui.Messager("message", messagarOption);
|
||||
$.zui.messager.show("ok");
|
||||
|
||||
/******** store *****/
|
||||
$.zui.store.set('name', 'catouse'); // 使用本地存储设置'name'值为'catouse'
|
||||
$.zui.store.set('date', { year: 2014, month: 8, day: 6 }); // 将一个对象存储到本地存储
|
||||
|
||||
console.log($.zui.store.get('name')); // 从本地存储获取'name'的值
|
||||
console.log($.zui.store.get<any>('date').year); // 从本地存储获取'date'值的year属性
|
||||
|
||||
$.zui.store.forEach((key: string, value: any) => { // 遍历所有本地存储的条目
|
||||
console.log(value);
|
||||
});
|
||||
|
||||
console.log($.zui.store.key(0)); // 获取本地存储第一个条目的名称
|
||||
|
||||
$.zui.store.remove('name'); // 从本地存储移除‘name’的值
|
||||
$.zui.store.clear(); // 清空所有本地存储的条目
|
||||
|
||||
/* 以下操作的键值仅针对当前页面 */
|
||||
$.zui.store.pageSet('name', 'catouse'); // 使用本地存储设置'name'值为'catouse'
|
||||
$.zui.store.pageSet('date', { year: 2014, month: 8, day: 6 }); // 将一个对象存储到本地存储
|
||||
|
||||
console.log($.zui.store.pageGet('name')); // 从本地存储获取'name'的值
|
||||
console.log($.zui.store.pageGet('date').year); // 从本地存储获取'date'值的year属性
|
||||
|
||||
$.zui.store.pageRemove('name'); // 从本地存储移除‘name’的值
|
||||
$.zui.store.pageClear(); // 清空所有本地存储的条目
|
||||
|
||||
/**
|
||||
* modal
|
||||
*/
|
||||
$('#myModal').modal({
|
||||
keyboard: false,
|
||||
show: true
|
||||
});
|
||||
|
||||
/**
|
||||
* modal trigger
|
||||
*/
|
||||
|
||||
$('#triggerButton').modalTrigger({ title: '新的标题' });
|
||||
|
||||
/* 使用触发器对象直接显示 */
|
||||
(new $.zui.ModalTrigger({ title: '新的标题' })).show();
|
||||
$.zui.modalTrigger.show({ title: '标题' });
|
||||
|
||||
/**
|
||||
* tabs
|
||||
*/
|
||||
$().tab('show');
|
||||
$('#myTabLink').tab('show');
|
||||
|
||||
/**
|
||||
* tooltip
|
||||
*/
|
||||
$('[data-toggle="tooltip"]').tooltip();
|
||||
$('#element').tooltip('show');
|
||||
$('#element').tooltip('show', '这是新的工具提示内容');
|
||||
|
||||
/**
|
||||
* popover
|
||||
*/
|
||||
// 或者在初始化时指定弹出方向
|
||||
$('[data-toggle="popover"]').popover({
|
||||
placement: 'bottom'
|
||||
});
|
||||
$('#myPopover').popover('show');
|
||||
|
||||
/**
|
||||
* collapse
|
||||
*/
|
||||
$('#myCollapseContent').collapse({
|
||||
toggle: false
|
||||
});
|
||||
$().collapse('show');
|
||||
|
||||
$('#myCollapseContent').on('hidden.zui.collapse', () => {
|
||||
console.log('折叠内容已隐藏。');
|
||||
});
|
||||
|
||||
/**
|
||||
* carousel
|
||||
*/
|
||||
$('.carousel').carousel();
|
||||
|
||||
/**
|
||||
* datetime picker
|
||||
*/
|
||||
// 仅选择日期
|
||||
$(".form-date").datetimepicker(
|
||||
{
|
||||
language: "zh-CN",
|
||||
weekStart: 1,
|
||||
todayBtn: 1,
|
||||
autoclose: 1,
|
||||
todayHighlight: 1,
|
||||
startView: 2,
|
||||
minView: 2,
|
||||
forceParse: 0,
|
||||
format: "yyyy-mm-dd"
|
||||
});
|
||||
// 选择时间
|
||||
$(".form-time").datetimepicker({
|
||||
language: "zh-CN",
|
||||
weekStart: 1,
|
||||
todayBtn: 1,
|
||||
autoclose: 1,
|
||||
todayHighlight: 1,
|
||||
startView: 1,
|
||||
minView: 0,
|
||||
maxView: 1,
|
||||
forceParse: 0,
|
||||
format: 'hh:ii'
|
||||
});
|
||||
// 选择时间和日期
|
||||
$(".form-datetime").datetimepicker(
|
||||
{
|
||||
weekStart: 1,
|
||||
todayBtn: 1,
|
||||
autoclose: 1,
|
||||
todayHighlight: 1,
|
||||
startView: 2,
|
||||
forceParse: 0,
|
||||
showMeridian: 1,
|
||||
format: "yyyy-mm-dd hh:ii"
|
||||
});
|
||||
|
||||
// 仅选择日期
|
||||
$(".form-date").datetimepicker(
|
||||
{
|
||||
language: "zh-CN",
|
||||
weekStart: 1,
|
||||
todayBtn: 1,
|
||||
autoclose: 1,
|
||||
todayHighlight: 1,
|
||||
startView: 2,
|
||||
minView: 2,
|
||||
forceParse: 0,
|
||||
format: "yyyy-mm-dd"
|
||||
});
|
||||
// 选择时间
|
||||
$(".form-time").datetimepicker({
|
||||
language: "zh-CN",
|
||||
weekStart: 1,
|
||||
todayBtn: 1,
|
||||
autoclose: 1,
|
||||
todayHighlight: 1,
|
||||
startView: 1,
|
||||
minView: 0,
|
||||
maxView: 1,
|
||||
forceParse: 0,
|
||||
format: 'hh:ii'
|
||||
});
|
||||
|
||||
// /**
|
||||
// * chosen
|
||||
// */
|
||||
|
||||
// $('select.chosen-select').chosen({
|
||||
// no_results_text: '没有找到', // 当检索时没有找到匹配项时显示的提示文本
|
||||
// disable_search_threshold: 10, // 10 个以下的选择项则不显示检索框
|
||||
// search_contains: true // 从任意位置开始检索
|
||||
// });
|
||||
|
||||
/**
|
||||
* color
|
||||
*/
|
||||
// 创建颜色实例
|
||||
const myColor = new $.zui.Color('#095823');
|
||||
|
||||
// 调用实例方法
|
||||
const myHsl = myColor.toHsl();
|
||||
|
||||
const zuiPrimaryColor = $.zui.colorset.get('primary');
|
||||
console.log('ZUI primary color is', zuiPrimaryColor.toCssStr());
|
||||
|
||||
/**
|
||||
* draggable
|
||||
*/
|
||||
let count = 0;
|
||||
$('#draggableBtn').draggable({
|
||||
container: '#draggableBox',
|
||||
before: () => {
|
||||
console.log(count++ + ': ' + '[开始] 拖动...\n');
|
||||
return true;
|
||||
},
|
||||
drag: (e: DraggableEvent) => {
|
||||
console.log(count++ + ': ' + '拖动: pos = ' + JSON.stringify(e.pos) + ', offset = ' + JSON.stringify(e.offset) + '\n');
|
||||
// console.log('(' + e.pos.left + ', ' + e.pos.top + ')');
|
||||
},
|
||||
finish: (e: DraggableEvent) => {
|
||||
console.log(count++ + ': ' + '[完毕]：pos = ' + JSON.stringify(e.pos) + ', offset = ' + JSON.stringify(e.offset) + '\n');
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* droppable
|
||||
*/
|
||||
$('#multiDroppableContainer').droppable({
|
||||
selector: '.btn-droppable', // 定义允许拖放的元素
|
||||
target: '.droppable-target',
|
||||
start: () => {
|
||||
$('#multiDroppableContainer .droppable-target').removeClass('panel-warning').removeClass('panel-success').find('.panel-heading').text('拖动到这里吗？');
|
||||
},
|
||||
drop: (event: DroppableEvent) => {
|
||||
$('#multiDroppableContainer .droppable-target').removeClass('panel-success').removeClass('panel-warning');
|
||||
if (event.target && event.element) {
|
||||
const elementId = event.element.find('.btn-droppable-id').text();
|
||||
let msg = '真棒！';
|
||||
event.target.addClass('panel-success').find('.panel-heading').text('成功将【按钮#' + elementId + '】拖到目的地。');
|
||||
msg += '成功拖动【按钮#' + elementId + '】到区域 ' + event.target.find('.area-name').text();
|
||||
|
||||
$.zui.messager.show(msg);
|
||||
}
|
||||
},
|
||||
drag: (event: DroppableEvent) => {
|
||||
$('#multiDroppableContainer .droppable-target').removeClass('panel-success').removeClass('panel-warning');
|
||||
if (event.target) event.target.addClass('panel-warning');
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* sortable
|
||||
*/
|
||||
// 定义选项对象
|
||||
const options = {
|
||||
selector: '.sortable-item',
|
||||
finish: (e: SortEvent) => {
|
||||
console.log('排序完成：', e);
|
||||
},
|
||||
// 设置更多选项...
|
||||
};
|
||||
|
||||
// 初始化时传入选项参数
|
||||
$('#sortableList').sortable(options);
|
||||
|
||||
/**
|
||||
* selectable
|
||||
*/
|
||||
|
||||
$('#selectable').selectable({
|
||||
selector: 'div', // #selectable 内的所有 div 都可以进行选中
|
||||
rangeStyle: {
|
||||
border: '1px solid red' // 拖选范围指示矩形边框设置为红色
|
||||
},
|
||||
finish: (data: SelectableEvent) => { // 选择结束时的回调函数
|
||||
// 所有元素的选中或非选中状态
|
||||
console.log(data.selections);
|
||||
|
||||
// 所有已选中的元素 ID 值的数组
|
||||
console.log(data.selected);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* image cutter
|
||||
*/
|
||||
|
||||
// 获取 imgCutter 实例
|
||||
const myImgCutter = $('#imgCutter').data('zui.imgCutter');
|
||||
|
||||
// 调用 resetImg 方法
|
||||
myImgCutter.resetImage('http://zui.sexy/docs/img/img1.jpg');
|
||||
|
||||
// 调用 getData 方法
|
||||
const myImgCutterData = myImgCutter.getData();
|
||||
|
||||
/**
|
||||
* treemenu
|
||||
*/
|
||||
const myTreeData = [{
|
||||
title: '水果',
|
||||
url: 'http://zui.sexy',
|
||||
open: true,
|
||||
children: [
|
||||
{ title: '橘子' },
|
||||
{
|
||||
title: '瓜',
|
||||
children: [
|
||||
{ title: '西瓜' },
|
||||
{ title: '黄瓜' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}, {
|
||||
title: '坚果',
|
||||
children: [
|
||||
{ title: '向日葵' },
|
||||
{ title: '瓜子' }
|
||||
]
|
||||
}, {
|
||||
title: '蔬菜'
|
||||
}];
|
||||
|
||||
$('#myTree').tree({ data: myTreeData });
|
||||
|
||||
/**
|
||||
* datatable
|
||||
*/
|
||||
$('table.datatable').datatable({ sortable: true });
|
||||
// 使用data参数更新数据：
|
||||
$('table.datatable').datatable('load', {
|
||||
cols: [
|
||||
{ width: 80, text: '#', type: 'number', flex: false, colClass: 'text-center' },
|
||||
{ width: 160, text: '时间', type: 'date', flex: false, sort: 'down' },
|
||||
{ width: 80, text: '名称', type: 'string', flex: true, colClass: '' }
|
||||
],
|
||||
rows: [
|
||||
{ checked: false, data: [1, '2016-01-18 11:09:36', '新的名称示例1'] },
|
||||
{ checked: false, data: [2, '2016-01-22 12:06:16', '新的名称示例2'] },
|
||||
// 更多数据
|
||||
]
|
||||
});
|
||||
|
||||
/**
|
||||
* uplaoder
|
||||
*/
|
||||
$('#myUploader').uploader({
|
||||
url: '...',
|
||||
// ...,
|
||||
onUploadFile: (file: FileObj) => {
|
||||
console.log('上传成功', file);
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user