1.noty插件
noty是一个jQuery的通知(信息提示)插件,灵活轻便,是一个非常棒的用于替代传统提示对话框的插件。需要引入以下文件方可使用:
<!--jQuery文件-->
<
script
type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></
script
>
<!--noty主文件-->
<
script
type="text/javascript" src="js/noty/jquery.noty.js"></
script
>
<!--noty提示信息位置的文件, 需要哪些位置就引入对应的脚本,这里为center,可以添加多个布局文件-->
<
script
type="text/javascript" src="js/noty/layouts/center.js"></
script
>
<!--noty主题样式文件,-->
<
script
type="text/javascript" src="js/noty/themes/default.js"></
script
>
|
如果你使用的是jQuery 1.6以下版本, 那么还需要引入promise.js文件。
示例:
noty({ text: "您确定要给当前公司加款 " + moneyStr + " 元么?", type: "information", dismissQueue: true, layout: "center", modal: true, theme: "relax", animation: { open: 'animated flipInX', close: 'animated flipOutX', easing: 'swing', speed: 500 }, buttons: [{ addClass: "btn btn-sm", text: "取消", onClick: function ($noty) { $noty.close(); } }, { addClass: "btn btn-primary btn-sm", text: "确定", onClick: function ($noty) { $noty.close(); var formData = new FormData(); <?php if ($GLOBALS['system_id'] == 1){ ?> formData.append('receipt', $('#addMoneyModal-receipt')[0].files[0]); <?php } ?> formData.append('type', 3); formData.append('user_id', user_id); formData.append('company_id', company_id); formData.append('add_money', moneyNum); formData.append('memo', memo); formData.append('token', token); $.ajax({ url: '../../includes/company/ajax_company_info.php', type: 'POST', data: formData, dataType: 'JSON', contentType: false, processData: false, success: function (json) { // Animate loader off screen $(".se-pre-con").fadeOut("slow"); // 创建成功 if (json.response === 0) { showSingleButtonNoty("加款成功", "success", -1); } else { showSingleButtonNoty(json.info, "warning", 0); } }, error: function (textStatus, errorThrown) { console.error(textStatus); console.error(errorThrown); // Animate loader off screen $(".se-pre-con").fadeOut("slow"); showSingleButtonNoty("系统内部错误,请重试,如果此问题重复出现,请联系管理员", "warning", 0); }, beforeSend: function () { // Animate loader on screen $(".se-pre-con").fadeIn("slow"); } }); } } ] }); |
2.modal插件
模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
如果您想要单独引用该插件的功能,那么您需要引用 modal.js。或者,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。
3.magicSuggest插件
magicSuggest是一个自动提示插件且支持多选,下面是具体的使用过程(bootstrap),只需引入以下两个文件即可使用。
<link href="/assets/css/magicsuggest-min.css" rel="stylesheet"> <script src="/assets/js/magicsuggest-min.js"></script> |