mirror of
https://github.com/zhigang1992/DefinitelyTyped.git
synced 2026-04-20 00:59:29 +08:00
336 lines
8.7 KiB
TypeScript
336 lines
8.7 KiB
TypeScript
/// <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);
|
||
}
|
||
});
|