搜索词>>npm 耗时0.0020
  • npm配置国内镜像源

    npm配置国内镜像源环境说明下载的nodejs版本10.80安装nodejs后自带的npm版本为6.2.0初始化npm新装的npm需要执行初始化命令来配置一些信息,生成package.json初始化命令npm init会提示输入一些基本信息如名称、国别、许可等等,如果不需要特别设置一路回车即可配置国内npm镜像源临时配置:npm --registry https://registry.npm.taobao.org install express永久配置npm config set registry https://registry.npm.taobao.org验证命令npm config get registry或者npm info express
  • npm 配置私服库地址

    npm查看当前配置 npm config get registry设置新的配置 npm config set registry https://*.com/path/​​​​​​​代码段 小部件npm查看当前配置 npm config get registry设置新的配置 npm config set registry https://*.com/path/​​​​​​​代码段 小部件
  • webstorm中vue项目不能用ip访问解决

    在初始化完一个vue项目(基于vue-cli 和webpack)之后,我们可以通过 npm run dev来让这个项目跑起来在初始化完一个vue项目(基于vue-cli 和webpack)之后,我们可以通过 npm run dev来让这个项目跑起来。​默认方式运行  我们在浏览器里输入localhost:8080就可以访问该项目了。但是要是手机想访问的话,就得通过ip地址,但当我输入ip地址进行访问时,却发现不行。于是我找项目的配置文件,发现config/index.js,有个host的配置项,默认值为“localhost”,我把localhost改成ip地址,重启,发现可以访问,但localhost:8080这个地址就没办法访问了。​index.js修改本着一点强迫症,在网上百度的基础与向dalao请教的基础之上,找到了有个解决办法。既能通过ip地址访问,也能通过localhost访问。方法1.将index.js中的host的值改为‘0.0.0.0’方法2.修改package.json中script下dev的值,在后面加入--host 0.0.0.0 也可以解决​package.json修改  
  • vue2.x main.js中全局引用css的方法及问题解决

    步骤:1、配置文件webpack.config.js:  {     test:/\.css$/,     loader:'style-loader!css-loader'   }  坑1:-loader尾缀  坑2:Module b步骤:1、配置文件webpack.config.js:  {     test:/\.css$/,     loader:'style-loader!css-loader'   }  坑1:-loader尾缀  坑2:Module build failed: Unknown word 模块创建失败:未知文字????    解决方案:注掉整个css的配置,即:      //{         //test:/\.css$/,         //loader:'style-loader!css-loader'       //}2、入口文件main.js:  require('./assets/css/base.css');  或:import './assets/css/base.css';3、$npm install style-loader css-loader --save-dev4、调用css  <style>     @import './assets/css/base.css';   </style>
  • Vue 2.0项目配置CDN服务解决加载慢问题

    vue打包会把vue相关的组件打包到一个文件vendor.*.js(*是个随机数)步骤一 资源引入vue最外层index.html文件引入资源文<body>l;     <div id="app">l;</div>l;       <script srvue打包会把vue相关的组件打包到一个文件vendor.*.js(*是个随机数)步骤一 资源引入vue最外层index.html文件引入资源文<body>     <div id="app"></div>       <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>     <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>     <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script> </body>步骤二 添加配置在bulid/webpack.base.conf.js文件中,增加externals,将引用的外部模块导入,如下:module.exports = {   entry: {     app: './src/main.js'   },   externals:{     'vue': 'Vue',     'vue-router': 'VueRouter',     'vuex':'Vuex'   }  【注意】 externals的key:value不要随便修改,暂时理解为 key是npm安装使用的名称,value为组件对外提供的名称不可随意更改(打开组件源码可见)步骤三 去掉原有的引用1.main.js  文件中注释掉vue // import Vue from 'vue'2.router--> index.js  文件中注释掉 vue和 vue-router:// import Vue from 'vue' // import VueRouter from 'vue-router'3.修改名vue 使用路由配置为以下Vue.use(VueRouter)
  • java编程中使用nodejs的apidoc工具生成Java api文档

    java编程中使用nodejs的apidoc工具生成Java api美观的HTML文档,apidoc可以根据代码注释生成web api文档,支持大部分主流语言java编程中使用nodejs的apidoc工具生成Java api文档,apidoc可以根据代码注释生成web api文档,支持大部分主流语言<br /> 1.下载安装nodejs环境,(已安装请忽略)<br /> 下载地址:http://nodejs.cn/download/<br /> 如果不是很会,推荐下载msi文件格式的,会自动集成到系统中<br /> 2.安装apidoc工具<br /> 弹出:cmd窗口输入以下命令安装: <pre> <code>npm install apidoc -g</code></pre> 3.创建一些配置和文件夹<br />  创建一个存放Java源代码的文件夹myapp<br />  创建一个存放生成api文档的文件夹apidoc<br /> 4.创建json配置文件<br /> 在存放Java代码的根目录创建apidoc.json <pre> <code class="language-json">{ "name": "example", "version": "0.1.0", "description": "apiDoc basic example", "title": "Custom apiDoc browser title", "url" : "https://api.github.com/v1" }</code></pre> <br /> 5.执行命令 <pre> <code>apidoc -i pathto/myapp/ -o pathto/apidoc/</code></pre> 6.支持的api注释<br /> <img alt="注释" class="img-thumbnail" src="/assist/images/blog/e49a7f29-c8b4-4b91-9f1b-2930c7610a4b.png" /><br /> java example: <pre> <code class="language-java">package net.xqlee.example import net.xqlee.common.pojo.Result; /** *测试DOC * * @author xqlee * */ @RestController public class Example { /** * @apiVersion 1.0.0 * * @api {get} /apis/example.json 获取验证码 * * @apiName doexample * * @apiGroup exampleGroup * * @apiPermission none * * @apiParam {String} [timeStamp] 时间戳 * @apiParam {String} timeStamp2 时间戳2 * * @apiSuccessExample {json} 成功返回值: * { "id": "1be34f4a324c4123b0325ecf0593d70e", "data": { "image": "iVBORwCCAAAAAAAAAAAAAAAAA==" }, "code": "00000", "dateTime": "2017-05-23 14:00:23", "msg": null } * @apiErrorExample {json} 失败返回值: *{ "id": "1be34f4a324c4123b0325ecf0593d70e", "data": "", "code": "EEEEE", "dateTime": "2017-05-23 14:00:23", "msg": "系统异常" } */ @GetMapping("/apis/validation/getcode.json") public Result example(String name,String sex) { return "{}"; } } </code></pre> <br /> 7.其他参数参考<br /> http://apidocjs.com/#params<br /> <br />  
  • Spring MVC 5 接受对象集合/数组参数实战

    Spring MVC 5 接受对象集合参数实战,在之前,我一直以为http传输的参数是KEY-VALUE键值对的方式和文件流的形式。直到最近遇到新需求才知道还有一种RAW的数据类型。通过这种原生的数据类型进行传输需要指定传输的格式也就是HTTP的头部content type。接下来也将用raw这个类型的传输方式来实现mvc的对象集合参数接收。 ​​​​​​​<h2>引言</h2>     在之前,我一直以为http传输的参数是KEY-VALUE键值对的方式和文件流的形式。直到最近遇到新需求才知道还有一种RAW的数据类型。通过这种原生的数据类型进行传输需要指定传输的格式也就是HTTP的头部content type。接下来也将用raw这个类型的传输方式来实现mvc的对象集合参数接收。 <h2>一.创建一个spring mvc的web项目</h2>   为了方便,我这里创建的一个spring boot的web项目。大家都知道spring boot来创建spring 的web项目是非常快的。<br /> <br /> 下面是项目的结构图:<br /> <br /> <img alt="spring boot web项目结构图" class="img-thumbnail" src="/assist/images/blog/77431d8d204b4b8b8c5137cc5fc8b1f8.png" /> <h2>二.实战spring mvc 5接收集合对象参数编码</h2> <h3>2.1创建一个pojo对象</h3> 这里创建的一个Person的简单对象。该对象主要用来等会传递参数使用。 <pre> <code class="language-java">package net.xqlee.project.pojo; /** * 简单对象 * * @author xqlee * */ public class Persion { private String id; private String name; @Override public String toString() { return "ID:" + id + ",name:" + name; } public String getId() { return id; } public void setId(String id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } } </code></pre> *可以看到这个对象确实挺简单的。就两个属性以及属性的get/set方法。重写了下toString()方法用来等会打印输出测试。 <h3>2.2创建一个controller用来接收数组/集合对象</h3> <pre> <code class="language-java">package net.xqlee.project.controller; import java.util.List; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RestController; import net.xqlee.project.pojo.Persion; @RestController public class TestController { private static final Logger log = LoggerFactory.getLogger(TestController.class); @PostMapping("arrParams.json") public Object arrParams(@RequestBody List<Persion> list) { for (Persion persion : list) { log.info(persion.toString()); } return true; } } </code></pre> *注意,上面实现接收集合/数组对象的主要在于注解@RequestBody他会将请求的内容进行封装到list(如果请求的格式符合bean的要求) <h2>三.演示实战</h2> <h3>3.1启动spring boog项目</h3> <pre> <code class="language-html"> . ____ _ __ _ _ /\\ / ___'_ __ _ _(_)_ __ __ _ \ \ \ \ ( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \ \\/ ___)| |_)| | | | | || (_| | ) ) ) ) ' |____| .__|_| |_|_| |_\__, | / / / / =========|_|==============|___/=/_/_/_/ :: Spring Boot :: (v2.0.0.M6) 2017-11-19 20:20:38.489 INFO 1888 --- [ main] n.x.p.DemoSpringbootPublicApplication : Starting DemoSpringbootPublicApplication on DESKTOP-2RG0A6O with PID 1888 (D:\workplace\eclipse_mvn\demo-springboot-public\target\classes started by xqlee in D:\workplace\eclipse_mvn\demo-springboot-public) 2017-11-19 20:20:38.492 INFO 1888 --- [ main] n.x.p.DemoSpringbootPublicApplication : No active profile set, falling back to default profiles: default 2017-11-19 20:20:38.535 INFO 1888 --- [ main] ConfigServletWebServerApplicationContext : Refreshing org.springframework.boot.web.servlet.context.AnnotationConfigServletWebServerApplicationContext@419c5f1a: startup date [Sun Nov 19 20:20:38 CST 2017]; root of context hierarchy 2017-11-19 20:20:39.664 INFO 1888 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat initialized with port(s): 8080 (http) 2017-11-19 20:20:39.676 INFO 1888 --- [ main] o.apache.catalina.core.StandardService : Starting service [Tomcat] 2017-11-19 20:20:39.677 INFO 1888 --- [ main] org.apache.catalina.core.StandardEngine : Starting Servlet Engine: Apache Tomcat/8.5.23 2017-11-19 20:20:39.693 INFO 1888 --- [ost-startStop-1] o.a.catalina.core.AprLifecycleListener : The APR based Apache Tomcat Native library which allows optimal performance in production environments was not found on the java.library.path: [H:\TDDOWNLOAD\eclipse-jee-neon-3-win32-x86_64\eclipse\external\jdk\jdk1.8.0_40\bin;C:\WINDOWS\Sun\Java\bin;C:\WINDOWS\system32;C:\WINDOWS;D:/software/eclipse-v4.6.3/eclipse//external/jdk/jdk1.8.0_40/jre/bin/server;D:/software/eclipse-v4.6.3/eclipse//external/jdk/jdk1.8.0_40/jre/bin;D:/software/eclipse-v4.6.3/eclipse//external/jdk/jdk1.8.0_40/jre/lib/amd64;C:\ProgramData\Oracle\Java\javapath;C:\Program Files\ImageMagick-7.0.6-Q16;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files\TortoiseSVN\bin;C:\Program Files\Java\jdk1.8.0_102\bin;C:\Program Files\Java\jdk1.8.0_102;C:\Program Files\nodejs\;C:\Program Files\MySQL\MySQL Server 5.5\bin;C:\Users\xqlee\AppData\Local\Microsoft\WindowsApps;C:\Users\xqlee\AppData\Roaming\npm;D:\software\eclipse-v4.6.3\eclipse;;.] 2017-11-19 20:20:39.764 INFO 1888 --- [ost-startStop-1] o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring embedded WebApplicationContext 2017-11-19 20:20:39.764 INFO 1888 --- [ost-startStop-1] o.s.web.context.ContextLoader : Root WebApplicationContext: initialization completed in 1232 ms 2017-11-19 20:20:39.864 INFO 1888 --- [ost-startStop-1] o.s.b.w.servlet.ServletRegistrationBean : Mapping servlet: 'dispatcherServlet' to [/] 2017-11-19 20:20:39.868 INFO 1888 --- [ost-startStop-1] o.s.b.w.servlet.FilterRegistrationBean : Mapping filter: 'characterEncodingFilter' to: [/*] 2017-11-19 20:20:39.868 INFO 1888 --- [ost-startStop-1] o.s.b.w.servlet.FilterRegistrationBean : Mapping filter: 'hiddenHttpMethodFilter' to: [/*] 2017-11-19 20:20:39.868 INFO 1888 --- [ost-startStop-1] o.s.b.w.servlet.FilterRegistrationBean : Mapping filter: 'httpPutFormContentFilter' to: [/*] 2017-11-19 20:20:39.868 INFO 1888 --- [ost-startStop-1] o.s.b.w.servlet.FilterRegistrationBean : Mapping filter: 'requestContextFilter' to: [/*] 2017-11-19 20:20:40.134 INFO 1888 --- [ main] s.w.s.m.m.a.RequestMappingHandlerAdapter : Looking for @ControllerAdvice: org.springframework.boot.web.servlet.context.AnnotationConfigServletWebServerApplicationContext@419c5f1a: startup date [Sun Nov 19 20:20:38 CST 2017]; root of context hierarchy 2017-11-19 20:20:40.195 INFO 1888 --- [ main] s.w.s.m.m.a.RequestMappingHandlerMapping : Mapped "{[/arrParams.json],methods=[POST]}" onto public java.lang.Object net.xqlee.project.controller.TestController.arrParams(java.util.List<net.xqlee.project.pojo.Persion>) 2017-11-19 20:20:40.198 INFO 1888 --- [ main] s.w.s.m.m.a.RequestMappingHandlerMapping : Mapped "{[/error]}" onto public org.springframework.http.ResponseEntity<java.util.Map<java.lang.String, java.lang.Object>> org.springframework.boot.autoconfigure.web.servlet.error.BasicErrorController.error(javax.servlet.http.HttpServletRequest) 2017-11-19 20:20:40.199 INFO 1888 --- [ main] s.w.s.m.m.a.RequestMappingHandlerMapping : Mapped "{[/error],produces=[text/html]}" onto public org.springframework.web.servlet.ModelAndView org.springframework.boot.autoconfigure.web.servlet.error.BasicErrorController.errorHtml(javax.servlet.http.HttpServletRequest,javax.servlet.http.HttpServletResponse) 2017-11-19 20:20:40.220 INFO 1888 --- [ main] o.s.w.s.handler.SimpleUrlHandlerMapping : Mapped URL path [/webjars/**] onto handler of type [class org.springframework.web.servlet.resource.ResourceHttpRequestHandler] 2017-11-19 20:20:40.220 INFO 1888 --- [ main] o.s.w.s.handler.SimpleUrlHandlerMapping : Mapped URL path [/**] onto handler of type [class org.springframework.web.servlet.resource.ResourceHttpRequestHandler] 2017-11-19 20:20:40.251 INFO 1888 --- [ main] o.s.w.s.handler.SimpleUrlHandlerMapping : Mapped URL path [/**/favicon.ico] onto handler of type [class org.springframework.web.servlet.resource.ResourceHttpRequestHandler] 2017-11-19 20:20:40.375 INFO 1888 --- [ main] o.s.j.e.a.AnnotationMBeanExporter : Registering beans for JMX exposure on startup 2017-11-19 20:20:40.435 INFO 1888 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat started on port(s): 8080 (http) 2017-11-19 20:20:40.438 INFO 1888 --- [ main] n.x.p.DemoSpringbootPublicApplication : Started DemoSpringbootPublicApplication in 2.252 seconds (JVM running for 2.598) </code></pre> *可以看到spring boot项目已经在本地的8080端口启动 <h3>3.2通过postmain工具进行调用接口测试</h3> <img alt="调用spring web" class="img-thumbnail" src="/assist/images/blog/67408a8c86fd4cd08191aa40c4716d47.png" /><br /> 如上图所示,<br /> 1.选择传输参数的类型为raw<br /> 2.选择具体的参数类型为JSON<br /> 3.测试数据<br /> <br /> 点击postmain工具的发送请求按钮观察eclipse的控制台:<br /> <img alt="Java spring web接口调用图" class="img-thumbnail" src="/assist/images/blog/8e296a3612444d7fbf5f265122f66ce2.png" /><br /> 从上图中可以看到我们的集合参数已经成功接收。<br />  
  • artDialog v7使用说明及API文档

    artDialog v7 使用说明及API文档,artDialog ,artDialog具有bootstrap风格的弹窗组件<h1>artDialog具有bootstrap风格的弹窗组件</h1> <img alt="artdialog1" class="img-thumbnail" src="/assist/images/blog/859e118e483b47189690b6836e9d8416.png" /><br /> <img alt="artdialog2" class="img-thumbnail" src="/assist/images/blog/02fcbce67bc649a2b475ede25c9a3fb6.png" /><br /> <img alt="artdialog3" class="img-thumbnail" src="/assist/images/blog/c31c53851106483f908c0eb7394f4eab.png" /><br /> <img alt="artdialog4" class="img-thumbnail" src="/assist/images/blog/1875d350bcf54980b6206de142705dec.png" /><br /> <img alt="artdialog5" class="img-thumbnail" src="/assist/images/blog/b16cadd97d0448b79ac83ee18ac45630.png" /><br /> <img alt="artdialog6" class="img-thumbnail" src="/assist/images/blog/c267c1d7647340b7851a79c9514ff708.png" /><br />   <p>首页 > 文档与示例</p> <p>artDialog —— 经典、优雅的网页对话框控件。</p> <ol> <li>支持普通与 12 方向气泡状对话框</li> <li>完善的焦点处理,自动焦点附加与回退</li> <li>支持 ARIA 标准</li> <li>面向未来:基于 HTML5 Dialog 的 API</li> <li>支持标准与模态对话框</li> <li>丰富且友好的编程接口</li> <li>能自适应内容尺寸</li> </ol> <h2>引入 artDialog</h2> <h3>1.直接引用</h3> <pre> <code class="language-javascript"><script src="lib/jquery-1.10.2.js"></script> <script src="dist/dialog.js"></script></code></pre> <h3>2.作为 Webpack、RequireJS 或 SeaJS 的模块引入</h3> <p>使用 Npm 安装 <code>art-dialog</code></p> <pre> <code>npm install --save-dev art-dialog </code></pre> <pre> <code>var dialog = require('art-dialog');</code></pre> <p>**注意:**内部依赖全局模块<code>require('jquery')</code>,请注意全局模块配置是否正确</p> <ul> <li>如果需要支持 iframe 内容与拖拽,请引用加强版 dialog-plus.js</li> <li>jquery 最低要求版本为<code>1.7+</code></li> </ul> <h2>快速参考</h2> <h3>普通对话框</h3> <pre> <code class="language-javascript">var d = dialog({ title: '欢迎', content: '欢迎使用 artDialog 对话框组件!' }); d.show(); </code></pre> 运行 <h3>模态对话框</h3> <pre> <code class="language-javascript">var d = dialog({ title: 'message', content: '<input autofocus />' }); d.showModal(); </code></pre> 运行 <h3>气泡浮层</h3> <pre> <code class="language-javascript">var d = dialog({ content: 'Hello World!', quickClose: true// 点击空白处快速关闭 }); d.show(document.getElementById('quickref-bubble')); </code></pre> 运行 <p>12 个方向定位演示</p> <h3>添加按钮</h3> <p>1.确定与取消按钮:</p> <pre> <code class="language-javascript">var d = dialog({ title: '提示', content: '按钮回调函数返回 false 则不许关闭', okValue: '确定', ok: function () { this.title('提交中…'); return false; }, cancelValue: '取消', cancel: function () {} }); d.show(); </code></pre> 运行 <p>2.指定更多按钮:</p> <p>请参考 <code>button</code> 方法或参数。</p> <h3>控制对话框关闭</h3> <pre> <code class="language-javascript">var d = dialog({ content: '对话框将在两秒内关闭' }); d.show(); setTimeout(function () { d.close().remove(); }, 2000); </code></pre> 运行 <h3>给对话框左下角添加复选框</h3> <pre> <code class="language-javascript">var d = dialog({ title: '欢迎', content: '欢迎使用 artDialog 对话框组件!', ok: function () {}, statusbar: '<label><input type="checkbox">不再提醒</label>' }); d.show(); </code></pre> 运行 <h3>点按钮不关闭对话框</h3> <p>按钮事件返回 false 则不会触发关闭。</p> <pre> <code class="language-javascript">var d = dialog({ title: '欢迎', content: '欢迎使用 artDialog 对话框组件!', ok: function () { var that = this; this.title('正在提交..'); setTimeout(function () { that.close().remove(); }, 2000); return false; }, cancel: function () { alert('不许关闭'); return false; } }); d.show(); </code></pre> 运行 <h3>不显示关闭按钮</h3> <pre> <code class="language-javascript">var d = dialog({ title: '欢迎', content: '欢迎使用 artDialog 对话框组件!', cancel: false, ok: function () {} }); d.show(); </code></pre> 运行 <h3>创建 iframe 内容</h3> <p>artDialog 提供了一个增强版用来支持复杂的 iframe 套嵌的页面,可以在顶层页面创建一个可供 iframe 访问的对话框创建方法,例如:</p> <pre> <code class="language-javascript">require(['art-dialog/dist/dialog-plus'], function (dialog) { window.dialog = dialog; });</code></pre> <p>然后子页面就可以通过<code>top.dialog</code>控制对话框了。</p> <p>打开示例页面</p> <p>小提示:增强版的选项比标准版多了<code>url</code>、<code>oniframeload</code>这几个字段。</p> <h2>方法</h2> <p>若无特别说明,方法均支持链式调用。</p> <h3>show([anchor])</h3> <p>显示对话框。</p> <p>默认居中显示,支持传入元素节点或者事件对象。</p> <ul> <li>参数类型为<code>HTMLElement</code>:可吸附到元素上,同时对话框将呈现气泡样式。</li> <li>参数类型为<code>Event Object</code>:根据<code>event.pageX</code>与<code>event.pageY</code>定位。</li> </ul> <h4>示例</h4> <pre> <code class="language-javascript">var d = dialog(); d.content('hello world'); d.show(document.getElementById('api-show')); </code></pre> 运行 <pre> <code class="language-javascript">var d = dialog({ id: 'api-show-dialog', quickClose: true, content: '右键菜单' }); $(document).on('contextmenu', function (event) { d.show(event); return d.destroyed; }); </code></pre> 运行 <h3>showModal([anchor])</h3> <p>显示一个模态对话框。</p> <p>其余特性与参数可参见<code>show([anchor])</code>方法。</p> <h4>示例</h4> <pre> <code class="language-javascript">var d = dialog({ title: 'message', content: '<input autofocus />' }); d.showModal(); </code></pre> 运行 <h3>close([result])</h3> <p>关闭(隐藏)对话框。</p> <p>可接收一个返回值,可以参见 returnValue。</p> <p><strong>注意</strong>:<code>close()</code>方法只隐藏对话框,不会在 DOM 中删除,删除请使用<code>remove()</code>方法。</p> <h3>remove()</h3> <p>销毁对话框。</p> <p><strong>注意</strong>:不同于<code>close([result])</code>方法,<code>remove()</code>方法会从 DOM 中移出对话框相关节点,销毁后的对话框无法再次使用。</p> <p>对话框按钮点击后默认会依次触发 <code>close()</code>、<code>remove()</code> 方法。如果想手动控制对话框关闭可以如下操作:</p> <pre> <code class="language-javascript">var d = dialog(); // [..] d.close().remove(); </code></pre> 运行 <h3>content(html)</h3> <p>写入对话框内容。</p> <p><code>html</code>参数支持<code>String</code>、<code>HTMLElement</code>类型。</p> <h4>示例</h4> <p>传入字符串:</p> <pre> <code class="language-javascript">var d = dialog(); d.content('hello world'); d.show(); </code></pre> 运行 <p>传入元素节点:</p> <pre> <code class="language-javascript">var elem = document.getElementById('test'); dialog({ content: elem, id: 'EF893L' }).show(); </code></pre> <p>v6.0.4 更新:隐藏元素将会自动显示,并且对话框卸载的时候会放回到<code>body</code>中</p> <h3>title(text)</h3> <p> </p> <p>写入对话框标题。</p> <h4>示例</h4> <pre> <code class="language-javascript">var d = dialog(); d.title('hello world'); d.show(); </code></pre> 运行 <h3>width(value)</h3> <p>设置对话框宽度。</p> <h3>示例</h3> <pre> <code class="language-javascript">dialog({ content: 'hello world' }) .width(320) .show(); </code></pre> 运行 <h3>height(value)</h3> <p> </p> <p>设置对话框高度。</p> <h3>示例</h3> <pre> <code class="language-javascript">dialog({ content: 'hello world' }) .height(320) .show(); </code></pre> 运行 <h3>reset()</h3> <p> </p> <p>手动刷新对话框位置。</p> <p>通常动态改变了内容尺寸后需要刷新对话框位置。</p> <h3>button(args)</h3> <p> </p> <p>自定义按钮。</p> <p>参数请参考 选项<code>button</code>;同时支持传入 HTML 字符串填充按钮区域。</p> <h3>focus()</h3> <p> </p> <p>聚焦对话框(置顶)。</p> <h3>blur()</h3> <p> </p> <p>让对话框失去焦点。</p> <h3>addEventListener(type, callback)</h3> <p> </p> <p>添加事件。</p> <p>支持的事件有:<code>show</code>、<code>close</code>、<code>beforeremove</code>、<code>remove</code>、<code>reset</code>、<code>focus</code>、<code>blur</code></p> <h3>removeEventListener(type, callback)</h3> <p> </p> <p>删除事件。</p> <h3>dialog.get(id)</h3> <p> </p> <p>根据获取打开的对话框实例。</p> <p><strong>注意</strong>:这是一个静态方法。</p> <h3>dialog.getCurrent()</h3> <p> </p> <p>获取当前(置顶)对话框实例。</p> <p><strong>注意</strong>:这是一个静态方法。</p> <h2>配置参数</h2> <p> </p> <h3>content</h3> <p> </p> <p>设置消息内容。</p> <h4>类型</h4> <p>String, HTMLElement</p> <h4>示例</h4> <p>传入字符串:</p> <pre> <code class="language-javascript">dialog({ content: 'hello world!' }).show(); </code></pre> 运行 <p>传入元素节点:</p> <pre> <code class="language-javascript">var elem = document.getElementById('test'); dialog({ content: elem, id: 'EF893L' }).show(); </code></pre> <h3>title</h3> <p> </p> <p>标题内容。</p> <h4>类型</h4> <p>String</p> <h4>示例</h4> <pre> <code class="language-javascript">dialog({ title: 'hello world!' }).show(); </code></pre> 运行 <h3>statusbar</h3> <p> </p> <p>状态栏区域 HTML 代码。</p> <p>可以实现类似“不再提示”的复选框。<strong>注意</strong>:必须有按钮才会显示。</p> <h4>类型</h4> <p>String</p> <h4>示例</h4> <pre> <code class="language-javascript">var d = dialog({ title: '欢迎', content: '欢迎使用 artDialog 对话框组件!', ok: function () {}, statusbar: '<label><input type="checkbox">不再提醒</label>' }); d.show(); </code></pre> 运行 <h3>ok</h3> <p> </p> <p>确定按钮。</p> <p>回调函数<code>this</code>指向<code>dialog</code>对象,执行完毕默认关闭对话框,若返回 false 则阻止关闭。</p> <h4>类型</h4> <p>Function</p> <h4>示例</h4> <pre> <code class="language-javascript">dialog({ ok: function () { this .title('消息') .content('hello world!') .width(130); return false; } }).show(); </code></pre> 运行 <h3>okValue</h3> <p> </p> <p>(默认值: <code>"ok"</code>) 确定按钮文本。</p> <h4>类型</h4> <p>String</p> <h4>示例</h4> <pre> <code class="language-javascript">dialog({ okValue: '猛击我', ok: function () { this.content('hello world!'); return false; } }).show(); </code></pre> 运行 <h3>cancel</h3> <p> </p> <p>取消按钮。</p> <p>取消按钮也等同于标题栏的关闭按钮,若值为<code>false</code>则不显示关闭按钮。回调函数<code>this</code>指向<code>dialog</code>对象,执行完毕默认关闭对话框,若返回<code>false</code>则阻止关闭。</p> <h4>类型</h4> <p>Function, Boolean</p> <h4>示例</h4> <pre> <code class="language-javascript">dialog({ title: '消息', ok: function () {}, cancel: function () { alert('取消'); } }).show(); </code></pre> 运行 <pre> <code class="language-javascript">dialog({ title: '消息', content: '不显示关闭按钮', ok: function () {}, cancel: false }).show(); </code></pre> 运行 <h3>cancelValue</h3> <p> </p> <p>(默认值: <code>"cancel"</code>) 取消按钮文本。</p> <h4>类型</h4> <p>String</p> <h4>示例</h4> <pre> <code class="language-javascript">dialog({ cancelValue: '取消我', cancel: function () { alert('关闭'); } }).show(); </code></pre> 运行 <h3>cancelDisplay</h3> <p> </p> <p>(默认值: <code>true</code>) 是否显示取消按钮。</p> <h4>类型</h4> <p>Boolean</p> <h4>示例</h4> <pre> <code class="language-javascript">dialog({ title: '提示', content: '这是一个禁止关闭的对话框,并且没有取消按钮', cancel: function () { alert('禁止关闭'); return false; }, cancelDisplay: false }).show(); </code></pre> 运行 <h3>button</h3> <p> </p> <p>自定义按钮组。</p> <h4>类型</h4> <p>Array</p> <h4>选项</h4> <table class="table table-bordered table-hover"> <thead> <tr> <th>名称</th> <th>类型</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>value</td> <td>String</td> <td>按钮显示文本</td> </tr> <tr> <td>callback</td> <td>Function</td> <td>(可选) 回调函数<code>this</code>指向<code>dialog</code>对象,执行完毕默认关闭与销毁对话框(依次执行<code>close()</code>与<code>remove()</code>),若返回<code>false</code>则阻止关闭与销毁</td> </tr> <tr> <td>autofocus</td> <td>Boolean</td> <td>(默认值:<code>false</code>) 是否自动聚焦</td> </tr> <tr> <td>disabled</td> <td>Boolean</td> <td>(默认值: <code>false</code>) 是否禁用</td> </tr> </tbody> </table> <h4>示例</h4> <pre> <code class="language-javascript">dialog({ button: [ { value: '同意', callback: function () { this .content('你同意了'); return false; }, autofocus: true }, { value: '不同意', callback: function () { alert('你不同意') } }, { id: 'button-disabled', value: '无效按钮', disabled: true }, { value: '关闭我' } ] }).show(); </code></pre> 运行 <h3>width</h3> <p> </p> <p>设置对话框 <strong>内容</strong> 宽度。</p> <h4>类型</h4> <p>String, Number</p> <h4>示例</h4> <pre> <code class="language-javascript">dialog({ width: 460 }).show(); </code></pre> 运行 <pre> <code class="language-javascript">dialog({ width: '20em' }).show(); </code></pre> 运行 <h3>height</h3> <p> </p> <p>设置对话框 <strong>内容</strong> 高度。</p> <h4>类型</h4> <p>String, Number</p> <h4>示例</h4> <pre> <code class="language-javascript">dialog({ height: 460 }).show(); </code></pre> 运行 <pre> <code class="language-javascript">dialog({ height: '20em' }).show(); </code></pre> 运行 <h3>skin</h3> <p> </p> <p>设置对话框额外的<code>className</code>参数。</p> <p>多个<code>className</code>请使用空格隔开。</p> <h4>类型</h4> <p>String</p> <h4>示例</h4> <pre> <code class="language-javascript">dialog({ skin: 'min-dialog tips' }).show(); </code></pre> <h3>padding</h3> <p> </p> <p>(默认值: <em>继承 css 文件设置</em>) 设置消息内容与消息容器的填充边距,即 style <code>padding</code>属性</p> <h4>类型</h4> <p>String</p> <h4>示例</h4> <pre> <code class="language-javascript">dialog({ content: 'hello world', padding: 0 }).show(); </code></pre> 运行 <h3>fixed</h3> <p> </p> <p>(默认值: <code>false</code>) 开启固定定位。</p> <p>固定定位是 css2.1 <code>position</code>的一个属性,它能固定在浏览器某个地方,也不受滚动条拖动影响。IE6 与部分移动浏览器对其支持不好,内部会转成绝对定位。</p> <h4>类型</h4> <p>Boolean</p> <h4>示例</h4> <pre> <code class="language-javascript">dialog({ fixed: true, title: '消息', content: '请拖动滚动条查看' }).show(); </code></pre> 运行 <h3>align</h3> <p> </p> <p>(默认值: <code>"bottom left"</code>) 设置对话框与其他元素的对齐方式。</p> <p>如果<code>show(elem)</code>与<code>showModal(elem)</code>传入元素,<code>align</code>参数方可生效,支持如下对齐方式:</p> <ul> <li><code>"top left"</code></li> <li><code>"top"</code></li> <li><code>"top right"</code></li> <li><code>"right top"</code></li> <li><code>"right"</code></li> <li><code>"right bottom"</code></li> <li><code>"bottom right"</code></li> <li><code>"bottom"</code></li> <li><code>"bottom left"</code></li> <li><code>"left bottom"</code></li> <li><code>"left"</code></li> <li><code>"left top"</code></li> </ul> <h3>类型</h3> <p>String</p> <h3>示例</h3> <pre> <code class="language-javascript">var d = dialog({ align: 'left', content: 'Hello World!', quickClose: true }); d.show(document.getElementById('option-align')); </code></pre> 运行 <p>12 个方向定位演示</p> <h3>autofocus</h3> <p> </p> <p>(默认值: <code>true</code>) 是否支持自动聚焦。</p> <h4>类型</h4> <p>Boolean</p> <h3>quickClose</h3> <p> </p> <p>(默认值: false) 是否点击空白出快速关闭。</p> <h4>类型</h4> <p>Boolean</p> <h3>示例</h3> <pre> <code class="language-javascript">var d = dialog({ content: '点击空白处快速关闭', quickClose: true }); d.show(document.getElementById('option-quickClose')); </code></pre> 运行 <h3>zIndex</h3> <p> </p> <p>(默认值: <code>1024</code>) 重置全局<code>zIndex</code>初始值,用来改变对话框叠加高度。</p> <p>比如有时候配合外部浮动层 UI 组件,但是它们可能默认<code>zIndex</code>没有对话框高,导致无法浮动到对话框之上,这个时候你就可以给对话框指定一个较小的<code>zIndex</code>值。</p> <p>请注意这是一个会影响到全局的配置,后续出现的对话框叠加高度将重新按此累加。</p> <h4>类型</h4> <p>Number</p> <h4>示例</h4> <pre> <code class="language-javascript">dialog({ zIndex: 87 }).show(); </code></pre> 运行 <h3>onshow</h3> <p> </p> <p>对话框打开的事件。</p> <p>回调函数<code>this</code>指向<code>dialog</code>对象。</p> <h4>类型</h4> <p>Function</p> <h4>示例</h4> <pre> <code class="language-javascript">var d = dialog({ content: 'loading..', onshow: function () { this.content('dialog ready'); } }); d.show(); </code></pre> 运行 <h3>onclose</h3> <p> </p> <p>对话框关闭后执行的事件。</p> <p>回调函数<code>this</code>指向<code>dialog</code>对象。</p> <h4>类型</h4> <p>Function</p> <h4>示例</h4> <pre> <code class="language-javascript">var d = dialog({ onclose: function () { alert('对话框已经关闭'); }, ok: function () {} }); d.show(); </code></pre> 运行 <h3>onbeforeremove</h3> <p> </p> <p>对话框销毁之前事件。</p> <p>回调函数<code>this</code>指向<code>dialog</code>对象。</p> <h4>类型</h4> <p>Function</p> <h3>onremove</h3> <p> </p> <p>对话框销毁事件。</p> <p>回调函数<code>this</code>指向<code>dialog</code>对象。</p> <h4>类型</h4> <p>Function</p> <h4>示例</h4> <pre> <code class="language-javascript">var d = dialog({ onclose: function () { alert('对话框已经关闭'); }, onremove: function () { alert('对话框已经销毁'); }, ok: function () {} }); d.show(); </code></pre> 运行 <h3>onfocus</h3> <p> </p> <p>对话框获取焦点事件。</p> <p>回调函数<code>this</code>指向<code>dialog</code>对象。</p> <h4>类型</h4> <p>Function</p> <h3>onblur</h3> <p> </p> <p>对话框失去焦点事件。</p> <p>回调函数<code>this</code>指向<code>dialog</code>对象。</p> <h4>类型</h4> <p>Function</p> <h3>onreset</h3> <p> </p> <p>对话框位置重置事件。</p> <p>回调函数<code>this</code>指向<code>dialog</code>对象。</p> <h4>类型</h4> <p>Function</p> <h3>id</h3> <p> </p> <p>设定对话框唯一标识。</p> <ol> <li>可防止重复 ID 对话框弹出。</li> <li>支持使用<code>dialog.get(id)</code>获取某个对话框的接口。</li> </ol> <h4>类型</h4> <p>String</p> <h4>示例</h4> <pre> <code class="language-javascript">dialog({ id: 'id-demo', content: '再次点击运行看看' }).show(); dialog.get('id-demo').title('8888888888'); </code></pre> 运行 <h2>属性</h2> <h3>open</h3> <p>判断对话框是否被打开。</p> <h3>returnValue</h3> <p>对话框返回值。</p> <h4>示例</h4> <pre> <code class="language-javascript">var d = dialog({ title: '消息', content: '<input id="property-returnValue-demo" value="1" />', ok: function () { var value = $('#property-returnValue-demo').val(); this.close(value); this.remove(); } }); d.addEventListener('close', function () { alert(this.returnValue); }); d.show(); </code></pre> 运行