A lightweight javascript library to create some modal windows without html and css like `contact me`、`search`、`login`、`sign up` and `email subscribe` etc.
1、搜索组件，参考testsearch.html
2、联系我组件，参考testcontact.html testcontact-english.html
3、登录组件，参考testlogin.html testlogin-english.html
4、注册组件，参考testsignup.html
5、邮件订阅组件，参考testemailsubscribe.html testemailsubscribe-english.html
6、文件上传组件，参考testfileupload.html
<script src="../release/ppslick-1.0.0.min.js"></script>//创建一个搜索组件
let searcher = PPSlick.createSearcher();//回车回调函数
searcher.onSubmit(function (text) {
console.log(`搜索内容：${text}`);
//将text内容发送到后端进行搜索
})如果需要提示，可以进行
//输入回调函数
searcher.onInput(function (text) {
console.log(`输入内容内容：${text}`);
//将text内容发送到后端进行搜索提示，然后调用setSearchCandidates设置提示
searcher.setSearchCandidates(["提示1","提示2"]);
})//设置placeholder
searcher.setPlaceholder("输入搜索内容，回车搜索");
//设置搜索框内的初始值
searcher.setValue("xxxxx");let options = {
left:'20%',//组件距离左边的位置
top:'20%',//组件距离上边的位置
width:'300px',//组件宽度
placeholder:'输入搜索内容，回车搜索',
maskColor:'rgba(0, 0, 0, 0.5)',//遮罩层颜色
backgroundColor:'white',//组件背景颜色
fontSize:'18px',//搜索框字体大小
fontColor:'#090910',//搜索框字体颜色
closeOnSubmit:'true'//提交后自动关闭该窗口
}
let searcher = PPSlick.createSearcher(options);
//closeOnSubmit:'false'时需要手动关闭组件
//searcher.close();//创建一个联系我组件
let contactMe = PPSlick.createContactMe();//提交回调函数
contactMe.onSubmit(function (des,type,phone) {
console.log(`描述内容：${des}`);
console.log(`业务类型：${type}`);
console.log(`联系方式：${phone}`);
//将内容发送到后端进行存储
})contactMe.setTypeList(["-请选择类型-",'业务问题','其他问题']);//联系我有三个小组件，分别为描述内容、业务类型、联系方式和提交按钮
//设置第0个组件的placeholer为请描述内容
contactMe.setAttribute(0,'placeholer','请描述内容')
//设置第2个组件的placeholer为联系方式
contactMe.setAttribute(2,'placeholer','联系方式')
//设置第2个组件的value为1599999999
contactMe.setAttribute(2,'value','1599999999')
//设置第3个组件的innerHTML为提交
contactMe.setAttribute(3,'html','提交')//如果不需要业务类型
contactMe.disableType();
//如果不需要联系方式
contactMe.disableNumber();let options = {
left:'20%',//组件距离左边的位置
top:'20%',//组件距离上边的位置
width:'300px',//组件宽度
maskColor:'rgba(0, 0, 0, 0.5)',//遮罩层颜色
backgroundColor:'white',//组件背景颜色
fontSize:'18px',//搜索框字体大小
fontColor:'#090910',//搜索框字体颜色
closeOnSubmit:'true'//提交后自动关闭该窗口
}
let contactMe = PPSlick.createContactMe(options);
//closeOnSubmit:'false'时需要手动关闭组件
//contactMe.close();let login = PPSlick.createNormalLogin();//提交回调函数
login.onSubmit(function (userName,password,isRememberme) {
console.log(`账号：${userName}`);
console.log(`密码：${password}`);
console.log(`是否记住我：${isRememberme}`);
})//设置标题
login.setTitle('登录')
//或者
// login.setAttribute(0,'html','登录')
//设置账号提示
login.setUserNamePlaceholder('请输入账号')
//或者
// login.setAttribute(1,'placeholder','请输入账号')
//更改记住我的提示
login.setRememberMeLabel('请记住我')
//更忘记密码的提示
login.setForgetPasswordLabel('忘记了密码')
//更改标签
// login.setTitle("Login")
// login.setUserNamePlaceholder("Account")
// login.setPasswordPlaceholder("Password")
// login.setConfirmButtonLabel('OK')
// login.setCancelButtonLabel('Cancel')login.onForgetPassword(function (user) {
console.log(`忘记密码：${user}`);
})//禁用忘记密码
login.disableForgetPassword();
//禁用记住我
login.disableRememberMe();let options = {
left:'20%',//组件距离左边的位置
top:'20%',//组件距离上边的位置
width:'300px',//组件宽度
maskColor:'rgba(0, 0, 0, 0.5)',//遮罩层颜色
backgroundColor:'white',//组件背景颜色
fontSize:'18px',//搜索框字体大小
fontColor:'#090910',//搜索框字体颜色
closeOnSubmit:'true'//提交后自动关闭该窗口
}
let login = PPSlick.createNormalLogin(options);
//closeOnSubmit:'false'时需要手动关闭组件
//login.close();let login = ppSlick.createVerificationCodeLogin();//点击获取验证码按钮时触发
login.onGetVerificationCode(function (userName) {
console.log(`账号：${userName}`);
})//提交回调函数
login.onSubmit(function (userName,code) {
console.log(`账号：${userName}`);
console.log(`验证码：${code}`);
})//设置标题
login.setTitle('登录')
//或者
// login.setAttribute(0,'html','登录')
//设置账号提示
login.setUserNamePlaceholder('请输入账号')
//或者
// login.setAttribute(1,'placeholder','请输入账号')
//填写验证码
login.setVerification('请记住我')
//更改获取验证码按钮的内容
login.setVerificationButtonLabel('获取验证码')
//验证码框的提示
login.setVerificationPlaceholder('验证码')let options = {
left:'20%',//组件距离左边的位置
top:'20%',//组件距离上边的位置
width:'300px',//组件宽度
maskColor:'rgba(0, 0, 0, 0.5)',//遮罩层颜色
backgroundColor:'white',//组件背景颜色
fontSize:'18px',//搜索框字体大小
fontColor:'#090910',//搜索框字体颜色
closeOnSubmit:'true'//提交后自动关闭该窗口
}
let login = PPSlick.createVerificationCodeLogin(options);
//closeOnSubmit:'false'时需要手动关闭组件
//login.close();//创建注册组件
let signup = ppSlick.createNormalSignup();//提交回调函数
signup.onSubmit(function (userName,password) {
console.log(`账号：${userName}`);
console.log(`密码：${password}`);
})//创建注册组件
let emailSubscription = ppSlick.createEmailSubscription();
emailSubscription.setDescription("订阅描述...");//提交回调函数
emailSubscription.onSubmit(function (email) {
console.log(`邮箱：${email}`);
})let fileUploader = PPSlick.createFileUploader({closeOnSubmit:'true'});
fileUploader.setDescription("文件描述...");
fileUploader.setFilePlaceholder("请选择一个文件");fileUploader.onSubmit(function (file) {
console.log(file.name);
console.log(file.size);
console.log(file.type);
//请求后台进行上传，比如
// let formData = new FormData();
// formData.append('file', file);
// $.ajax({
// url: '/file/importFile',
// type: 'POST',
// cache: false,
// data: formData,
// processData: false,
// contentType: false,
// dataType: "json",
// success: function (response) {
// },
// error: function (XmlHttpRequest, textStatus, errorThrown) {
// }
// })
})