框架中对页面前端常用的表单控件,封装了调用方法,使用时只需要调用相应的执行方法,就可以格式化各个表单控件。
同时,对常用的一些web页面调用,也封装和改进了方法调用。比如ajax加载页面调用,页面弹出提示等。
1、load加载页面
1.1.加载链接内容到元素内:ncLoadUrl
功能:AJAX方式加载链接内容到指定Id元素内。
方法:ncLoadUrl(divId, url)
参数:
使用:
源码:
// ajax加载url内容到div区域。内容会放到div里面去。如果url为空,则将div清空。
function ncLoadUrl(divId, url) {
var divElement = $('#' + divId);
if (divElement.length === 0) {
ncShowMsgError("id错误,没有找到元素");
return;
}
if (url === '' || url === 'null') {
divElement.empty();
return;
}
//显示遮罩层
var index = layer.msg('加载中……', {
icon: 16
, shade: 0.01
});
//加载数据
divElement.load(url, function () {
//取消遮罩层
layer.close(index);
});
}
1.2.加载链接内容替换元素:ncLoadUrlReplace
功能:AJAX方式加载链接内容,并替换指定Id元素。
使用:
源码:
1.3.动态加载js文件并执行回调:ncLoadJsFile
1.4.动态加载css文件:ncLoadCssFile
2.加载模态弹框
2.1.加载模态页面:ncLoadModalDialog
2.2.关闭当前模态页面:ncCloseCurrentModalDialog
3.Ajax请求
3.1.直接请求,提示框显示结果:ncGetUrl
3.2.直接请求,弹框显示结果:ncGetUrlThenAlert
3.3.直接请求,成功后加载页面:ncGetUrlThenLoadUrlReplace
3.4.请求前弹框确认,提示框显示结果:ncGetUrlConfirm
3.5.请求前弹框确认,弹框显示结果:ncGetUrlConfirmThenAlert
3.6.请求前弹框确认,成功后加载页面:ncGetUrlConfirmThenLoadUrlReplace
3.7.在模态对话框请求链接,成功后关闭对话框,再刷新:ncGetUrlThenLoadUrlReplaceInModalDialog
3.8.在模态对话框请求链接,先确认,成功后关闭对话框,再刷新:ncGetUrlConfirmThenLoadUrlReplaceInModalDialog
4.post表单提交
4.1.直接提交表单:ncPostForm
4.2.直接提交表单,成功后加载页面:ncPostFormThenLoadUrlReplace
4.3.直接提交表单,成功后固定页面显示结果:ncPostFormThenShowPage
4.4.在弹框页面提交表单,成功后关闭对话框:ncPostFormThenLoadUrlReplaceInModalDialog
4.5.在弹框页面提交表单,成功后关闭对话框:ncPostModalFormThenLoadUrlReplace
5.表单控件格式化
4.1.格式化复选框:ncFormatCheckBox
4.2.格式化开关按钮
4.2.1.普通开关,点击无响应:ncFormatSwitch
4.2.2.点击后请求链接,返回提示:ncFormatSwitchGetUrl
4.2.3.点击后请求链接,返回提示,并加载页面:ncFormatSwitchGetUrlThenLoadUrl
4.2.4.点击后请求链接,返回提示,并加载替换页面:ncFormatSwitchGetUrlThenLoadUrlReplace
4.3.格式化数值输入框
4.3.1.常规整数输入框:ncFormatTouchSpin
4.3.2.可定义范围和前后缀整数:ncFormatTouchSpinInteger
4.3.3.可定义范围和前后缀及小数位数:ncFormatTouchSpinDecimal
4.3.4.常规整数输入框-按CSS名:ncFormatTouchSpinByCss
4.3.5.可定义范围和前后缀整数-按CSS名:formatTouchSpinIntegerByCss
4.3.6.可定义范围和前后缀及小数位数-按CSS名:ncFormatTouchSpinDecimalByCss
4.4.格式化标签输入框:ncFormatTagsInput
4.5.格式化日期控件
4.5.1.日期框:ncFormatDatePicker
4.5.2.日期时间框:ncFormatDateTimePicker
4.5.3.时间框:ncFormatTimePicker
4.5.4.年份框:ncFormatYearPicker
4.5.5.年月框:ncFormatYearMonthPicker
4.5.6.日期范围框:ncFormatDateRange
4.5.7.设置日期范围框值:ncSetDateRangeValue
4.5.8.日期时间范围框:ncFormatDateTimeRange
4.5.9.时间范围框:ncFormatTimeRange
4.5.10.年份范围框:ncFormatYearRange
4.5.11.年月范围框:ncFormatYearMonthRange
4.6.格式化提示:ncFormatTooltips
6.弹框提示框(需手动确认)
6.1.警告提示弹框:ncShowAlertWarning
6.2.成功提示弹框:ncShowAlertSuccess
6.3.错误提示弹框:ncShowAlertError
6.4.询问提示弹框:ncShowAlertQuestion
6.5.锁住提示弹框:ncShowAlertLock
6.6.崩溃提示弹框:ncShowAlertCrash
6.7.微笑提示弹框:ncShowAlertSmile
7.消息提示框(3秒消失)
7.1.警告提示框:ncShowMsgWarning
7.2.成功提示框:ncShowMsgSuccess
7.3.错误提示框:ncShowMsgError
7.4.询问提示框:ncShowMsgQuestion
7.5.锁住提示框:ncShowMsgLock
7.6.崩溃提示框:ncShowMsgCrash
7.7.微笑提示框:ncShowMsgSmile
5.列表页复选框选中操作