mirror of
https://gitee.com/dromara/MaxKey.git
synced 2025-12-07 09:28:49 +08:00
update jars versions
remove unused,update jars versions
This commit is contained in:
parent
61b77f2ccd
commit
6bc09f4d52
69
build.gradle
69
build.gradle
@ -125,9 +125,9 @@ subprojects {
|
||||
compileOnly group: 'javax.servlet', name: 'javax.servlet-api', version: '3.0.1'
|
||||
//apache
|
||||
compile group: 'commons-beanutils', name: 'commons-beanutils', version: '1.9.3'
|
||||
compile group: 'commons-codec', name: 'commons-codec', version: '1.12'
|
||||
compile group: 'commons-codec', name: 'commons-codec', version: '1.14'
|
||||
compile group: 'commons-collections', name: 'commons-collections', version: '3.2.2'
|
||||
compile group: 'org.apache.commons', name: 'commons-csv', version: '1.7'
|
||||
//compile group: 'org.apache.commons', name: 'commons-csv', version: '1.7'
|
||||
compile group: 'org.apache.commons', name: 'commons-dbcp2', version: '2.6.0'
|
||||
compile group: 'commons-dbutils', name: 'commons-dbutils', version: '1.7'
|
||||
compile group: 'org.apache.commons', name: 'commons-digester3', version: '3.2'
|
||||
@ -144,10 +144,10 @@ subprojects {
|
||||
compile group: 'org.apache.httpcomponents', name: 'fluent-hc', version: "${httpcomponentsVersion}"
|
||||
compile group: 'org.apache.httpcomponents', name: 'httpclient-cache', version: "${httpcomponentsVersion}"
|
||||
compile group: 'org.apache.httpcomponents', name: 'httpmime', version: "${httpcomponentsVersion}"
|
||||
compile group: 'org.apache.httpcomponents', name: 'httpcore', version: '4.4.10'
|
||||
compile group: 'org.apache.httpcomponents', name: 'httpcore', version: '4.4.13'
|
||||
compile group: 'org.apache.velocity', name: 'velocity', version: '1.7'
|
||||
compile group: 'velocity', name: 'velocity-dep', version: '1.4'
|
||||
compile group: 'org.freemarker', name: 'freemarker', version: '2.3.29'
|
||||
compile group: 'org.freemarker', name: 'freemarker', version: '2.3.30'
|
||||
compile group: 'org.apache.commons', name: 'not-yet-commons-ssl', version: '0.3.9'
|
||||
//logs
|
||||
compile group: 'org.apache.logging.log4j', name: 'log4j-1.2-api', version: "${log4jVersion}"
|
||||
@ -159,7 +159,7 @@ subprojects {
|
||||
compile group: 'org.apache.logging.log4j', name: 'log4j-web', version: "${log4jVersion}"
|
||||
compile group: 'org.slf4j', name: 'slf4j-api', version: "${slf4jVersion}"
|
||||
|
||||
compile group: 'org.jboss.logging', name: 'jboss-logging', version: '3.4.0.Final'
|
||||
compile group: 'org.jboss.logging', name: 'jboss-logging', version: '3.4.1.Final'
|
||||
|
||||
//spring
|
||||
compile group: 'org.springframework', name: 'spring-aop', version: "${springVersion}"
|
||||
@ -170,19 +170,19 @@ subprojects {
|
||||
compile group: 'org.springframework', name: 'spring-context-indexer', version: "${springVersion}"
|
||||
compile group: 'org.springframework', name: 'spring-context-support', version: "${springVersion}"
|
||||
compile group: 'org.springframework', name: 'spring-expression', version: "${springVersion}"
|
||||
compile group: 'org.springframework', name: 'spring-instrument', version: "${springVersion}"
|
||||
compile group: 'org.springframework', name: 'spring-jcl', version: "${springVersion}"
|
||||
//compile group: 'org.springframework', name: 'spring-instrument', version: "${springVersion}"
|
||||
//compile group: 'org.springframework', name: 'spring-jcl', version: "${springVersion}"
|
||||
compile group: 'org.springframework', name: 'spring-jdbc', version: "${springVersion}"
|
||||
compile group: 'org.springframework', name: 'spring-jms', version: "${springVersion}"
|
||||
compile group: 'org.springframework', name: 'spring-messaging', version: "${springVersion}"
|
||||
compile group: 'org.springframework', name: 'spring-orm', version: "${springVersion}"
|
||||
//compile group: 'org.springframework', name: 'spring-jms', version: "${springVersion}"
|
||||
//compile group: 'org.springframework', name: 'spring-messaging', version: "${springVersion}"
|
||||
//compile group: 'org.springframework', name: 'spring-orm', version: "${springVersion}"
|
||||
compile group: 'org.springframework', name: 'spring-oxm', version: "${springVersion}"
|
||||
compile group: 'org.springframework', name: 'spring-test', version: "${springVersion}"
|
||||
compile group: 'org.springframework', name: 'spring-tx', version: "${springVersion}"
|
||||
compile group: 'org.springframework', name: 'spring-web', version: "${springVersion}"
|
||||
compile group: 'org.springframework', name: 'spring-webflux', version: "${springVersion}"
|
||||
//compile group: 'org.springframework', name: 'spring-webflux', version: "${springVersion}"
|
||||
compile group: 'org.springframework', name: 'spring-webmvc', version: "${springVersion}"
|
||||
compile group: 'org.springframework', name: 'spring-websocket', version: "${springVersion}"
|
||||
//compile group: 'org.springframework', name: 'spring-websocket', version: "${springVersion}"
|
||||
testCompile group: 'org.springframework', name: 'spring-test', version: "${springVersion}"
|
||||
//spring-security
|
||||
compile group: 'org.springframework.security', name: 'spring-security-core', version: "${springSecurityVersion}"
|
||||
compile group: 'org.springframework.security', name: 'spring-security-web', version: "${springSecurityVersion}"
|
||||
@ -202,13 +202,14 @@ subprojects {
|
||||
compile group: 'org.opensaml', name: 'openws', version: '1.5.4'
|
||||
compile group: 'org.opensaml', name: 'xmltooling', version: '1.4.4'
|
||||
|
||||
compile group: 'com.nimbusds', name: 'nimbus-jose-jwt', version: '8.8'
|
||||
//jose-jwt
|
||||
compile group: 'com.nimbusds', name: 'nimbus-jose-jwt', version: '8.10'
|
||||
compile group: 'net.jcip', name: 'jcip-annotations', version: '1.0'
|
||||
compile group: 'net.minidev', name: 'json-smart', version: '2.3'
|
||||
compile group: 'net.minidev', name: 'asm', version: '1.0.2'
|
||||
|
||||
compile group: 'cn.hutool', name: 'hutool-core', version: '5.1.2'
|
||||
compile group: 'cn.hutool', name: 'hutool-http', version: '5.1.2'
|
||||
//oauth third party
|
||||
compile group: 'cn.hutool', name: 'hutool-core', version: '5.2.2'
|
||||
compile group: 'cn.hutool', name: 'hutool-http', version: '5.2.2'
|
||||
compile group: 'me.zhyd.oauth', name: 'JustAuth', version: '1.13.2'
|
||||
|
||||
compile group: 'org.javassist', name: 'javassist', version: '3.23.0-GA'
|
||||
@ -226,51 +227,51 @@ subprojects {
|
||||
compile group: 'com.sun.xml.bind', name: 'jaxb-core', version: '2.3.0.1'
|
||||
compile group: 'com.sun.xml.bind', name: 'jaxb-impl', version: '2.3.2'
|
||||
compile group: 'com.sun.xml.bind', name: 'jaxb-xjc', version: '2.3.2'
|
||||
|
||||
//crypto
|
||||
compile group: 'org.bouncycastle', name: 'bcpkix-jdk15on', version: "${bouncycastleVersion}"
|
||||
compile group: 'org.bouncycastle', name: 'bcprov-jdk15on', version: "${bouncycastleVersion}"
|
||||
compile group: 'org.bouncycastle', name: 'bcprov-ext-jdk15on', version: "${bouncycastleVersion}"
|
||||
compile group: 'com.google.crypto.tink', name: 'tink', version: '1.2.2'
|
||||
|
||||
//kaptcha
|
||||
compile group: 'com.jhlabs', name: 'filters', version: '2.0.235-1'
|
||||
compile group: 'com.github.penggle', name: 'kaptcha', version: '2.3.2'
|
||||
//json
|
||||
compile group: 'com.google.code.gson', name: 'gson', version: '2.8.5'
|
||||
compile group: 'com.google.code.gson', name: 'gson', version: '2.8.6'
|
||||
compile group: 'org.codehaus.jackson', name: 'jackson-all', version: '1.8.5'
|
||||
compile group: 'com.fasterxml.jackson.core', name: 'jackson-databind', version: "${jacksonVersion}"
|
||||
compile group: 'com.fasterxml.jackson.core', name: 'jackson-core', version: "${jacksonVersion}"
|
||||
compile group: 'com.fasterxml.jackson.core', name: 'jackson-annotations', version: "${jacksonVersion}"
|
||||
compile group: 'com.fasterxml', name: 'classmate', version: '1.5.0'
|
||||
compile group: 'com.alibaba', name: 'fastjson', version: '1.2.62'
|
||||
compile group: 'com.alibaba', name: 'fastjson', version: '1.2.66'
|
||||
|
||||
compile group: 'org.reactivestreams', name: 'reactive-streams', version: '1.0.2'
|
||||
compile group: 'io.projectreactor', name: 'reactor-core', version: '3.2.10.RELEASE'
|
||||
compile group: 'eu.tekul', name: 'szxcvbn_2.9.2', version: '0.2'
|
||||
|
||||
compile group: 'org.quartz-scheduler', name: 'quartz', version: '2.2.3'
|
||||
//quartz
|
||||
compile group: 'org.quartz-scheduler', name: 'quartz', version: '2.3.2'
|
||||
|
||||
//database
|
||||
compile group: 'mysql', name: 'mysql-connector-java', version: '5.1.48'
|
||||
compile group: 'com.alibaba', name: 'druid', version: '1.1.21'
|
||||
compile group: 'redis.clients', name: 'jedis', version: '3.0.1'
|
||||
compile group: 'org.ehcache', name: 'ehcache', version: '3.5.3'
|
||||
compile group: 'redis.clients', name: 'jedis', version: '3.2.0'
|
||||
compile group: 'org.ehcache', name: 'ehcache', version: '3.8.1'
|
||||
//mybatis
|
||||
compile group: 'org.mybatis', name: 'mybatis', version: '3.5.3'
|
||||
compile group: 'org.mybatis', name: 'mybatis-spring', version: '2.0.3'
|
||||
compile group: 'org.mybatis', name: 'mybatis', version: '3.5.4'
|
||||
compile group: 'org.mybatis', name: 'mybatis-spring', version: '2.0.4'
|
||||
//hibernate
|
||||
compile group: 'org.hibernate.validator', name: 'hibernate-validator', version: "${hibernateVersion}"
|
||||
compile group: 'org.hibernate', name: 'hibernate-validator-cdi', version: "${hibernateVersion}"
|
||||
compile group: 'org.hibernate.validator', name: 'hibernate-validator-annotation-processor', version: "${hibernateVersion}"
|
||||
|
||||
compile group: 'joda-time', name: 'joda-time', version: '2.10'
|
||||
compile group: 'org.yaml', name: 'snakeyaml', version: '1.24'
|
||||
compile group: 'joda-time', name: 'joda-time', version: '2.10.5'
|
||||
compile group: 'org.yaml', name: 'snakeyaml', version: '1.26'
|
||||
compile group: 'net.sourceforge.nekohtml', name: 'nekohtml', version: '1.9.22'
|
||||
compile group: 'org.jdom', name: 'jdom', version: '2.0.2'
|
||||
compile group: 'com.google.zxing', name: 'core', version: '3.4.0'
|
||||
compile group: 'com.google.guava', name: 'guava', version: '27.1-jre'
|
||||
compile group: 'ognl', name: 'ognl', version: '3.2.9'
|
||||
compile group: 'cglib', name: 'cglib', version: '3.2.12'
|
||||
compile group: 'org.ow2.asm', name: 'asm', version: '7.0'
|
||||
compile group: 'com.google.guava', name: 'guava', version: '28.2-jre'
|
||||
compile group: 'ognl', name: 'ognl', version: '3.2.14'
|
||||
compile group: 'cglib', name: 'cglib', version: '3.3.0'
|
||||
compile group: 'org.ow2.asm', name: 'asm', version: '7.3.1'
|
||||
compile group: 'aopalliance', name: 'aopalliance', version: '1.0'
|
||||
compile group: 'org.aspectj', name: 'aspectjtools', version: '1.9.4'
|
||||
compile group: 'dom4j', name: 'dom4j', version: '1.6.1'
|
||||
@ -281,7 +282,7 @@ subprojects {
|
||||
compile group: 'com.thoughtworks.xstream', name: 'xstream', version: '1.4.10'
|
||||
testCompile group: 'xmlunit', name: 'xmlunit', version: '1.6'
|
||||
|
||||
compile group: 'com.belerweb', name: 'pinyin4j', version: '2.5.1'
|
||||
//compile group: 'com.belerweb', name: 'pinyin4j', version: '2.5.1'
|
||||
|
||||
testCompile group: 'org.mockito', name: 'mockito-all', version: '1.10.19'
|
||||
|
||||
|
||||
@ -5,12 +5,12 @@ author =shimingxy
|
||||
|
||||
#Version For use jar
|
||||
jackson2Version =2.9.8
|
||||
log4jVersion =2.12.0
|
||||
springVersion =5.2.2.RELEASE
|
||||
springBootVersion =2.2.1.RELEASE
|
||||
springSecurityVersion =5.2.1.RELEASE
|
||||
hibernateVersion =6.0.17.Final
|
||||
slf4jVersion =1.7.26
|
||||
jacksonVersion =2.9.9
|
||||
bouncycastleVersion =1.60
|
||||
httpcomponentsVersion =4.5.6
|
||||
log4jVersion =2.13.1
|
||||
springVersion =5.2.4.RELEASE
|
||||
springBootVersion =2.2.5.RELEASE
|
||||
springSecurityVersion =5.3.0.RELEASE
|
||||
hibernateVersion =6.1.2.Final
|
||||
slf4jVersion =1.7.30
|
||||
jacksonVersion =2.10.3
|
||||
bouncycastleVersion =1.64
|
||||
httpcomponentsVersion =4.5.12
|
||||
|
||||
@ -9,12 +9,6 @@ import java.util.List;
|
||||
import java.util.Map;
|
||||
import java.util.regex.Pattern;
|
||||
|
||||
import net.sourceforge.pinyin4j.PinyinHelper;
|
||||
import net.sourceforge.pinyin4j.format.HanyuPinyinCaseType;
|
||||
import net.sourceforge.pinyin4j.format.HanyuPinyinOutputFormat;
|
||||
import net.sourceforge.pinyin4j.format.HanyuPinyinToneType;
|
||||
import net.sourceforge.pinyin4j.format.exception.BadHanyuPinyinOutputFormatCombination;
|
||||
|
||||
public final class StringUtils {
|
||||
|
||||
/**
|
||||
@ -413,7 +407,7 @@ public final class StringUtils {
|
||||
* @param first true is Convert first,else all
|
||||
* @return 拼音
|
||||
*/
|
||||
public static String hanYu2Pinyin(String hanYu,boolean first){
|
||||
/* public static String hanYu2Pinyin(String hanYu,boolean first){
|
||||
String pinyin = "";
|
||||
char[] nameChar = hanYu.toCharArray();
|
||||
HanyuPinyinOutputFormat defaultFormat = new HanyuPinyinOutputFormat();
|
||||
@ -436,7 +430,7 @@ public final class StringUtils {
|
||||
}
|
||||
return pinyin;
|
||||
}
|
||||
|
||||
*/
|
||||
public static Map<String,String> aduserName2Map(String aduserName) {
|
||||
if(isNullOrBlank(aduserName)) {
|
||||
return null;
|
||||
|
||||
@ -105,8 +105,8 @@ public class UserInfoController {
|
||||
}
|
||||
|
||||
userInfo.setId(userInfo.generateId());
|
||||
userInfo.setNameZHShortSpell(StringUtils.hanYu2Pinyin(userInfo.getDisplayName(), true));
|
||||
userInfo.setNameZHSpell(StringUtils.hanYu2Pinyin(userInfo.getDisplayName(), false));
|
||||
//userInfo.setNameZHShortSpell(StringUtils.hanYu2Pinyin(userInfo.getDisplayName(), true));
|
||||
//userInfo.setNameZHSpell(StringUtils.hanYu2Pinyin(userInfo.getDisplayName(), false));
|
||||
if( userInfoService.insert(userInfo)) {
|
||||
new Message(WebContext.getI18nValue(OPERATEMESSAGE.INSERT_SUCCESS),userInfo,MessageType.success,OperateType.add,MessageScope.DB);
|
||||
}
|
||||
@ -162,8 +162,8 @@ public class UserInfoController {
|
||||
}
|
||||
_logger.info(userInfo.getExtraAttributeName());
|
||||
_logger.info(userInfo.getExtraAttributeValue());
|
||||
userInfo.setNameZHShortSpell(StringUtils.hanYu2Pinyin(userInfo.getDisplayName(), true));
|
||||
userInfo.setNameZHSpell(StringUtils.hanYu2Pinyin(userInfo.getDisplayName(), false));
|
||||
//userInfo.setNameZHShortSpell(StringUtils.hanYu2Pinyin(userInfo.getDisplayName(), true));
|
||||
//userInfo.setNameZHSpell(StringUtils.hanYu2Pinyin(userInfo.getDisplayName(), false));
|
||||
convertExtraAttribute(userInfo) ;
|
||||
_logger.info(userInfo.getExtraAttribute());
|
||||
if(userInfoService.update(userInfo)) {
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
bower_components
|
||||
@ -1,44 +0,0 @@
|
||||
module.exports = function (grunt) {
|
||||
|
||||
grunt.initConfig({
|
||||
pkg: grunt.file.readJSON('package.json'),
|
||||
meta: {
|
||||
banner: '/*! <%= pkg.name %> v<%= pkg.version %> | <%= pkg.homepage %> */\n'
|
||||
},
|
||||
unwrap: {
|
||||
options: {
|
||||
base: './src',
|
||||
globalBase: './src/global_modules',
|
||||
name: 'dialog',
|
||||
namespace: 'window',
|
||||
banner: '<%= meta.banner %>'
|
||||
},
|
||||
'dialog.js': {
|
||||
src: './src/dialog.js',
|
||||
dest: './dist/dialog.js'
|
||||
},
|
||||
'dialog-plus.js': {
|
||||
src: './src/dialog-plus.js',
|
||||
dest: './dist/dialog-plus.js'
|
||||
}
|
||||
},
|
||||
uglify: {
|
||||
options: {
|
||||
banner: '<%= meta.banner %>'
|
||||
},
|
||||
'dialog.js': {
|
||||
src: './dist/dialog.js',
|
||||
dest: './dist/dialog-min.js'
|
||||
},
|
||||
'dialog-plus.js': {
|
||||
src: './dist/dialog-plus.js',
|
||||
dest: './dist/dialog-plus-min.js'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
grunt.loadNpmTasks('grunt-unwrap');
|
||||
grunt.loadNpmTasks('grunt-contrib-uglify');
|
||||
grunt.registerTask('default', ['unwrap', 'uglify']);
|
||||
|
||||
};
|
||||
@ -1,56 +0,0 @@
|
||||
GNU LESSER GENERAL PUBLIC LICENSE
|
||||
Version 3, 29 June 2007
|
||||
|
||||
Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
|
||||
|
||||
Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed.
|
||||
|
||||
This version of the GNU Lesser General Public License incorporates the terms and conditions of version 3 of the GNU General Public License, supplemented by the additional permissions listed below.
|
||||
|
||||
0. Additional Definitions.
|
||||
As used herein, “this License” refers to version 3 of the GNU Lesser General Public License, and the “GNU GPL” refers to version 3 of the GNU General Public License.
|
||||
|
||||
“The Library” refers to a covered work governed by this License, other than an Application or a Combined Work as defined below.
|
||||
|
||||
An “Application” is any work that makes use of an interface provided by the Library, but which is not otherwise based on the Library. Defining a subclass of a class defined by the Library is deemed a mode of using an interface provided by the Library.
|
||||
|
||||
A “Combined Work” is a work produced by combining or linking an Application with the Library. The particular version of the Library with which the Combined Work was made is also called the “Linked Version”.
|
||||
|
||||
The “Minimal Corresponding Source” for a Combined Work means the Corresponding Source for the Combined Work, excluding any source code for portions of the Combined Work that, considered in isolation, are based on the Application, and not on the Linked Version.
|
||||
|
||||
The “Corresponding Application Code” for a Combined Work means the object code and/or source code for the Application, including any data and utility programs needed for reproducing the Combined Work from the Application, but excluding the System Libraries of the Combined Work.
|
||||
|
||||
1. Exception to Section 3 of the GNU GPL.
|
||||
You may convey a covered work under sections 3 and 4 of this License without being bound by section 3 of the GNU GPL.
|
||||
|
||||
2. Conveying Modified Versions.
|
||||
If you modify a copy of the Library, and, in your modifications, a facility refers to a function or data to be supplied by an Application that uses the facility (other than as an argument passed when the facility is invoked), then you may convey a copy of the modified version:
|
||||
|
||||
a) under this License, provided that you make a good faith effort to ensure that, in the event an Application does not supply the function or data, the facility still operates, and performs whatever part of its purpose remains meaningful, or
|
||||
b) under the GNU GPL, with none of the additional permissions of this License applicable to that copy.
|
||||
3. Object Code Incorporating Material from Library Header Files.
|
||||
The object code form of an Application may incorporate material from a header file that is part of the Library. You may convey such object code under terms of your choice, provided that, if the incorporated material is not limited to numerical parameters, data structure layouts and accessors, or small macros, inline functions and templates (ten or fewer lines in length), you do both of the following:
|
||||
|
||||
a) Give prominent notice with each copy of the object code that the Library is used in it and that the Library and its use are covered by this License.
|
||||
b) Accompany the object code with a copy of the GNU GPL and this license document.
|
||||
4. Combined Works.
|
||||
You may convey a Combined Work under terms of your choice that, taken together, effectively do not restrict modification of the portions of the Library contained in the Combined Work and reverse engineering for debugging such modifications, if you also do each of the following:
|
||||
|
||||
a) Give prominent notice with each copy of the Combined Work that the Library is used in it and that the Library and its use are covered by this License.
|
||||
b) Accompany the Combined Work with a copy of the GNU GPL and this license document.
|
||||
c) For a Combined Work that displays copyright notices during execution, include the copyright notice for the Library among these notices, as well as a reference directing the user to the copies of the GNU GPL and this license document.
|
||||
d) Do one of the following:
|
||||
0) Convey the Minimal Corresponding Source under the terms of this License, and the Corresponding Application Code in a form suitable for, and under terms that permit, the user to recombine or relink the Application with a modified version of the Linked Version to produce a modified Combined Work, in the manner specified by section 6 of the GNU GPL for conveying Corresponding Source.
|
||||
1) Use a suitable shared library mechanism for linking with the Library. A suitable mechanism is one that (a) uses at run time a copy of the Library already present on the user's computer system, and (b) will operate properly with a modified version of the Library that is interface-compatible with the Linked Version.
|
||||
e) Provide Installation Information, but only if you would otherwise be required to provide such information under section 6 of the GNU GPL, and only to the extent that such information is necessary to install and execute a modified version of the Combined Work produced by recombining or relinking the Application with a modified version of the Linked Version. (If you use option 4d0, the Installation Information must accompany the Minimal Corresponding Source and Corresponding Application Code. If you use option 4d1, you must provide the Installation Information in the manner specified by section 6 of the GNU GPL for conveying Corresponding Source.)
|
||||
5. Combined Libraries.
|
||||
You may place library facilities that are a work based on the Library side by side in a single library together with other library facilities that are not Applications and are not covered by this License, and convey such a combined library under terms of your choice, if you do both of the following:
|
||||
|
||||
a) Accompany the combined library with a copy of the same work based on the Library, uncombined with any other library facilities, conveyed under the terms of this License.
|
||||
b) Give prominent notice with the combined library that part of it is a work based on the Library, and explaining where to find the accompanying uncombined form of the same work.
|
||||
6. Revised Versions of the GNU Lesser General Public License.
|
||||
The Free Software Foundation may publish revised and/or new versions of the GNU Lesser General Public License from time to time. Such new versions will be similar in spirit to the present version, but may differ in detail to address new problems or concerns.
|
||||
|
||||
Each version is given a distinguishing version number. If the Library as you received it specifies that a certain numbered version of the GNU Lesser General Public License “or any later version” applies to it, you have the option of following the terms and conditions either of that published version or of any later version published by the Free Software Foundation. If the Library as you received it does not specify a version number of the GNU Lesser General Public License, you may choose any version of the GNU Lesser General Public License ever published by the Free Software Foundation.
|
||||
|
||||
If the Library as you received it specifies that a proxy can decide whether future versions of the GNU Lesser General Public License shall apply, that proxy's public statement of acceptance of any version is permanent authorization for you to choose that version for the Library.
|
||||
@ -1,66 +0,0 @@
|
||||
# artDialog
|
||||
|
||||
[](https://cdnjs.com/libraries/artDialog)
|
||||
[](https://npmjs.org/package/art-dialog)
|
||||
[](https://npmjs.org/package/art-dialog)
|
||||
|
||||
artDialog——经典、优雅的网页对话框控件。
|
||||
|
||||
[文档与示例](http://aui.github.io/artDialog/doc/index.html) | [AngularJS 版本](https://github.com/aui/angular-popups)
|
||||
|
||||
```
|
||||
npm install --save-dev art-dialog
|
||||
```
|
||||
|
||||
## 成功案例
|
||||
|
||||
超过 40 万网站在使用 artDialog,其中不乏国内顶尖的产品:
|
||||
|
||||
* [QQ空间 v8(腾讯)](http://qzone.qq.com)
|
||||
* [Phpcms(盛大)](http://www.phpcms.cn)
|
||||
* [极路由](http://www.hiwifi.com)
|
||||
* ...
|
||||
|
||||
## 更新历史
|
||||
|
||||
7.0.0
|
||||
|
||||
1. 支持 Webpack
|
||||
2. 支持 Npm
|
||||
2. 将 CSS 打包到 JS 中
|
||||
|
||||
6.0.4
|
||||
|
||||
1. ``content()``方法传入隐藏元素并显示,并且``remove()``的时候会将元素插入到``body``避免被销毁 [#103](https://github.com/aui/artDialog/issues/103) [#126](https://github.com/aui/artDialog/issues/126)
|
||||
2. 修复``button``方法可能会多次绑定事件的问题
|
||||
3. 模态对话框可以避免 shift + tab 将焦点移出对话框 [#67](https://github.com/aui/artDialog/issues/67)
|
||||
|
||||
6.0.3
|
||||
|
||||
1. 修复``button``方法直接传入 html 不显示的问题
|
||||
2. 修复版本管理导致[#78](https://github.com/aui/artDialog/issues/78)重现问题
|
||||
|
||||
6.0.2
|
||||
|
||||
1. 提供无依赖 seajs 与 requirejs 的版本
|
||||
2. 取消按钮增加``cancelDisplay``配置,保留``cancel``事件的同时也不会显示取消按钮
|
||||
|
||||
6.0.1
|
||||
|
||||
1. 进一步完善焦点管理,避免抢夺开发者自己设置的焦点[#67](https://github.com/aui/artDialog/issues/67)
|
||||
2. 修复对话框内容使用 html5 data-id 属性冲突的问题[#78](https://github.com/aui/artDialog/issues/78)
|
||||
3. 改善 Esc 快捷键与 cancel 的问题[#36](https://github.com/aui/artDialog/issues/36)
|
||||
|
||||
6.0.0
|
||||
|
||||
1. 功能增强:支持定义左下角的区域 HTML、支持 12 个方向的气泡对话框、支持无标题栏与按钮区的对话框
|
||||
2. 更好的交互体验:更加先进的焦点管理,支持无障碍访问
|
||||
3. 面向未来:基于 HTML5 Dialog 的 API
|
||||
4. 模块化:支持 AMD、CMD 规范
|
||||
5. 可选增强版:拖拽支持、简化框架页面调用
|
||||
|
||||
## 授权协议
|
||||
|
||||
免费,且开源,基于[LGPL-3.0](./LICENSE.md)协议。
|
||||
|
||||
[\[AD\] 前端招聘:在海边写代码](https://juejin.im/post/5a2651d06fb9a0451c3a40ad)
|
||||
@ -1 +0,0 @@
|
||||
theme: jekyll-theme-cayman
|
||||
@ -1,461 +0,0 @@
|
||||
.ui-dialog {
|
||||
*zoom: 1;
|
||||
_float: left;
|
||||
position: relative;
|
||||
background-color: #FFF;
|
||||
border: 1px solid #999;
|
||||
border-radius: 6px;
|
||||
outline: 0;
|
||||
background-clip: padding-box;
|
||||
font-family: Helvetica, arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.428571429;
|
||||
color: #333;
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
-webkit-transition: -webkit-transform .15s ease-in-out, opacity .15s ease-in-out;
|
||||
transition: transform .15s ease-in-out, opacity .15s ease-in-out;
|
||||
}
|
||||
|
||||
.ui-popup-show .ui-dialog {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.ui-popup-focus .ui-dialog {
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.ui-popup-modal .ui-dialog {
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1), 0 0 256px rgba(255, 255, 255, .3);
|
||||
}
|
||||
|
||||
.ui-dialog-grid {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
border: 0 none;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.ui-dialog-header,
|
||||
.ui-dialog-body,
|
||||
.ui-dialog-footer {
|
||||
padding: 0;
|
||||
border: 0 none;
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.ui-dialog-header {
|
||||
white-space: nowrap;
|
||||
border-bottom: 1px solid #E5E5E5;
|
||||
}
|
||||
|
||||
.ui-dialog-close {
|
||||
position: relative;
|
||||
_position: absolute;
|
||||
float: right;
|
||||
top: 13px;
|
||||
right: 13px;
|
||||
_height: 26px;
|
||||
padding: 0 4px;
|
||||
font-size: 21px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
color: #000;
|
||||
text-shadow: 0 1px 0 #FFF;
|
||||
opacity: .2;
|
||||
filter: alpha(opacity=20);
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
_background: #FFF;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.ui-dialog-close:hover,
|
||||
.ui-dialog-close:focus {
|
||||
color: #000000;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
outline: 0;
|
||||
opacity: 0.5;
|
||||
filter: alpha(opacity=50);
|
||||
}
|
||||
|
||||
.ui-dialog-title {
|
||||
margin: 0;
|
||||
line-height: 1.428571429;
|
||||
min-height: 16.428571429px;
|
||||
padding: 15px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: bold;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.ui-dialog-body {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ui-dialog-content {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
*zoom: 1;
|
||||
*display: inline;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ui-dialog-footer {
|
||||
padding: 0 20px 20px 20px;
|
||||
}
|
||||
|
||||
.ui-dialog-statusbar {
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
padding: 6px 0;
|
||||
line-height: 1.428571429;
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ui-dialog-statusbar label:hover {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.ui-dialog-statusbar input,
|
||||
.ui-dialog-statusbar .label {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ui-dialog-button {
|
||||
float: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ui-dialog-footer button+button {
|
||||
margin-bottom: 0;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.ui-dialog-footer button {
|
||||
width: auto;
|
||||
overflow: visible;
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
_margin-left: 5px;
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 1.428571429;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
background-image: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.ui-dialog-footer button:focus {
|
||||
outline: thin dotted #333;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.ui-dialog-footer button:hover,
|
||||
.ui-dialog-footer button:focus {
|
||||
color: #333333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ui-dialog-footer button:active {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
|
||||
.ui-dialog-footer button[disabled] {
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.65;
|
||||
filter: alpha(opacity=65);
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ui-dialog-footer button {
|
||||
color: #333333;
|
||||
background-color: #ffffff;
|
||||
border-color: #cccccc;
|
||||
}
|
||||
|
||||
.ui-dialog-footer button:hover,
|
||||
.ui-dialog-footer button:focus,
|
||||
.ui-dialog-footer button:active {
|
||||
color: #333333;
|
||||
background-color: #ebebeb;
|
||||
border-color: #adadad;
|
||||
}
|
||||
|
||||
.ui-dialog-footer button:active {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.ui-dialog-footer button[disabled],
|
||||
.ui-dialog-footer button[disabled]:hover,
|
||||
.ui-dialog-footer button[disabled]:focus,
|
||||
.ui-dialog-footer button[disabled]:active {
|
||||
background-color: #ffffff;
|
||||
border-color: #cccccc;
|
||||
}
|
||||
|
||||
.ui-dialog-footer button.ui-dialog-autofocus {
|
||||
color: #ffffff;
|
||||
background-color: #428bca;
|
||||
border-color: #357ebd;
|
||||
}
|
||||
|
||||
.ui-dialog-footer button.ui-dialog-autofocus:hover,
|
||||
.ui-dialog-footer button.ui-dialog-autofocus:focus,
|
||||
.ui-dialog-footer button.ui-dialog-autofocus:active {
|
||||
color: #ffffff;
|
||||
background-color: #3276b1;
|
||||
border-color: #285e8e;
|
||||
}
|
||||
|
||||
.ui-dialog-footer button.ui-dialog-autofocus:active {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.ui-popup-top-left .ui-dialog,
|
||||
.ui-popup-top .ui-dialog,
|
||||
.ui-popup-top-right .ui-dialog {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
.ui-popup-bottom-left .ui-dialog,
|
||||
.ui-popup-bottom .ui-dialog,
|
||||
.ui-popup-bottom-right .ui-dialog {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.ui-popup-left-top .ui-dialog,
|
||||
.ui-popup-left .ui-dialog,
|
||||
.ui-popup-left-bottom .ui-dialog {
|
||||
left: -8px;
|
||||
}
|
||||
|
||||
.ui-popup-right-top .ui-dialog,
|
||||
.ui-popup-right .ui-dialog,
|
||||
.ui-popup-right-bottom .ui-dialog {
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.ui-dialog-arrow-a,
|
||||
.ui-dialog-arrow-b {
|
||||
position: absolute;
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
_color: #FF3FFF;
|
||||
_filter: chroma(color=#FF3FFF);
|
||||
border: 8px dashed transparent;
|
||||
}
|
||||
|
||||
.ui-popup-follow .ui-dialog-arrow-a,
|
||||
.ui-popup-follow .ui-dialog-arrow-b {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ui-popup-top-left .ui-dialog-arrow-a,
|
||||
.ui-popup-top .ui-dialog-arrow-a,
|
||||
.ui-popup-top-right .ui-dialog-arrow-a {
|
||||
bottom: -16px;
|
||||
border-top: 8px solid #7C7C7C;
|
||||
}
|
||||
|
||||
.ui-popup-top-left .ui-dialog-arrow-b,
|
||||
.ui-popup-top .ui-dialog-arrow-b,
|
||||
.ui-popup-top-right .ui-dialog-arrow-b {
|
||||
bottom: -15px;
|
||||
border-top: 8px solid #fff;
|
||||
}
|
||||
|
||||
.ui-popup-top-left .ui-dialog-arrow-a,
|
||||
.ui-popup-top-left .ui-dialog-arrow-b {
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.ui-popup-top .ui-dialog-arrow-a,
|
||||
.ui-popup-top .ui-dialog-arrow-b {
|
||||
left: 50%;
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
.ui-popup-top-right .ui-dialog-arrow-a,
|
||||
.ui-popup-top-right .ui-dialog-arrow-b {
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.ui-popup-bottom-left .ui-dialog-arrow-a,
|
||||
.ui-popup-bottom .ui-dialog-arrow-a,
|
||||
.ui-popup-bottom-right .ui-dialog-arrow-a {
|
||||
top: -16px;
|
||||
border-bottom: 8px solid #7C7C7C;
|
||||
}
|
||||
|
||||
.ui-popup-bottom-left .ui-dialog-arrow-b,
|
||||
.ui-popup-bottom .ui-dialog-arrow-b,
|
||||
.ui-popup-bottom-right .ui-dialog-arrow-b {
|
||||
top: -15px;
|
||||
border-bottom: 8px solid #fff;
|
||||
}
|
||||
|
||||
.ui-popup-bottom-left .ui-dialog-arrow-a,
|
||||
.ui-popup-bottom-left .ui-dialog-arrow-b {
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.ui-popup-bottom .ui-dialog-arrow-a,
|
||||
.ui-popup-bottom .ui-dialog-arrow-b {
|
||||
margin-left: -8px;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.ui-popup-bottom-right .ui-dialog-arrow-a,
|
||||
.ui-popup-bottom-right .ui-dialog-arrow-b {
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.ui-popup-left-top .ui-dialog-arrow-a,
|
||||
.ui-popup-left .ui-dialog-arrow-a,
|
||||
.ui-popup-left-bottom .ui-dialog-arrow-a {
|
||||
right: -16px;
|
||||
border-left: 8px solid #7C7C7C;
|
||||
}
|
||||
|
||||
.ui-popup-left-top .ui-dialog-arrow-b,
|
||||
.ui-popup-left .ui-dialog-arrow-b,
|
||||
.ui-popup-left-bottom .ui-dialog-arrow-b {
|
||||
right: -15px;
|
||||
border-left: 8px solid #fff;
|
||||
}
|
||||
|
||||
.ui-popup-left-top .ui-dialog-arrow-a,
|
||||
.ui-popup-left-top .ui-dialog-arrow-b {
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
.ui-popup-left .ui-dialog-arrow-a,
|
||||
.ui-popup-left .ui-dialog-arrow-b {
|
||||
margin-top: -8px;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.ui-popup-left-bottom .ui-dialog-arrow-a,
|
||||
.ui-popup-left-bottom .ui-dialog-arrow-b {
|
||||
bottom: 15px;
|
||||
}
|
||||
|
||||
.ui-popup-right-top .ui-dialog-arrow-a,
|
||||
.ui-popup-right .ui-dialog-arrow-a,
|
||||
.ui-popup-right-bottom .ui-dialog-arrow-a {
|
||||
left: -16px;
|
||||
border-right: 8px solid #7C7C7C;
|
||||
}
|
||||
|
||||
.ui-popup-right-top .ui-dialog-arrow-b,
|
||||
.ui-popup-right .ui-dialog-arrow-b,
|
||||
.ui-popup-right-bottom .ui-dialog-arrow-b {
|
||||
left: -15px;
|
||||
border-right: 8px solid #fff;
|
||||
}
|
||||
|
||||
.ui-popup-right-top .ui-dialog-arrow-a,
|
||||
.ui-popup-right-top .ui-dialog-arrow-b {
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
.ui-popup-right .ui-dialog-arrow-a,
|
||||
.ui-popup-right .ui-dialog-arrow-b {
|
||||
margin-top: -8px;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.ui-popup-right-bottom .ui-dialog-arrow-a,
|
||||
.ui-popup-right-bottom .ui-dialog-arrow-b {
|
||||
bottom: 15px;
|
||||
}
|
||||
|
||||
@-webkit-keyframes ui-dialog-loading {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ui-dialog-loading {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.ui-dialog-loading {
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
display: block;
|
||||
*zoom: 1;
|
||||
*display: inline;
|
||||
overflow: hidden;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
top: 50%;
|
||||
margin: -16px auto 0 auto;
|
||||
font-size: 0;
|
||||
text-indent: -999em;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.ui-dialog-loading {
|
||||
width: 100%\9;
|
||||
text-indent: 0\9;
|
||||
line-height: 32px\9;
|
||||
text-align: center\9;
|
||||
font-size: 12px\9;
|
||||
}
|
||||
|
||||
.ui-dialog-loading::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
margin: 14.5px 0 0 14.5px;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 -10px 0 1px #ccc, 10px 0px #ccc, 0 10px #ccc, -10px 0 #ccc, -7px -7px 0 0.5px #ccc, 7px -7px 0 1.5px #ccc, 7px 7px #ccc, -7px 7px #ccc;
|
||||
-webkit-transform: rotate(360deg);
|
||||
-webkit-animation: ui-dialog-loading 1.5s infinite linear;
|
||||
transform: rotate(360deg);
|
||||
animation: ui-dialog-loading 1.5s infinite linear;
|
||||
display: none\9;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,21 +0,0 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const MarkdownIt = require('markdown-it');
|
||||
const md = new MarkdownIt({
|
||||
html: true
|
||||
});
|
||||
const source = path.resolve(__dirname, '..', 'index.md');
|
||||
const templateSource = path.resolve(__dirname, '..', 'template', 'index.html');
|
||||
const output = path.resolve(__dirname, '..', 'index.html');
|
||||
const content = fs.readFileSync(source, 'utf8');
|
||||
const templateContent = fs.readFileSync(templateSource, 'utf8');
|
||||
|
||||
const html = md.render(content);
|
||||
const template = (string, data) => string.replace(/\$\{([^\}]*?)\}/g, ($0, key) => String(data[key]));
|
||||
const result = template(templateContent, {
|
||||
title: 'artDialog',
|
||||
content: html
|
||||
});
|
||||
|
||||
fs.writeFileSync(output, result, 'utf8');
|
||||
console.log('ok');
|
||||
@ -1,512 +0,0 @@
|
||||
body {
|
||||
max-width: 620px;
|
||||
margin: auto;
|
||||
font-family: Helvetica, arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
background-color: white;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
body>*:first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
body>*:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #4183C4;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 20px 0 10px;
|
||||
padding: 0;
|
||||
font-weight: bold;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
cursor: text;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h1:hover a.anchor,
|
||||
h2:hover a.anchor,
|
||||
h3:hover a.anchor,
|
||||
h4:hover a.anchor,
|
||||
h5:hover a.anchor,
|
||||
h6:hover a.anchor {
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA09pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoMTMuMCAyMDEyMDMwNS5tLjQxNSAyMDEyLzAzLzA1OjIxOjAwOjAwKSAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUM2NjlDQjI4ODBGMTFFMTg1ODlEODNERDJBRjUwQTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUM2NjlDQjM4ODBGMTFFMTg1ODlEODNERDJBRjUwQTQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QzY2OUNCMDg4MEYxMUUxODU4OUQ4M0REMkFGNTBBNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QzY2OUNCMTg4MEYxMUUxODU4OUQ4M0REMkFGNTBBNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsQhXeAAAABfSURBVHjaYvz//z8DJYCRUgMYQAbAMBQIAvEqkBQWXI6sHqwHiwG70TTBxGaiWwjCTGgOUgJiF1J8wMRAIUA34B4Q76HUBelAfJYSA0CuMIEaRP8wGIkGMA54bgQIMACAmkXJi0hKJQAAAABJRU5ErkJggg==) no-repeat 10px center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1 tt,
|
||||
h1 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h2 tt,
|
||||
h2 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h3 tt,
|
||||
h3 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h4 tt,
|
||||
h4 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h5 tt,
|
||||
h5 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h6 tt,
|
||||
h6 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
color: black;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h6 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
color: black;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: #777777;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
p,
|
||||
blockquote,
|
||||
ul,
|
||||
ol,
|
||||
dl,
|
||||
li,
|
||||
table,
|
||||
pre {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OENDRjNBN0E2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OENDRjNBN0I2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Q0NGM0E3ODY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0NGM0E3OTY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqqezsUAAAAfSURBVHjaYmRABcYwBiM2QSA4y4hNEKYDQxAEAAIMAHNGAzhkPOlYAAAAAElFTkSuQmCC) repeat-x 0 0;
|
||||
border: 0 none;
|
||||
color: #cccccc;
|
||||
height: 4px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body>h2:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
body>h1:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
body>h1:first-child+h2 {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
body>h3:first-child,
|
||||
body>h4:first-child,
|
||||
body>h5:first-child,
|
||||
body>h6:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
a:first-child h1,
|
||||
a:first-child h2,
|
||||
a:first-child h3,
|
||||
a:first-child h4,
|
||||
a:first-child h5,
|
||||
a:first-child h6 {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
h1 p,
|
||||
h2 p,
|
||||
h3 p,
|
||||
h4 p,
|
||||
h5 p,
|
||||
h6 p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
li p.first {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
ul :first-child,
|
||||
ol :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
dl {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
dl dt {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
padding: 0;
|
||||
margin: 15px 0 5px;
|
||||
}
|
||||
|
||||
dl dd {
|
||||
margin: 0 0 15px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 2px solid #dddddd;
|
||||
padding: 0 15px;
|
||||
color: #777777;
|
||||
}
|
||||
|
||||
blockquote> :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
blockquote> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
padding: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
tr {
|
||||
border-top: 1px solid #cccccc;
|
||||
background-color: white;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
tr:nth-child(2n) {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
border: 1px solid #cccccc;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding: 6px 13px;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 1px solid #cccccc;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding: 6px 13px;
|
||||
}
|
||||
|
||||
th :first-child,
|
||||
td :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
th :last-child,
|
||||
td :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
code,
|
||||
tt {
|
||||
margin: 0 2px;
|
||||
padding: 0 5px;
|
||||
white-space: nowrap;
|
||||
border: 1px solid #eaeaea;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
pre code {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
white-space: pre;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: #303030;
|
||||
font-size: 13px;
|
||||
line-height: 19px;
|
||||
overflow: auto;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
pre code {
|
||||
color: #f2f2f2;
|
||||
border: none;
|
||||
padding: 0;
|
||||
font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal;
|
||||
margin-bottom: 30px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
pre tt {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
@media print {
|
||||
table,
|
||||
pre {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*-------------------------------*/
|
||||
|
||||
.doc-line {
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.doc-gotop {
|
||||
position: fixed;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
h1 span[id],
|
||||
h2 span[id],
|
||||
h3 span[id],
|
||||
h4 span[id],
|
||||
h5 span[id],
|
||||
h6 span[id] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
/*避免对话框样式被工具生成的全局样式污染*/
|
||||
|
||||
.ui-dialog table,
|
||||
.ui-dialog table tr,
|
||||
.ui-dialog tr td,
|
||||
.ui-dialog tr:nth-child(2n) {
|
||||
border: 0 none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.ui-dialog td.ui-dialog-header {
|
||||
border-bottom: 1px solid #E5E5E5;
|
||||
}
|
||||
|
||||
code.sh_sourceCode {
|
||||
color: #000000;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_keyword {
|
||||
color: #009;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_type {
|
||||
color: #0000ff;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_string {
|
||||
color: #00F;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_regexp {
|
||||
color: #060;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_specialchar {
|
||||
color: #C42DA8;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_comment {
|
||||
color: #999;
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_number {
|
||||
color: #F00;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_codeproc {
|
||||
color: #00b800;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_symbol {
|
||||
color: #009;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_function {
|
||||
color: #000;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_cbracket {
|
||||
color: #009;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_url {
|
||||
color: #ff0000;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_date {
|
||||
color: #0000ff;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_time {
|
||||
color: #0000ff;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_file {
|
||||
color: #0000ff;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_ip {
|
||||
color: #ff0000;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_name {
|
||||
color: #ff0000;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_variable {
|
||||
color: #ec7f15;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_oldfile {
|
||||
color: #C42DA8;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_newfile {
|
||||
color: #ff0000;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_difflines {
|
||||
color: #0000ff;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_selector {
|
||||
color: #ec7f15;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_property {
|
||||
color: #0000ff;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_value {
|
||||
color: #ff0000;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_codedef_var {
|
||||
color: #909;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_codedef_func {
|
||||
color: #099;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,64 +0,0 @@
|
||||
!(function() {
|
||||
|
||||
window.console = window.console || {
|
||||
log: $.noop
|
||||
};
|
||||
|
||||
|
||||
var codes = {};
|
||||
var debug = location.href.indexOf('Users/tangbin') !== -1;
|
||||
|
||||
$(function() {
|
||||
|
||||
console.log('你可以在调试器中粘贴本页示例代码运行');
|
||||
|
||||
var RE = /[\n\s\t]*?\/\/\.\.[\r\n]/;
|
||||
$('pre code').each(function(index) {
|
||||
var $this = $(this);
|
||||
var code = $this.text();
|
||||
|
||||
// 忽略不完整的代码片段
|
||||
// 开头使用"//.."表示
|
||||
if (RE.test(code)) {
|
||||
$this.text(code.replace(RE, ''));
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
codes[index] = new Function(code);
|
||||
} catch (e) {
|
||||
return;
|
||||
}
|
||||
|
||||
$this
|
||||
.after('<div class="doc-line"></div>' +
|
||||
'<button data-code="' + index + '">运行</button>');
|
||||
});
|
||||
|
||||
// 回到顶部
|
||||
var $top = $('<a class="doc-gotop" href="javascript:;">TOP</a>')
|
||||
.on('click', function() {
|
||||
$(window).scrollTop(0);
|
||||
return false;
|
||||
});
|
||||
$('body').append($top);
|
||||
});
|
||||
|
||||
|
||||
var runCode = function(id) {
|
||||
codes[id]();
|
||||
|
||||
var api = dialog.getCurrent();
|
||||
if (debug && api) {
|
||||
console.log(api);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
$(document).on('click', 'button[data-code]', function() {
|
||||
var id = $(this).data('code');
|
||||
runCode(id);
|
||||
return false;
|
||||
});
|
||||
|
||||
}());
|
||||
@ -1,329 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
|
||||
<style>
|
||||
body {
|
||||
max-width: 620px;
|
||||
margin: auto;
|
||||
font-family: Helvetica, arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
background-color: white;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
body>*:first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
body>*:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #4183C4;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 20px 0 10px;
|
||||
padding: 0;
|
||||
font-weight: bold;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
cursor: text;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h1:hover a.anchor,
|
||||
h2:hover a.anchor,
|
||||
h3:hover a.anchor,
|
||||
h4:hover a.anchor,
|
||||
h5:hover a.anchor,
|
||||
h6:hover a.anchor {
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA09pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoMTMuMCAyMDEyMDMwNS5tLjQxNSAyMDEyLzAzLzA1OjIxOjAwOjAwKSAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUM2NjlDQjI4ODBGMTFFMTg1ODlEODNERDJBRjUwQTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUM2NjlDQjM4ODBGMTFFMTg1ODlEODNERDJBRjUwQTQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QzY2OUNCMDg4MEYxMUUxODU4OUQ4M0REMkFGNTBBNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QzY2OUNCMTg4MEYxMUUxODU4OUQ4M0REMkFGNTBBNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsQhXeAAAABfSURBVHjaYvz//z8DJYCRUgMYQAbAMBQIAvEqkBQWXI6sHqwHiwG70TTBxGaiWwjCTGgOUgJiF1J8wMRAIUA34B4Q76HUBelAfJYSA0CuMIEaRP8wGIkGMA54bgQIMACAmkXJi0hKJQAAAABJRU5ErkJggg==) no-repeat 10px center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1 tt,
|
||||
h1 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h2 tt,
|
||||
h2 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h3 tt,
|
||||
h3 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h4 tt,
|
||||
h4 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h5 tt,
|
||||
h5 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h6 tt,
|
||||
h6 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
color: black;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h6 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
color: black;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: #777777;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
p,
|
||||
blockquote,
|
||||
ul,
|
||||
ol,
|
||||
dl,
|
||||
li,
|
||||
table,
|
||||
pre {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OENDRjNBN0E2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OENDRjNBN0I2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Q0NGM0E3ODY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0NGM0E3OTY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqqezsUAAAAfSURBVHjaYmRABcYwBiM2QSA4y4hNEKYDQxAEAAIMAHNGAzhkPOlYAAAAAElFTkSuQmCC) repeat-x 0 0;
|
||||
border: 0 none;
|
||||
color: #cccccc;
|
||||
height: 4px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body>h2:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
body>h1:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
body>h1:first-child+h2 {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
body>h3:first-child,
|
||||
body>h4:first-child,
|
||||
body>h5:first-child,
|
||||
body>h6:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
a:first-child h1,
|
||||
a:first-child h2,
|
||||
a:first-child h3,
|
||||
a:first-child h4,
|
||||
a:first-child h5,
|
||||
a:first-child h6 {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
h1 p,
|
||||
h2 p,
|
||||
h3 p,
|
||||
h4 p,
|
||||
h5 p,
|
||||
h6 p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
li p.first {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
ul :first-child,
|
||||
ol :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
dl {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
dl dt {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
padding: 0;
|
||||
margin: 15px 0 5px;
|
||||
}
|
||||
|
||||
dl dd {
|
||||
margin: 0 0 15px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 2px solid #dddddd;
|
||||
padding: 0 15px;
|
||||
color: #777777;
|
||||
}
|
||||
|
||||
blockquote> :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
blockquote> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
padding: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
tr {
|
||||
border-top: 1px solid #cccccc;
|
||||
background-color: white;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
tr:nth-child(2n) {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
border: 1px solid #cccccc;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding: 6px 13px;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 1px solid #cccccc;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding: 6px 13px;
|
||||
}
|
||||
|
||||
th :first-child,
|
||||
td :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
th :last-child,
|
||||
td :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
code,
|
||||
tt {
|
||||
margin: 0 2px;
|
||||
padding: 0 5px;
|
||||
white-space: nowrap;
|
||||
border: 1px solid #eaeaea;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
pre code {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
white-space: pre;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: #303030;
|
||||
font-size: 13px;
|
||||
line-height: 19px;
|
||||
overflow: auto;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
pre code {
|
||||
color: #f2f2f2;
|
||||
border: none;
|
||||
padding: 0;
|
||||
font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal;
|
||||
margin-bottom: 30px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
pre tt {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
@media print {
|
||||
table,
|
||||
pre {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<title>${title}</title>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
${content}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
@ -1,28 +0,0 @@
|
||||
{
|
||||
"name": "art-dialog",
|
||||
"version": "7.0.0",
|
||||
"readmeFilename": "README.md",
|
||||
"description": "A smart dialog box component",
|
||||
"homepage": "https://github.com/aui/artDialog",
|
||||
"scripts": {
|
||||
"build": "webpack -p",
|
||||
"dev": "webpack -d",
|
||||
"build-doc": "node doc/build/index.js"
|
||||
},
|
||||
"keywords": [
|
||||
"dialog"
|
||||
],
|
||||
"author": "aui",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/aui/artDialog.git"
|
||||
},
|
||||
"main": "./dist/dialog.js",
|
||||
"devDependencies": {
|
||||
"css-loader": "^0.27.3",
|
||||
"markdown-it": "^8.3.1",
|
||||
"style-loader": "^0.15.0",
|
||||
"webpack": "^2.2.1"
|
||||
},
|
||||
"license": "LGPL-3.0"
|
||||
}
|
||||
@ -1,88 +0,0 @@
|
||||
// artDialog - 默认配置
|
||||
module.exports = {
|
||||
|
||||
/* -----已注释的配置继承自 popup.js,仍可以再这里重新定义它----- */
|
||||
|
||||
// 对齐方式
|
||||
//align: 'bottom left',
|
||||
|
||||
// 是否固定定位
|
||||
//fixed: false,
|
||||
|
||||
// 对话框叠加高度值(重要:此值不能超过浏览器最大限制)
|
||||
//zIndex: 1024,
|
||||
|
||||
// 设置遮罩背景颜色
|
||||
backdropBackground: '#000',
|
||||
|
||||
// 设置遮罩透明度
|
||||
backdropOpacity: 0.7,
|
||||
|
||||
// 消息内容
|
||||
content: '<span class="ui-dialog-loading">Loading..</span>',
|
||||
|
||||
// 标题
|
||||
title: '',
|
||||
|
||||
// 对话框状态栏区域 HTML 代码
|
||||
statusbar: '',
|
||||
|
||||
// 自定义按钮
|
||||
button: null,
|
||||
|
||||
// 确定按钮回调函数
|
||||
ok: null,
|
||||
|
||||
// 取消按钮回调函数
|
||||
cancel: null,
|
||||
|
||||
// 确定按钮文本
|
||||
okValue: 'ok',
|
||||
|
||||
// 取消按钮文本
|
||||
cancelValue: 'cancel',
|
||||
|
||||
cancelDisplay: true,
|
||||
|
||||
// 内容宽度
|
||||
width: '',
|
||||
|
||||
// 内容高度
|
||||
height: '',
|
||||
|
||||
// 内容与边界填充距离
|
||||
padding: '',
|
||||
|
||||
// 对话框自定义 className
|
||||
skin: '',
|
||||
|
||||
// 是否支持快捷关闭(点击遮罩层自动关闭)
|
||||
quickClose: false,
|
||||
|
||||
// 模板(使用 table 解决 IE7 宽度自适应的 BUG)
|
||||
// js 使用 i="***" 属性识别结构,其余的均可自定义
|
||||
innerHTML: '<div i="dialog" class="ui-dialog">' +
|
||||
'<div class="ui-dialog-arrow-a"></div>' +
|
||||
'<div class="ui-dialog-arrow-b"></div>' +
|
||||
'<table class="ui-dialog-grid">' +
|
||||
'<tr>' +
|
||||
'<td i="header" class="ui-dialog-header">' +
|
||||
'<button i="close" class="ui-dialog-close">×</button>' +
|
||||
'<div i="title" class="ui-dialog-title"></div>' +
|
||||
'</td>' +
|
||||
'</tr>' +
|
||||
'<tr>' +
|
||||
'<td i="body" class="ui-dialog-body">' +
|
||||
'<div i="content" class="ui-dialog-content"></div>' +
|
||||
'</td>' +
|
||||
'</tr>' +
|
||||
'<tr>' +
|
||||
'<td i="footer" class="ui-dialog-footer">' +
|
||||
'<div i="statusbar" class="ui-dialog-statusbar"></div>' +
|
||||
'<div i="button" class="ui-dialog-button"></div>' +
|
||||
'</td>' +
|
||||
'</tr>' +
|
||||
'</table>' +
|
||||
'</div>'
|
||||
|
||||
};
|
||||
@ -1,130 +0,0 @@
|
||||
var $ = require('jquery');
|
||||
var dialog = require('./dialog');
|
||||
var drag = require('./drag');
|
||||
|
||||
dialog.oncreate = function(api) {
|
||||
|
||||
var options = api.options;
|
||||
var originalOptions = options.original;
|
||||
|
||||
// 页面地址
|
||||
var url = options.url;
|
||||
// 页面加载完毕的事件
|
||||
var oniframeload = options.oniframeload;
|
||||
|
||||
var $iframe;
|
||||
|
||||
|
||||
if (url) {
|
||||
this.padding = options.padding = 0;
|
||||
|
||||
$iframe = $('<iframe />');
|
||||
|
||||
$iframe.attr({
|
||||
src: url,
|
||||
name: api.id,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
allowtransparency: 'yes',
|
||||
frameborder: 'no',
|
||||
scrolling: 'no'
|
||||
})
|
||||
.on('load', function() {
|
||||
var test;
|
||||
|
||||
try {
|
||||
// 跨域测试
|
||||
test = $iframe[0].contentWindow.frameElement;
|
||||
} catch (e) {}
|
||||
|
||||
if (test) {
|
||||
|
||||
if (!options.width) {
|
||||
api.width($iframe.contents().width());
|
||||
}
|
||||
|
||||
if (!options.height) {
|
||||
api.height($iframe.contents().height());
|
||||
}
|
||||
}
|
||||
|
||||
if (oniframeload) {
|
||||
oniframeload.call(api);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
api.addEventListener('beforeremove', function() {
|
||||
|
||||
// 重要!需要重置iframe地址,否则下次出现的对话框在IE6、7无法聚焦input
|
||||
// IE删除iframe后,iframe仍然会留在内存中出现上述问题,置换src是最容易解决的方法
|
||||
$iframe.attr('src', 'about:blank').remove();
|
||||
|
||||
|
||||
}, false);
|
||||
|
||||
api.content($iframe[0]);
|
||||
|
||||
api.iframeNode = $iframe[0];
|
||||
|
||||
}
|
||||
|
||||
|
||||
// 对于子页面呼出的对话框特殊处理
|
||||
// 如果对话框配置来自 iframe
|
||||
if (!(originalOptions instanceof Object)) {
|
||||
|
||||
var un = function() {
|
||||
api.close().remove();
|
||||
};
|
||||
|
||||
// 找到那个 iframe
|
||||
for (var i = 0; i < frames.length; i++) {
|
||||
try {
|
||||
if (originalOptions instanceof frames[i].Object) {
|
||||
// 让 iframe 刷新的时候也关闭对话框,
|
||||
// 防止要执行的对象被强制收回导致 IE 报错:“不能执行已释放 Script 的代码”
|
||||
$(frames[i]).one('unload', un);
|
||||
break;
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 拖拽支持
|
||||
$(api.node).on(drag.types.start, '[i=title]', function(event) {
|
||||
// 排除气泡类型的对话框
|
||||
if (!api.follow) {
|
||||
api.focus();
|
||||
drag.create(api.node, event);
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
dialog.get = function(id) {
|
||||
|
||||
// 从 iframe 传入 window 对象
|
||||
if (id && id.frameElement) {
|
||||
var iframe = id.frameElement;
|
||||
var list = dialog.list;
|
||||
var api;
|
||||
for (var i in list) {
|
||||
api = list[i];
|
||||
if (api.node.getElementsByTagName('iframe')[0] === iframe) {
|
||||
return api;
|
||||
}
|
||||
}
|
||||
// 直接传入 id 的情况
|
||||
} else if (id) {
|
||||
return dialog.list[id];
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
module.exports = dialog;
|
||||
@ -1,470 +0,0 @@
|
||||
require('../css/dialog.css');
|
||||
|
||||
var $ = require('jquery');
|
||||
var Popup = require('./popup');
|
||||
var defaults = require('./dialog-config');
|
||||
|
||||
var _count = 0;
|
||||
var _expando = new Date() - 0; // Date.now()
|
||||
var _isIE6 = !('minWidth' in $('html')[0].style);
|
||||
var _isMobile = 'createTouch' in document && !('onmousemove' in document) ||
|
||||
/(iPhone|iPad|iPod)/i.test(navigator.userAgent);
|
||||
var _isFixed = !_isIE6 && !_isMobile;
|
||||
|
||||
|
||||
var artDialog = function(options, ok, cancel) {
|
||||
|
||||
var originalOptions = options = options || {};
|
||||
|
||||
|
||||
if (typeof options === 'string' || options.nodeType === 1) {
|
||||
|
||||
options = { content: options, fixed: !_isMobile };
|
||||
}
|
||||
|
||||
|
||||
options = $.extend(true, {}, artDialog.defaults, options);
|
||||
options.original = originalOptions;
|
||||
|
||||
var id = options.id = options.id || _expando + _count;
|
||||
var api = artDialog.get(id);
|
||||
|
||||
|
||||
// 如果存在同名的对话框对象,则直接返回
|
||||
if (api) {
|
||||
return api.focus();
|
||||
}
|
||||
|
||||
|
||||
// 目前主流移动设备对fixed支持不好,禁用此特性
|
||||
if (!_isFixed) {
|
||||
options.fixed = false;
|
||||
}
|
||||
|
||||
|
||||
// 快捷关闭支持:点击对话框外快速关闭对话框
|
||||
if (options.quickClose) {
|
||||
options.modal = true;
|
||||
options.backdropOpacity = 0;
|
||||
}
|
||||
|
||||
|
||||
// 按钮组
|
||||
if (!$.isArray(options.button)) {
|
||||
options.button = [];
|
||||
}
|
||||
|
||||
|
||||
// 取消按钮
|
||||
if (cancel !== undefined) {
|
||||
options.cancel = cancel;
|
||||
}
|
||||
|
||||
if (options.cancel) {
|
||||
options.button.push({
|
||||
id: 'cancel',
|
||||
value: options.cancelValue,
|
||||
callback: options.cancel,
|
||||
display: options.cancelDisplay
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 确定按钮
|
||||
if (ok !== undefined) {
|
||||
options.ok = ok;
|
||||
}
|
||||
|
||||
if (options.ok) {
|
||||
options.button.push({
|
||||
id: 'ok',
|
||||
value: options.okValue,
|
||||
callback: options.ok,
|
||||
autofocus: true
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
return artDialog.list[id] = new artDialog.create(options);
|
||||
};
|
||||
|
||||
var popup = function() {};
|
||||
popup.prototype = Popup.prototype;
|
||||
var prototype = artDialog.prototype = new popup();
|
||||
|
||||
artDialog.create = function(options) {
|
||||
var that = this;
|
||||
|
||||
$.extend(this, new Popup());
|
||||
|
||||
var originalOptions = options.original;
|
||||
var $popup = $(this.node).html(options.innerHTML);
|
||||
var $backdrop = $(this.backdrop);
|
||||
|
||||
this.options = options;
|
||||
this._popup = $popup;
|
||||
|
||||
|
||||
$.each(options, function(name, value) {
|
||||
if (typeof that[name] === 'function') {
|
||||
that[name](value);
|
||||
} else {
|
||||
that[name] = value;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 更新 zIndex 全局配置
|
||||
if (options.zIndex) {
|
||||
Popup.zIndex = options.zIndex;
|
||||
}
|
||||
|
||||
|
||||
// 设置 ARIA 信息
|
||||
$popup.attr({
|
||||
'aria-labelledby': this._$('title')
|
||||
.attr('id', 'title:' + this.id).attr('id'),
|
||||
'aria-describedby': this._$('content')
|
||||
.attr('id', 'content:' + this.id).attr('id')
|
||||
});
|
||||
|
||||
|
||||
// 关闭按钮
|
||||
this._$('close')
|
||||
.css('display', this.cancel === false ? 'none' : '')
|
||||
.attr('title', this.cancelValue)
|
||||
.on('click', function(event) {
|
||||
that._trigger('cancel');
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
|
||||
// 添加视觉参数
|
||||
this._$('dialog').addClass(this.skin);
|
||||
this._$('body').css('padding', this.padding);
|
||||
|
||||
|
||||
// 点击任意空白处关闭对话框
|
||||
if (options.quickClose) {
|
||||
$backdrop
|
||||
.on(
|
||||
'onmousedown' in document ? 'mousedown' : 'click',
|
||||
function() {
|
||||
that._trigger('cancel');
|
||||
return false; // 阻止抢夺焦点
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 遮罩设置
|
||||
this.addEventListener('show', function() {
|
||||
$backdrop.css({
|
||||
opacity: 0,
|
||||
background: options.backdropBackground
|
||||
}).animate({ opacity: options.backdropOpacity }, 150);
|
||||
});
|
||||
|
||||
|
||||
// ESC 快捷键关闭对话框
|
||||
this._esc = function(event) {
|
||||
var target = event.target;
|
||||
var nodeName = target.nodeName;
|
||||
var rinput = /^input|textarea$/i;
|
||||
var isTop = Popup.current === that;
|
||||
var keyCode = event.keyCode;
|
||||
|
||||
// 避免输入状态中 ESC 误操作关闭
|
||||
if (!isTop || rinput.test(nodeName) && target.type !== 'button') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (keyCode === 27) {
|
||||
that._trigger('cancel');
|
||||
}
|
||||
};
|
||||
|
||||
$(document).on('keydown', this._esc);
|
||||
this.addEventListener('remove', function() {
|
||||
$(document).off('keydown', this._esc);
|
||||
delete artDialog.list[this.id];
|
||||
});
|
||||
|
||||
|
||||
_count++;
|
||||
|
||||
artDialog.oncreate(this);
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
|
||||
artDialog.create.prototype = prototype;
|
||||
|
||||
|
||||
|
||||
$.extend(prototype, {
|
||||
|
||||
/**
|
||||
* 显示对话框
|
||||
* @name artDialog.prototype.show
|
||||
* @param {HTMLElement Object, Event Object} 指定位置(可选)
|
||||
*/
|
||||
|
||||
/**
|
||||
* 显示对话框(模态)
|
||||
* @name artDialog.prototype.showModal
|
||||
* @param {HTMLElement Object, Event Object} 指定位置(可选)
|
||||
*/
|
||||
|
||||
/**
|
||||
* 关闭对话框
|
||||
* @name artDialog.prototype.close
|
||||
* @param {String, Number} 返回值,可被 onclose 事件收取(可选)
|
||||
*/
|
||||
|
||||
/**
|
||||
* 销毁对话框
|
||||
* @name artDialog.prototype.remove
|
||||
*/
|
||||
|
||||
/**
|
||||
* 重置对话框位置
|
||||
* @name artDialog.prototype.reset
|
||||
*/
|
||||
|
||||
/**
|
||||
* 让对话框聚焦(同时置顶)
|
||||
* @name artDialog.prototype.focus
|
||||
*/
|
||||
|
||||
/**
|
||||
* 让对话框失焦(同时置顶)
|
||||
* @name artDialog.prototype.blur
|
||||
*/
|
||||
|
||||
/**
|
||||
* 添加事件
|
||||
* @param {String} 事件类型
|
||||
* @param {Function} 监听函数
|
||||
* @name artDialog.prototype.addEventListener
|
||||
*/
|
||||
|
||||
/**
|
||||
* 删除事件
|
||||
* @param {String} 事件类型
|
||||
* @param {Function} 监听函数
|
||||
* @name artDialog.prototype.removeEventListener
|
||||
*/
|
||||
|
||||
/**
|
||||
* 对话框显示事件,在 show()、showModal() 执行
|
||||
* @name artDialog.prototype.onshow
|
||||
* @event
|
||||
*/
|
||||
|
||||
/**
|
||||
* 关闭事件,在 close() 执行
|
||||
* @name artDialog.prototype.onclose
|
||||
* @event
|
||||
*/
|
||||
|
||||
/**
|
||||
* 销毁前事件,在 remove() 前执行
|
||||
* @name artDialog.prototype.onbeforeremove
|
||||
* @event
|
||||
*/
|
||||
|
||||
/**
|
||||
* 销毁事件,在 remove() 执行
|
||||
* @name artDialog.prototype.onremove
|
||||
* @event
|
||||
*/
|
||||
|
||||
/**
|
||||
* 重置事件,在 reset() 执行
|
||||
* @name artDialog.prototype.onreset
|
||||
* @event
|
||||
*/
|
||||
|
||||
/**
|
||||
* 焦点事件,在 foucs() 执行
|
||||
* @name artDialog.prototype.onfocus
|
||||
* @event
|
||||
*/
|
||||
|
||||
/**
|
||||
* 失焦事件,在 blur() 执行
|
||||
* @name artDialog.prototype.onblur
|
||||
* @event
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 设置内容
|
||||
* @param {String, HTMLElement} 内容
|
||||
*/
|
||||
content: function(html) {
|
||||
|
||||
var $content = this._$('content');
|
||||
|
||||
// HTMLElement
|
||||
if (typeof html === 'object') {
|
||||
html = $(html);
|
||||
$content.empty('').append(html.show());
|
||||
this.addEventListener('beforeremove', function() {
|
||||
$('body').append(html.hide());
|
||||
});
|
||||
// String
|
||||
} else {
|
||||
$content.html(html);
|
||||
}
|
||||
|
||||
return this.reset();
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 设置标题
|
||||
* @param {String} 标题内容
|
||||
*/
|
||||
title: function(text) {
|
||||
this._$('title').text(text);
|
||||
this._$('header')[text ? 'show' : 'hide']();
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
/** 设置宽度 */
|
||||
width: function(value) {
|
||||
this._$('content').css('width', value);
|
||||
return this.reset();
|
||||
},
|
||||
|
||||
|
||||
/** 设置高度 */
|
||||
height: function(value) {
|
||||
this._$('content').css('height', value);
|
||||
return this.reset();
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 设置按钮组
|
||||
* @param {Array, String}
|
||||
* Options: value, callback, autofocus, disabled
|
||||
*/
|
||||
button: function(args) {
|
||||
args = args || [];
|
||||
var that = this;
|
||||
var html = '';
|
||||
var number = 0;
|
||||
this.callbacks = {};
|
||||
|
||||
|
||||
if (typeof args === 'string') {
|
||||
html = args;
|
||||
number++;
|
||||
} else {
|
||||
$.each(args, function(i, val) {
|
||||
|
||||
var id = val.id = val.id || val.value;
|
||||
var style = '';
|
||||
that.callbacks[id] = val.callback;
|
||||
|
||||
|
||||
if (val.display === false) {
|
||||
style = ' style="display:none"';
|
||||
} else {
|
||||
number++;
|
||||
}
|
||||
|
||||
html +=
|
||||
'<button' +
|
||||
' type="button"' +
|
||||
' i-id="' + id + '"' +
|
||||
style +
|
||||
(val.disabled ? ' disabled' : '') +
|
||||
(val.autofocus ? ' autofocus class="ui-dialog-autofocus"' : '') +
|
||||
'>' +
|
||||
val.value +
|
||||
'</button>';
|
||||
|
||||
that._$('button')
|
||||
.on('click', '[i-id=' + id + ']', function(event) {
|
||||
var $this = $(this);
|
||||
if (!$this.attr('disabled')) { // IE BUG
|
||||
that._trigger(id);
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
this._$('button').html(html);
|
||||
this._$('footer')[number ? 'show' : 'hide']();
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
statusbar: function(html) {
|
||||
this._$('statusbar')
|
||||
.html(html)[html ? 'show' : 'hide']();
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
_$: function(i) {
|
||||
return this._popup.find('[i=' + i + ']');
|
||||
},
|
||||
|
||||
|
||||
// 触发按钮回调函数
|
||||
_trigger: function(id) {
|
||||
var fn = this.callbacks[id];
|
||||
|
||||
return typeof fn !== 'function' || fn.call(this) !== false ?
|
||||
this.close().remove() : this;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
artDialog.oncreate = $.noop;
|
||||
|
||||
|
||||
|
||||
/** 获取最顶层的对话框API */
|
||||
artDialog.getCurrent = function() {
|
||||
return Popup.current;
|
||||
};
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 根据 ID 获取某对话框 API
|
||||
* @param {String} 对话框 ID
|
||||
* @return {Object} 对话框 API (实例)
|
||||
*/
|
||||
artDialog.get = function(id) {
|
||||
return id === undefined ?
|
||||
artDialog.list :
|
||||
artDialog.list[id];
|
||||
};
|
||||
|
||||
artDialog.list = {};
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 默认配置
|
||||
*/
|
||||
artDialog.defaults = defaults;
|
||||
|
||||
|
||||
|
||||
module.exports = artDialog;
|
||||
@ -1,212 +0,0 @@
|
||||
var $ = require('jquery');
|
||||
|
||||
|
||||
var $window = $(window);
|
||||
var $document = $(document);
|
||||
var isTouch = 'createTouch' in document;
|
||||
var html = document.documentElement;
|
||||
var isIE6 = !('minWidth' in html.style);
|
||||
var isLosecapture = !isIE6 && 'onlosecapture' in html;
|
||||
var isSetCapture = 'setCapture' in html;
|
||||
|
||||
|
||||
var types = {
|
||||
start: isTouch ? 'touchstart' : 'mousedown',
|
||||
over: isTouch ? 'touchmove' : 'mousemove',
|
||||
end: isTouch ? 'touchend' : 'mouseup'
|
||||
};
|
||||
|
||||
|
||||
var getEvent = isTouch ? function(event) {
|
||||
if (!event.touches) {
|
||||
event = event.originalEvent.touches.item(0);
|
||||
}
|
||||
return event;
|
||||
} : function(event) {
|
||||
return event;
|
||||
};
|
||||
|
||||
|
||||
var DragEvent = function() {
|
||||
this.start = $.proxy(this.start, this);
|
||||
this.over = $.proxy(this.over, this);
|
||||
this.end = $.proxy(this.end, this);
|
||||
this.onstart = this.onover = this.onend = $.noop;
|
||||
};
|
||||
|
||||
DragEvent.types = types;
|
||||
|
||||
DragEvent.prototype = {
|
||||
|
||||
start: function(event) {
|
||||
event = this.startFix(event);
|
||||
|
||||
$document
|
||||
.on(types.over, this.over)
|
||||
.on(types.end, this.end);
|
||||
|
||||
this.onstart(event);
|
||||
return false;
|
||||
},
|
||||
|
||||
over: function(event) {
|
||||
event = this.overFix(event);
|
||||
this.onover(event);
|
||||
return false;
|
||||
},
|
||||
|
||||
end: function(event) {
|
||||
event = this.endFix(event);
|
||||
|
||||
$document
|
||||
.off(types.over, this.over)
|
||||
.off(types.end, this.end);
|
||||
|
||||
this.onend(event);
|
||||
return false;
|
||||
},
|
||||
|
||||
startFix: function(event) {
|
||||
event = getEvent(event);
|
||||
|
||||
this.target = $(event.target);
|
||||
this.selectstart = function() {
|
||||
return false;
|
||||
};
|
||||
|
||||
$document
|
||||
.on('selectstart', this.selectstart)
|
||||
.on('dblclick', this.end);
|
||||
|
||||
if (isLosecapture) {
|
||||
this.target.on('losecapture', this.end);
|
||||
} else {
|
||||
$window.on('blur', this.end);
|
||||
}
|
||||
|
||||
if (isSetCapture) {
|
||||
this.target[0].setCapture();
|
||||
}
|
||||
|
||||
return event;
|
||||
},
|
||||
|
||||
overFix: function(event) {
|
||||
event = getEvent(event);
|
||||
return event;
|
||||
},
|
||||
|
||||
endFix: function(event) {
|
||||
event = getEvent(event);
|
||||
|
||||
$document
|
||||
.off('selectstart', this.selectstart)
|
||||
.off('dblclick', this.end);
|
||||
|
||||
if (isLosecapture) {
|
||||
this.target.off('losecapture', this.end);
|
||||
} else {
|
||||
$window.off('blur', this.end);
|
||||
}
|
||||
|
||||
if (isSetCapture) {
|
||||
this.target[0].releaseCapture();
|
||||
}
|
||||
|
||||
return event;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 启动拖拽
|
||||
* @param {HTMLElement} 被拖拽的元素
|
||||
* @param {Event} 触发拖拽的事件对象。可选,若无则监听 elem 的按下事件启动
|
||||
*/
|
||||
DragEvent.create = function(elem, event) {
|
||||
var $elem = $(elem);
|
||||
var dragEvent = new DragEvent();
|
||||
var startType = DragEvent.types.start;
|
||||
var noop = function() {};
|
||||
var className = elem.className
|
||||
.replace(/^\s|\s.*/g, '') + '-drag-start';
|
||||
|
||||
var minX;
|
||||
var minY;
|
||||
var maxX;
|
||||
var maxY;
|
||||
|
||||
var api = {
|
||||
onstart: noop,
|
||||
onover: noop,
|
||||
onend: noop,
|
||||
off: function() {
|
||||
$elem.off(startType, dragEvent.start);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
dragEvent.onstart = function(event) {
|
||||
var isFixed = $elem.css('position') === 'fixed';
|
||||
var dl = $document.scrollLeft();
|
||||
var dt = $document.scrollTop();
|
||||
var w = $elem.width();
|
||||
var h = $elem.height();
|
||||
|
||||
minX = 0;
|
||||
minY = 0;
|
||||
maxX = isFixed ? $window.width() - w + minX : $document.width() - w;
|
||||
maxY = isFixed ? $window.height() - h + minY : $document.height() - h;
|
||||
|
||||
var offset = $elem.offset();
|
||||
var left = this.startLeft = isFixed ? offset.left - dl : offset.left;
|
||||
var top = this.startTop = isFixed ? offset.top - dt : offset.top;
|
||||
|
||||
this.clientX = event.clientX;
|
||||
this.clientY = event.clientY;
|
||||
|
||||
$elem.addClass(className);
|
||||
api.onstart.call(elem, event, left, top);
|
||||
};
|
||||
|
||||
|
||||
dragEvent.onover = function(event) {
|
||||
var left = event.clientX - this.clientX + this.startLeft;
|
||||
var top = event.clientY - this.clientY + this.startTop;
|
||||
var style = $elem[0].style;
|
||||
|
||||
left = Math.max(minX, Math.min(maxX, left));
|
||||
top = Math.max(minY, Math.min(maxY, top));
|
||||
|
||||
style.left = left + 'px';
|
||||
style.top = top + 'px';
|
||||
|
||||
api.onover.call(elem, event, left, top);
|
||||
};
|
||||
|
||||
|
||||
dragEvent.onend = function(event) {
|
||||
var position = $elem.position();
|
||||
var left = position.left;
|
||||
var top = position.top;
|
||||
$elem.removeClass(className);
|
||||
api.onend.call(elem, event, left, top);
|
||||
};
|
||||
|
||||
|
||||
dragEvent.off = function() {
|
||||
$elem.off(startType, dragEvent.start);
|
||||
};
|
||||
|
||||
|
||||
if (event) {
|
||||
dragEvent.start(event);
|
||||
} else {
|
||||
$elem.on(startType, dragEvent.start);
|
||||
}
|
||||
|
||||
return api;
|
||||
};
|
||||
|
||||
module.exports = DragEvent;
|
||||
@ -1,625 +0,0 @@
|
||||
var $ = require('jquery');
|
||||
|
||||
var _count = 0;
|
||||
var _isIE6 = !('minWidth' in $('html')[0].style);
|
||||
var _isFixed = !_isIE6;
|
||||
|
||||
|
||||
function Popup() {
|
||||
|
||||
this.destroyed = false;
|
||||
|
||||
|
||||
this.__popup = $('<div />')
|
||||
/*使用 <dialog /> 元素可能导致 z-index 永远置顶的问题(chrome)*/
|
||||
.css({
|
||||
display: 'none',
|
||||
position: 'absolute',
|
||||
/*
|
||||
left: 0,
|
||||
top: 0,
|
||||
bottom: 'auto',
|
||||
right: 'auto',
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
border: '0 none',
|
||||
background: 'transparent'
|
||||
*/
|
||||
outline: 0
|
||||
})
|
||||
.attr('tabindex', '-1')
|
||||
.html(this.innerHTML)
|
||||
.appendTo('body');
|
||||
|
||||
|
||||
this.__backdrop = this.__mask = $('<div />')
|
||||
.css({
|
||||
opacity: .7,
|
||||
background: '#000'
|
||||
});
|
||||
|
||||
|
||||
// 使用 HTMLElement 作为外部接口使用,而不是 jquery 对象
|
||||
// 统一的接口利于未来 Popup 移植到其他 DOM 库中
|
||||
this.node = this.__popup[0];
|
||||
this.backdrop = this.__backdrop[0];
|
||||
|
||||
_count++;
|
||||
}
|
||||
|
||||
|
||||
$.extend(Popup.prototype, {
|
||||
|
||||
/**
|
||||
* 初始化完毕事件,在 show()、showModal() 执行
|
||||
* @name Popup.prototype.onshow
|
||||
* @event
|
||||
*/
|
||||
|
||||
/**
|
||||
* 关闭事件,在 close() 执行
|
||||
* @name Popup.prototype.onclose
|
||||
* @event
|
||||
*/
|
||||
|
||||
/**
|
||||
* 销毁前事件,在 remove() 前执行
|
||||
* @name Popup.prototype.onbeforeremove
|
||||
* @event
|
||||
*/
|
||||
|
||||
/**
|
||||
* 销毁事件,在 remove() 执行
|
||||
* @name Popup.prototype.onremove
|
||||
* @event
|
||||
*/
|
||||
|
||||
/**
|
||||
* 重置事件,在 reset() 执行
|
||||
* @name Popup.prototype.onreset
|
||||
* @event
|
||||
*/
|
||||
|
||||
/**
|
||||
* 焦点事件,在 foucs() 执行
|
||||
* @name Popup.prototype.onfocus
|
||||
* @event
|
||||
*/
|
||||
|
||||
/**
|
||||
* 失焦事件,在 blur() 执行
|
||||
* @name Popup.prototype.onblur
|
||||
* @event
|
||||
*/
|
||||
|
||||
/** 浮层 DOM 素节点[*] */
|
||||
node: null,
|
||||
|
||||
/** 遮罩 DOM 节点[*] */
|
||||
backdrop: null,
|
||||
|
||||
/** 是否开启固定定位[*] */
|
||||
fixed: false,
|
||||
|
||||
/** 判断对话框是否删除[*] */
|
||||
destroyed: true,
|
||||
|
||||
/** 判断对话框是否显示 */
|
||||
open: false,
|
||||
|
||||
/** close 返回值 */
|
||||
returnValue: '',
|
||||
|
||||
/** 是否自动聚焦 */
|
||||
autofocus: true,
|
||||
|
||||
/** 对齐方式[*] */
|
||||
align: 'bottom left',
|
||||
|
||||
/** 内部的 HTML 字符串 */
|
||||
innerHTML: '',
|
||||
|
||||
/** CSS 类名 */
|
||||
className: 'ui-popup',
|
||||
|
||||
/**
|
||||
* 显示浮层
|
||||
* @param {HTMLElement, Event} 指定位置(可选)
|
||||
*/
|
||||
show: function(anchor) {
|
||||
|
||||
if (this.destroyed) {
|
||||
return this;
|
||||
}
|
||||
|
||||
var that = this;
|
||||
var popup = this.__popup;
|
||||
var backdrop = this.__backdrop;
|
||||
|
||||
this.__activeElement = this.__getActive();
|
||||
|
||||
this.open = true;
|
||||
this.follow = anchor || this.follow;
|
||||
|
||||
|
||||
// 初始化 show 方法
|
||||
if (!this.__ready) {
|
||||
|
||||
popup
|
||||
.addClass(this.className)
|
||||
.attr('role', this.modal ? 'alertdialog' : 'dialog')
|
||||
.css('position', this.fixed ? 'fixed' : 'absolute');
|
||||
|
||||
if (!_isIE6) {
|
||||
$(window).on('resize', $.proxy(this.reset, this));
|
||||
}
|
||||
|
||||
// 模态浮层的遮罩
|
||||
if (this.modal) {
|
||||
var backdropCss = {
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
top: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
overflow: 'hidden',
|
||||
userSelect: 'none',
|
||||
zIndex: this.zIndex || Popup.zIndex
|
||||
};
|
||||
|
||||
|
||||
popup.addClass(this.className + '-modal');
|
||||
|
||||
|
||||
if (!_isFixed) {
|
||||
$.extend(backdropCss, {
|
||||
position: 'absolute',
|
||||
width: $(window).width() + 'px',
|
||||
height: $(document).height() + 'px'
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
backdrop
|
||||
.css(backdropCss)
|
||||
.attr({ tabindex: '0' })
|
||||
.on('focus', $.proxy(this.focus, this));
|
||||
|
||||
// 锁定 tab 的焦点操作
|
||||
this.__mask = backdrop
|
||||
.clone(true)
|
||||
.attr('style', '')
|
||||
.insertAfter(popup);
|
||||
|
||||
backdrop
|
||||
.addClass(this.className + '-backdrop')
|
||||
.insertBefore(popup);
|
||||
|
||||
this.__ready = true;
|
||||
}
|
||||
|
||||
|
||||
if (!popup.html()) {
|
||||
popup.html(this.innerHTML);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
popup
|
||||
.addClass(this.className + '-show')
|
||||
.show();
|
||||
|
||||
backdrop.show();
|
||||
|
||||
|
||||
this.reset().focus();
|
||||
this.__dispatchEvent('show');
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
/** 显示模态浮层。参数参见 show() */
|
||||
showModal: function() {
|
||||
this.modal = true;
|
||||
return this.show.apply(this, arguments);
|
||||
},
|
||||
|
||||
|
||||
/** 关闭浮层 */
|
||||
close: function(result) {
|
||||
|
||||
if (!this.destroyed && this.open) {
|
||||
|
||||
if (result !== undefined) {
|
||||
this.returnValue = result;
|
||||
}
|
||||
|
||||
this.__popup.hide().removeClass(this.className + '-show');
|
||||
this.__backdrop.hide();
|
||||
this.open = false;
|
||||
this.blur(); // 恢复焦点,照顾键盘操作的用户
|
||||
this.__dispatchEvent('close');
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
/** 销毁浮层 */
|
||||
remove: function() {
|
||||
|
||||
if (this.destroyed) {
|
||||
return this;
|
||||
}
|
||||
|
||||
this.__dispatchEvent('beforeremove');
|
||||
|
||||
if (Popup.current === this) {
|
||||
Popup.current = null;
|
||||
}
|
||||
|
||||
|
||||
// 从 DOM 中移除节点
|
||||
this.__popup.remove();
|
||||
this.__backdrop.remove();
|
||||
this.__mask.remove();
|
||||
|
||||
|
||||
if (!_isIE6) {
|
||||
$(window).off('resize', this.reset);
|
||||
}
|
||||
|
||||
|
||||
this.__dispatchEvent('remove');
|
||||
|
||||
for (var i in this) {
|
||||
delete this[i];
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
/** 重置位置 */
|
||||
reset: function() {
|
||||
|
||||
var elem = this.follow;
|
||||
|
||||
if (elem) {
|
||||
this.__follow(elem);
|
||||
} else {
|
||||
this.__center();
|
||||
}
|
||||
|
||||
this.__dispatchEvent('reset');
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
/** 让浮层获取焦点 */
|
||||
focus: function() {
|
||||
|
||||
var node = this.node;
|
||||
var popup = this.__popup;
|
||||
var current = Popup.current;
|
||||
var index = this.zIndex = Popup.zIndex++;
|
||||
|
||||
if (current && current !== this) {
|
||||
current.blur(false);
|
||||
}
|
||||
|
||||
// 检查焦点是否在浮层里面
|
||||
if (!$.contains(node, this.__getActive())) {
|
||||
var autofocus = popup.find('[autofocus]')[0];
|
||||
|
||||
if (!this._autofocus && autofocus) {
|
||||
this._autofocus = true;
|
||||
} else {
|
||||
autofocus = node;
|
||||
}
|
||||
|
||||
this.__focus(autofocus);
|
||||
}
|
||||
|
||||
// 设置叠加高度
|
||||
popup.css('zIndex', index);
|
||||
//this.__backdrop.css('zIndex', index);
|
||||
|
||||
Popup.current = this;
|
||||
popup.addClass(this.className + '-focus');
|
||||
|
||||
this.__dispatchEvent('focus');
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
/** 让浮层失去焦点。将焦点退还给之前的元素,照顾视力障碍用户 */
|
||||
blur: function() {
|
||||
|
||||
var activeElement = this.__activeElement;
|
||||
var isBlur = arguments[0];
|
||||
|
||||
|
||||
if (isBlur !== false) {
|
||||
this.__focus(activeElement);
|
||||
}
|
||||
|
||||
this._autofocus = false;
|
||||
this.__popup.removeClass(this.className + '-focus');
|
||||
this.__dispatchEvent('blur');
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 添加事件
|
||||
* @param {String} 事件类型
|
||||
* @param {Function} 监听函数
|
||||
*/
|
||||
addEventListener: function(type, callback) {
|
||||
this.__getEventListener(type).push(callback);
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 删除事件
|
||||
* @param {String} 事件类型
|
||||
* @param {Function} 监听函数
|
||||
*/
|
||||
removeEventListener: function(type, callback) {
|
||||
var listeners = this.__getEventListener(type);
|
||||
for (var i = 0; i < listeners.length; i++) {
|
||||
if (callback === listeners[i]) {
|
||||
listeners.splice(i--, 1);
|
||||
}
|
||||
}
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
// 获取事件缓存
|
||||
__getEventListener: function(type) {
|
||||
var listener = this.__listener;
|
||||
if (!listener) {
|
||||
listener = this.__listener = {};
|
||||
}
|
||||
if (!listener[type]) {
|
||||
listener[type] = [];
|
||||
}
|
||||
return listener[type];
|
||||
},
|
||||
|
||||
|
||||
// 派发事件
|
||||
__dispatchEvent: function(type) {
|
||||
var listeners = this.__getEventListener(type);
|
||||
|
||||
if (this['on' + type]) {
|
||||
this['on' + type]();
|
||||
}
|
||||
|
||||
for (var i = 0; i < listeners.length; i++) {
|
||||
listeners[i].call(this);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// 对元素安全聚焦
|
||||
__focus: function(elem) {
|
||||
// 防止 iframe 跨域无权限报错
|
||||
// 防止 IE 不可见元素报错
|
||||
try {
|
||||
// ie11 bug: iframe 页面点击会跳到顶部
|
||||
if (this.autofocus && !/^iframe$/i.test(elem.nodeName)) {
|
||||
elem.focus();
|
||||
}
|
||||
} catch (e) {}
|
||||
},
|
||||
|
||||
|
||||
// 获取当前焦点的元素
|
||||
__getActive: function() {
|
||||
try { // try: ie8~9, iframe #26
|
||||
var activeElement = document.activeElement;
|
||||
var contentDocument = activeElement.contentDocument;
|
||||
var elem = contentDocument && contentDocument.activeElement || activeElement;
|
||||
return elem;
|
||||
} catch (e) {}
|
||||
},
|
||||
|
||||
|
||||
// 居中浮层
|
||||
__center: function() {
|
||||
|
||||
var popup = this.__popup;
|
||||
var $window = $(window);
|
||||
var $document = $(document);
|
||||
var fixed = this.fixed;
|
||||
var dl = fixed ? 0 : $document.scrollLeft();
|
||||
var dt = fixed ? 0 : $document.scrollTop();
|
||||
var ww = $window.width();
|
||||
var wh = $window.height();
|
||||
var ow = popup.width();
|
||||
var oh = popup.height();
|
||||
var left = (ww - ow) / 2 + dl;
|
||||
var top = (wh - oh) * 382 / 1000 + dt; // 黄金比例
|
||||
var style = popup[0].style;
|
||||
|
||||
|
||||
style.left = Math.max(parseInt(left), dl) + 'px';
|
||||
style.top = Math.max(parseInt(top), dt) + 'px';
|
||||
},
|
||||
|
||||
|
||||
// 指定位置 @param {HTMLElement, Event} anchor
|
||||
__follow: function(anchor) {
|
||||
|
||||
var $elem = anchor.parentNode && $(anchor);
|
||||
var popup = this.__popup;
|
||||
|
||||
|
||||
if (this.__followSkin) {
|
||||
popup.removeClass(this.__followSkin);
|
||||
}
|
||||
|
||||
|
||||
// 隐藏元素不可用
|
||||
if ($elem) {
|
||||
var o = $elem.offset();
|
||||
if (o.left * o.top < 0) {
|
||||
return this.__center();
|
||||
}
|
||||
}
|
||||
|
||||
var that = this;
|
||||
var fixed = this.fixed;
|
||||
|
||||
var $window = $(window);
|
||||
var $document = $(document);
|
||||
var winWidth = $window.width();
|
||||
var winHeight = $window.height();
|
||||
var docLeft = $document.scrollLeft();
|
||||
var docTop = $document.scrollTop();
|
||||
|
||||
|
||||
var popupWidth = popup.width();
|
||||
var popupHeight = popup.height();
|
||||
var width = $elem ? $elem.outerWidth() : 0;
|
||||
var height = $elem ? $elem.outerHeight() : 0;
|
||||
var offset = this.__offset(anchor);
|
||||
var x = offset.left;
|
||||
var y = offset.top;
|
||||
var left = fixed ? x - docLeft : x;
|
||||
var top = fixed ? y - docTop : y;
|
||||
|
||||
|
||||
var minLeft = fixed ? 0 : docLeft;
|
||||
var minTop = fixed ? 0 : docTop;
|
||||
var maxLeft = minLeft + winWidth - popupWidth;
|
||||
var maxTop = minTop + winHeight - popupHeight;
|
||||
|
||||
|
||||
var css = {};
|
||||
var align = this.align.split(' ');
|
||||
var className = this.className + '-';
|
||||
var reverse = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' };
|
||||
var name = { top: 'top', bottom: 'top', left: 'left', right: 'left' };
|
||||
|
||||
|
||||
var temp = [{
|
||||
top: top - popupHeight,
|
||||
bottom: top + height,
|
||||
left: left - popupWidth,
|
||||
right: left + width
|
||||
}, {
|
||||
top: top,
|
||||
bottom: top - popupHeight + height,
|
||||
left: left,
|
||||
right: left - popupWidth + width
|
||||
}];
|
||||
|
||||
|
||||
var center = {
|
||||
left: left + width / 2 - popupWidth / 2,
|
||||
top: top + height / 2 - popupHeight / 2
|
||||
};
|
||||
|
||||
|
||||
var range = {
|
||||
left: [minLeft, maxLeft],
|
||||
top: [minTop, maxTop]
|
||||
};
|
||||
|
||||
|
||||
// 超出可视区域重新适应位置
|
||||
$.each(align, function(i, val) {
|
||||
|
||||
// 超出右或下边界:使用左或者上边对齐
|
||||
if (temp[i][val] > range[name[val]][1]) {
|
||||
val = align[i] = reverse[val];
|
||||
}
|
||||
|
||||
// 超出左或右边界:使用右或者下边对齐
|
||||
if (temp[i][val] < range[name[val]][0]) {
|
||||
align[i] = reverse[val];
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
// 一个参数的情况
|
||||
if (!align[1]) {
|
||||
name[align[1]] = name[align[0]] === 'left' ? 'top' : 'left';
|
||||
temp[1][align[1]] = center[name[align[1]]];
|
||||
}
|
||||
|
||||
|
||||
//添加follow的css, 为了给css使用
|
||||
className += align.join('-') + ' ' + this.className + '-follow';
|
||||
|
||||
that.__followSkin = className;
|
||||
|
||||
|
||||
if ($elem) {
|
||||
popup.addClass(className);
|
||||
}
|
||||
|
||||
|
||||
css[name[align[0]]] = parseInt(temp[0][align[0]]);
|
||||
css[name[align[1]]] = parseInt(temp[1][align[1]]);
|
||||
popup.css(css);
|
||||
|
||||
},
|
||||
|
||||
|
||||
// 获取元素相对于页面的位置(包括iframe内的元素)
|
||||
// 暂时不支持两层以上的 iframe 套嵌
|
||||
__offset: function(anchor) {
|
||||
|
||||
var isNode = anchor.parentNode;
|
||||
var offset = isNode ? $(anchor).offset() : {
|
||||
left: anchor.pageX,
|
||||
top: anchor.pageY
|
||||
};
|
||||
|
||||
|
||||
anchor = isNode ? anchor : anchor.target;
|
||||
var ownerDocument = anchor.ownerDocument;
|
||||
var defaultView = ownerDocument.defaultView || ownerDocument.parentWindow;
|
||||
|
||||
if (defaultView == window) { // IE <= 8 只能使用两个等于号
|
||||
return offset;
|
||||
}
|
||||
|
||||
// {Element: Ifarme}
|
||||
var frameElement = defaultView.frameElement;
|
||||
var $ownerDocument = $(ownerDocument);
|
||||
var docLeft = $ownerDocument.scrollLeft();
|
||||
var docTop = $ownerDocument.scrollTop();
|
||||
var frameOffset = $(frameElement).offset();
|
||||
var frameLeft = frameOffset.left;
|
||||
var frameTop = frameOffset.top;
|
||||
|
||||
return {
|
||||
left: offset.left + frameLeft - docLeft,
|
||||
top: offset.top + frameTop - docTop
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
/** 当前叠加高度 */
|
||||
Popup.zIndex = 1024;
|
||||
|
||||
|
||||
/** 顶层浮层的实例 */
|
||||
Popup.current = null;
|
||||
|
||||
|
||||
module.exports = Popup;
|
||||
@ -1,33 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button data-event="test" data-align="top right">open dialog</button>
|
||||
<button data-event="test" data-align="top left" style="position:absolute;right:0;top:0;width:100px">open dialog</button>
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
<script>
|
||||
jQuery('button[data-event=test]').on('click', function() {
|
||||
var d = dialog({
|
||||
id: 'align-test',
|
||||
title: '消息',
|
||||
content: '风吹起的青色衣衫,夕阳里的温暖容颜,你比以前更加美丽,像盛开的花<br>——许巍《难忘的一天》',
|
||||
okValue: '确 定',
|
||||
align: $(this).data('align'),
|
||||
//height: 1024,
|
||||
ok: function() {},
|
||||
cancelValue: '取消',
|
||||
cancel: function() {}
|
||||
});
|
||||
|
||||
d.show(this);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,148 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
<style>
|
||||
#follow-elem {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -60px;
|
||||
top: 38%;
|
||||
margin-top: -40px;
|
||||
background: #e3f5ff;
|
||||
border: 1px solid #abd3ea;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
#follow-elem input {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#follow-elem .nw {
|
||||
left: 14px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#follow-elem .n {
|
||||
left: 50%;
|
||||
margin-left: -7px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#follow-elem .ne {
|
||||
right: 14px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#follow-elem .en {
|
||||
right: 0;
|
||||
top: 14px;
|
||||
}
|
||||
|
||||
#follow-elem .e {
|
||||
right: 0;
|
||||
top: 50%;
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
#follow-elem .es {
|
||||
right: 0;
|
||||
bottom: 14px;
|
||||
}
|
||||
|
||||
#follow-elem .se {
|
||||
right: 14px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#follow-elem .s {
|
||||
left: 50%;
|
||||
margin-left: -7px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#follow-elem .sw {
|
||||
left: 14px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#follow-elem .ws {
|
||||
left: 0;
|
||||
bottom: 14px;
|
||||
}
|
||||
|
||||
#follow-elem .w {
|
||||
left: 0;
|
||||
top: 50%;
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
#follow-elem .wn {
|
||||
left: 0;
|
||||
top: 14px;
|
||||
}
|
||||
|
||||
code {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
code strong {
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<pre><code>var follow = document.getElementById('follow-elem');
|
||||
var d = dialog({
|
||||
align: '<strong id="test-align-value">bottom left</strong>',
|
||||
content: 'hello world'
|
||||
});
|
||||
d.show(follow);</code></pre>
|
||||
|
||||
<div id="follow-elem">
|
||||
<input type="radio" name="align" value="top left" class="nw" title="top left">
|
||||
<input type="radio" name="align" value="top" class="n" title="top">
|
||||
<input type="radio" name="align" value="top right" class="ne" title="top right">
|
||||
<input type="radio" name="align" value="right top" class="en" title="right top">
|
||||
<input type="radio" name="align" value="right" class="e" title="right">
|
||||
<input type="radio" name="align" value="right bottom" class="es" title="right bottom">
|
||||
<input type="radio" name="align" value="bottom right" class="se" title="bottom right">
|
||||
<input type="radio" name="align" value="bottom" class="s" title="bottom">
|
||||
<input type="radio" name="align" value="bottom left" class="sw" title="bottom left" checked>
|
||||
<input type="radio" name="align" value="left bottom" class="ws" title="left bottom">
|
||||
<input type="radio" name="align" value="left" class="w" title="left">
|
||||
<input type="radio" name="align" value="left top" class="wn" title="left top">
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
|
||||
<script>
|
||||
var follow = $('#follow-elem')[0];
|
||||
var d = dialog({
|
||||
align: 'bottom left',
|
||||
content: 'hello world'
|
||||
});
|
||||
d.show(follow);
|
||||
|
||||
$('#follow-elem').on('click', '[type=radio]', function() {
|
||||
if (d.open) {
|
||||
var align = $(this).val();
|
||||
d.align = align;
|
||||
d.show(follow);
|
||||
$('#test-align-value').html(align);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,43 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
|
||||
<script>
|
||||
var d = dialog({
|
||||
title: '消息',
|
||||
content: '风吹起的青色衣衫,夕阳里的温暖容颜,你比以前更加美丽,像盛开的花<br>——许巍《难忘的一天》',
|
||||
button: [{
|
||||
value: '同意',
|
||||
callback: function() {
|
||||
this
|
||||
.content('你同意了');
|
||||
return false;
|
||||
},
|
||||
autofocus: true
|
||||
}, {
|
||||
value: '不同意',
|
||||
callback: function() {
|
||||
alert('你不同意')
|
||||
}
|
||||
}, {
|
||||
id: 'button-disabled',
|
||||
value: '无效按钮',
|
||||
disabled: true
|
||||
}, {
|
||||
value: '关闭我'
|
||||
}]
|
||||
});
|
||||
|
||||
d.show();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,38 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button id="test">close().remove()</button>
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
|
||||
<script>
|
||||
var d = dialog({
|
||||
title: '消息',
|
||||
content: '风吹起的青色衣衫,夕阳里的温暖容颜,你比以前更加美丽,像盛开的花<br>——许巍《难忘的一天》',
|
||||
okValue: '确 定',
|
||||
ok: function() {}
|
||||
});
|
||||
|
||||
d.show();
|
||||
|
||||
$('#test').on('click', function() {
|
||||
d.close().remove();
|
||||
});
|
||||
|
||||
d.onclose = function() {
|
||||
alert('对话框关闭');
|
||||
};
|
||||
|
||||
d.onremove = function() {
|
||||
alert('对话框销毁');
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,55 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button id="test2">1. content(elem).show()</button> <button id="test3">2. close()</button> <button id="test4">3. show()</button> <button id="test5">4. close().remove()</button>
|
||||
<div id="test-content" style="display:none">
|
||||
<p>我是隐藏的DOM节点<button id="test">alert</button></p>
|
||||
</div>
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
|
||||
<script>
|
||||
window.dialog = dialog;
|
||||
$('#test').on('click', function() {
|
||||
alert('click')
|
||||
});
|
||||
|
||||
var d = dialog({
|
||||
title: '消息',
|
||||
content: '风吹起的青色衣衫,夕阳里的温暖容颜,你比以前更加美丽,像盛开的花<br>——许巍《难忘的一天》',
|
||||
okValue: '确 定'
|
||||
});
|
||||
|
||||
var elem = document.getElementById('test-content');
|
||||
|
||||
$('#test2').on('click', function() {
|
||||
d.content(elem).show();
|
||||
});
|
||||
|
||||
$('#test3').on('click', function() {
|
||||
d.close();
|
||||
});
|
||||
|
||||
$('#test4').on('click', function() {
|
||||
d.show();
|
||||
});
|
||||
|
||||
$('#test5').on('click', function() {
|
||||
d.close().remove();
|
||||
});
|
||||
|
||||
d.addEventListener('remove', function() {
|
||||
$('#test2, #test3, #test4, #test5').off('click').on('click', function() {
|
||||
alert('对话框已经销毁');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,35 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button id="test">content('hello world')</button>
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
|
||||
<script>
|
||||
var d = dialog({
|
||||
title: '消息',
|
||||
content: '风吹起的青色衣衫,夕阳里的温暖容颜,你比以前更加美丽,像盛开的花<br>——许巍《难忘的一天》',
|
||||
okValue: '确 定'
|
||||
});
|
||||
|
||||
d.show();
|
||||
|
||||
$('#test').on('click', function() {
|
||||
d.content('hello world');
|
||||
});
|
||||
|
||||
d.addEventListener('remove', function() {
|
||||
$('#test').off('click').on('click', function() {
|
||||
alert('对话框已经销毁');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,42 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
<style>
|
||||
body {
|
||||
*margin: 0;
|
||||
*padding: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button data-event="test">open dialog</button>
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog-plus.js"></script>
|
||||
|
||||
<script>
|
||||
$('button[data-event=test]').on('click', function() {
|
||||
var d = dialog({
|
||||
title: '消息',
|
||||
content: '风吹起的青色衣衫,夕阳里的温暖容颜,你比以前更加美丽,像盛开的花<br>——许巍《难忘的一天》',
|
||||
okValue: '确 定',
|
||||
ok: function() {
|
||||
var that = this;
|
||||
setTimeout(function() {
|
||||
that.title('提交中..');
|
||||
}, 2000);
|
||||
return false;
|
||||
},
|
||||
cancelValue: '取消',
|
||||
cancel: function() {}
|
||||
});
|
||||
|
||||
d.show();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,27 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
</head>
|
||||
|
||||
<body style="height: 2400px;">
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
|
||||
<script>
|
||||
var d = dialog({
|
||||
title: '消息',
|
||||
content: '风吹起的青色衣衫,夕阳里的温暖容颜,你比以前更加美丽,像盛开的花<br>——许巍《难忘的一天》',
|
||||
fixed: true,
|
||||
okValue: '确 定',
|
||||
ok: function() {}
|
||||
});
|
||||
|
||||
|
||||
d.show();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,63 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button data-event="test">test1</button>
|
||||
<br />
|
||||
<button data-event="test2">test2</button> <input id="input" />
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
|
||||
<script>
|
||||
if (!this.console) {
|
||||
this.console = {
|
||||
log: function() {}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
$(document).on('focusin', function(event) {
|
||||
console.log('activeElement', event.target);
|
||||
});
|
||||
|
||||
$('button[data-event=test]').on('click', function() {
|
||||
console.log('根据浏览器规则,此时焦点应该在按钮上');
|
||||
|
||||
var d = dialog({
|
||||
quickClose: true,
|
||||
content: 'hello world',
|
||||
follow: this,
|
||||
onclose: function() {
|
||||
console.log('对话框执行close()操作,此时焦点应该恢复到对话框出现之前的元素上');
|
||||
}
|
||||
});
|
||||
|
||||
d.show();
|
||||
console.log('对话框执行show()方法,焦点应该在对话框上');
|
||||
});
|
||||
|
||||
$('button[data-event=test2]').on('click', function() {
|
||||
console.log('根据浏览器规则,此时焦点应该在按钮上');
|
||||
|
||||
var d = dialog({
|
||||
quickClose: true,
|
||||
content: '输入错误,请重新输入',
|
||||
onclose: function() {
|
||||
$('#input').focus();
|
||||
console.log('对话框执行close()操作,如果开发者对焦点操作,那么将使用开发者的设置');
|
||||
},
|
||||
follow: $('#input')[0]
|
||||
});
|
||||
|
||||
d.show();
|
||||
console.log('对话框执行show()方法,焦点应该在对话框上');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,37 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button data-event="test">open dialog</button>
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
|
||||
<script>
|
||||
$('button[data-event=test]').on('click', function() {
|
||||
var d = dialog({
|
||||
title: '消息',
|
||||
content: '风吹起的青色衣衫,夕阳里的温暖容颜,你比以前更加美丽,像盛开的花<br>——许巍《难忘的一天》',
|
||||
okValue: '确 定',
|
||||
ok: function() {
|
||||
var that = this;
|
||||
setTimeout(function() {
|
||||
that.title('提交中..');
|
||||
}, 2000);
|
||||
return false;
|
||||
},
|
||||
follow: this,
|
||||
cancelValue: '取消',
|
||||
cancel: function() {}
|
||||
});
|
||||
|
||||
d.show();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,42 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>iframe - test</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#doc {
|
||||
height: 560px;
|
||||
}
|
||||
|
||||
#doc iframe {
|
||||
display: block;
|
||||
width: 550px;
|
||||
border: 1px solid #CCC;
|
||||
height: 450px;
|
||||
margin: 100px auto 0 auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
!/http/.test(location.protocol) && document.write('<h1>请在服务端预览(Chrome 浏览器本地访问 iframe 会跨域无权限)</h1>');
|
||||
</script>
|
||||
<div id="doc">
|
||||
<iframe id="test-iframe" src="about:blank" data-src="show-element.html"></iframe>
|
||||
</div>
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
<script>
|
||||
window.dialog = dialog;
|
||||
var $iframe = $('#test-iframe');
|
||||
$iframe.attr('src', $iframe.data('src'));
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,70 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div><label><input autofocus id="input" type="text" value="hello world" style="padding: 5px;font-size:18px" /></label></div>
|
||||
<button id="height">设置高度</button> <button id="open">传值到新的对话框</button> <button id="remove">返回值并关闭当前对话框</button>
|
||||
<script src="../../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../../dist/dialog.js"></script>
|
||||
<script>
|
||||
window.console = window.console || {
|
||||
log: function() {}
|
||||
}
|
||||
|
||||
$(function() {
|
||||
try {
|
||||
var dialog = top.dialog.get(window);
|
||||
} catch (e) {
|
||||
$('body').append(
|
||||
'<p><strong>Error:</strong> 跨域无法无法操作 iframe 对象</p>' +
|
||||
'<p>chrome 浏览器本地会认为跨域,请使用 http 方式访问当前页面</p>'
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
dialog.title('测试例子');
|
||||
dialog.width(550);
|
||||
dialog.height($(document).height());
|
||||
dialog.reset(); // 重置对话框位置
|
||||
|
||||
|
||||
$('#remove').on('click', function() {
|
||||
dialog.close($('#input').val()); // 关闭(隐藏)对话框
|
||||
dialog.remove(); // 主动销毁对话框
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#height').on('click', function() {
|
||||
dialog.height(400).reset();
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#open').on('click', function() {
|
||||
top.dialog({
|
||||
url: './dialog-input.html',
|
||||
title: 'loading..',
|
||||
width: 400,
|
||||
//height: 120,
|
||||
data: $('#input').val(), // 给 iframe 的数据
|
||||
onclose: function() {
|
||||
this.returnValue && $('#input').val(this.returnValue);
|
||||
dialog.focus();
|
||||
},
|
||||
oniframeload: function() {
|
||||
//console.log('iframe ready')
|
||||
}
|
||||
})
|
||||
.showModal();
|
||||
return false;
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,32 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div><label><input id="input" type="text" value="hello world" style="padding: 5px;font-size:18px" /></label></div>
|
||||
<button id="ok">返回值并关闭当前对话框</button>
|
||||
<script src="../../lib/jquery-1.10.2.js"></script>
|
||||
<script>
|
||||
window.console = window.console || {
|
||||
log: function() {}
|
||||
}
|
||||
$(function() {
|
||||
var dialog = top.dialog.get(window);
|
||||
var data = dialog.data; // 获取对话框传递过来的数据
|
||||
$('#input').val(data).focus();
|
||||
|
||||
dialog.title('请输入');
|
||||
$('#ok').on('click', function() {
|
||||
var val = $('#input').val();
|
||||
dialog.close(val);
|
||||
dialog.remove();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,37 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#doc {
|
||||
height: 560px;
|
||||
}
|
||||
|
||||
#doc iframe {
|
||||
display: block;
|
||||
width: 350px;
|
||||
border: 1px solid #CCC;
|
||||
height: 350px;
|
||||
margin: 100px auto 0 auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
!/http/.test(location.protocol) && document.write('<h1>请在服务端预览(部分浏览器本地 iframe 会跨域无权限)</h1>');
|
||||
</script>
|
||||
<div id="doc">
|
||||
<iframe id="test-iframe" src="main.html"></iframe>
|
||||
</div>
|
||||
<script src="../../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../../dist/dialog-plus.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,52 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button data-event="test">在顶层页打开对话框</button> <button data-event="reload">刷新本框架页</button>
|
||||
<div id="value"></div>
|
||||
<script src="../../lib/jquery-1.10.2.js"></script>
|
||||
<script>
|
||||
// demo
|
||||
window.console = window.console || {
|
||||
log: function() {}
|
||||
}
|
||||
|
||||
$('button[data-event=test]').on('click', function() {
|
||||
top.dialog({
|
||||
id: 'test-dialog',
|
||||
title: 'loading..',
|
||||
url: './dialog-content.html',
|
||||
//quickClose: true,
|
||||
onshow: function() {
|
||||
console.log('onshow');
|
||||
},
|
||||
oniframeload: function() {
|
||||
console.log('oniframeload');
|
||||
},
|
||||
onclose: function() {
|
||||
if (this.returnValue) {
|
||||
$('#value').html(this.returnValue);
|
||||
}
|
||||
console.log('onclose');
|
||||
},
|
||||
onremove: function() {
|
||||
console.log('onremove');
|
||||
}
|
||||
})
|
||||
.show(this);
|
||||
return false;
|
||||
});
|
||||
|
||||
$('button[data-event=reload]').on('click', function() {
|
||||
location.reload();
|
||||
return false;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,42 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#fixed {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 20%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button id="test">content('hello world')</button>
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
|
||||
<script>
|
||||
var d = dialog({
|
||||
width: 60,
|
||||
height: 60
|
||||
});
|
||||
|
||||
d.show();
|
||||
|
||||
$('#test').on('click', function() {
|
||||
d.width('auto');
|
||||
d.height('auto');
|
||||
d.content('hello world');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,38 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button data-event="test">open dialog</button>
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
|
||||
<script>
|
||||
$('button[data-event=test]').on('click', function() {
|
||||
var d = dialog({
|
||||
title: '消息',
|
||||
content: '风吹起的青色衣衫,夕阳里的温暖容颜,你比以前更加美丽,像盛开的花<br>——许巍《难忘的一天》',
|
||||
okValue: '确 定',
|
||||
quickClose: true,
|
||||
ok: function() {
|
||||
var that = this;
|
||||
setTimeout(function() {
|
||||
that.title('提交中..');
|
||||
}, 2000);
|
||||
return false;
|
||||
},
|
||||
follow: this,
|
||||
cancelValue: '取消',
|
||||
cancel: function() {}
|
||||
});
|
||||
|
||||
d.show();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,92 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#fixed {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 20%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<table style="width:100%; height:100%">
|
||||
<tr>
|
||||
<td style="text-align: left; vertical-align: top;"><button data-event="test">follow me</button></td>
|
||||
<td style="text-align: center; vertical-align: top;"><button data-event="test">follow me</button></td>
|
||||
<td style="text-align: right; vertical-align: top;"><button data-event="test">follow me</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align: left; vertical-align: middle;"><button data-event="test">follow me</button></td>
|
||||
<td style="text-align: center; vertical-align: middle;"><button data-event="test">follow me</button></td>
|
||||
<td style="text-align: right; vertical-align: middle;"><button data-event="test">follow me</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align: left; vertical-align: bottom;"><button data-event="test">follow me</button></td>
|
||||
<td style="text-align: center; vertical-align: bottom;"><button data-event="test">follow me</button></td>
|
||||
<td style="text-align: right; vertical-align: bottom;"><button data-event="test">follow me</button></td>
|
||||
</tr>
|
||||
</table>
|
||||
<table style="width:100%; height:100%">
|
||||
<tr>
|
||||
<td style="text-align: left; vertical-align: top;"><button data-event="test">follow me</button></td>
|
||||
<td style="text-align: center; vertical-align: top;"><button data-event="test">follow me</button></td>
|
||||
<td style="text-align: right; vertical-align: top;"><button data-event="test">follow me</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align: left; vertical-align: middle;"><button data-event="test">follow me</button></td>
|
||||
<td style="text-align: center; vertical-align: middle;"><button data-event="test">follow me</button></td>
|
||||
<td style="text-align: right; vertical-align: middle;"><button data-event="test">follow</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align: left; vertical-align: bottom;"><button data-event="test">follow me</button></td>
|
||||
<td style="text-align: center; vertical-align: bottom;"><button data-event="test">follow me</button></td>
|
||||
<td style="text-align: right; vertical-align: bottom;"><button data-event="test">follow me</button></td>
|
||||
</tr>
|
||||
</table>
|
||||
<button id="fixed" data-event="test">follow me</button>
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
|
||||
<script>
|
||||
if (top.dialog) {
|
||||
// 仅用来测试跨窗口弹出
|
||||
dialog = top.dialog;
|
||||
}
|
||||
|
||||
var d = dialog({
|
||||
title: '定位到元素演示',
|
||||
content: '风吹起的青色衣衫,夕阳里的温暖容颜,你比以前更加美丽,像盛开的花<br>——许巍《难忘的一天》',
|
||||
okValue: '确 定',
|
||||
ok: function() {},
|
||||
cancel: function() {
|
||||
this.close(); // 隐藏
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
$('button[data-event=test]').on('click', function() {
|
||||
|
||||
d.show(this);
|
||||
});
|
||||
|
||||
d.onremove = function() {
|
||||
//alert('remove')
|
||||
};
|
||||
|
||||
d.onshow = function() {
|
||||
//console.log(this);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,26 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
<script>
|
||||
var d = dialog({
|
||||
content: 'hello world'
|
||||
});
|
||||
|
||||
d.show();
|
||||
|
||||
$(document).on('contextmenu', function(event) {
|
||||
d.open && d.show(event);
|
||||
return !d.open;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,38 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button data-event="test">open dialog</button>
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
|
||||
<script>
|
||||
$('button[data-event=test]').on('click', function() {
|
||||
var d = dialog({
|
||||
title: '消息',
|
||||
content: '风吹起的青色衣衫,夕阳里的温暖容颜,你比以前更加美丽,像盛开的花<br>——许巍《难忘的一天》',
|
||||
okValue: '确 定',
|
||||
ok: function() {
|
||||
var that = this;
|
||||
setTimeout(function() {
|
||||
that.title('提交中..');
|
||||
}, 2000);
|
||||
return false;
|
||||
},
|
||||
cancelValue: '取消',
|
||||
cancel: function() {
|
||||
alert('你点了取消按钮')
|
||||
}
|
||||
});
|
||||
|
||||
d.show();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,45 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button data-event="test">open dialog</button>
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
|
||||
<script>
|
||||
$('button[data-event=test]').on('click', function() {
|
||||
var d = dialog({
|
||||
title: '消息',
|
||||
content: '风吹起的青色衣衫,夕阳里的温暖容颜,你比以前更加美丽,像盛开的花<br>——许巍《难忘的一天》',
|
||||
okValue: '确 定',
|
||||
ok: function() {
|
||||
dialog()
|
||||
.title('提示2')
|
||||
.content('hello world')
|
||||
.button([{
|
||||
value: '打开',
|
||||
autofocus: true,
|
||||
callback: function() {
|
||||
dialog()
|
||||
.title('提示')
|
||||
.showModal();
|
||||
}
|
||||
}])
|
||||
.show();
|
||||
return false;
|
||||
},
|
||||
cancelValue: '取消',
|
||||
cancel: function() {}
|
||||
});
|
||||
|
||||
d.showModal();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,39 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#fixed {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 20%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button id="test">title('hello world')</button>
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
|
||||
<script>
|
||||
var d = dialog({
|
||||
title: 'loading..'
|
||||
});
|
||||
|
||||
d.show();
|
||||
|
||||
$('#test').on('click', function() {
|
||||
d.title('hello world');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,26 +0,0 @@
|
||||
var webpack = require('webpack');
|
||||
var version = require('./package.json').version;
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
'dialog': './src/dialog.js',
|
||||
'dialog-plus': './src/dialog-plus.js'
|
||||
},
|
||||
output: {
|
||||
path: 'dist',
|
||||
filename: '[name].js',
|
||||
library: `dialog`,
|
||||
libraryTarget: 'umd'
|
||||
},
|
||||
plugins: [
|
||||
new webpack.BannerPlugin('art-dialog@' + version + ' | https://github.com/aui/artDialog')
|
||||
],
|
||||
externals: {
|
||||
jquery: 'jQuery'
|
||||
},
|
||||
module: {
|
||||
loaders: [
|
||||
{ test: /\.css$/, loader: 'style-loader!css-loader' }
|
||||
]
|
||||
}
|
||||
};
|
||||
@ -6,7 +6,6 @@ import org.maxkey.constants.OPERATEMESSAGE;
|
||||
import org.maxkey.dao.service.MyProfileService;
|
||||
import org.maxkey.dao.service.UserInfoService;
|
||||
import org.maxkey.domain.UserInfo;
|
||||
import org.maxkey.util.StringUtils;
|
||||
import org.maxkey.web.WebContext;
|
||||
import org.maxkey.web.message.Message;
|
||||
import org.maxkey.web.message.MessageScope;
|
||||
@ -59,8 +58,6 @@ public class ProfileController {
|
||||
@RequestMapping(value="/update/myProfile")
|
||||
public ModelAndView updatebasic(@Valid @ModelAttribute("userInfo")UserInfo userInfo,BindingResult result) {
|
||||
_logger.debug(userInfo.toString());
|
||||
userInfo.setNameZHShortSpell(StringUtils.hanYu2Pinyin(userInfo.getDisplayName(), true));
|
||||
userInfo.setNameZHSpell(StringUtils.hanYu2Pinyin(userInfo.getDisplayName(), false));
|
||||
|
||||
// if(userInfo.getExtraAttributeValue()!=null){
|
||||
// String []extraAttributeLabel=userInfo.getExtraAttributeName().split(",");
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
bower_components
|
||||
@ -1,44 +0,0 @@
|
||||
module.exports = function (grunt) {
|
||||
|
||||
grunt.initConfig({
|
||||
pkg: grunt.file.readJSON('package.json'),
|
||||
meta: {
|
||||
banner: '/*! <%= pkg.name %> v<%= pkg.version %> | <%= pkg.homepage %> */\n'
|
||||
},
|
||||
unwrap: {
|
||||
options: {
|
||||
base: './src',
|
||||
globalBase: './src/global_modules',
|
||||
name: 'dialog',
|
||||
namespace: 'window',
|
||||
banner: '<%= meta.banner %>'
|
||||
},
|
||||
'dialog.js': {
|
||||
src: './src/dialog.js',
|
||||
dest: './dist/dialog.js'
|
||||
},
|
||||
'dialog-plus.js': {
|
||||
src: './src/dialog-plus.js',
|
||||
dest: './dist/dialog-plus.js'
|
||||
}
|
||||
},
|
||||
uglify: {
|
||||
options: {
|
||||
banner: '<%= meta.banner %>'
|
||||
},
|
||||
'dialog.js': {
|
||||
src: './dist/dialog.js',
|
||||
dest: './dist/dialog-min.js'
|
||||
},
|
||||
'dialog-plus.js': {
|
||||
src: './dist/dialog-plus.js',
|
||||
dest: './dist/dialog-plus-min.js'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
grunt.loadNpmTasks('grunt-unwrap');
|
||||
grunt.loadNpmTasks('grunt-contrib-uglify');
|
||||
grunt.registerTask('default', ['unwrap', 'uglify']);
|
||||
|
||||
};
|
||||
@ -1,56 +0,0 @@
|
||||
GNU LESSER GENERAL PUBLIC LICENSE
|
||||
Version 3, 29 June 2007
|
||||
|
||||
Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
|
||||
|
||||
Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed.
|
||||
|
||||
This version of the GNU Lesser General Public License incorporates the terms and conditions of version 3 of the GNU General Public License, supplemented by the additional permissions listed below.
|
||||
|
||||
0. Additional Definitions.
|
||||
As used herein, “this License” refers to version 3 of the GNU Lesser General Public License, and the “GNU GPL” refers to version 3 of the GNU General Public License.
|
||||
|
||||
“The Library” refers to a covered work governed by this License, other than an Application or a Combined Work as defined below.
|
||||
|
||||
An “Application” is any work that makes use of an interface provided by the Library, but which is not otherwise based on the Library. Defining a subclass of a class defined by the Library is deemed a mode of using an interface provided by the Library.
|
||||
|
||||
A “Combined Work” is a work produced by combining or linking an Application with the Library. The particular version of the Library with which the Combined Work was made is also called the “Linked Version”.
|
||||
|
||||
The “Minimal Corresponding Source” for a Combined Work means the Corresponding Source for the Combined Work, excluding any source code for portions of the Combined Work that, considered in isolation, are based on the Application, and not on the Linked Version.
|
||||
|
||||
The “Corresponding Application Code” for a Combined Work means the object code and/or source code for the Application, including any data and utility programs needed for reproducing the Combined Work from the Application, but excluding the System Libraries of the Combined Work.
|
||||
|
||||
1. Exception to Section 3 of the GNU GPL.
|
||||
You may convey a covered work under sections 3 and 4 of this License without being bound by section 3 of the GNU GPL.
|
||||
|
||||
2. Conveying Modified Versions.
|
||||
If you modify a copy of the Library, and, in your modifications, a facility refers to a function or data to be supplied by an Application that uses the facility (other than as an argument passed when the facility is invoked), then you may convey a copy of the modified version:
|
||||
|
||||
a) under this License, provided that you make a good faith effort to ensure that, in the event an Application does not supply the function or data, the facility still operates, and performs whatever part of its purpose remains meaningful, or
|
||||
b) under the GNU GPL, with none of the additional permissions of this License applicable to that copy.
|
||||
3. Object Code Incorporating Material from Library Header Files.
|
||||
The object code form of an Application may incorporate material from a header file that is part of the Library. You may convey such object code under terms of your choice, provided that, if the incorporated material is not limited to numerical parameters, data structure layouts and accessors, or small macros, inline functions and templates (ten or fewer lines in length), you do both of the following:
|
||||
|
||||
a) Give prominent notice with each copy of the object code that the Library is used in it and that the Library and its use are covered by this License.
|
||||
b) Accompany the object code with a copy of the GNU GPL and this license document.
|
||||
4. Combined Works.
|
||||
You may convey a Combined Work under terms of your choice that, taken together, effectively do not restrict modification of the portions of the Library contained in the Combined Work and reverse engineering for debugging such modifications, if you also do each of the following:
|
||||
|
||||
a) Give prominent notice with each copy of the Combined Work that the Library is used in it and that the Library and its use are covered by this License.
|
||||
b) Accompany the Combined Work with a copy of the GNU GPL and this license document.
|
||||
c) For a Combined Work that displays copyright notices during execution, include the copyright notice for the Library among these notices, as well as a reference directing the user to the copies of the GNU GPL and this license document.
|
||||
d) Do one of the following:
|
||||
0) Convey the Minimal Corresponding Source under the terms of this License, and the Corresponding Application Code in a form suitable for, and under terms that permit, the user to recombine or relink the Application with a modified version of the Linked Version to produce a modified Combined Work, in the manner specified by section 6 of the GNU GPL for conveying Corresponding Source.
|
||||
1) Use a suitable shared library mechanism for linking with the Library. A suitable mechanism is one that (a) uses at run time a copy of the Library already present on the user's computer system, and (b) will operate properly with a modified version of the Library that is interface-compatible with the Linked Version.
|
||||
e) Provide Installation Information, but only if you would otherwise be required to provide such information under section 6 of the GNU GPL, and only to the extent that such information is necessary to install and execute a modified version of the Combined Work produced by recombining or relinking the Application with a modified version of the Linked Version. (If you use option 4d0, the Installation Information must accompany the Minimal Corresponding Source and Corresponding Application Code. If you use option 4d1, you must provide the Installation Information in the manner specified by section 6 of the GNU GPL for conveying Corresponding Source.)
|
||||
5. Combined Libraries.
|
||||
You may place library facilities that are a work based on the Library side by side in a single library together with other library facilities that are not Applications and are not covered by this License, and convey such a combined library under terms of your choice, if you do both of the following:
|
||||
|
||||
a) Accompany the combined library with a copy of the same work based on the Library, uncombined with any other library facilities, conveyed under the terms of this License.
|
||||
b) Give prominent notice with the combined library that part of it is a work based on the Library, and explaining where to find the accompanying uncombined form of the same work.
|
||||
6. Revised Versions of the GNU Lesser General Public License.
|
||||
The Free Software Foundation may publish revised and/or new versions of the GNU Lesser General Public License from time to time. Such new versions will be similar in spirit to the present version, but may differ in detail to address new problems or concerns.
|
||||
|
||||
Each version is given a distinguishing version number. If the Library as you received it specifies that a certain numbered version of the GNU Lesser General Public License “or any later version” applies to it, you have the option of following the terms and conditions either of that published version or of any later version published by the Free Software Foundation. If the Library as you received it does not specify a version number of the GNU Lesser General Public License, you may choose any version of the GNU Lesser General Public License ever published by the Free Software Foundation.
|
||||
|
||||
If the Library as you received it specifies that a proxy can decide whether future versions of the GNU Lesser General Public License shall apply, that proxy's public statement of acceptance of any version is permanent authorization for you to choose that version for the Library.
|
||||
@ -1,66 +0,0 @@
|
||||
# artDialog
|
||||
|
||||
[](https://cdnjs.com/libraries/artDialog)
|
||||
[](https://npmjs.org/package/art-dialog)
|
||||
[](https://npmjs.org/package/art-dialog)
|
||||
|
||||
artDialog——经典、优雅的网页对话框控件。
|
||||
|
||||
[文档与示例](http://aui.github.io/artDialog/doc/index.html) | [AngularJS 版本](https://github.com/aui/angular-popups)
|
||||
|
||||
```
|
||||
npm install --save-dev art-dialog
|
||||
```
|
||||
|
||||
## 成功案例
|
||||
|
||||
超过 40 万网站在使用 artDialog,其中不乏国内顶尖的产品:
|
||||
|
||||
* [QQ空间 v8(腾讯)](http://qzone.qq.com)
|
||||
* [Phpcms(盛大)](http://www.phpcms.cn)
|
||||
* [极路由](http://www.hiwifi.com)
|
||||
* ...
|
||||
|
||||
## 更新历史
|
||||
|
||||
7.0.0
|
||||
|
||||
1. 支持 Webpack
|
||||
2. 支持 Npm
|
||||
2. 将 CSS 打包到 JS 中
|
||||
|
||||
6.0.4
|
||||
|
||||
1. ``content()``方法传入隐藏元素并显示,并且``remove()``的时候会将元素插入到``body``避免被销毁 [#103](https://github.com/aui/artDialog/issues/103) [#126](https://github.com/aui/artDialog/issues/126)
|
||||
2. 修复``button``方法可能会多次绑定事件的问题
|
||||
3. 模态对话框可以避免 shift + tab 将焦点移出对话框 [#67](https://github.com/aui/artDialog/issues/67)
|
||||
|
||||
6.0.3
|
||||
|
||||
1. 修复``button``方法直接传入 html 不显示的问题
|
||||
2. 修复版本管理导致[#78](https://github.com/aui/artDialog/issues/78)重现问题
|
||||
|
||||
6.0.2
|
||||
|
||||
1. 提供无依赖 seajs 与 requirejs 的版本
|
||||
2. 取消按钮增加``cancelDisplay``配置,保留``cancel``事件的同时也不会显示取消按钮
|
||||
|
||||
6.0.1
|
||||
|
||||
1. 进一步完善焦点管理,避免抢夺开发者自己设置的焦点[#67](https://github.com/aui/artDialog/issues/67)
|
||||
2. 修复对话框内容使用 html5 data-id 属性冲突的问题[#78](https://github.com/aui/artDialog/issues/78)
|
||||
3. 改善 Esc 快捷键与 cancel 的问题[#36](https://github.com/aui/artDialog/issues/36)
|
||||
|
||||
6.0.0
|
||||
|
||||
1. 功能增强:支持定义左下角的区域 HTML、支持 12 个方向的气泡对话框、支持无标题栏与按钮区的对话框
|
||||
2. 更好的交互体验:更加先进的焦点管理,支持无障碍访问
|
||||
3. 面向未来:基于 HTML5 Dialog 的 API
|
||||
4. 模块化:支持 AMD、CMD 规范
|
||||
5. 可选增强版:拖拽支持、简化框架页面调用
|
||||
|
||||
## 授权协议
|
||||
|
||||
免费,且开源,基于[LGPL-3.0](./LICENSE.md)协议。
|
||||
|
||||
[\[AD\] 前端招聘:在海边写代码](https://juejin.im/post/5a2651d06fb9a0451c3a40ad)
|
||||
@ -1 +0,0 @@
|
||||
theme: jekyll-theme-cayman
|
||||
@ -1,461 +0,0 @@
|
||||
.ui-dialog {
|
||||
*zoom: 1;
|
||||
_float: left;
|
||||
position: relative;
|
||||
background-color: #FFF;
|
||||
border: 1px solid #999;
|
||||
border-radius: 6px;
|
||||
outline: 0;
|
||||
background-clip: padding-box;
|
||||
font-family: Helvetica, arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.428571429;
|
||||
color: #333;
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
-webkit-transition: -webkit-transform .15s ease-in-out, opacity .15s ease-in-out;
|
||||
transition: transform .15s ease-in-out, opacity .15s ease-in-out;
|
||||
}
|
||||
|
||||
.ui-popup-show .ui-dialog {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.ui-popup-focus .ui-dialog {
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.ui-popup-modal .ui-dialog {
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1), 0 0 256px rgba(255, 255, 255, .3);
|
||||
}
|
||||
|
||||
.ui-dialog-grid {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
border: 0 none;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.ui-dialog-header,
|
||||
.ui-dialog-body,
|
||||
.ui-dialog-footer {
|
||||
padding: 0;
|
||||
border: 0 none;
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.ui-dialog-header {
|
||||
white-space: nowrap;
|
||||
border-bottom: 1px solid #E5E5E5;
|
||||
}
|
||||
|
||||
.ui-dialog-close {
|
||||
position: relative;
|
||||
_position: absolute;
|
||||
float: right;
|
||||
top: 13px;
|
||||
right: 13px;
|
||||
_height: 26px;
|
||||
padding: 0 4px;
|
||||
font-size: 21px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
color: #000;
|
||||
text-shadow: 0 1px 0 #FFF;
|
||||
opacity: .2;
|
||||
filter: alpha(opacity=20);
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
_background: #FFF;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.ui-dialog-close:hover,
|
||||
.ui-dialog-close:focus {
|
||||
color: #000000;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
outline: 0;
|
||||
opacity: 0.5;
|
||||
filter: alpha(opacity=50);
|
||||
}
|
||||
|
||||
.ui-dialog-title {
|
||||
margin: 0;
|
||||
line-height: 1.428571429;
|
||||
min-height: 16.428571429px;
|
||||
padding: 15px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: bold;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.ui-dialog-body {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ui-dialog-content {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
*zoom: 1;
|
||||
*display: inline;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ui-dialog-footer {
|
||||
padding: 0 20px 20px 20px;
|
||||
}
|
||||
|
||||
.ui-dialog-statusbar {
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
padding: 6px 0;
|
||||
line-height: 1.428571429;
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ui-dialog-statusbar label:hover {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.ui-dialog-statusbar input,
|
||||
.ui-dialog-statusbar .label {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ui-dialog-button {
|
||||
float: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ui-dialog-footer button+button {
|
||||
margin-bottom: 0;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.ui-dialog-footer button {
|
||||
width: auto;
|
||||
overflow: visible;
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
_margin-left: 5px;
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 1.428571429;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
background-image: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.ui-dialog-footer button:focus {
|
||||
outline: thin dotted #333;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.ui-dialog-footer button:hover,
|
||||
.ui-dialog-footer button:focus {
|
||||
color: #333333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.ui-dialog-footer button:active {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
|
||||
.ui-dialog-footer button[disabled] {
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.65;
|
||||
filter: alpha(opacity=65);
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ui-dialog-footer button {
|
||||
color: #333333;
|
||||
background-color: #ffffff;
|
||||
border-color: #cccccc;
|
||||
}
|
||||
|
||||
.ui-dialog-footer button:hover,
|
||||
.ui-dialog-footer button:focus,
|
||||
.ui-dialog-footer button:active {
|
||||
color: #333333;
|
||||
background-color: #ebebeb;
|
||||
border-color: #adadad;
|
||||
}
|
||||
|
||||
.ui-dialog-footer button:active {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.ui-dialog-footer button[disabled],
|
||||
.ui-dialog-footer button[disabled]:hover,
|
||||
.ui-dialog-footer button[disabled]:focus,
|
||||
.ui-dialog-footer button[disabled]:active {
|
||||
background-color: #ffffff;
|
||||
border-color: #cccccc;
|
||||
}
|
||||
|
||||
.ui-dialog-footer button.ui-dialog-autofocus {
|
||||
color: #ffffff;
|
||||
background-color: #428bca;
|
||||
border-color: #357ebd;
|
||||
}
|
||||
|
||||
.ui-dialog-footer button.ui-dialog-autofocus:hover,
|
||||
.ui-dialog-footer button.ui-dialog-autofocus:focus,
|
||||
.ui-dialog-footer button.ui-dialog-autofocus:active {
|
||||
color: #ffffff;
|
||||
background-color: #3276b1;
|
||||
border-color: #285e8e;
|
||||
}
|
||||
|
||||
.ui-dialog-footer button.ui-dialog-autofocus:active {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.ui-popup-top-left .ui-dialog,
|
||||
.ui-popup-top .ui-dialog,
|
||||
.ui-popup-top-right .ui-dialog {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
.ui-popup-bottom-left .ui-dialog,
|
||||
.ui-popup-bottom .ui-dialog,
|
||||
.ui-popup-bottom-right .ui-dialog {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.ui-popup-left-top .ui-dialog,
|
||||
.ui-popup-left .ui-dialog,
|
||||
.ui-popup-left-bottom .ui-dialog {
|
||||
left: -8px;
|
||||
}
|
||||
|
||||
.ui-popup-right-top .ui-dialog,
|
||||
.ui-popup-right .ui-dialog,
|
||||
.ui-popup-right-bottom .ui-dialog {
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.ui-dialog-arrow-a,
|
||||
.ui-dialog-arrow-b {
|
||||
position: absolute;
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
_color: #FF3FFF;
|
||||
_filter: chroma(color=#FF3FFF);
|
||||
border: 8px dashed transparent;
|
||||
}
|
||||
|
||||
.ui-popup-follow .ui-dialog-arrow-a,
|
||||
.ui-popup-follow .ui-dialog-arrow-b {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ui-popup-top-left .ui-dialog-arrow-a,
|
||||
.ui-popup-top .ui-dialog-arrow-a,
|
||||
.ui-popup-top-right .ui-dialog-arrow-a {
|
||||
bottom: -16px;
|
||||
border-top: 8px solid #7C7C7C;
|
||||
}
|
||||
|
||||
.ui-popup-top-left .ui-dialog-arrow-b,
|
||||
.ui-popup-top .ui-dialog-arrow-b,
|
||||
.ui-popup-top-right .ui-dialog-arrow-b {
|
||||
bottom: -15px;
|
||||
border-top: 8px solid #fff;
|
||||
}
|
||||
|
||||
.ui-popup-top-left .ui-dialog-arrow-a,
|
||||
.ui-popup-top-left .ui-dialog-arrow-b {
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.ui-popup-top .ui-dialog-arrow-a,
|
||||
.ui-popup-top .ui-dialog-arrow-b {
|
||||
left: 50%;
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
.ui-popup-top-right .ui-dialog-arrow-a,
|
||||
.ui-popup-top-right .ui-dialog-arrow-b {
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.ui-popup-bottom-left .ui-dialog-arrow-a,
|
||||
.ui-popup-bottom .ui-dialog-arrow-a,
|
||||
.ui-popup-bottom-right .ui-dialog-arrow-a {
|
||||
top: -16px;
|
||||
border-bottom: 8px solid #7C7C7C;
|
||||
}
|
||||
|
||||
.ui-popup-bottom-left .ui-dialog-arrow-b,
|
||||
.ui-popup-bottom .ui-dialog-arrow-b,
|
||||
.ui-popup-bottom-right .ui-dialog-arrow-b {
|
||||
top: -15px;
|
||||
border-bottom: 8px solid #fff;
|
||||
}
|
||||
|
||||
.ui-popup-bottom-left .ui-dialog-arrow-a,
|
||||
.ui-popup-bottom-left .ui-dialog-arrow-b {
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.ui-popup-bottom .ui-dialog-arrow-a,
|
||||
.ui-popup-bottom .ui-dialog-arrow-b {
|
||||
margin-left: -8px;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.ui-popup-bottom-right .ui-dialog-arrow-a,
|
||||
.ui-popup-bottom-right .ui-dialog-arrow-b {
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.ui-popup-left-top .ui-dialog-arrow-a,
|
||||
.ui-popup-left .ui-dialog-arrow-a,
|
||||
.ui-popup-left-bottom .ui-dialog-arrow-a {
|
||||
right: -16px;
|
||||
border-left: 8px solid #7C7C7C;
|
||||
}
|
||||
|
||||
.ui-popup-left-top .ui-dialog-arrow-b,
|
||||
.ui-popup-left .ui-dialog-arrow-b,
|
||||
.ui-popup-left-bottom .ui-dialog-arrow-b {
|
||||
right: -15px;
|
||||
border-left: 8px solid #fff;
|
||||
}
|
||||
|
||||
.ui-popup-left-top .ui-dialog-arrow-a,
|
||||
.ui-popup-left-top .ui-dialog-arrow-b {
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
.ui-popup-left .ui-dialog-arrow-a,
|
||||
.ui-popup-left .ui-dialog-arrow-b {
|
||||
margin-top: -8px;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.ui-popup-left-bottom .ui-dialog-arrow-a,
|
||||
.ui-popup-left-bottom .ui-dialog-arrow-b {
|
||||
bottom: 15px;
|
||||
}
|
||||
|
||||
.ui-popup-right-top .ui-dialog-arrow-a,
|
||||
.ui-popup-right .ui-dialog-arrow-a,
|
||||
.ui-popup-right-bottom .ui-dialog-arrow-a {
|
||||
left: -16px;
|
||||
border-right: 8px solid #7C7C7C;
|
||||
}
|
||||
|
||||
.ui-popup-right-top .ui-dialog-arrow-b,
|
||||
.ui-popup-right .ui-dialog-arrow-b,
|
||||
.ui-popup-right-bottom .ui-dialog-arrow-b {
|
||||
left: -15px;
|
||||
border-right: 8px solid #fff;
|
||||
}
|
||||
|
||||
.ui-popup-right-top .ui-dialog-arrow-a,
|
||||
.ui-popup-right-top .ui-dialog-arrow-b {
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
.ui-popup-right .ui-dialog-arrow-a,
|
||||
.ui-popup-right .ui-dialog-arrow-b {
|
||||
margin-top: -8px;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.ui-popup-right-bottom .ui-dialog-arrow-a,
|
||||
.ui-popup-right-bottom .ui-dialog-arrow-b {
|
||||
bottom: 15px;
|
||||
}
|
||||
|
||||
@-webkit-keyframes ui-dialog-loading {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ui-dialog-loading {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.ui-dialog-loading {
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
display: block;
|
||||
*zoom: 1;
|
||||
*display: inline;
|
||||
overflow: hidden;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
top: 50%;
|
||||
margin: -16px auto 0 auto;
|
||||
font-size: 0;
|
||||
text-indent: -999em;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.ui-dialog-loading {
|
||||
width: 100%\9;
|
||||
text-indent: 0\9;
|
||||
line-height: 32px\9;
|
||||
text-align: center\9;
|
||||
font-size: 12px\9;
|
||||
}
|
||||
|
||||
.ui-dialog-loading::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
margin: 14.5px 0 0 14.5px;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 -10px 0 1px #ccc, 10px 0px #ccc, 0 10px #ccc, -10px 0 #ccc, -7px -7px 0 0.5px #ccc, 7px -7px 0 1.5px #ccc, 7px 7px #ccc, -7px 7px #ccc;
|
||||
-webkit-transform: rotate(360deg);
|
||||
-webkit-animation: ui-dialog-loading 1.5s infinite linear;
|
||||
transform: rotate(360deg);
|
||||
animation: ui-dialog-loading 1.5s infinite linear;
|
||||
display: none\9;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,21 +0,0 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const MarkdownIt = require('markdown-it');
|
||||
const md = new MarkdownIt({
|
||||
html: true
|
||||
});
|
||||
const source = path.resolve(__dirname, '..', 'index.md');
|
||||
const templateSource = path.resolve(__dirname, '..', 'template', 'index.html');
|
||||
const output = path.resolve(__dirname, '..', 'index.html');
|
||||
const content = fs.readFileSync(source, 'utf8');
|
||||
const templateContent = fs.readFileSync(templateSource, 'utf8');
|
||||
|
||||
const html = md.render(content);
|
||||
const template = (string, data) => string.replace(/\$\{([^\}]*?)\}/g, ($0, key) => String(data[key]));
|
||||
const result = template(templateContent, {
|
||||
title: 'artDialog',
|
||||
content: html
|
||||
});
|
||||
|
||||
fs.writeFileSync(output, result, 'utf8');
|
||||
console.log('ok');
|
||||
@ -1,512 +0,0 @@
|
||||
body {
|
||||
max-width: 620px;
|
||||
margin: auto;
|
||||
font-family: Helvetica, arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
background-color: white;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
body>*:first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
body>*:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #4183C4;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 20px 0 10px;
|
||||
padding: 0;
|
||||
font-weight: bold;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
cursor: text;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h1:hover a.anchor,
|
||||
h2:hover a.anchor,
|
||||
h3:hover a.anchor,
|
||||
h4:hover a.anchor,
|
||||
h5:hover a.anchor,
|
||||
h6:hover a.anchor {
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA09pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoMTMuMCAyMDEyMDMwNS5tLjQxNSAyMDEyLzAzLzA1OjIxOjAwOjAwKSAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUM2NjlDQjI4ODBGMTFFMTg1ODlEODNERDJBRjUwQTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUM2NjlDQjM4ODBGMTFFMTg1ODlEODNERDJBRjUwQTQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QzY2OUNCMDg4MEYxMUUxODU4OUQ4M0REMkFGNTBBNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QzY2OUNCMTg4MEYxMUUxODU4OUQ4M0REMkFGNTBBNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsQhXeAAAABfSURBVHjaYvz//z8DJYCRUgMYQAbAMBQIAvEqkBQWXI6sHqwHiwG70TTBxGaiWwjCTGgOUgJiF1J8wMRAIUA34B4Q76HUBelAfJYSA0CuMIEaRP8wGIkGMA54bgQIMACAmkXJi0hKJQAAAABJRU5ErkJggg==) no-repeat 10px center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1 tt,
|
||||
h1 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h2 tt,
|
||||
h2 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h3 tt,
|
||||
h3 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h4 tt,
|
||||
h4 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h5 tt,
|
||||
h5 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h6 tt,
|
||||
h6 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
color: black;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h6 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
color: black;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: #777777;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
p,
|
||||
blockquote,
|
||||
ul,
|
||||
ol,
|
||||
dl,
|
||||
li,
|
||||
table,
|
||||
pre {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OENDRjNBN0E2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OENDRjNBN0I2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Q0NGM0E3ODY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0NGM0E3OTY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqqezsUAAAAfSURBVHjaYmRABcYwBiM2QSA4y4hNEKYDQxAEAAIMAHNGAzhkPOlYAAAAAElFTkSuQmCC) repeat-x 0 0;
|
||||
border: 0 none;
|
||||
color: #cccccc;
|
||||
height: 4px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body>h2:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
body>h1:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
body>h1:first-child+h2 {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
body>h3:first-child,
|
||||
body>h4:first-child,
|
||||
body>h5:first-child,
|
||||
body>h6:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
a:first-child h1,
|
||||
a:first-child h2,
|
||||
a:first-child h3,
|
||||
a:first-child h4,
|
||||
a:first-child h5,
|
||||
a:first-child h6 {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
h1 p,
|
||||
h2 p,
|
||||
h3 p,
|
||||
h4 p,
|
||||
h5 p,
|
||||
h6 p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
li p.first {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
ul :first-child,
|
||||
ol :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
dl {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
dl dt {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
padding: 0;
|
||||
margin: 15px 0 5px;
|
||||
}
|
||||
|
||||
dl dd {
|
||||
margin: 0 0 15px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 2px solid #dddddd;
|
||||
padding: 0 15px;
|
||||
color: #777777;
|
||||
}
|
||||
|
||||
blockquote> :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
blockquote> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
padding: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
tr {
|
||||
border-top: 1px solid #cccccc;
|
||||
background-color: white;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
tr:nth-child(2n) {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
border: 1px solid #cccccc;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding: 6px 13px;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 1px solid #cccccc;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding: 6px 13px;
|
||||
}
|
||||
|
||||
th :first-child,
|
||||
td :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
th :last-child,
|
||||
td :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
code,
|
||||
tt {
|
||||
margin: 0 2px;
|
||||
padding: 0 5px;
|
||||
white-space: nowrap;
|
||||
border: 1px solid #eaeaea;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
pre code {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
white-space: pre;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: #303030;
|
||||
font-size: 13px;
|
||||
line-height: 19px;
|
||||
overflow: auto;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
pre code {
|
||||
color: #f2f2f2;
|
||||
border: none;
|
||||
padding: 0;
|
||||
font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal;
|
||||
margin-bottom: 30px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
pre tt {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
@media print {
|
||||
table,
|
||||
pre {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*-------------------------------*/
|
||||
|
||||
.doc-line {
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.doc-gotop {
|
||||
position: fixed;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
h1 span[id],
|
||||
h2 span[id],
|
||||
h3 span[id],
|
||||
h4 span[id],
|
||||
h5 span[id],
|
||||
h6 span[id] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
/*避免对话框样式被工具生成的全局样式污染*/
|
||||
|
||||
.ui-dialog table,
|
||||
.ui-dialog table tr,
|
||||
.ui-dialog tr td,
|
||||
.ui-dialog tr:nth-child(2n) {
|
||||
border: 0 none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.ui-dialog td.ui-dialog-header {
|
||||
border-bottom: 1px solid #E5E5E5;
|
||||
}
|
||||
|
||||
code.sh_sourceCode {
|
||||
color: #000000;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_keyword {
|
||||
color: #009;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_type {
|
||||
color: #0000ff;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_string {
|
||||
color: #00F;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_regexp {
|
||||
color: #060;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_specialchar {
|
||||
color: #C42DA8;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_comment {
|
||||
color: #999;
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_number {
|
||||
color: #F00;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_codeproc {
|
||||
color: #00b800;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_symbol {
|
||||
color: #009;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_function {
|
||||
color: #000;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_cbracket {
|
||||
color: #009;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_url {
|
||||
color: #ff0000;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_date {
|
||||
color: #0000ff;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_time {
|
||||
color: #0000ff;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_file {
|
||||
color: #0000ff;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_ip {
|
||||
color: #ff0000;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_name {
|
||||
color: #ff0000;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_variable {
|
||||
color: #ec7f15;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_oldfile {
|
||||
color: #C42DA8;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_newfile {
|
||||
color: #ff0000;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_difflines {
|
||||
color: #0000ff;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_selector {
|
||||
color: #ec7f15;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_property {
|
||||
color: #0000ff;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_value {
|
||||
color: #ff0000;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_codedef_var {
|
||||
color: #909;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.sh_sourceCode .sh_codedef_func {
|
||||
color: #099;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,64 +0,0 @@
|
||||
!(function() {
|
||||
|
||||
window.console = window.console || {
|
||||
log: $.noop
|
||||
};
|
||||
|
||||
|
||||
var codes = {};
|
||||
var debug = location.href.indexOf('Users/tangbin') !== -1;
|
||||
|
||||
$(function() {
|
||||
|
||||
console.log('你可以在调试器中粘贴本页示例代码运行');
|
||||
|
||||
var RE = /[\n\s\t]*?\/\/\.\.[\r\n]/;
|
||||
$('pre code').each(function(index) {
|
||||
var $this = $(this);
|
||||
var code = $this.text();
|
||||
|
||||
// 忽略不完整的代码片段
|
||||
// 开头使用"//.."表示
|
||||
if (RE.test(code)) {
|
||||
$this.text(code.replace(RE, ''));
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
codes[index] = new Function(code);
|
||||
} catch (e) {
|
||||
return;
|
||||
}
|
||||
|
||||
$this
|
||||
.after('<div class="doc-line"></div>' +
|
||||
'<button data-code="' + index + '">运行</button>');
|
||||
});
|
||||
|
||||
// 回到顶部
|
||||
var $top = $('<a class="doc-gotop" href="javascript:;">TOP</a>')
|
||||
.on('click', function() {
|
||||
$(window).scrollTop(0);
|
||||
return false;
|
||||
});
|
||||
$('body').append($top);
|
||||
});
|
||||
|
||||
|
||||
var runCode = function(id) {
|
||||
codes[id]();
|
||||
|
||||
var api = dialog.getCurrent();
|
||||
if (debug && api) {
|
||||
console.log(api);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
$(document).on('click', 'button[data-code]', function() {
|
||||
var id = $(this).data('code');
|
||||
runCode(id);
|
||||
return false;
|
||||
});
|
||||
|
||||
}());
|
||||
@ -1,329 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
|
||||
<style>
|
||||
body {
|
||||
max-width: 620px;
|
||||
margin: auto;
|
||||
font-family: Helvetica, arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
background-color: white;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
body>*:first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
body>*:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #4183C4;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 20px 0 10px;
|
||||
padding: 0;
|
||||
font-weight: bold;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
cursor: text;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h1:hover a.anchor,
|
||||
h2:hover a.anchor,
|
||||
h3:hover a.anchor,
|
||||
h4:hover a.anchor,
|
||||
h5:hover a.anchor,
|
||||
h6:hover a.anchor {
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA09pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoMTMuMCAyMDEyMDMwNS5tLjQxNSAyMDEyLzAzLzA1OjIxOjAwOjAwKSAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUM2NjlDQjI4ODBGMTFFMTg1ODlEODNERDJBRjUwQTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUM2NjlDQjM4ODBGMTFFMTg1ODlEODNERDJBRjUwQTQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QzY2OUNCMDg4MEYxMUUxODU4OUQ4M0REMkFGNTBBNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QzY2OUNCMTg4MEYxMUUxODU4OUQ4M0REMkFGNTBBNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsQhXeAAAABfSURBVHjaYvz//z8DJYCRUgMYQAbAMBQIAvEqkBQWXI6sHqwHiwG70TTBxGaiWwjCTGgOUgJiF1J8wMRAIUA34B4Q76HUBelAfJYSA0CuMIEaRP8wGIkGMA54bgQIMACAmkXJi0hKJQAAAABJRU5ErkJggg==) no-repeat 10px center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1 tt,
|
||||
h1 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h2 tt,
|
||||
h2 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h3 tt,
|
||||
h3 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h4 tt,
|
||||
h4 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h5 tt,
|
||||
h5 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h6 tt,
|
||||
h6 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
color: black;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h6 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
color: black;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: #777777;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
p,
|
||||
blockquote,
|
||||
ul,
|
||||
ol,
|
||||
dl,
|
||||
li,
|
||||
table,
|
||||
pre {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OENDRjNBN0E2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OENDRjNBN0I2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Q0NGM0E3ODY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0NGM0E3OTY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqqezsUAAAAfSURBVHjaYmRABcYwBiM2QSA4y4hNEKYDQxAEAAIMAHNGAzhkPOlYAAAAAElFTkSuQmCC) repeat-x 0 0;
|
||||
border: 0 none;
|
||||
color: #cccccc;
|
||||
height: 4px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body>h2:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
body>h1:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
body>h1:first-child+h2 {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
body>h3:first-child,
|
||||
body>h4:first-child,
|
||||
body>h5:first-child,
|
||||
body>h6:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
a:first-child h1,
|
||||
a:first-child h2,
|
||||
a:first-child h3,
|
||||
a:first-child h4,
|
||||
a:first-child h5,
|
||||
a:first-child h6 {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
h1 p,
|
||||
h2 p,
|
||||
h3 p,
|
||||
h4 p,
|
||||
h5 p,
|
||||
h6 p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
li p.first {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
ul :first-child,
|
||||
ol :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
dl {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
dl dt {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
padding: 0;
|
||||
margin: 15px 0 5px;
|
||||
}
|
||||
|
||||
dl dd {
|
||||
margin: 0 0 15px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 2px solid #dddddd;
|
||||
padding: 0 15px;
|
||||
color: #777777;
|
||||
}
|
||||
|
||||
blockquote> :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
blockquote> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
padding: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
tr {
|
||||
border-top: 1px solid #cccccc;
|
||||
background-color: white;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
tr:nth-child(2n) {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
border: 1px solid #cccccc;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding: 6px 13px;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 1px solid #cccccc;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding: 6px 13px;
|
||||
}
|
||||
|
||||
th :first-child,
|
||||
td :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
th :last-child,
|
||||
td :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
code,
|
||||
tt {
|
||||
margin: 0 2px;
|
||||
padding: 0 5px;
|
||||
white-space: nowrap;
|
||||
border: 1px solid #eaeaea;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
pre code {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
white-space: pre;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: #303030;
|
||||
font-size: 13px;
|
||||
line-height: 19px;
|
||||
overflow: auto;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
pre code {
|
||||
color: #f2f2f2;
|
||||
border: none;
|
||||
padding: 0;
|
||||
font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal;
|
||||
margin-bottom: 30px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
pre tt {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
@media print {
|
||||
table,
|
||||
pre {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<title>${title}</title>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
${content}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
@ -1,28 +0,0 @@
|
||||
{
|
||||
"name": "art-dialog",
|
||||
"version": "7.0.0",
|
||||
"readmeFilename": "README.md",
|
||||
"description": "A smart dialog box component",
|
||||
"homepage": "https://github.com/aui/artDialog",
|
||||
"scripts": {
|
||||
"build": "webpack -p",
|
||||
"dev": "webpack -d",
|
||||
"build-doc": "node doc/build/index.js"
|
||||
},
|
||||
"keywords": [
|
||||
"dialog"
|
||||
],
|
||||
"author": "aui",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/aui/artDialog.git"
|
||||
},
|
||||
"main": "./dist/dialog.js",
|
||||
"devDependencies": {
|
||||
"css-loader": "^0.27.3",
|
||||
"markdown-it": "^8.3.1",
|
||||
"style-loader": "^0.15.0",
|
||||
"webpack": "^2.2.1"
|
||||
},
|
||||
"license": "LGPL-3.0"
|
||||
}
|
||||
@ -1,88 +0,0 @@
|
||||
// artDialog - 默认配置
|
||||
module.exports = {
|
||||
|
||||
/* -----已注释的配置继承自 popup.js,仍可以再这里重新定义它----- */
|
||||
|
||||
// 对齐方式
|
||||
//align: 'bottom left',
|
||||
|
||||
// 是否固定定位
|
||||
//fixed: false,
|
||||
|
||||
// 对话框叠加高度值(重要:此值不能超过浏览器最大限制)
|
||||
//zIndex: 1024,
|
||||
|
||||
// 设置遮罩背景颜色
|
||||
backdropBackground: '#000',
|
||||
|
||||
// 设置遮罩透明度
|
||||
backdropOpacity: 0.7,
|
||||
|
||||
// 消息内容
|
||||
content: '<span class="ui-dialog-loading">Loading..</span>',
|
||||
|
||||
// 标题
|
||||
title: '',
|
||||
|
||||
// 对话框状态栏区域 HTML 代码
|
||||
statusbar: '',
|
||||
|
||||
// 自定义按钮
|
||||
button: null,
|
||||
|
||||
// 确定按钮回调函数
|
||||
ok: null,
|
||||
|
||||
// 取消按钮回调函数
|
||||
cancel: null,
|
||||
|
||||
// 确定按钮文本
|
||||
okValue: 'ok',
|
||||
|
||||
// 取消按钮文本
|
||||
cancelValue: 'cancel',
|
||||
|
||||
cancelDisplay: true,
|
||||
|
||||
// 内容宽度
|
||||
width: '',
|
||||
|
||||
// 内容高度
|
||||
height: '',
|
||||
|
||||
// 内容与边界填充距离
|
||||
padding: '',
|
||||
|
||||
// 对话框自定义 className
|
||||
skin: '',
|
||||
|
||||
// 是否支持快捷关闭(点击遮罩层自动关闭)
|
||||
quickClose: false,
|
||||
|
||||
// 模板(使用 table 解决 IE7 宽度自适应的 BUG)
|
||||
// js 使用 i="***" 属性识别结构,其余的均可自定义
|
||||
innerHTML: '<div i="dialog" class="ui-dialog">' +
|
||||
'<div class="ui-dialog-arrow-a"></div>' +
|
||||
'<div class="ui-dialog-arrow-b"></div>' +
|
||||
'<table class="ui-dialog-grid">' +
|
||||
'<tr>' +
|
||||
'<td i="header" class="ui-dialog-header">' +
|
||||
'<button i="close" class="ui-dialog-close">×</button>' +
|
||||
'<div i="title" class="ui-dialog-title"></div>' +
|
||||
'</td>' +
|
||||
'</tr>' +
|
||||
'<tr>' +
|
||||
'<td i="body" class="ui-dialog-body">' +
|
||||
'<div i="content" class="ui-dialog-content"></div>' +
|
||||
'</td>' +
|
||||
'</tr>' +
|
||||
'<tr>' +
|
||||
'<td i="footer" class="ui-dialog-footer">' +
|
||||
'<div i="statusbar" class="ui-dialog-statusbar"></div>' +
|
||||
'<div i="button" class="ui-dialog-button"></div>' +
|
||||
'</td>' +
|
||||
'</tr>' +
|
||||
'</table>' +
|
||||
'</div>'
|
||||
|
||||
};
|
||||
@ -1,130 +0,0 @@
|
||||
var $ = require('jquery');
|
||||
var dialog = require('./dialog');
|
||||
var drag = require('./drag');
|
||||
|
||||
dialog.oncreate = function(api) {
|
||||
|
||||
var options = api.options;
|
||||
var originalOptions = options.original;
|
||||
|
||||
// 页面地址
|
||||
var url = options.url;
|
||||
// 页面加载完毕的事件
|
||||
var oniframeload = options.oniframeload;
|
||||
|
||||
var $iframe;
|
||||
|
||||
|
||||
if (url) {
|
||||
this.padding = options.padding = 0;
|
||||
|
||||
$iframe = $('<iframe />');
|
||||
|
||||
$iframe.attr({
|
||||
src: url,
|
||||
name: api.id,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
allowtransparency: 'yes',
|
||||
frameborder: 'no',
|
||||
scrolling: 'no'
|
||||
})
|
||||
.on('load', function() {
|
||||
var test;
|
||||
|
||||
try {
|
||||
// 跨域测试
|
||||
test = $iframe[0].contentWindow.frameElement;
|
||||
} catch (e) {}
|
||||
|
||||
if (test) {
|
||||
|
||||
if (!options.width) {
|
||||
api.width($iframe.contents().width());
|
||||
}
|
||||
|
||||
if (!options.height) {
|
||||
api.height($iframe.contents().height());
|
||||
}
|
||||
}
|
||||
|
||||
if (oniframeload) {
|
||||
oniframeload.call(api);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
api.addEventListener('beforeremove', function() {
|
||||
|
||||
// 重要!需要重置iframe地址,否则下次出现的对话框在IE6、7无法聚焦input
|
||||
// IE删除iframe后,iframe仍然会留在内存中出现上述问题,置换src是最容易解决的方法
|
||||
$iframe.attr('src', 'about:blank').remove();
|
||||
|
||||
|
||||
}, false);
|
||||
|
||||
api.content($iframe[0]);
|
||||
|
||||
api.iframeNode = $iframe[0];
|
||||
|
||||
}
|
||||
|
||||
|
||||
// 对于子页面呼出的对话框特殊处理
|
||||
// 如果对话框配置来自 iframe
|
||||
if (!(originalOptions instanceof Object)) {
|
||||
|
||||
var un = function() {
|
||||
api.close().remove();
|
||||
};
|
||||
|
||||
// 找到那个 iframe
|
||||
for (var i = 0; i < frames.length; i++) {
|
||||
try {
|
||||
if (originalOptions instanceof frames[i].Object) {
|
||||
// 让 iframe 刷新的时候也关闭对话框,
|
||||
// 防止要执行的对象被强制收回导致 IE 报错:“不能执行已释放 Script 的代码”
|
||||
$(frames[i]).one('unload', un);
|
||||
break;
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 拖拽支持
|
||||
$(api.node).on(drag.types.start, '[i=title]', function(event) {
|
||||
// 排除气泡类型的对话框
|
||||
if (!api.follow) {
|
||||
api.focus();
|
||||
drag.create(api.node, event);
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
dialog.get = function(id) {
|
||||
|
||||
// 从 iframe 传入 window 对象
|
||||
if (id && id.frameElement) {
|
||||
var iframe = id.frameElement;
|
||||
var list = dialog.list;
|
||||
var api;
|
||||
for (var i in list) {
|
||||
api = list[i];
|
||||
if (api.node.getElementsByTagName('iframe')[0] === iframe) {
|
||||
return api;
|
||||
}
|
||||
}
|
||||
// 直接传入 id 的情况
|
||||
} else if (id) {
|
||||
return dialog.list[id];
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
module.exports = dialog;
|
||||
@ -1,470 +0,0 @@
|
||||
require('../css/dialog.css');
|
||||
|
||||
var $ = require('jquery');
|
||||
var Popup = require('./popup');
|
||||
var defaults = require('./dialog-config');
|
||||
|
||||
var _count = 0;
|
||||
var _expando = new Date() - 0; // Date.now()
|
||||
var _isIE6 = !('minWidth' in $('html')[0].style);
|
||||
var _isMobile = 'createTouch' in document && !('onmousemove' in document) ||
|
||||
/(iPhone|iPad|iPod)/i.test(navigator.userAgent);
|
||||
var _isFixed = !_isIE6 && !_isMobile;
|
||||
|
||||
|
||||
var artDialog = function(options, ok, cancel) {
|
||||
|
||||
var originalOptions = options = options || {};
|
||||
|
||||
|
||||
if (typeof options === 'string' || options.nodeType === 1) {
|
||||
|
||||
options = { content: options, fixed: !_isMobile };
|
||||
}
|
||||
|
||||
|
||||
options = $.extend(true, {}, artDialog.defaults, options);
|
||||
options.original = originalOptions;
|
||||
|
||||
var id = options.id = options.id || _expando + _count;
|
||||
var api = artDialog.get(id);
|
||||
|
||||
|
||||
// 如果存在同名的对话框对象,则直接返回
|
||||
if (api) {
|
||||
return api.focus();
|
||||
}
|
||||
|
||||
|
||||
// 目前主流移动设备对fixed支持不好,禁用此特性
|
||||
if (!_isFixed) {
|
||||
options.fixed = false;
|
||||
}
|
||||
|
||||
|
||||
// 快捷关闭支持:点击对话框外快速关闭对话框
|
||||
if (options.quickClose) {
|
||||
options.modal = true;
|
||||
options.backdropOpacity = 0;
|
||||
}
|
||||
|
||||
|
||||
// 按钮组
|
||||
if (!$.isArray(options.button)) {
|
||||
options.button = [];
|
||||
}
|
||||
|
||||
|
||||
// 取消按钮
|
||||
if (cancel !== undefined) {
|
||||
options.cancel = cancel;
|
||||
}
|
||||
|
||||
if (options.cancel) {
|
||||
options.button.push({
|
||||
id: 'cancel',
|
||||
value: options.cancelValue,
|
||||
callback: options.cancel,
|
||||
display: options.cancelDisplay
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 确定按钮
|
||||
if (ok !== undefined) {
|
||||
options.ok = ok;
|
||||
}
|
||||
|
||||
if (options.ok) {
|
||||
options.button.push({
|
||||
id: 'ok',
|
||||
value: options.okValue,
|
||||
callback: options.ok,
|
||||
autofocus: true
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
return artDialog.list[id] = new artDialog.create(options);
|
||||
};
|
||||
|
||||
var popup = function() {};
|
||||
popup.prototype = Popup.prototype;
|
||||
var prototype = artDialog.prototype = new popup();
|
||||
|
||||
artDialog.create = function(options) {
|
||||
var that = this;
|
||||
|
||||
$.extend(this, new Popup());
|
||||
|
||||
var originalOptions = options.original;
|
||||
var $popup = $(this.node).html(options.innerHTML);
|
||||
var $backdrop = $(this.backdrop);
|
||||
|
||||
this.options = options;
|
||||
this._popup = $popup;
|
||||
|
||||
|
||||
$.each(options, function(name, value) {
|
||||
if (typeof that[name] === 'function') {
|
||||
that[name](value);
|
||||
} else {
|
||||
that[name] = value;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 更新 zIndex 全局配置
|
||||
if (options.zIndex) {
|
||||
Popup.zIndex = options.zIndex;
|
||||
}
|
||||
|
||||
|
||||
// 设置 ARIA 信息
|
||||
$popup.attr({
|
||||
'aria-labelledby': this._$('title')
|
||||
.attr('id', 'title:' + this.id).attr('id'),
|
||||
'aria-describedby': this._$('content')
|
||||
.attr('id', 'content:' + this.id).attr('id')
|
||||
});
|
||||
|
||||
|
||||
// 关闭按钮
|
||||
this._$('close')
|
||||
.css('display', this.cancel === false ? 'none' : '')
|
||||
.attr('title', this.cancelValue)
|
||||
.on('click', function(event) {
|
||||
that._trigger('cancel');
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
|
||||
// 添加视觉参数
|
||||
this._$('dialog').addClass(this.skin);
|
||||
this._$('body').css('padding', this.padding);
|
||||
|
||||
|
||||
// 点击任意空白处关闭对话框
|
||||
if (options.quickClose) {
|
||||
$backdrop
|
||||
.on(
|
||||
'onmousedown' in document ? 'mousedown' : 'click',
|
||||
function() {
|
||||
that._trigger('cancel');
|
||||
return false; // 阻止抢夺焦点
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 遮罩设置
|
||||
this.addEventListener('show', function() {
|
||||
$backdrop.css({
|
||||
opacity: 0,
|
||||
background: options.backdropBackground
|
||||
}).animate({ opacity: options.backdropOpacity }, 150);
|
||||
});
|
||||
|
||||
|
||||
// ESC 快捷键关闭对话框
|
||||
this._esc = function(event) {
|
||||
var target = event.target;
|
||||
var nodeName = target.nodeName;
|
||||
var rinput = /^input|textarea$/i;
|
||||
var isTop = Popup.current === that;
|
||||
var keyCode = event.keyCode;
|
||||
|
||||
// 避免输入状态中 ESC 误操作关闭
|
||||
if (!isTop || rinput.test(nodeName) && target.type !== 'button') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (keyCode === 27) {
|
||||
that._trigger('cancel');
|
||||
}
|
||||
};
|
||||
|
||||
$(document).on('keydown', this._esc);
|
||||
this.addEventListener('remove', function() {
|
||||
$(document).off('keydown', this._esc);
|
||||
delete artDialog.list[this.id];
|
||||
});
|
||||
|
||||
|
||||
_count++;
|
||||
|
||||
artDialog.oncreate(this);
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
|
||||
artDialog.create.prototype = prototype;
|
||||
|
||||
|
||||
|
||||
$.extend(prototype, {
|
||||
|
||||
/**
|
||||
* 显示对话框
|
||||
* @name artDialog.prototype.show
|
||||
* @param {HTMLElement Object, Event Object} 指定位置(可选)
|
||||
*/
|
||||
|
||||
/**
|
||||
* 显示对话框(模态)
|
||||
* @name artDialog.prototype.showModal
|
||||
* @param {HTMLElement Object, Event Object} 指定位置(可选)
|
||||
*/
|
||||
|
||||
/**
|
||||
* 关闭对话框
|
||||
* @name artDialog.prototype.close
|
||||
* @param {String, Number} 返回值,可被 onclose 事件收取(可选)
|
||||
*/
|
||||
|
||||
/**
|
||||
* 销毁对话框
|
||||
* @name artDialog.prototype.remove
|
||||
*/
|
||||
|
||||
/**
|
||||
* 重置对话框位置
|
||||
* @name artDialog.prototype.reset
|
||||
*/
|
||||
|
||||
/**
|
||||
* 让对话框聚焦(同时置顶)
|
||||
* @name artDialog.prototype.focus
|
||||
*/
|
||||
|
||||
/**
|
||||
* 让对话框失焦(同时置顶)
|
||||
* @name artDialog.prototype.blur
|
||||
*/
|
||||
|
||||
/**
|
||||
* 添加事件
|
||||
* @param {String} 事件类型
|
||||
* @param {Function} 监听函数
|
||||
* @name artDialog.prototype.addEventListener
|
||||
*/
|
||||
|
||||
/**
|
||||
* 删除事件
|
||||
* @param {String} 事件类型
|
||||
* @param {Function} 监听函数
|
||||
* @name artDialog.prototype.removeEventListener
|
||||
*/
|
||||
|
||||
/**
|
||||
* 对话框显示事件,在 show()、showModal() 执行
|
||||
* @name artDialog.prototype.onshow
|
||||
* @event
|
||||
*/
|
||||
|
||||
/**
|
||||
* 关闭事件,在 close() 执行
|
||||
* @name artDialog.prototype.onclose
|
||||
* @event
|
||||
*/
|
||||
|
||||
/**
|
||||
* 销毁前事件,在 remove() 前执行
|
||||
* @name artDialog.prototype.onbeforeremove
|
||||
* @event
|
||||
*/
|
||||
|
||||
/**
|
||||
* 销毁事件,在 remove() 执行
|
||||
* @name artDialog.prototype.onremove
|
||||
* @event
|
||||
*/
|
||||
|
||||
/**
|
||||
* 重置事件,在 reset() 执行
|
||||
* @name artDialog.prototype.onreset
|
||||
* @event
|
||||
*/
|
||||
|
||||
/**
|
||||
* 焦点事件,在 foucs() 执行
|
||||
* @name artDialog.prototype.onfocus
|
||||
* @event
|
||||
*/
|
||||
|
||||
/**
|
||||
* 失焦事件,在 blur() 执行
|
||||
* @name artDialog.prototype.onblur
|
||||
* @event
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 设置内容
|
||||
* @param {String, HTMLElement} 内容
|
||||
*/
|
||||
content: function(html) {
|
||||
|
||||
var $content = this._$('content');
|
||||
|
||||
// HTMLElement
|
||||
if (typeof html === 'object') {
|
||||
html = $(html);
|
||||
$content.empty('').append(html.show());
|
||||
this.addEventListener('beforeremove', function() {
|
||||
$('body').append(html.hide());
|
||||
});
|
||||
// String
|
||||
} else {
|
||||
$content.html(html);
|
||||
}
|
||||
|
||||
return this.reset();
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 设置标题
|
||||
* @param {String} 标题内容
|
||||
*/
|
||||
title: function(text) {
|
||||
this._$('title').text(text);
|
||||
this._$('header')[text ? 'show' : 'hide']();
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
/** 设置宽度 */
|
||||
width: function(value) {
|
||||
this._$('content').css('width', value);
|
||||
return this.reset();
|
||||
},
|
||||
|
||||
|
||||
/** 设置高度 */
|
||||
height: function(value) {
|
||||
this._$('content').css('height', value);
|
||||
return this.reset();
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 设置按钮组
|
||||
* @param {Array, String}
|
||||
* Options: value, callback, autofocus, disabled
|
||||
*/
|
||||
button: function(args) {
|
||||
args = args || [];
|
||||
var that = this;
|
||||
var html = '';
|
||||
var number = 0;
|
||||
this.callbacks = {};
|
||||
|
||||
|
||||
if (typeof args === 'string') {
|
||||
html = args;
|
||||
number++;
|
||||
} else {
|
||||
$.each(args, function(i, val) {
|
||||
|
||||
var id = val.id = val.id || val.value;
|
||||
var style = '';
|
||||
that.callbacks[id] = val.callback;
|
||||
|
||||
|
||||
if (val.display === false) {
|
||||
style = ' style="display:none"';
|
||||
} else {
|
||||
number++;
|
||||
}
|
||||
|
||||
html +=
|
||||
'<button' +
|
||||
' type="button"' +
|
||||
' i-id="' + id + '"' +
|
||||
style +
|
||||
(val.disabled ? ' disabled' : '') +
|
||||
(val.autofocus ? ' autofocus class="ui-dialog-autofocus"' : '') +
|
||||
'>' +
|
||||
val.value +
|
||||
'</button>';
|
||||
|
||||
that._$('button')
|
||||
.on('click', '[i-id=' + id + ']', function(event) {
|
||||
var $this = $(this);
|
||||
if (!$this.attr('disabled')) { // IE BUG
|
||||
that._trigger(id);
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
this._$('button').html(html);
|
||||
this._$('footer')[number ? 'show' : 'hide']();
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
statusbar: function(html) {
|
||||
this._$('statusbar')
|
||||
.html(html)[html ? 'show' : 'hide']();
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
_$: function(i) {
|
||||
return this._popup.find('[i=' + i + ']');
|
||||
},
|
||||
|
||||
|
||||
// 触发按钮回调函数
|
||||
_trigger: function(id) {
|
||||
var fn = this.callbacks[id];
|
||||
|
||||
return typeof fn !== 'function' || fn.call(this) !== false ?
|
||||
this.close().remove() : this;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
artDialog.oncreate = $.noop;
|
||||
|
||||
|
||||
|
||||
/** 获取最顶层的对话框API */
|
||||
artDialog.getCurrent = function() {
|
||||
return Popup.current;
|
||||
};
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 根据 ID 获取某对话框 API
|
||||
* @param {String} 对话框 ID
|
||||
* @return {Object} 对话框 API (实例)
|
||||
*/
|
||||
artDialog.get = function(id) {
|
||||
return id === undefined ?
|
||||
artDialog.list :
|
||||
artDialog.list[id];
|
||||
};
|
||||
|
||||
artDialog.list = {};
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 默认配置
|
||||
*/
|
||||
artDialog.defaults = defaults;
|
||||
|
||||
|
||||
|
||||
module.exports = artDialog;
|
||||
@ -1,212 +0,0 @@
|
||||
var $ = require('jquery');
|
||||
|
||||
|
||||
var $window = $(window);
|
||||
var $document = $(document);
|
||||
var isTouch = 'createTouch' in document;
|
||||
var html = document.documentElement;
|
||||
var isIE6 = !('minWidth' in html.style);
|
||||
var isLosecapture = !isIE6 && 'onlosecapture' in html;
|
||||
var isSetCapture = 'setCapture' in html;
|
||||
|
||||
|
||||
var types = {
|
||||
start: isTouch ? 'touchstart' : 'mousedown',
|
||||
over: isTouch ? 'touchmove' : 'mousemove',
|
||||
end: isTouch ? 'touchend' : 'mouseup'
|
||||
};
|
||||
|
||||
|
||||
var getEvent = isTouch ? function(event) {
|
||||
if (!event.touches) {
|
||||
event = event.originalEvent.touches.item(0);
|
||||
}
|
||||
return event;
|
||||
} : function(event) {
|
||||
return event;
|
||||
};
|
||||
|
||||
|
||||
var DragEvent = function() {
|
||||
this.start = $.proxy(this.start, this);
|
||||
this.over = $.proxy(this.over, this);
|
||||
this.end = $.proxy(this.end, this);
|
||||
this.onstart = this.onover = this.onend = $.noop;
|
||||
};
|
||||
|
||||
DragEvent.types = types;
|
||||
|
||||
DragEvent.prototype = {
|
||||
|
||||
start: function(event) {
|
||||
event = this.startFix(event);
|
||||
|
||||
$document
|
||||
.on(types.over, this.over)
|
||||
.on(types.end, this.end);
|
||||
|
||||
this.onstart(event);
|
||||
return false;
|
||||
},
|
||||
|
||||
over: function(event) {
|
||||
event = this.overFix(event);
|
||||
this.onover(event);
|
||||
return false;
|
||||
},
|
||||
|
||||
end: function(event) {
|
||||
event = this.endFix(event);
|
||||
|
||||
$document
|
||||
.off(types.over, this.over)
|
||||
.off(types.end, this.end);
|
||||
|
||||
this.onend(event);
|
||||
return false;
|
||||
},
|
||||
|
||||
startFix: function(event) {
|
||||
event = getEvent(event);
|
||||
|
||||
this.target = $(event.target);
|
||||
this.selectstart = function() {
|
||||
return false;
|
||||
};
|
||||
|
||||
$document
|
||||
.on('selectstart', this.selectstart)
|
||||
.on('dblclick', this.end);
|
||||
|
||||
if (isLosecapture) {
|
||||
this.target.on('losecapture', this.end);
|
||||
} else {
|
||||
$window.on('blur', this.end);
|
||||
}
|
||||
|
||||
if (isSetCapture) {
|
||||
this.target[0].setCapture();
|
||||
}
|
||||
|
||||
return event;
|
||||
},
|
||||
|
||||
overFix: function(event) {
|
||||
event = getEvent(event);
|
||||
return event;
|
||||
},
|
||||
|
||||
endFix: function(event) {
|
||||
event = getEvent(event);
|
||||
|
||||
$document
|
||||
.off('selectstart', this.selectstart)
|
||||
.off('dblclick', this.end);
|
||||
|
||||
if (isLosecapture) {
|
||||
this.target.off('losecapture', this.end);
|
||||
} else {
|
||||
$window.off('blur', this.end);
|
||||
}
|
||||
|
||||
if (isSetCapture) {
|
||||
this.target[0].releaseCapture();
|
||||
}
|
||||
|
||||
return event;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 启动拖拽
|
||||
* @param {HTMLElement} 被拖拽的元素
|
||||
* @param {Event} 触发拖拽的事件对象。可选,若无则监听 elem 的按下事件启动
|
||||
*/
|
||||
DragEvent.create = function(elem, event) {
|
||||
var $elem = $(elem);
|
||||
var dragEvent = new DragEvent();
|
||||
var startType = DragEvent.types.start;
|
||||
var noop = function() {};
|
||||
var className = elem.className
|
||||
.replace(/^\s|\s.*/g, '') + '-drag-start';
|
||||
|
||||
var minX;
|
||||
var minY;
|
||||
var maxX;
|
||||
var maxY;
|
||||
|
||||
var api = {
|
||||
onstart: noop,
|
||||
onover: noop,
|
||||
onend: noop,
|
||||
off: function() {
|
||||
$elem.off(startType, dragEvent.start);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
dragEvent.onstart = function(event) {
|
||||
var isFixed = $elem.css('position') === 'fixed';
|
||||
var dl = $document.scrollLeft();
|
||||
var dt = $document.scrollTop();
|
||||
var w = $elem.width();
|
||||
var h = $elem.height();
|
||||
|
||||
minX = 0;
|
||||
minY = 0;
|
||||
maxX = isFixed ? $window.width() - w + minX : $document.width() - w;
|
||||
maxY = isFixed ? $window.height() - h + minY : $document.height() - h;
|
||||
|
||||
var offset = $elem.offset();
|
||||
var left = this.startLeft = isFixed ? offset.left - dl : offset.left;
|
||||
var top = this.startTop = isFixed ? offset.top - dt : offset.top;
|
||||
|
||||
this.clientX = event.clientX;
|
||||
this.clientY = event.clientY;
|
||||
|
||||
$elem.addClass(className);
|
||||
api.onstart.call(elem, event, left, top);
|
||||
};
|
||||
|
||||
|
||||
dragEvent.onover = function(event) {
|
||||
var left = event.clientX - this.clientX + this.startLeft;
|
||||
var top = event.clientY - this.clientY + this.startTop;
|
||||
var style = $elem[0].style;
|
||||
|
||||
left = Math.max(minX, Math.min(maxX, left));
|
||||
top = Math.max(minY, Math.min(maxY, top));
|
||||
|
||||
style.left = left + 'px';
|
||||
style.top = top + 'px';
|
||||
|
||||
api.onover.call(elem, event, left, top);
|
||||
};
|
||||
|
||||
|
||||
dragEvent.onend = function(event) {
|
||||
var position = $elem.position();
|
||||
var left = position.left;
|
||||
var top = position.top;
|
||||
$elem.removeClass(className);
|
||||
api.onend.call(elem, event, left, top);
|
||||
};
|
||||
|
||||
|
||||
dragEvent.off = function() {
|
||||
$elem.off(startType, dragEvent.start);
|
||||
};
|
||||
|
||||
|
||||
if (event) {
|
||||
dragEvent.start(event);
|
||||
} else {
|
||||
$elem.on(startType, dragEvent.start);
|
||||
}
|
||||
|
||||
return api;
|
||||
};
|
||||
|
||||
module.exports = DragEvent;
|
||||
@ -1,625 +0,0 @@
|
||||
var $ = require('jquery');
|
||||
|
||||
var _count = 0;
|
||||
var _isIE6 = !('minWidth' in $('html')[0].style);
|
||||
var _isFixed = !_isIE6;
|
||||
|
||||
|
||||
function Popup() {
|
||||
|
||||
this.destroyed = false;
|
||||
|
||||
|
||||
this.__popup = $('<div />')
|
||||
/*使用 <dialog /> 元素可能导致 z-index 永远置顶的问题(chrome)*/
|
||||
.css({
|
||||
display: 'none',
|
||||
position: 'absolute',
|
||||
/*
|
||||
left: 0,
|
||||
top: 0,
|
||||
bottom: 'auto',
|
||||
right: 'auto',
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
border: '0 none',
|
||||
background: 'transparent'
|
||||
*/
|
||||
outline: 0
|
||||
})
|
||||
.attr('tabindex', '-1')
|
||||
.html(this.innerHTML)
|
||||
.appendTo('body');
|
||||
|
||||
|
||||
this.__backdrop = this.__mask = $('<div />')
|
||||
.css({
|
||||
opacity: .7,
|
||||
background: '#000'
|
||||
});
|
||||
|
||||
|
||||
// 使用 HTMLElement 作为外部接口使用,而不是 jquery 对象
|
||||
// 统一的接口利于未来 Popup 移植到其他 DOM 库中
|
||||
this.node = this.__popup[0];
|
||||
this.backdrop = this.__backdrop[0];
|
||||
|
||||
_count++;
|
||||
}
|
||||
|
||||
|
||||
$.extend(Popup.prototype, {
|
||||
|
||||
/**
|
||||
* 初始化完毕事件,在 show()、showModal() 执行
|
||||
* @name Popup.prototype.onshow
|
||||
* @event
|
||||
*/
|
||||
|
||||
/**
|
||||
* 关闭事件,在 close() 执行
|
||||
* @name Popup.prototype.onclose
|
||||
* @event
|
||||
*/
|
||||
|
||||
/**
|
||||
* 销毁前事件,在 remove() 前执行
|
||||
* @name Popup.prototype.onbeforeremove
|
||||
* @event
|
||||
*/
|
||||
|
||||
/**
|
||||
* 销毁事件,在 remove() 执行
|
||||
* @name Popup.prototype.onremove
|
||||
* @event
|
||||
*/
|
||||
|
||||
/**
|
||||
* 重置事件,在 reset() 执行
|
||||
* @name Popup.prototype.onreset
|
||||
* @event
|
||||
*/
|
||||
|
||||
/**
|
||||
* 焦点事件,在 foucs() 执行
|
||||
* @name Popup.prototype.onfocus
|
||||
* @event
|
||||
*/
|
||||
|
||||
/**
|
||||
* 失焦事件,在 blur() 执行
|
||||
* @name Popup.prototype.onblur
|
||||
* @event
|
||||
*/
|
||||
|
||||
/** 浮层 DOM 素节点[*] */
|
||||
node: null,
|
||||
|
||||
/** 遮罩 DOM 节点[*] */
|
||||
backdrop: null,
|
||||
|
||||
/** 是否开启固定定位[*] */
|
||||
fixed: false,
|
||||
|
||||
/** 判断对话框是否删除[*] */
|
||||
destroyed: true,
|
||||
|
||||
/** 判断对话框是否显示 */
|
||||
open: false,
|
||||
|
||||
/** close 返回值 */
|
||||
returnValue: '',
|
||||
|
||||
/** 是否自动聚焦 */
|
||||
autofocus: true,
|
||||
|
||||
/** 对齐方式[*] */
|
||||
align: 'bottom left',
|
||||
|
||||
/** 内部的 HTML 字符串 */
|
||||
innerHTML: '',
|
||||
|
||||
/** CSS 类名 */
|
||||
className: 'ui-popup',
|
||||
|
||||
/**
|
||||
* 显示浮层
|
||||
* @param {HTMLElement, Event} 指定位置(可选)
|
||||
*/
|
||||
show: function(anchor) {
|
||||
|
||||
if (this.destroyed) {
|
||||
return this;
|
||||
}
|
||||
|
||||
var that = this;
|
||||
var popup = this.__popup;
|
||||
var backdrop = this.__backdrop;
|
||||
|
||||
this.__activeElement = this.__getActive();
|
||||
|
||||
this.open = true;
|
||||
this.follow = anchor || this.follow;
|
||||
|
||||
|
||||
// 初始化 show 方法
|
||||
if (!this.__ready) {
|
||||
|
||||
popup
|
||||
.addClass(this.className)
|
||||
.attr('role', this.modal ? 'alertdialog' : 'dialog')
|
||||
.css('position', this.fixed ? 'fixed' : 'absolute');
|
||||
|
||||
if (!_isIE6) {
|
||||
$(window).on('resize', $.proxy(this.reset, this));
|
||||
}
|
||||
|
||||
// 模态浮层的遮罩
|
||||
if (this.modal) {
|
||||
var backdropCss = {
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
top: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
overflow: 'hidden',
|
||||
userSelect: 'none',
|
||||
zIndex: this.zIndex || Popup.zIndex
|
||||
};
|
||||
|
||||
|
||||
popup.addClass(this.className + '-modal');
|
||||
|
||||
|
||||
if (!_isFixed) {
|
||||
$.extend(backdropCss, {
|
||||
position: 'absolute',
|
||||
width: $(window).width() + 'px',
|
||||
height: $(document).height() + 'px'
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
backdrop
|
||||
.css(backdropCss)
|
||||
.attr({ tabindex: '0' })
|
||||
.on('focus', $.proxy(this.focus, this));
|
||||
|
||||
// 锁定 tab 的焦点操作
|
||||
this.__mask = backdrop
|
||||
.clone(true)
|
||||
.attr('style', '')
|
||||
.insertAfter(popup);
|
||||
|
||||
backdrop
|
||||
.addClass(this.className + '-backdrop')
|
||||
.insertBefore(popup);
|
||||
|
||||
this.__ready = true;
|
||||
}
|
||||
|
||||
|
||||
if (!popup.html()) {
|
||||
popup.html(this.innerHTML);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
popup
|
||||
.addClass(this.className + '-show')
|
||||
.show();
|
||||
|
||||
backdrop.show();
|
||||
|
||||
|
||||
this.reset().focus();
|
||||
this.__dispatchEvent('show');
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
/** 显示模态浮层。参数参见 show() */
|
||||
showModal: function() {
|
||||
this.modal = true;
|
||||
return this.show.apply(this, arguments);
|
||||
},
|
||||
|
||||
|
||||
/** 关闭浮层 */
|
||||
close: function(result) {
|
||||
|
||||
if (!this.destroyed && this.open) {
|
||||
|
||||
if (result !== undefined) {
|
||||
this.returnValue = result;
|
||||
}
|
||||
|
||||
this.__popup.hide().removeClass(this.className + '-show');
|
||||
this.__backdrop.hide();
|
||||
this.open = false;
|
||||
this.blur(); // 恢复焦点,照顾键盘操作的用户
|
||||
this.__dispatchEvent('close');
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
/** 销毁浮层 */
|
||||
remove: function() {
|
||||
|
||||
if (this.destroyed) {
|
||||
return this;
|
||||
}
|
||||
|
||||
this.__dispatchEvent('beforeremove');
|
||||
|
||||
if (Popup.current === this) {
|
||||
Popup.current = null;
|
||||
}
|
||||
|
||||
|
||||
// 从 DOM 中移除节点
|
||||
this.__popup.remove();
|
||||
this.__backdrop.remove();
|
||||
this.__mask.remove();
|
||||
|
||||
|
||||
if (!_isIE6) {
|
||||
$(window).off('resize', this.reset);
|
||||
}
|
||||
|
||||
|
||||
this.__dispatchEvent('remove');
|
||||
|
||||
for (var i in this) {
|
||||
delete this[i];
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
/** 重置位置 */
|
||||
reset: function() {
|
||||
|
||||
var elem = this.follow;
|
||||
|
||||
if (elem) {
|
||||
this.__follow(elem);
|
||||
} else {
|
||||
this.__center();
|
||||
}
|
||||
|
||||
this.__dispatchEvent('reset');
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
/** 让浮层获取焦点 */
|
||||
focus: function() {
|
||||
|
||||
var node = this.node;
|
||||
var popup = this.__popup;
|
||||
var current = Popup.current;
|
||||
var index = this.zIndex = Popup.zIndex++;
|
||||
|
||||
if (current && current !== this) {
|
||||
current.blur(false);
|
||||
}
|
||||
|
||||
// 检查焦点是否在浮层里面
|
||||
if (!$.contains(node, this.__getActive())) {
|
||||
var autofocus = popup.find('[autofocus]')[0];
|
||||
|
||||
if (!this._autofocus && autofocus) {
|
||||
this._autofocus = true;
|
||||
} else {
|
||||
autofocus = node;
|
||||
}
|
||||
|
||||
this.__focus(autofocus);
|
||||
}
|
||||
|
||||
// 设置叠加高度
|
||||
popup.css('zIndex', index);
|
||||
//this.__backdrop.css('zIndex', index);
|
||||
|
||||
Popup.current = this;
|
||||
popup.addClass(this.className + '-focus');
|
||||
|
||||
this.__dispatchEvent('focus');
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
/** 让浮层失去焦点。将焦点退还给之前的元素,照顾视力障碍用户 */
|
||||
blur: function() {
|
||||
|
||||
var activeElement = this.__activeElement;
|
||||
var isBlur = arguments[0];
|
||||
|
||||
|
||||
if (isBlur !== false) {
|
||||
this.__focus(activeElement);
|
||||
}
|
||||
|
||||
this._autofocus = false;
|
||||
this.__popup.removeClass(this.className + '-focus');
|
||||
this.__dispatchEvent('blur');
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 添加事件
|
||||
* @param {String} 事件类型
|
||||
* @param {Function} 监听函数
|
||||
*/
|
||||
addEventListener: function(type, callback) {
|
||||
this.__getEventListener(type).push(callback);
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 删除事件
|
||||
* @param {String} 事件类型
|
||||
* @param {Function} 监听函数
|
||||
*/
|
||||
removeEventListener: function(type, callback) {
|
||||
var listeners = this.__getEventListener(type);
|
||||
for (var i = 0; i < listeners.length; i++) {
|
||||
if (callback === listeners[i]) {
|
||||
listeners.splice(i--, 1);
|
||||
}
|
||||
}
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
// 获取事件缓存
|
||||
__getEventListener: function(type) {
|
||||
var listener = this.__listener;
|
||||
if (!listener) {
|
||||
listener = this.__listener = {};
|
||||
}
|
||||
if (!listener[type]) {
|
||||
listener[type] = [];
|
||||
}
|
||||
return listener[type];
|
||||
},
|
||||
|
||||
|
||||
// 派发事件
|
||||
__dispatchEvent: function(type) {
|
||||
var listeners = this.__getEventListener(type);
|
||||
|
||||
if (this['on' + type]) {
|
||||
this['on' + type]();
|
||||
}
|
||||
|
||||
for (var i = 0; i < listeners.length; i++) {
|
||||
listeners[i].call(this);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// 对元素安全聚焦
|
||||
__focus: function(elem) {
|
||||
// 防止 iframe 跨域无权限报错
|
||||
// 防止 IE 不可见元素报错
|
||||
try {
|
||||
// ie11 bug: iframe 页面点击会跳到顶部
|
||||
if (this.autofocus && !/^iframe$/i.test(elem.nodeName)) {
|
||||
elem.focus();
|
||||
}
|
||||
} catch (e) {}
|
||||
},
|
||||
|
||||
|
||||
// 获取当前焦点的元素
|
||||
__getActive: function() {
|
||||
try { // try: ie8~9, iframe #26
|
||||
var activeElement = document.activeElement;
|
||||
var contentDocument = activeElement.contentDocument;
|
||||
var elem = contentDocument && contentDocument.activeElement || activeElement;
|
||||
return elem;
|
||||
} catch (e) {}
|
||||
},
|
||||
|
||||
|
||||
// 居中浮层
|
||||
__center: function() {
|
||||
|
||||
var popup = this.__popup;
|
||||
var $window = $(window);
|
||||
var $document = $(document);
|
||||
var fixed = this.fixed;
|
||||
var dl = fixed ? 0 : $document.scrollLeft();
|
||||
var dt = fixed ? 0 : $document.scrollTop();
|
||||
var ww = $window.width();
|
||||
var wh = $window.height();
|
||||
var ow = popup.width();
|
||||
var oh = popup.height();
|
||||
var left = (ww - ow) / 2 + dl;
|
||||
var top = (wh - oh) * 382 / 1000 + dt; // 黄金比例
|
||||
var style = popup[0].style;
|
||||
|
||||
|
||||
style.left = Math.max(parseInt(left), dl) + 'px';
|
||||
style.top = Math.max(parseInt(top), dt) + 'px';
|
||||
},
|
||||
|
||||
|
||||
// 指定位置 @param {HTMLElement, Event} anchor
|
||||
__follow: function(anchor) {
|
||||
|
||||
var $elem = anchor.parentNode && $(anchor);
|
||||
var popup = this.__popup;
|
||||
|
||||
|
||||
if (this.__followSkin) {
|
||||
popup.removeClass(this.__followSkin);
|
||||
}
|
||||
|
||||
|
||||
// 隐藏元素不可用
|
||||
if ($elem) {
|
||||
var o = $elem.offset();
|
||||
if (o.left * o.top < 0) {
|
||||
return this.__center();
|
||||
}
|
||||
}
|
||||
|
||||
var that = this;
|
||||
var fixed = this.fixed;
|
||||
|
||||
var $window = $(window);
|
||||
var $document = $(document);
|
||||
var winWidth = $window.width();
|
||||
var winHeight = $window.height();
|
||||
var docLeft = $document.scrollLeft();
|
||||
var docTop = $document.scrollTop();
|
||||
|
||||
|
||||
var popupWidth = popup.width();
|
||||
var popupHeight = popup.height();
|
||||
var width = $elem ? $elem.outerWidth() : 0;
|
||||
var height = $elem ? $elem.outerHeight() : 0;
|
||||
var offset = this.__offset(anchor);
|
||||
var x = offset.left;
|
||||
var y = offset.top;
|
||||
var left = fixed ? x - docLeft : x;
|
||||
var top = fixed ? y - docTop : y;
|
||||
|
||||
|
||||
var minLeft = fixed ? 0 : docLeft;
|
||||
var minTop = fixed ? 0 : docTop;
|
||||
var maxLeft = minLeft + winWidth - popupWidth;
|
||||
var maxTop = minTop + winHeight - popupHeight;
|
||||
|
||||
|
||||
var css = {};
|
||||
var align = this.align.split(' ');
|
||||
var className = this.className + '-';
|
||||
var reverse = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' };
|
||||
var name = { top: 'top', bottom: 'top', left: 'left', right: 'left' };
|
||||
|
||||
|
||||
var temp = [{
|
||||
top: top - popupHeight,
|
||||
bottom: top + height,
|
||||
left: left - popupWidth,
|
||||
right: left + width
|
||||
}, {
|
||||
top: top,
|
||||
bottom: top - popupHeight + height,
|
||||
left: left,
|
||||
right: left - popupWidth + width
|
||||
}];
|
||||
|
||||
|
||||
var center = {
|
||||
left: left + width / 2 - popupWidth / 2,
|
||||
top: top + height / 2 - popupHeight / 2
|
||||
};
|
||||
|
||||
|
||||
var range = {
|
||||
left: [minLeft, maxLeft],
|
||||
top: [minTop, maxTop]
|
||||
};
|
||||
|
||||
|
||||
// 超出可视区域重新适应位置
|
||||
$.each(align, function(i, val) {
|
||||
|
||||
// 超出右或下边界:使用左或者上边对齐
|
||||
if (temp[i][val] > range[name[val]][1]) {
|
||||
val = align[i] = reverse[val];
|
||||
}
|
||||
|
||||
// 超出左或右边界:使用右或者下边对齐
|
||||
if (temp[i][val] < range[name[val]][0]) {
|
||||
align[i] = reverse[val];
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
// 一个参数的情况
|
||||
if (!align[1]) {
|
||||
name[align[1]] = name[align[0]] === 'left' ? 'top' : 'left';
|
||||
temp[1][align[1]] = center[name[align[1]]];
|
||||
}
|
||||
|
||||
|
||||
//添加follow的css, 为了给css使用
|
||||
className += align.join('-') + ' ' + this.className + '-follow';
|
||||
|
||||
that.__followSkin = className;
|
||||
|
||||
|
||||
if ($elem) {
|
||||
popup.addClass(className);
|
||||
}
|
||||
|
||||
|
||||
css[name[align[0]]] = parseInt(temp[0][align[0]]);
|
||||
css[name[align[1]]] = parseInt(temp[1][align[1]]);
|
||||
popup.css(css);
|
||||
|
||||
},
|
||||
|
||||
|
||||
// 获取元素相对于页面的位置(包括iframe内的元素)
|
||||
// 暂时不支持两层以上的 iframe 套嵌
|
||||
__offset: function(anchor) {
|
||||
|
||||
var isNode = anchor.parentNode;
|
||||
var offset = isNode ? $(anchor).offset() : {
|
||||
left: anchor.pageX,
|
||||
top: anchor.pageY
|
||||
};
|
||||
|
||||
|
||||
anchor = isNode ? anchor : anchor.target;
|
||||
var ownerDocument = anchor.ownerDocument;
|
||||
var defaultView = ownerDocument.defaultView || ownerDocument.parentWindow;
|
||||
|
||||
if (defaultView == window) { // IE <= 8 只能使用两个等于号
|
||||
return offset;
|
||||
}
|
||||
|
||||
// {Element: Ifarme}
|
||||
var frameElement = defaultView.frameElement;
|
||||
var $ownerDocument = $(ownerDocument);
|
||||
var docLeft = $ownerDocument.scrollLeft();
|
||||
var docTop = $ownerDocument.scrollTop();
|
||||
var frameOffset = $(frameElement).offset();
|
||||
var frameLeft = frameOffset.left;
|
||||
var frameTop = frameOffset.top;
|
||||
|
||||
return {
|
||||
left: offset.left + frameLeft - docLeft,
|
||||
top: offset.top + frameTop - docTop
|
||||
};
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
/** 当前叠加高度 */
|
||||
Popup.zIndex = 1024;
|
||||
|
||||
|
||||
/** 顶层浮层的实例 */
|
||||
Popup.current = null;
|
||||
|
||||
|
||||
module.exports = Popup;
|
||||
@ -1,33 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button data-event="test" data-align="top right">open dialog</button>
|
||||
<button data-event="test" data-align="top left" style="position:absolute;right:0;top:0;width:100px">open dialog</button>
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
<script>
|
||||
jQuery('button[data-event=test]').on('click', function() {
|
||||
var d = dialog({
|
||||
id: 'align-test',
|
||||
title: '消息',
|
||||
content: '风吹起的青色衣衫,夕阳里的温暖容颜,你比以前更加美丽,像盛开的花<br>——许巍《难忘的一天》',
|
||||
okValue: '确 定',
|
||||
align: $(this).data('align'),
|
||||
//height: 1024,
|
||||
ok: function() {},
|
||||
cancelValue: '取消',
|
||||
cancel: function() {}
|
||||
});
|
||||
|
||||
d.show(this);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,148 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
<style>
|
||||
#follow-elem {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -60px;
|
||||
top: 38%;
|
||||
margin-top: -40px;
|
||||
background: #e3f5ff;
|
||||
border: 1px solid #abd3ea;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
#follow-elem input {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#follow-elem .nw {
|
||||
left: 14px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#follow-elem .n {
|
||||
left: 50%;
|
||||
margin-left: -7px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#follow-elem .ne {
|
||||
right: 14px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#follow-elem .en {
|
||||
right: 0;
|
||||
top: 14px;
|
||||
}
|
||||
|
||||
#follow-elem .e {
|
||||
right: 0;
|
||||
top: 50%;
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
#follow-elem .es {
|
||||
right: 0;
|
||||
bottom: 14px;
|
||||
}
|
||||
|
||||
#follow-elem .se {
|
||||
right: 14px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#follow-elem .s {
|
||||
left: 50%;
|
||||
margin-left: -7px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#follow-elem .sw {
|
||||
left: 14px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#follow-elem .ws {
|
||||
left: 0;
|
||||
bottom: 14px;
|
||||
}
|
||||
|
||||
#follow-elem .w {
|
||||
left: 0;
|
||||
top: 50%;
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
#follow-elem .wn {
|
||||
left: 0;
|
||||
top: 14px;
|
||||
}
|
||||
|
||||
code {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
code strong {
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<pre><code>var follow = document.getElementById('follow-elem');
|
||||
var d = dialog({
|
||||
align: '<strong id="test-align-value">bottom left</strong>',
|
||||
content: 'hello world'
|
||||
});
|
||||
d.show(follow);</code></pre>
|
||||
|
||||
<div id="follow-elem">
|
||||
<input type="radio" name="align" value="top left" class="nw" title="top left">
|
||||
<input type="radio" name="align" value="top" class="n" title="top">
|
||||
<input type="radio" name="align" value="top right" class="ne" title="top right">
|
||||
<input type="radio" name="align" value="right top" class="en" title="right top">
|
||||
<input type="radio" name="align" value="right" class="e" title="right">
|
||||
<input type="radio" name="align" value="right bottom" class="es" title="right bottom">
|
||||
<input type="radio" name="align" value="bottom right" class="se" title="bottom right">
|
||||
<input type="radio" name="align" value="bottom" class="s" title="bottom">
|
||||
<input type="radio" name="align" value="bottom left" class="sw" title="bottom left" checked>
|
||||
<input type="radio" name="align" value="left bottom" class="ws" title="left bottom">
|
||||
<input type="radio" name="align" value="left" class="w" title="left">
|
||||
<input type="radio" name="align" value="left top" class="wn" title="left top">
|
||||
</div>
|
||||
|
||||
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
|
||||
<script>
|
||||
var follow = $('#follow-elem')[0];
|
||||
var d = dialog({
|
||||
align: 'bottom left',
|
||||
content: 'hello world'
|
||||
});
|
||||
d.show(follow);
|
||||
|
||||
$('#follow-elem').on('click', '[type=radio]', function() {
|
||||
if (d.open) {
|
||||
var align = $(this).val();
|
||||
d.align = align;
|
||||
d.show(follow);
|
||||
$('#test-align-value').html(align);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,43 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
|
||||
<script>
|
||||
var d = dialog({
|
||||
title: '消息',
|
||||
content: '风吹起的青色衣衫,夕阳里的温暖容颜,你比以前更加美丽,像盛开的花<br>——许巍《难忘的一天》',
|
||||
button: [{
|
||||
value: '同意',
|
||||
callback: function() {
|
||||
this
|
||||
.content('你同意了');
|
||||
return false;
|
||||
},
|
||||
autofocus: true
|
||||
}, {
|
||||
value: '不同意',
|
||||
callback: function() {
|
||||
alert('你不同意')
|
||||
}
|
||||
}, {
|
||||
id: 'button-disabled',
|
||||
value: '无效按钮',
|
||||
disabled: true
|
||||
}, {
|
||||
value: '关闭我'
|
||||
}]
|
||||
});
|
||||
|
||||
d.show();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,38 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button id="test">close().remove()</button>
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
|
||||
<script>
|
||||
var d = dialog({
|
||||
title: '消息',
|
||||
content: '风吹起的青色衣衫,夕阳里的温暖容颜,你比以前更加美丽,像盛开的花<br>——许巍《难忘的一天》',
|
||||
okValue: '确 定',
|
||||
ok: function() {}
|
||||
});
|
||||
|
||||
d.show();
|
||||
|
||||
$('#test').on('click', function() {
|
||||
d.close().remove();
|
||||
});
|
||||
|
||||
d.onclose = function() {
|
||||
alert('对话框关闭');
|
||||
};
|
||||
|
||||
d.onremove = function() {
|
||||
alert('对话框销毁');
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,55 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button id="test2">1. content(elem).show()</button> <button id="test3">2. close()</button> <button id="test4">3. show()</button> <button id="test5">4. close().remove()</button>
|
||||
<div id="test-content" style="display:none">
|
||||
<p>我是隐藏的DOM节点<button id="test">alert</button></p>
|
||||
</div>
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
|
||||
<script>
|
||||
window.dialog = dialog;
|
||||
$('#test').on('click', function() {
|
||||
alert('click')
|
||||
});
|
||||
|
||||
var d = dialog({
|
||||
title: '消息',
|
||||
content: '风吹起的青色衣衫,夕阳里的温暖容颜,你比以前更加美丽,像盛开的花<br>——许巍《难忘的一天》',
|
||||
okValue: '确 定'
|
||||
});
|
||||
|
||||
var elem = document.getElementById('test-content');
|
||||
|
||||
$('#test2').on('click', function() {
|
||||
d.content(elem).show();
|
||||
});
|
||||
|
||||
$('#test3').on('click', function() {
|
||||
d.close();
|
||||
});
|
||||
|
||||
$('#test4').on('click', function() {
|
||||
d.show();
|
||||
});
|
||||
|
||||
$('#test5').on('click', function() {
|
||||
d.close().remove();
|
||||
});
|
||||
|
||||
d.addEventListener('remove', function() {
|
||||
$('#test2, #test3, #test4, #test5').off('click').on('click', function() {
|
||||
alert('对话框已经销毁');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,35 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button id="test">content('hello world')</button>
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
|
||||
<script>
|
||||
var d = dialog({
|
||||
title: '消息',
|
||||
content: '风吹起的青色衣衫,夕阳里的温暖容颜,你比以前更加美丽,像盛开的花<br>——许巍《难忘的一天》',
|
||||
okValue: '确 定'
|
||||
});
|
||||
|
||||
d.show();
|
||||
|
||||
$('#test').on('click', function() {
|
||||
d.content('hello world');
|
||||
});
|
||||
|
||||
d.addEventListener('remove', function() {
|
||||
$('#test').off('click').on('click', function() {
|
||||
alert('对话框已经销毁');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,42 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
<style>
|
||||
body {
|
||||
*margin: 0;
|
||||
*padding: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button data-event="test">open dialog</button>
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog-plus.js"></script>
|
||||
|
||||
<script>
|
||||
$('button[data-event=test]').on('click', function() {
|
||||
var d = dialog({
|
||||
title: '消息',
|
||||
content: '风吹起的青色衣衫,夕阳里的温暖容颜,你比以前更加美丽,像盛开的花<br>——许巍《难忘的一天》',
|
||||
okValue: '确 定',
|
||||
ok: function() {
|
||||
var that = this;
|
||||
setTimeout(function() {
|
||||
that.title('提交中..');
|
||||
}, 2000);
|
||||
return false;
|
||||
},
|
||||
cancelValue: '取消',
|
||||
cancel: function() {}
|
||||
});
|
||||
|
||||
d.show();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,27 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
</head>
|
||||
|
||||
<body style="height: 2400px;">
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
|
||||
<script>
|
||||
var d = dialog({
|
||||
title: '消息',
|
||||
content: '风吹起的青色衣衫,夕阳里的温暖容颜,你比以前更加美丽,像盛开的花<br>——许巍《难忘的一天》',
|
||||
fixed: true,
|
||||
okValue: '确 定',
|
||||
ok: function() {}
|
||||
});
|
||||
|
||||
|
||||
d.show();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,63 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button data-event="test">test1</button>
|
||||
<br />
|
||||
<button data-event="test2">test2</button> <input id="input" />
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
|
||||
<script>
|
||||
if (!this.console) {
|
||||
this.console = {
|
||||
log: function() {}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
$(document).on('focusin', function(event) {
|
||||
console.log('activeElement', event.target);
|
||||
});
|
||||
|
||||
$('button[data-event=test]').on('click', function() {
|
||||
console.log('根据浏览器规则,此时焦点应该在按钮上');
|
||||
|
||||
var d = dialog({
|
||||
quickClose: true,
|
||||
content: 'hello world',
|
||||
follow: this,
|
||||
onclose: function() {
|
||||
console.log('对话框执行close()操作,此时焦点应该恢复到对话框出现之前的元素上');
|
||||
}
|
||||
});
|
||||
|
||||
d.show();
|
||||
console.log('对话框执行show()方法,焦点应该在对话框上');
|
||||
});
|
||||
|
||||
$('button[data-event=test2]').on('click', function() {
|
||||
console.log('根据浏览器规则,此时焦点应该在按钮上');
|
||||
|
||||
var d = dialog({
|
||||
quickClose: true,
|
||||
content: '输入错误,请重新输入',
|
||||
onclose: function() {
|
||||
$('#input').focus();
|
||||
console.log('对话框执行close()操作,如果开发者对焦点操作,那么将使用开发者的设置');
|
||||
},
|
||||
follow: $('#input')[0]
|
||||
});
|
||||
|
||||
d.show();
|
||||
console.log('对话框执行show()方法,焦点应该在对话框上');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,37 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button data-event="test">open dialog</button>
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
|
||||
<script>
|
||||
$('button[data-event=test]').on('click', function() {
|
||||
var d = dialog({
|
||||
title: '消息',
|
||||
content: '风吹起的青色衣衫,夕阳里的温暖容颜,你比以前更加美丽,像盛开的花<br>——许巍《难忘的一天》',
|
||||
okValue: '确 定',
|
||||
ok: function() {
|
||||
var that = this;
|
||||
setTimeout(function() {
|
||||
that.title('提交中..');
|
||||
}, 2000);
|
||||
return false;
|
||||
},
|
||||
follow: this,
|
||||
cancelValue: '取消',
|
||||
cancel: function() {}
|
||||
});
|
||||
|
||||
d.show();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,42 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>iframe - test</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#doc {
|
||||
height: 560px;
|
||||
}
|
||||
|
||||
#doc iframe {
|
||||
display: block;
|
||||
width: 550px;
|
||||
border: 1px solid #CCC;
|
||||
height: 450px;
|
||||
margin: 100px auto 0 auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
!/http/.test(location.protocol) && document.write('<h1>请在服务端预览(Chrome 浏览器本地访问 iframe 会跨域无权限)</h1>');
|
||||
</script>
|
||||
<div id="doc">
|
||||
<iframe id="test-iframe" src="about:blank" data-src="show-element.html"></iframe>
|
||||
</div>
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
<script>
|
||||
window.dialog = dialog;
|
||||
var $iframe = $('#test-iframe');
|
||||
$iframe.attr('src', $iframe.data('src'));
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,70 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div><label><input autofocus id="input" type="text" value="hello world" style="padding: 5px;font-size:18px" /></label></div>
|
||||
<button id="height">设置高度</button> <button id="open">传值到新的对话框</button> <button id="remove">返回值并关闭当前对话框</button>
|
||||
<script src="../../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../../dist/dialog.js"></script>
|
||||
<script>
|
||||
window.console = window.console || {
|
||||
log: function() {}
|
||||
}
|
||||
|
||||
$(function() {
|
||||
try {
|
||||
var dialog = top.dialog.get(window);
|
||||
} catch (e) {
|
||||
$('body').append(
|
||||
'<p><strong>Error:</strong> 跨域无法无法操作 iframe 对象</p>' +
|
||||
'<p>chrome 浏览器本地会认为跨域,请使用 http 方式访问当前页面</p>'
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
dialog.title('测试例子');
|
||||
dialog.width(550);
|
||||
dialog.height($(document).height());
|
||||
dialog.reset(); // 重置对话框位置
|
||||
|
||||
|
||||
$('#remove').on('click', function() {
|
||||
dialog.close($('#input').val()); // 关闭(隐藏)对话框
|
||||
dialog.remove(); // 主动销毁对话框
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#height').on('click', function() {
|
||||
dialog.height(400).reset();
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#open').on('click', function() {
|
||||
top.dialog({
|
||||
url: './dialog-input.html',
|
||||
title: 'loading..',
|
||||
width: 400,
|
||||
//height: 120,
|
||||
data: $('#input').val(), // 给 iframe 的数据
|
||||
onclose: function() {
|
||||
this.returnValue && $('#input').val(this.returnValue);
|
||||
dialog.focus();
|
||||
},
|
||||
oniframeload: function() {
|
||||
//console.log('iframe ready')
|
||||
}
|
||||
})
|
||||
.showModal();
|
||||
return false;
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,32 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div><label><input id="input" type="text" value="hello world" style="padding: 5px;font-size:18px" /></label></div>
|
||||
<button id="ok">返回值并关闭当前对话框</button>
|
||||
<script src="../../lib/jquery-1.10.2.js"></script>
|
||||
<script>
|
||||
window.console = window.console || {
|
||||
log: function() {}
|
||||
}
|
||||
$(function() {
|
||||
var dialog = top.dialog.get(window);
|
||||
var data = dialog.data; // 获取对话框传递过来的数据
|
||||
$('#input').val(data).focus();
|
||||
|
||||
dialog.title('请输入');
|
||||
$('#ok').on('click', function() {
|
||||
var val = $('#input').val();
|
||||
dialog.close(val);
|
||||
dialog.remove();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,37 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#doc {
|
||||
height: 560px;
|
||||
}
|
||||
|
||||
#doc iframe {
|
||||
display: block;
|
||||
width: 350px;
|
||||
border: 1px solid #CCC;
|
||||
height: 350px;
|
||||
margin: 100px auto 0 auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
!/http/.test(location.protocol) && document.write('<h1>请在服务端预览(部分浏览器本地 iframe 会跨域无权限)</h1>');
|
||||
</script>
|
||||
<div id="doc">
|
||||
<iframe id="test-iframe" src="main.html"></iframe>
|
||||
</div>
|
||||
<script src="../../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../../dist/dialog-plus.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,52 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button data-event="test">在顶层页打开对话框</button> <button data-event="reload">刷新本框架页</button>
|
||||
<div id="value"></div>
|
||||
<script src="../../lib/jquery-1.10.2.js"></script>
|
||||
<script>
|
||||
// demo
|
||||
window.console = window.console || {
|
||||
log: function() {}
|
||||
}
|
||||
|
||||
$('button[data-event=test]').on('click', function() {
|
||||
top.dialog({
|
||||
id: 'test-dialog',
|
||||
title: 'loading..',
|
||||
url: './dialog-content.html',
|
||||
//quickClose: true,
|
||||
onshow: function() {
|
||||
console.log('onshow');
|
||||
},
|
||||
oniframeload: function() {
|
||||
console.log('oniframeload');
|
||||
},
|
||||
onclose: function() {
|
||||
if (this.returnValue) {
|
||||
$('#value').html(this.returnValue);
|
||||
}
|
||||
console.log('onclose');
|
||||
},
|
||||
onremove: function() {
|
||||
console.log('onremove');
|
||||
}
|
||||
})
|
||||
.show(this);
|
||||
return false;
|
||||
});
|
||||
|
||||
$('button[data-event=reload]').on('click', function() {
|
||||
location.reload();
|
||||
return false;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,42 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#fixed {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 20%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button id="test">content('hello world')</button>
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
|
||||
<script>
|
||||
var d = dialog({
|
||||
width: 60,
|
||||
height: 60
|
||||
});
|
||||
|
||||
d.show();
|
||||
|
||||
$('#test').on('click', function() {
|
||||
d.width('auto');
|
||||
d.height('auto');
|
||||
d.content('hello world');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,38 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button data-event="test">open dialog</button>
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
|
||||
<script>
|
||||
$('button[data-event=test]').on('click', function() {
|
||||
var d = dialog({
|
||||
title: '消息',
|
||||
content: '风吹起的青色衣衫,夕阳里的温暖容颜,你比以前更加美丽,像盛开的花<br>——许巍《难忘的一天》',
|
||||
okValue: '确 定',
|
||||
quickClose: true,
|
||||
ok: function() {
|
||||
var that = this;
|
||||
setTimeout(function() {
|
||||
that.title('提交中..');
|
||||
}, 2000);
|
||||
return false;
|
||||
},
|
||||
follow: this,
|
||||
cancelValue: '取消',
|
||||
cancel: function() {}
|
||||
});
|
||||
|
||||
d.show();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,92 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#fixed {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 20%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<table style="width:100%; height:100%">
|
||||
<tr>
|
||||
<td style="text-align: left; vertical-align: top;"><button data-event="test">follow me</button></td>
|
||||
<td style="text-align: center; vertical-align: top;"><button data-event="test">follow me</button></td>
|
||||
<td style="text-align: right; vertical-align: top;"><button data-event="test">follow me</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align: left; vertical-align: middle;"><button data-event="test">follow me</button></td>
|
||||
<td style="text-align: center; vertical-align: middle;"><button data-event="test">follow me</button></td>
|
||||
<td style="text-align: right; vertical-align: middle;"><button data-event="test">follow me</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align: left; vertical-align: bottom;"><button data-event="test">follow me</button></td>
|
||||
<td style="text-align: center; vertical-align: bottom;"><button data-event="test">follow me</button></td>
|
||||
<td style="text-align: right; vertical-align: bottom;"><button data-event="test">follow me</button></td>
|
||||
</tr>
|
||||
</table>
|
||||
<table style="width:100%; height:100%">
|
||||
<tr>
|
||||
<td style="text-align: left; vertical-align: top;"><button data-event="test">follow me</button></td>
|
||||
<td style="text-align: center; vertical-align: top;"><button data-event="test">follow me</button></td>
|
||||
<td style="text-align: right; vertical-align: top;"><button data-event="test">follow me</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align: left; vertical-align: middle;"><button data-event="test">follow me</button></td>
|
||||
<td style="text-align: center; vertical-align: middle;"><button data-event="test">follow me</button></td>
|
||||
<td style="text-align: right; vertical-align: middle;"><button data-event="test">follow</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="text-align: left; vertical-align: bottom;"><button data-event="test">follow me</button></td>
|
||||
<td style="text-align: center; vertical-align: bottom;"><button data-event="test">follow me</button></td>
|
||||
<td style="text-align: right; vertical-align: bottom;"><button data-event="test">follow me</button></td>
|
||||
</tr>
|
||||
</table>
|
||||
<button id="fixed" data-event="test">follow me</button>
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
|
||||
<script>
|
||||
if (top.dialog) {
|
||||
// 仅用来测试跨窗口弹出
|
||||
dialog = top.dialog;
|
||||
}
|
||||
|
||||
var d = dialog({
|
||||
title: '定位到元素演示',
|
||||
content: '风吹起的青色衣衫,夕阳里的温暖容颜,你比以前更加美丽,像盛开的花<br>——许巍《难忘的一天》',
|
||||
okValue: '确 定',
|
||||
ok: function() {},
|
||||
cancel: function() {
|
||||
this.close(); // 隐藏
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
$('button[data-event=test]').on('click', function() {
|
||||
|
||||
d.show(this);
|
||||
});
|
||||
|
||||
d.onremove = function() {
|
||||
//alert('remove')
|
||||
};
|
||||
|
||||
d.onshow = function() {
|
||||
//console.log(this);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,26 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
<script>
|
||||
var d = dialog({
|
||||
content: 'hello world'
|
||||
});
|
||||
|
||||
d.show();
|
||||
|
||||
$(document).on('contextmenu', function(event) {
|
||||
d.open && d.show(event);
|
||||
return !d.open;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,38 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button data-event="test">open dialog</button>
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
|
||||
<script>
|
||||
$('button[data-event=test]').on('click', function() {
|
||||
var d = dialog({
|
||||
title: '消息',
|
||||
content: '风吹起的青色衣衫,夕阳里的温暖容颜,你比以前更加美丽,像盛开的花<br>——许巍《难忘的一天》',
|
||||
okValue: '确 定',
|
||||
ok: function() {
|
||||
var that = this;
|
||||
setTimeout(function() {
|
||||
that.title('提交中..');
|
||||
}, 2000);
|
||||
return false;
|
||||
},
|
||||
cancelValue: '取消',
|
||||
cancel: function() {
|
||||
alert('你点了取消按钮')
|
||||
}
|
||||
});
|
||||
|
||||
d.show();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,45 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button data-event="test">open dialog</button>
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
|
||||
<script>
|
||||
$('button[data-event=test]').on('click', function() {
|
||||
var d = dialog({
|
||||
title: '消息',
|
||||
content: '风吹起的青色衣衫,夕阳里的温暖容颜,你比以前更加美丽,像盛开的花<br>——许巍《难忘的一天》',
|
||||
okValue: '确 定',
|
||||
ok: function() {
|
||||
dialog()
|
||||
.title('提示2')
|
||||
.content('hello world')
|
||||
.button([{
|
||||
value: '打开',
|
||||
autofocus: true,
|
||||
callback: function() {
|
||||
dialog()
|
||||
.title('提示')
|
||||
.showModal();
|
||||
}
|
||||
}])
|
||||
.show();
|
||||
return false;
|
||||
},
|
||||
cancelValue: '取消',
|
||||
cancel: function() {}
|
||||
});
|
||||
|
||||
d.showModal();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,39 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>test</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#fixed {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 20%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<button id="test">title('hello world')</button>
|
||||
<script src="../lib/jquery-1.10.2.js"></script>
|
||||
<script src="../dist/dialog.js"></script>
|
||||
|
||||
<script>
|
||||
var d = dialog({
|
||||
title: 'loading..'
|
||||
});
|
||||
|
||||
d.show();
|
||||
|
||||
$('#test').on('click', function() {
|
||||
d.title('hello world');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,26 +0,0 @@
|
||||
var webpack = require('webpack');
|
||||
var version = require('./package.json').version;
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
'dialog': './src/dialog.js',
|
||||
'dialog-plus': './src/dialog-plus.js'
|
||||
},
|
||||
output: {
|
||||
path: 'dist',
|
||||
filename: '[name].js',
|
||||
library: `dialog`,
|
||||
libraryTarget: 'umd'
|
||||
},
|
||||
plugins: [
|
||||
new webpack.BannerPlugin('art-dialog@' + version + ' | https://github.com/aui/artDialog')
|
||||
],
|
||||
externals: {
|
||||
jquery: 'jQuery'
|
||||
},
|
||||
module: {
|
||||
loaders: [
|
||||
{ test: /\.css$/, loader: 'style-loader!css-loader' }
|
||||
]
|
||||
}
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user