smq #3

Merged
pxrztuq3h merged 12 commits from branch_shen into develop 3 months ago

@ -22,15 +22,14 @@ import java.util.List;
/**
* Description:
*
* @Date: 2020/2/17 14:17
* @Author: PeiChen
*/
@Controller
@RequestMapping("/student")
public class StudentController {
private StudentService studentService;
@Autowired
public void setStudentService(StudentService studentService) {
this.studentService = studentService;
@ -38,6 +37,7 @@ public class StudentController {
/**
*
*
* @param page
* @param size
* @param request
@ -46,6 +46,27 @@ public class StudentController {
* @throws Exception
*/
@RequestMapping("/findAll")
public class StudentController {
private StudentService studentService;
@Autowired
public void setStudentService(StudentService studentService) {
this.studentService = studentService;
}
/**
*
*
* @param page
* @param size
* @param request HTTP
* @param response HTTP
* @return ModelAndView
* @throws Exception
*/
@RequestMapping("/findAll")
public ModelAndView findAll(@RequestParam(name = "page", required = true, defaultValue = "1") int page, @RequestParam(name = "size", required = true, defaultValue = "5") int size, HttpServletRequest request, HttpServletResponse response) throws Exception {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
@ -57,19 +78,18 @@ public class StudentController {
} else {
list = studentService.search(page, size, keyword);
}
//PageInfo就是一个封装了分页数据的bean
PageInfo pageInfo = new PageInfo(list);
mv.addObject("pageInfo", pageInfo);
mv.setViewName("student-list");
return mv;
}
/**
*
* @param request
* @param response
* @throws Exception
*
* @param request HTTP
* @param response HTTP
* @throws Exception
*/
@RequestMapping("/delete")
public void delete(HttpServletRequest request, HttpServletResponse response) throws Exception {
@ -82,14 +102,14 @@ public class StudentController {
}
studentService.delete(sno);
writer.write("true");
}
/**
*
* @param request
* @param response
* @throws Exception
*
* @param request HTTP
* @param response HTTP
* @throws Exception
*/
@RequestMapping("/isExist")
public void isSnoExist(HttpServletRequest request, HttpServletResponse response) throws Exception {
@ -101,9 +121,7 @@ public class StudentController {
if (isExist == null) {
return;
}
//如果isExist不为空说明学号已被注册
writer.write("true");
}
@RequestMapping("/addStudent")
@ -122,9 +140,10 @@ public class StudentController {
/**
*
* @param student
* @param response
* @throws Exception
*
* @param student
* @param response HTTP
* @throws Exception
*/
@RequestMapping("/add")
public void add(Student student, HttpServletResponse response) throws Exception {
@ -133,7 +152,6 @@ public class StudentController {
writer.write("false");
return;
}
Student s = studentService.findBySno(student.getSno());
if (s != null) {
writer.write("false");
@ -145,7 +163,6 @@ public class StudentController {
} else {
writer.write("false");
}
}
@RequestMapping("/editStudent")
@ -158,11 +175,13 @@ public class StudentController {
mv.setViewName("student-edit");
return mv;
}
/**
*
* @param student
* @param response
* @throws Exception
*
* @param student
* @param response HTTP
* @throws Exception
*/
@RequestMapping("/update")
public void update(Student student, HttpServletResponse response) throws Exception {
@ -171,25 +190,18 @@ public class StudentController {
if (student == null || student.getId() == null) {
return;
}
if (student.getName() == null || "".equals(student.getName()) || student.getName().length() == 0
|| student.getSex() == null || student.getSex().length() == 0 || "".equals(student.getSex())
|| student.getSno() == null || "".equals(student.getSno()) || student.getSno().length() == 0
|| student.getPhone() == null || "".equals(student.getPhone()) || student.getPhone().length() == 0
|| student.getStu_class() == null || "".equals(student.getStu_class()) || student.getStu_class().length() == 0
|| student.getPlace() == null || "".equals(student.getPlace()) || student.getPlace().length() == 0
|| student.getDorm_id() == null || "".equals(student.getDorm_id()) || student.getDorm_id().length() == 0
|| student.getTeacher() == null || "".equals(student.getTeacher()) || student.getTeacher().length() == 0 ) {
if (student.getName() == null || "".equals(student.getName()) || student.getName().length() == 0 || student.getSex() == null || student.getSex().length() == 0 || "".equals(student.getSex()) || student.getSno() == null || "".equals(student.getSno()) || student.getSno().length() == 0 || student.getPhone() == null || "".equals(student.getPhone()) || student.getPhone().length() == 0 || student.getStu_class() == null || "".equals(student.getStu_class()) || student.getStu_class().length() == 0 || student.getPlace() == null || "".equals(student.getPlace()) || student.getPlace().length() == 0 || student.getDorm_id() == null || "".equals(student.getDorm_id()) || student.getDorm_id().length() == 0 || student.getTeacher() == null || "".equals(student.getTeacher()) || student.getTeacher().length() == 0) {
return;
}
studentService.update(student);
writer.write("true");
}
/**
* Excel
* @param response
* @throws Exception
*
* @param response HTTP
* @throws Exception
*/
@RequestMapping("/export")
public void export(HttpServletResponse response) throws Exception {
@ -200,6 +212,5 @@ public class StudentController {
IOUtils.copy(is, outputStream);
}
}
}

@ -54,6 +54,7 @@ public interface StudentDao {
@Delete("delete from students where sno = #{sno}")
void delete(String sno) throws Exception;
/**
*
* @param student

@ -9,7 +9,6 @@ import java.util.List;
* Description:
*/
public interface StudentService {
/**
*
* @param page
@ -17,7 +16,7 @@ public interface StudentService {
* @return
* @throws Exception
*/
List<Student> findAll(int page, int size) throws Exception;
List<Student> findAll(int page, int size) throws Exception; // 定义分页查询所有学生信息的方法
/**
*
@ -25,7 +24,7 @@ public interface StudentService {
* @return
* @throws Exception
*/
Student findBySno(String sno) throws Exception;
Student findBySno(String sno) throws Exception; // 定义根据学号查询学生信息的方法
/**
*
@ -35,7 +34,7 @@ public interface StudentService {
* @return
* @throws Exception
*/
List<Student> search(int page, int size, String keyword) throws Exception;
List<Student> search(int page, int size, String keyword) throws Exception; // 定义分页搜索学生信息的方法
/**
*
@ -43,28 +42,28 @@ public interface StudentService {
* @return truefalse
* @throws Exception
*/
boolean add(Student student) throws Exception;
boolean add(Student student) throws Exception; // 定义添加新学生信息的方法
/**
*
* @param sno
* @throws Exception
*/
void delete(String sno) throws Exception;
void delete(String sno) throws Exception; // 定义根据学号删除学生信息的方法
/**
*
* @param student
* @throws Exception
*/
void update(Student student) throws Exception;
void update(Student student) throws Exception; // 定义更新学生信息的方法
/**
*
* @return InputStream
* @throws Exception
*/
InputStream getInputStream() throws Exception;
InputStream getInputStream() throws Exception; // 定义获取所有学生信息输入流的方法
/**
* 宿ID
@ -73,7 +72,7 @@ public interface StudentService {
* @return
* @throws Exception
*/
List<Student> findByDormId(String dorm_id, Integer status) throws Exception;
List<Student> findByDormId(String dorm_id, Integer status) throws Exception; // 定义根据宿舍ID和状态查询学生信息的方法
/**
*
@ -83,7 +82,7 @@ public interface StudentService {
* @return
* @throws Exception
*/
List<Student> findByTeacher(int page, int size, String teacher) throws Exception;
List<Student> findByTeacher(int page, int size, String teacher) throws Exception; // 定义根据教师姓名分页查询学生信息的方法
/**
*
@ -94,5 +93,5 @@ public interface StudentService {
* @return
* @throws Exception
*/
List<Student> searchStudent(int page, int size, String teacher, String keyword) throws Exception;
List<Student> searchStudent(int page, int size, String teacher, String keyword) throws Exception; // 定义根据教师姓名和搜索关键字分页查询学生信息的方法
}

@ -13,10 +13,7 @@ import java.util.ArrayList;
import java.util.List;
/**
* Description:
*
* @Date: 2020/2/17 14:22
* @Author: PeiChen
* StudentServiceImplStudentService
*/
@Service("studentService")
public class StudentServiceImpl implements StudentService {
@ -29,9 +26,11 @@ public class StudentServiceImpl implements StudentService {
}
/**
*
* @return
* @throws Exception
*
* @param page
* @param size
* @return
* @throws Exception
*/
@Override
public List<Student> findAll(int page, int size) throws Exception {
@ -40,9 +39,10 @@ public class StudentServiceImpl implements StudentService {
}
/**
* sno
* @return
* @throws Exception
*
* @param sno
* @return
* @throws Exception
*/
@Override
public Student findBySno(String sno) throws Exception {
@ -50,9 +50,12 @@ public class StudentServiceImpl implements StudentService {
}
/**
*
* @return
* @throws Exception
*
* @param page
* @param size
* @param keyword
* @return
* @throws Exception
*/
@Override
public List<Student> search(int page, int size, String keyword) throws Exception {
@ -61,9 +64,10 @@ public class StudentServiceImpl implements StudentService {
}
/**
*
* @param student
* @throws Exception
*
* @param student
* @return
* @throws Exception
*/
@Override
public boolean add(Student student) throws Exception {
@ -77,9 +81,9 @@ public class StudentServiceImpl implements StudentService {
}
/**
*
* @param sno
* @throws Exception
*
* @param sno
* @throws Exception
*/
@Override
public void delete(String sno) throws Exception {
@ -87,9 +91,9 @@ public class StudentServiceImpl implements StudentService {
}
/**
*
* @param student
* @throws Exception
*
* @param student
* @throws Exception
*/
@Override
public void update(Student student) throws Exception {
@ -97,9 +101,9 @@ public class StudentServiceImpl implements StudentService {
}
/**
*
* @return
* @throws Exception
* Excel
* @return Excel
* @throws Exception
*/
@Override
public InputStream getInputStream() throws Exception {
@ -121,16 +125,15 @@ public class StudentServiceImpl implements StudentService {
datalist.add(obj);
}
WriteExcel excel = new WriteExcel(title, datalist);
return excel.export();
}
/**
* 宿status
* @param dorm_id
* @param status
* @return
* @throws Exception
* 宿status
* @param dorm_id 宿
* @param status
* @return
* @throws Exception
*/
@Override
public List<Student> findByDormId(String dorm_id, Integer status) throws Exception {
@ -138,10 +141,12 @@ public class StudentServiceImpl implements StudentService {
}
/**
* teacher
* @param teacher
* @return
* @throws Exception
* teacher
* @param page
* @param size
* @param teacher
* @return
* @throws Exception
*/
@Override
public List<Student> findByTeacher(int page, int size, String teacher) throws Exception {
@ -149,6 +154,15 @@ public class StudentServiceImpl implements StudentService {
return studentDao.findByTeacher(teacher);
}
/**
*
* @param page
* @param size
* @param teacher
* @param keyword
* @return
* @throws Exception
*/
@Override
public List<Student> searchStudent(int page, int size, String teacher, String keyword) throws Exception {
PageHelper.startPage(page, size);

@ -76,6 +76,7 @@
</table>
</form>
<!-- jQuery脚本 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
@ -144,6 +145,7 @@
layer.msg('添加失败,请联系管理员'); // 如果操作失败,显示错误消息
if (${sessionScope.adminInfo.power == 1}) { // 根据用户权限不同,跳转到不同的页面
// 宿舍管理员权限2秒后跳转到宿舍管理员页面
setTimeout(function () {window.location.href = '${pageContext.request.contextPath}/dorm/byDorm_leader?uid=${sessionScope.adminInfo.uid}';}, 2000);
return false;
}

@ -194,6 +194,7 @@
});
});
});
</script>
</body>
</html>

@ -129,6 +129,7 @@
</tr>
</c:forEach>
</tbody>
</table>
</div>
@ -224,6 +225,7 @@
layer.close(index);
});
}
</script>
</body>
</html>

@ -167,6 +167,7 @@
<a class="next" href="${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}&page=${pageInfo.pageNum+1}&size=${pageInfo.pageSize}&keyword=${param.keyword}">下一页</a>
</c:if>
<!-- 尾页链接 -->
<a class="next" href="${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}&page=${pageInfo.pages}&size=${pageInfo.pageSize}&keyword=${param.keyword}">尾页</a>
</div>
</div>

@ -1,150 +1,193 @@
/* 定义一个名为 mobileSelect 的类,用于设置选择器的样式 */
.mobileSelect {
position: relative;
z-index: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.4s, z-index 0.4s;
transition: opacity 0.4s, z-index 0.4s;
}
position: relative; /* 相对定位 */
z-index: 0; /* 层级为0 */
opacity: 0; /* 初始透明度为0即不可见 */
visibility: hidden; /* 初始状态为隐藏 */
-webkit-transition: opacity 0.4s, z-index 0.4s; /* 过渡效果透明度和层级变化持续0.4秒 */
transition: opacity 0.4s, z-index 0.4s; /* 标准过渡效果 */
}
/* 设置 mobileSelect 内所有元素的边距和填充为0并使用盒模型计算方式 */
.mobileSelect * {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* 定义 mobileSelect 内的 grayLayer 类的样式 */
.mobileSelect .grayLayer {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #eee;
background: rgba(0, 0, 0, 0.7);
z-index: 888;
display: block;
}
position: fixed; /* 固定定位 */
top: 0; /* 距离顶部0 */
left: 0; /* 距离左侧0 */
bottom: 0; /* 距离底部0 */
right: 0; /* 距离右侧0 */
background: #eee; /* 背景色 */
background: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
z-index: 888; /* 层级为888 */
display: block; /* 显示为块级元素 */
}
/* 定义 mobileSelect 内的 content 类的样式 */
.mobileSelect .content {
width: 100%;
display: block;
position: fixed;
z-index: 889;
color: black;
-webkit-transition: all 0.4s;
transition: all 0.4s;
bottom: -350px;
left: 0;
background: white;
}
width: 100%; /* 宽度100% */
display: block; /* 显示为块级元素 */
position: fixed; /* 固定定位 */
z-index: 889; /* 层级为889 */
color: black; /* 文字颜色为黑色 */
-webkit-transition: all 0.4s; /* 所有属性的过渡效果持续0.4秒 */
transition: all 0.4s; /* 标准过渡效果 */
bottom: -350px; /* 初始位置在视口下方350px处 */
left: 0; /* 距离左侧0 */
background: white; /* 背景色为白色 */
}
/* 定义 content 内的 fixWidth 类的样式 */
.mobileSelect .content .fixWidth {
width: 90%;
margin: 0 auto;
position: relative;
width: 90%; /* 宽度为90% */
margin: 0 auto; /* 上下边距为0左右自动调整 */
position: relative; /* 相对定位 */
}
/* 定义 fixWidth 内的伪元素样式,用于清除浮动 */
.mobileSelect .content .fixWidth:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
content: "."; /* 内容为点号 */
display: block; /* 显示为块级元素 */
height: 0; /* 高度为0 */
clear: both; /* 清除浮动 */
visibility: hidden; /* 隐藏 */
}
/* 定义 content 内的 btnBar 类的样式 */
.mobileSelect .content .btnBar {
border-bottom: 1px solid #DCDCDC;
font-size: 15px;
height: 45px;
position: relative;
text-align: center;
line-height: 45px;
}
border-bottom: 1px solid #DCDCDC; /* 底部边框 */
font-size: 15px; /* 字体大小 */
height: 45px; /* 高度 */
position: relative; /* 相对定位 */
text-align: center; /* 文本居中 */
line-height: 45px; /* 行高 */
}
/* 定义 btnBar 内的 cancel 和 ensure 按钮的样式 */
.mobileSelect .content .btnBar .cancel,
.mobileSelect .content .btnBar .ensure {
height: 45px;
width: 55px;
cursor: pointer;
position: absolute;
top: 0;
}
height: 45px; /* 高度 */
width: 55px; /* 宽度 */
cursor: pointer; /* 鼠标指针样式 */
position: absolute; /* 绝对定位 */
top: 0; /* 距离顶部0 */
}
/* cancel 按钮的样式 */
.mobileSelect .content .btnBar .cancel {
left: 0;
color: #666;
left: 0; /* 距离左侧0 */
color: #666; /* 文字颜色 */
}
/* ensure 按钮的样式 */
.mobileSelect .content .btnBar .ensure {
right: 0;
color: #1e83d3;
right: 0; /* 距离右侧0 */
color: #1e83d3; /* 文字颜色 */
}
/* title 的样式 */
.mobileSelect .content .btnBar .title {
font-size: 15px;
padding: 0 15%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
font-size: 15px; /* 字体大小 */
padding: 0 15%; /* 内边距 */
overflow: hidden; /* 溢出隐藏 */
white-space: nowrap; /* 不换行 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
}
/* panel 内的伪元素样式,用于清除浮动 */
.mobileSelect .content .panel:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
content: "."; /* 内容为点号 */
display: block; /* 显示为块级元素 */
height: 0; /* 高度为0 */
clear: both; /* 清除浮动 */
visibility: hidden; /* 隐藏 */
}
/* wheels 的样式 */
.mobileSelect .content .panel .wheels {
width: 100%;
height: 200px;
overflow: hidden;
width: 100%; /* 宽度100% */
height: 200px; /* 高度200px */
overflow: hidden; /* 溢出隐藏 */
}
/* wheel 的样式 */
.mobileSelect .content .panel .wheel {
position: relative;
z-index: 0;
float: left;
width: 50%;
height: 200px;
overflow: hidden;
-webkit-transition: width 0.3s ease;
transition: width 0.3s ease;
}
position: relative; /* 相对定位 */
z-index: 0; /* 层级为0 */
float: left; /* 左浮动 */
width: 100%; /* 宽度100% */
height: 200px; /* 高度200% */
overflow: hidden; /* 溢出隐藏 */
-webkit-transition: width 0.3s ease; /* Webkit浏览器的过渡效果 */
transition: width 0.3s ease; /* 标准过渡效果 */
}
/* selectContainer 的样式 */
.mobileSelect .content .panel .wheel .selectContainer {
display: block;
text-align: center;
-webkit-transition: -webkit-transform 0.18s ease-out;
transition: -webkit-transform 0.18s ease-out;
transition: transform 0.18s ease-out;
transition: transform 0.18s ease-out, -webkit-transform 0.18s ease-out;
}
display: block; /* 显示为块级元素 */
text-align: center; /* 文本居中 */
-webkit-transition: -webkit-transform 0.18s ease-out; /* Webkit浏览器的过渡效果 */
transition: -webkit-transform 0.18s ease-out; /* Webkit浏览器的标准过渡效果 */
transition: transform 0.18s ease-out; /* 标准过渡效果 */
transition: transform 0.18s ease-out, -webkit-transform 0.18s ease-out; /* 同时应用两种过渡效果 */
}
/* selectContainer li元素的样式 */
.mobileSelect .content .panel .wheel .selectContainer li {
font-size: 15px;
display: block;
height: 40px;
line-height: 40px;
cursor: pointer;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
font-size: 15px; /* 字体大小 */
display: block; /* 显示为块级元素 */
height: 40px; /* 高度40px */
line-height: 40px; /* 行高40px */
color: #ffffff; /* 文字颜色为白色 */
cursor: pointer; /* 鼠标指针样式 */
white-space: nowrap; /* 不换行 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
}
/* selectLine的样式 */
.mobileSelect .content .panel .selectLine {
height: 40px;
width: 100%;
position: absolute;
top: 80px;
pointer-events: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-top: 1px solid #DCDCDC;
border-bottom: 1px solid #DCDCDC;
}
height: 40px; /* 高度40px */
width: 100%; /* 宽度100% */
position: absolute; /* 绝对定位 */
top: 80px; /* 距离顶部80px */
pointer-events: none; /* 禁止鼠标事件 */
-webkit-box-sizing: border-box; /* Webkit浏览器的盒模型计算方式 */
box-sizing: border-box; /* 标准盒模型计算方式 */
border-top: 1px solid #DCDCDC; /* 上边框 */
border-bottom: 1px solid #DCDCDC; /* 下边框 */
}
/* shadowMask的样式 */
.mobileSelect .content .panel .shadowMask {
position: absolute;
top: 0;
width: 100%;
height: 200px;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(rgba(255, 255, 255, 0)), to(#ffffff));
background: -webkit-linear-gradient(top, #ffffff, rgba(255, 255, 255, 0), #ffffff);
background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0), #ffffff);
opacity: 0.9;
pointer-events: none;
}
position: absolute; /* 绝对定位 */
top: 0; /* 距离顶部0 */
width: 100%; /* 宽度100% */
height: 200px; /* 高度200px */
background: -webkit-linear-gradient(top, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变 */
background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* 标准背景渐变 */
background: -webkit-linear-gradient(top, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变重复*/
background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变重复*/
background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变重复*/
background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变重复*/
background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变重复*/
background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变重复*/
background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变重复*/
background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变重复*/
background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变重复*/
}
/* mobileSelect-show类的样式用于显示时的状态 */
.mobileSelect-show {
opacity: 1;
z-index: 10000;
visibility: visible;
z-index: 10000; /* z轴层级提高至10000 */
}
/* mobileSelect-show类的content子元素的样式用于显示时的状态 */
.mobileSelect-show .content {
bottom: 0;
bottom: -350px; /* bottom属性设置为-350px使其完全显示在视窗内 */
}

@ -1,433 +1,439 @@
@charset "utf-8";
@import url(../lib/layui/css/layui.css);
/* 全局样式 */
* {
margin: 0px;
padding: 0px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a {
text-decoration: none;
text-decoration: none; /* 去掉链接下划线 */
}
html {
width: 100%;
height: 100%;
overflow-x:hidden;
overflow-y:auto;
overflow-x: hidden; /* 隐藏水平滚动条 */
overflow-y: auto; /* 允许垂直滚动 */
}
body {
width: 100%;
min-height: 100%;
min-height: 100%; /* 最小高度为视口高度 */
}
/* 页面主体内容样式 */
.x-body {
padding: 20px;
padding: 20px; /* 内边距 */
}
.x-nav {
padding: 0 20px;
position: relative;
z-index: 99;
border-bottom: 1px solid #e5e5e5;
line-height: 39px;
height: 39px;
overflow: hidden;
padding: 0 20px; /* 左右内边距 */
position: relative; /* 相对定位 */
z-index: 99; /* 层级 */
border-bottom: 1px solid #e5e5e5; /* 底部边框 */
line-height: 39px; /* 行高 */
height: 39px; /* 固定高度 */
overflow: hidden; /* 隐藏溢出内容 */
}
xblock {
display: block;
margin-bottom: 10px;
padding: 5px;
line-height: 22px;
/* border-left: 5px solid #009688; */
border-radius: 0 2px 2px 0;
background-color: #f2f2f2;
display: block; /* 块级元素 */
margin-bottom: 10px; /* 下边距 */
padding: 5px; /* 内边距 */
line-height: 22px; /* 行高 */
border-radius: 0 2px 2px 0; /* 圆角 */
background-color: #f2f2f2; /* 背景色 */
}
.x-right {
float: right;
float: right; /* 右浮动 */
}
.x-so {
/*text-align: center;*/
/*background: #f2f2f2 url() 0 0 no-repeat;*/
margin-bottom: 20px;
margin-bottom: 20px; /* 下边距 */
}
.x-so input.layui-input {
width: 150px;
padding-left: 25px;
width: 150px; /* 宽度 */
padding-left: 25px; /* 左内边距 */
}
.x-so .layui-form-label {
display: inline-block;
display: inline-block; /* 行内块级元素 */
}
.x-so input.layui-input, .x-so input.layui-btn {
display: inline-block;
display: inline-block; /* 行内块级元素 */
}
.x-red {
color: red;
color: red; /* 红色字体 */
}
.x-a {
color: #1AA093;
color: #1AA093; /* 绿色字体 */
}
.x-a:hover {
color: #127F74;
color: #127F74; /* 悬停时的颜色 */
}
.x-sort {
height: 30px;
height: 30px; /* 高度 */
}
.x-show {
cursor: pointer;
cursor: pointer; /* 鼠标指针 */
}
.layui-form-switch {
margin-top: 0px;
margin-top: 0px; /* 上边距 */
}
.layui-input:focus, .layui-textarea:focus {
border-color: #189f92!important;
border-color: #189f92!important; /* 焦点状态下的边框颜色 */
}
/* 分页样式 */
.page {
margin-top: 20px;
text-align: center;
margin-top: 20px; /* 上边距 */
text-align: center; /* 居中对齐 */
}
.page a {
display: inline-block;
background: #fff url(#) 0 0 no-repeat;
color: #888;
padding: 10px;
min-width: 15px;
border: 1px solid #E2E2E2;
display: inline-block; /* 行内块级元素 */
background: #fff url(#) 0 0 no-repeat; /* 背景图 */
color: #888; /* 灰色字体 */
padding: 10px; /* 内边距 */
min-width: 15px; /* 最小宽度 */
border: 1px solid #E2E2E2; /* 边框 */
}
.page span {
display: inline-block;
padding: 10px;
min-width: 15px;
border: 1px solid #E2E2E2;
display: inline-block; /* 行内块级元素 */
padding: 10px; /* 内边距 */
min-width: 15px; /* 最小宽度 */
border: 1px solid #E2E2E2; /* 边框 */
}
.page span.current {
display: inline-block;
background: #009688 url(#) 0 0 no-repeat;
color: #fff;
padding: 10px;
min-width: 15px;
border: 1px solid #009688;
display: inline-block; /* 行内块级元素 */
background: #009688 url(#) 0 0 no-repeat; /* 背景图 */
color: #fff; /* 白色字体 */
padding: 10px; /* 内边距 */
min-width: 15px; /* 最小宽度 */
border: 1px solid #009688; /* 边框 */
}
.page .pagination li {
display: inline-block;
margin-right: 5px;
text-align: center;
display: inline-block; /* 行内块级元素 */
margin-right: 5px; /* 右边距 */
text-align: center; /* 居中对齐 */
}
.page .pagination li.active span {
background: #009688 url(#) 0 0 no-repeat;
color: #fff;
border: 1px solid #009688;
background: #009688 url(#) 0 0 no-repeat; /* 背景图 */
color: #fff; /* 白色字体 */
border: 1px solid #009688; /* 边框 */
}
/* 登录样式 */
/* 头部 */
.container {
width: 100%;
height: 45px;
background-color: #222;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
width: 100%; /* 宽度 */
height: 45px; /* 高度 */
background-color: #222; /* 背景色 */
border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* 底部边框 */
}
.container .logo a {
float: left;
color: #fff;
font-size: 18px;
padding-left: 20px;
line-height: 45px;
width: 200px;
float: left; /* 左浮动 */
color: #fff; /* 白色字体 */
font-size: 18px; /* 字体大小 */
padding-left: 20px; /* 左内边距 */
line-height: 45px; /* 行高 */
width: 200px; /* 宽度 */
}
.container .right {
background-color:rgba(0,0,0,0);
float: right;
background-color: rgba(0,0,0,0); /* 透明背景 */
float: right; /* 右浮动 */
}
.container .left_open {
height: 45px;
float: left;
height: 45px; /* 高度 */
float: left; /* 左浮动 */
}
.container .left_open i {
display: block;
background: rgba(255,255,255,0.1) url(#) 0 0 no-repeat;
color: #fff;
width: 32px;
height: 32px;
line-height: 32px;
border-radius: 3px;
text-align: center;
margin-top: 7px;
cursor: pointer;
display: block; /* 块级元素 */
background: rgba(255,255,255,0.1) url(#) 0 0 no-repeat; /* 背景图 */
color: #fff; /* 白色字体 */
width: 32px; /* 宽度 */
height: 32px; /* 高度 */
line-height: 32px; /* 行高 */
border-radius: 3px; /* 圆角 */
text-align: center; /* 居中对齐 */
margin-top: 7px; /* 上边距 */
cursor: pointer; /* 鼠标指针 */
}
.container .left_open i:hover {
background: rgba(255,255,255,0.3) url(#) 0 0 no-repeat;
background: rgba(255,255,255,0.3) url(#) 0 0 no-repeat; /* 悬停时的背景图 */
}
.container .left {
background-color:rgba(0,0,0,0);
float: left;
background-color: rgba(0,0,0,0); /* 透明背景 */
float: left; /* 左浮动 */
}
.container .layui-nav-item {
line-height: 45px;
line-height: 45px; /* 行高 */
}
.container .layui-nav-more {
top: 20px;
top: 20px; /* 上边距 */
}
.container .layui-nav-child {
top: 50px;
top: 50px; /* 上边距 */
}
.container .layui-nav-child i {
margin-right: 10px;
}
.layui-nav .layui-nav-item a{
color: #fff;
cursor: pointer;
}
.layui-nav .layui-nav-child a{
color: #333;
cursor: pointer;
margin-right: 10px; /* 右边距 */
}
.left-nav {
position: absolute;
top: 46px;
bottom: 42px;
left: 0;
z-index: 2;
padding-top: 10px;
background-color: #EEEEEE;
width: 220px;
max-width: 220px;
overflow: auto;
position: absolute; /* 绝对定位 */
top: 46px; /* 上边距 */
bottom: 42px; /* 下边距 */
left: 0; /* 左边距 */
z-index: 2; /* 层级 */
padding-top: 10px; /* 上内边距 */
width: 220px; /* 宽度 */
max-width: 220px; /* 最大宽度 */
background-color: #EEEEEE; /* 背景色 */
overflow: auto; /* 自动溢出处理 */
/* 设置溢出内容不显示 */
overflow-x: hidden;
border-right: 1px solid #e5e5e5;
/* 左侧导航样式 */
.left-nav {
/* 宽度设置为0注释掉的代码可以设置具体宽度 */
/* width: 0px; */
}
/* 左侧导航列表项样式 */
.left-nav #nav li {
border-bottom: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5; /* 底部边框 */
}
/* 左侧导航列表项鼠标悬停样式 */
.left-nav #nav li:hover > a {
/*color: blue;*/
}
.left-nav #nav .current{
background-color: rgba(0, 0, 0, 0.3);
/* color: blue; */ /* 注释掉的颜色设置 */
}
.left-nav #nav li a{
font-size: 14px;
padding: 10px 15px 10px 20px;
display: block;
cursor: pointer;
}
.left-nav #nav li a cite{
font-size: 14px;
/* 左侧导航列表项当前选中样式 */
.left-nav #nav li .current {
background-color: rgba(0, 0, 0, 0.3); /* 背景色 */
}
/* 左侧导航子菜单默认隐藏 */
.left-nav #nav li .sub-menu {
display: none;
}
/* 左侧导航子菜单打开状态 */
.left-nav #nav li .opened {
display: block;
}
/* 左侧导航子菜单打开状态鼠标悬停样式 */
.left-nav #nav li .opened:hover {
/*background: #fff url() 0 0 no-repeat;*/
/* background: #fff url() 0 0 no-repeat; */ /* 注释掉的背景图设置 */
}
.left-nav #nav li .opened .current{
/* 左侧导航子菜单当前选中样式 */
.left-nav #nav li .opened .current {
/* background: rgba(0, 0, 0, 0); */ /* 注释掉的背景色设置 */
}
.left-nav #nav li .sub-menu li:hover{
/*color: blue;*/
/*background: #fff url() 0 0 no-repeat;*/
}
/* 左侧导航子菜单列表项样式 */
.left-nav #nav li .sub-menu li a {
padding: 12px 15px 12px 30px;
font-size: 14px;
cursor: pointer;
padding: 12px 15px 12px 30px; /* 内边距 */
font-size: 14px; /* 字体大小 */
cursor: pointer; /* 鼠标指针样式 */
}
/* 左侧导航子菜单列表项二级菜单样式 */
.left-nav #nav li .sub-menu li .sub-menu li a {
padding-left: 45px;
padding-left: 45px; /* 左内边距 */
}
.left-nav #nav li .sub-menu li a:hover{
color: #148cf1;
/* 左侧导航子菜单列表项鼠标悬停样式 */
.left-nav #nav li .sub-menu li:hover a {
color: #148cf1; /* 颜色 */
/* background: #fff url() 0 0 no-repeat; */ /* 注释掉的背景图设置 */
}
/* 左侧导航子菜单列表项图标样式 */
.left-nav #nav li .sub-menu li a i {
font-size: 12px;
font-size: 12px; /* 字体大小 */
}
/* 左侧导航列表项右侧箭头样式 */
.left-nav #nav li a i {
padding-right: 10px;
line-height: 14px;
}
.left-nav #nav li .nav_right{
float: right;
font-size: 16px;
}
.x-slide_left {
width: 17px;
height: 61px;
background: url(#) 0 0 no-repeat;
position: absolute;
top: 200px;
left: 221px;
cursor: pointer;
z-index: 3;
float: right; /* 右浮动 */
font-size: 16px; /* 字体大小 */
line-height: 14px; /* 行高 */
padding-right: 10px; /* 右内边距 */
}
/* 页面内容样式 */
.page-content {
position: absolute;
top: 46px;
right: 0;
bottom: 42px;
left: 221px;
overflow: hidden;
z-index: 1;
position: absolute; /* 绝对定位 */
top: 46px; /* 顶部位置 */
right: 0; /* 右边位置 */
bottom: 42px; /* 底部位置 */
left: 221px; /* 左边位置 */
overflow: hidden; /* 隐藏溢出内容 */
z-index: 1; /* z轴顺序 */
}
/* 页面内容背景样式 */
.page-content-bg {
position: absolute;
top: 46px;
right: 0;
bottom: 42px;
left: 221px;
background: rgba(0,0,0,0.5); url() 0 0 no-repeat;
overflow: hidden;
z-index: 100;
display: none;
position: absolute; /* 绝对定位 */
top: 46px; /* 顶部位置 */
right: 0; /* 右边位置 */
bottom: 42px; /* 底部位置 */
left: 221px; /* 左边位置 */
background: rgba(0, 0, 0, 0.5); /* 背景色 */
url(); /* 背景图 */
z-index: 100; /* z轴顺序 */
display: none; /* 默认隐藏 */
}
/* x轴滑动按钮样式 */
.x-slide_left {
width: 17px; /* 宽度 */
height: 61px; /* 高度 */
background: url(#) 0 0 no-repeat; /* 背景图 */
position: absolute; /* 绝对定位 */
top: 200px; /* 顶部位置 */
left: 221px; /* 左边位置 */
cursor: pointer; /* 鼠标指针样式 */
z-index: 3; /* z轴顺序 */
}
/* 页面内容标签页样式 */
.page-content .tab {
height: 100%;
width: 100%;
background: #EFEEF0 url(#) 0 0 no-repeat;
margin: 0px;
height: 100%; /* 高度 */
margin: 0px; /* 外边距 */
background: #EFEEF0 url(#) 0 0 no-repeat; /* 背景图 */
}
/* 页面内容标签页标题样式 */
.page-content .layui-tab-title {
/*padding-top: 5px;*/
height: 35px;
background: #EFEEF0 url(#) 0 0 no-repeat;
position: relative;
z-index: 100;
height: 35px; /* 高度 */
background: #EFEEF0 url(#) 0 0 no-repeat; /* 背景图 */
position: relative; /* 相对定位 */
z-index: 100; /* z轴顺序 */
}
/* 页面内容标签页标题当前选中样式 */
.page-content .layui-tab-title li.home i {
padding-right: 5px;
padding-right: 5px; /* 右内边距 */
}
/* 页面内容标签页标题当前选中样式 */
.page-content .layui-tab-title li.home .layui-tab-close {
display: none;
display: none; /* 隐藏关闭按钮 */
}
/* 页面内容标签页标题当前选中样式 */
.page-content .layui-tab-title li {
line-height: 35px;
line-height: 35px; /* 行高 */
}
.page-content .layui-tab-title .layui-this:after{
height: 36px;
/* 页面内容标签页标题当前选中样式 */
.page-content .layui-tab-title li.layui-this:after {
height: 63px; /* 高度 */
}
/* 页面内容标签页标题当前选中样式 */
.page-content .layui-tab-title li.layui-this {
background: #fff url(#) 0 0 no-repeat; /* 背景图 */
}
.page-content .layui-tab-title li .layui-tab-close{
border-radius: 50%;
/* 页面内容标签页标题当前选中样式 */
.page-content .layui-tab-title li.layui-this .layui-tab-close {
border-radius: 50%; /* 圆角 */
}
.page-content .layui-tab-title .layui-this{
background: #fff url(#) 0 0 no-repeat;
/* 页面内容标签页标题当前选中样式 */
.page-content .layui-tab-title li {
border-radius: 50%; /* 圆角 */
}
/* 页面内容标签页标题当前选中样式 */
.page-content .layui-tab-bar {
height:34px;
line-height: 35px;
height: 34px; /* 高度 */
line-height: 34px; /* 行高 */
}
/* 页面内容标签页内容样式 */
.page-content .layui-tab-content {
position: absolute;
top: 36px;
bottom: 0px;
width: 100%;
background: #fff url(#) 0 0 no-repeat;
padding: 0px;
overflow: hidden;
top: 36px; /* 顶部位置 */
bottom: 0px; /* 底部位置 */
width: 100%; /* 宽度 */
background: #fff url(#) 0 0 no-repeat; /* 背景图 */
padding: 0px; /* 内边距 */
overflow: hidden; /* 隐藏溢出内容 */
}
.page-content .layui-tab-content .layui-tab-item{
width: 100%;
height: 100%;
/* 页面内容标签页内容项样式 */
.page-content .layui-tab-content .layui-tab-item {
width: 100%; /* 宽度 */
height: 100%; /* 高度 */
}
.page-content .layui-tab-content .layui-tab-item iframe{
width: 100%;
height: 100%;
}
.x-admin-carousel,.layui-carousel,.x-admin-carousel>[carousel-item]>* {
background-color:#fff
/* 页面内容标签页内容项iframe样式 */
.page-content .layui-tab-content .layui-tab-item iframe {
width: 100%; /* 宽度 */
height: 100%; /* 高度 */
}
.x-admin-backlog .x-admin-backlog-body {
display:block;
padding:10px 15px;
background-color:#f8f8f8;
color:#999;
border-radius:2px;
transition:all .3s;
-webkit-transition:all .3s
/* xadmin后台日志样式 */
.x-admin-backlog-body {
display: block; /* 显示块级元素 */
padding: 10px 15px; /* 内边距 */
background-color: #f8f8f8; /* 背景色 */
color: #999; /* 文字颜色 */
border-radius: 2px; /* 圆角 */
transition: all .3s ease; /* CSS3过渡效果 */
}
/* xadmin后台日志标题样式 */
.x-admin-backlog-body h3 {
padding-bottom:10px;
font-size:12px
padding-bottom: 10px; /* 底部内边距 */
font-size: 12px; /* 字体大小 */
}
.x-admin-backlog-body p cite {
font-style:normal;
font-size:30px;
font-weight:300;
color:#009688
/* xadmin后台日志内容样式 */
.x-admin-backlog-body p {
font-style: normal; /* 正常字体风格 */
font-size: 30px; /* 字体大小 */
font-weight: 300; /* 字体粗细 */
color: #009689; /* 文字颜色 */
}
/* xadmin后台日志内容鼠标悬停样式 */
.x-admin-backlog-body:hover {
background-color:#CFCFCF;
color:#888
background-color: #CFCFCF; /* 背景色 */
color: #888; /* 文字颜色 */
}
.welcome-footer{padding: 30px 0; line-height: 30px; text-align: center; background-color: #eee; color: #666; font-weight: 300;}
body .layui-layout-admin .footer-demo{height: auto; padding: 15px 0; line-height: 26px;}
.welcome-footer a{padding: 0 5px;}
table th, table td {
word-break: break-all;
/* welcome页脚样式 */
.welcome-footer {
padding: 30px 0; /* 内边距 */
text-align: center; /* 文本居中对齐 */
line-height: 30px; /* 行高 */
color: #eee; /* 文字颜色 */
background-color: #222; /* 背景色 */
border-top: 1px solid rgba(255, 255, 255, 0.1); /* 边框样式 */
}
/* foot页脚样式 */
.footer {
position: fixed;
bottom: 0px;
width: 100%;
background-color: #222;
border-top: 1px solid rgba(255, 255, 255, 0.2);
line-height: 41px;
color: #fff;
/*padding-left: 10px;*/
position: fixed; /* 固定定位 */
bottom: 0px; /* 底部位置 */
width: 100%; /* 宽度 */
background-color: #222; /* 背景色 */
line-height: 41px; /* 行高 */
color: #fff; /* 文字颜色 */
}
/* foot页脚版权样式 */
.footer .copyright {
margin-left: 10px;
margin-left: 10px; /* 左内边距 */
}
@media screen and (max-width: 768px){
.fast-add{
display: none;
}
.layui-nav .to-index{
display: none;
}
.container .logo a{
width: 140px;
}
.container .left_open {
/*float: right;*/
}
.left-nav{
left: -221px;
}
.page-content{
left: 0px;
}
.page-content .layui-tab-content .layui-tab-item{
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
.x-so input.layui-input{
width: 100%;
margin: 10px;
/* table表格样式 */
table th, table td {
word-break: break-all; /* CSS属性允许在单词内换行 */
}
.layui-input{
margin-left: 20px;
}
}

@ -4,66 +4,69 @@
* Released under the MIT License.
*/
(function() {
(function(window) {
// 获取指定元素的类名
function getClass(dom, string) {
return dom.getElementsByClassName(string);
}
// 构造器
function MobileSelect(config) {
this.mobileSelect;
this.wheelsData = config.wheels;
this.jsonType = false;
this.cascadeJsonData = [];
this.displayJson = [];
this.curValue = null;
this.curIndexArr = [];
this.cascade = false;
this.startY;
this.moveEndY;
this.moveY;
this.oldMoveY;
this.offset = 0;
this.offsetSum = 0;
this.oversizeBorder;
this.curDistance = [];
this.clickStatus = false;
this.isPC = true;
this.mobileSelect; // DOM元素表示整个选择器
this.wheelsData = config.wheels; // 滚轮数据
this.jsonType = false; // 是否为JSON类型数据
this.cascadeJsonData = []; // 级联JSON数据
this.displayJson = []; // 显示的JSON数据
this.curValue = null; // 当前值
this.curIndexArr = []; // 当前索引数组
this.startY; // 起始Y坐标
this.moveEndY; // 结束Y坐标
this.moveY; // 移动Y坐标
this.oldMoveY; // 旧的移动Y坐标
this.offset = 0; // 偏移量
this.offsetSum = 0; // 偏移总和
this.oversizeBorder; // 超出边界大小
this.curDistance = []; // 当前距离数组
this.clickStatus = false; // 点击状态
this.isPC = true; // 是否为PC端
this.init(config);
}
// 原型链
MobileSelect.prototype = {
constructor: MobileSelect,
// 初始化函数
init: function(config) {
var _this = this;
_this.keyMap = config.keyMap ? config.keyMap : {id:'id', value:'value', childs:'childs'};
_this.checkDataType();
_this.renderWheels(_this.wheelsData, config.cancelBtnText, config.ensureBtnText);
_this.trigger = document.querySelector(config.trigger);
_this.keyMap = config.keyMap ? config.keyMap : { id: 'id', value: 'value', childs: 'childs' }; // 键值映射
_this.checkDataType(); // 检查数据类型
_this.renderWheels(_this.wheelsData, config.cancelBtnText, config.ensureBtnText); // 渲染滚轮
_this.trigger = document.querySelector(config.trigger); // 触发器元素
if (!_this.trigger) {
console.error('mobileSelect has been successfully installed, but no trigger found on your page.');
return false;
}
_this.wheel = getClass(_this.mobileSelect,'wheel');
_this.slider = getClass(_this.mobileSelect,'selectContainer');
_this.wheels = _this.mobileSelect.querySelector('.wheels');
_this.liHeight = _this.mobileSelect.querySelector('li').offsetHeight;
_this.ensureBtn = _this.mobileSelect.querySelector('.ensure');
_this.cancelBtn = _this.mobileSelect.querySelector('.cancel');
_this.grayLayer = _this.mobileSelect.querySelector('.grayLayer');
_this.popUp = _this.mobileSelect.querySelector('.content');
_this.callback = config.callback ? config.callback : function(){};
_this.cancel = config.cancel ? config.cancel : function(){};
_this.transitionEnd = config.transitionEnd ? config.transitionEnd : function(){};
_this.initPosition = config.position ? config.position : [];
_this.titleText = config.title ? config.title : '';
_this.connector = config.connector ? config.connector : ' ';
_this.triggerDisplayData = !(typeof(config.triggerDisplayData)=='undefined') ? config.triggerDisplayData : true;
_this.trigger.style.cursor='pointer';
_this.setStyle(config);
_this.setTitle(_this.titleText);
_this.checkIsPC();
_this.checkCascade();
_this.wheel = getClass(_this.mobileSelect, 'wheel'); // 获取滚轮元素
_this.slider = getClass(_this.mobileSelect, 'selectContainer'); // 获取滑块容器
_this.wheels = _this.mobileSelect.querySelector('.wheels'); // 获取所有滚轮的容器
_this.liHeight = _this.mobileSelect.querySelector('li').offsetHeight; // 获取每个选项的高度
_this.ensureBtn = getClass(_this.mobileSelect, 'ensure'); // 确保按钮
_this.cancelBtn = getClass(_this.mobileSelect, 'cancel'); // 取消按钮
_this.grayLayer = getClass(_this.mobileSelect, 'grayLayer'); // 灰色遮罩层
_this.popUp = getClass(_this.mobileSelect, 'content'); // 弹出层
_this.callback = config.callback ? config.callback : function() {}; // 回调函数
_this.cancel = config.cancel ? config.cancel : function() {}; // 取消函数
_this.transitionEnd = config.transitionEnd ? config.transitionEnd : function() {}; // 过渡结束函数
_this.titleText = config.title ? config.title : ''; // 标题文本
_this.connector = config.connector ? config.connector : ' '; // 连接符
_this.triggerDisplayData = !(typeof(config.triggerDisplayData) == 'undefined') ? config.triggerDisplayData : true; // 是否显示在触发器上
_this.trigger.style.cursor = 'pointer'; // 设置触发器的鼠标样式为指针
_this.setStyle(config); // 设置样式
_this.setTitle(_this.titleText); // 设置标题
_this.checkIsPC(); // 检查是否是PC端
_this.checkCascade(); // 检查是否需要级联
if (_this.cascade) {
_this.initCascade();
_this.initCascade(); // 初始化级联
}
// 定位初始位置
if (_this.initPosition.length < _this.slider.length) {
@ -72,104 +75,75 @@
_this.initPosition.push(0);
}
}
_this.setCurDistance(_this.initPosition);
_this.addListenerAll();
//按钮监听
_this.cancelBtn.addEventListener('click',function(){
_this.mobileSelect.classList.remove('mobileSelect-show');
_this.cancel(_this.curIndexArr, _this.curValue);
});
_this.ensureBtn.addEventListener('click',function(){
_this.mobileSelect.classList.remove('mobileSelect-show');
var tempValue ='';
for(var i=0; i<_this.wheel.length; i++){
i==_this.wheel.length-1 ? tempValue += _this.getInnerHtml(i) : tempValue += _this.getInnerHtml(i) + _this.connector;
}
if(_this.triggerDisplayData){
_this.trigger.innerHTML = tempValue;
}
_this.curIndexArr = _this.getIndexArr();
_this.curValue = _this.getCurValue();
_this.callback(_this.curIndexArr, _this.curValue);
});
_this.trigger.addEventListener('click',function(){
_this.mobileSelect.classList.add('mobileSelect-show');
});
_this.grayLayer.addEventListener('click',function(){
_this.mobileSelect.classList.remove('mobileSelect-show');
_this.cancel(_this.curIndexArr, _this.curValue);
});
_this.popUp.addEventListener('click',function(event){
event.stopPropagation();
});
_this.setCurDistance(_this.initPosition); // 设置当前距离
_this.addListenerAll(); // 添加事件监听器
_this.fixRowStyle(); // 修正列数
},
// 设置标题
setTitle: function(string) {
var _this = this;
_this.titleText = string;
_this.mobileSelect.querySelector('.title').innerHTML = _this.titleText;
},
// 设置样式
setStyle: function(config) {
var _this = this;
if (config.ensureBtnColor) {
_this.ensureBtn.style.color = config.ensureBtnColor;
_this.ensureBtn.style.color = config.ensureBtnColor; // 确保按钮颜色
}
if (config.cancelBtnColor) {
_this.cancelBtn.style.color = config.cancelBtnColor;
_this.cancelBtn.style.color = config.cancelBtnColor; // 取消按钮颜色
}
if (config.titleColor) {
_this.title = _this.mobileSelect.querySelector('.title');
_this.title.style.color = config.titleColor;
_this.title = _this.mobileSelect.querySelector('.title'); // 标题元素
_this.title.style.color = config.titleColor; // 标题颜色
}
if (config.textColor) {
_this.panel = _this.mobileSelect.querySelector('.panel');
_this.panel.style.color = config.textColor;
_this.panel = _this.mobileSelect.querySelector('.panel'); // 面板元素
_this.panel.style.color = config.textColor; // 文本颜色
}
if (config.titleBgColor) {
_this.btnBar = _this.mobileSelect.querySelector('.btnBar');
_this.btnBar.style.backgroundColor = config.titleBgColor;
_this.btnBar = _this.mobileSelect.querySelector('.btnBar'); // 按钮栏元素
_this.btnBar.style.backgroundColor = config.titleBgColor; // 按钮栏背景颜色
}
if (config.bgColor) {
_this.panel = _this.mobileSelect.querySelector('.panel');
_this.shadowMask = _this.mobileSelect.querySelector('.shadowMask');
_this.panel.style.backgroundColor = config.bgColor;
_this.shadowMask.style.background = 'linear-gradient(to bottom, '+ config.bgColor + ', rgba(255, 255, 255, 0), '+ config.bgColor + ')';
_this.panel = _this.mobileSelect.querySelector('.panel'); // 面板元素
_this.shadowMask = _this.mobileSelect.querySelector('.shadowMask'); // 阴影遮罩层元素
_this.panel.style.backgroundColor = config.bgColor; // 面板背景颜色
_this.shadowMask.style.background = 'linear-gradient(to bottom, ' + config.bgColor + ', rgba(255, 255, 255, 0), ' + config.bgColor + ')'; // 阴影遮罩层渐变背景
}
},
// 检查是否是PC端
checkIsPC: function() {
var _this = this;
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; // 判断是否为iPad
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; // 判断是否为iPhone OS
var bIsMidp = sUserAgent.match(/midp/i) == "midp"; // 判断是否为MIDP设备
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; // 判断是否为UC7浏览器
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb"; // 判断是否为UC浏览器
var bIsAndroid = sUserAgent.match(/android/i) == "android"; // 判断是否为Android设备
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce"; // 判断是否为Windows CE设备
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"; // 判断是否为Windows Mobile设备
if ((bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
_this.isPC = false;
}
},
show: function(){
// 显示选择器,通过添加类名来控制显示
this.mobileSelect.classList.add('mobileSelect-show');
},
renderWheels: function(wheelsData, cancelBtnText, ensureBtnText){
var _this = this;
var cancelText = cancelBtnText ? cancelBtnText : '取消';
var ensureText = ensureBtnText ? ensureBtnText : '确认';
_this.mobileSelect = document.createElement("div");
_this.mobileSelect.className = "mobileSelect";
var cancelText = cancelBtnText ? cancelBtnText : '取消'; // 设置取消按钮文本
var ensureText = ensureBtnText ? ensureBtnText : '确认'; // 设置确认按钮文本
_this.mobileSelect = document.createElement("div"); // 创建选择器的容器元素
_this.mobileSelect.className = "mobileSelect"; // 设置容器的类名
_this.mobileSelect.innerHTML =
'<div class="grayLayer"></div>'+
'<div class="content">'+
@ -189,34 +163,30 @@
'</div>'+
'</div>'+
'</div>';
document.body.appendChild(_this.mobileSelect);
//根据数据长度来渲染
document.body.appendChild(_this.mobileSelect); // 将选择器添加到页面中
// 根据数据长度来渲染轮盘
var tempHTML='';
for(var i=0; i<wheelsData.length; i++){
//列
tempHTML += '<div class="wheel"><ul class="selectContainer">';
tempHTML += '<div class="wheel"><ul class="selectContainer">'; // 开始一个新的轮盘
if(_this.jsonType){
for(var j=0; j<wheelsData[i].data.length; j++){
//行
tempHTML += '<li data-id="'+wheelsData[i].data[j][_this.keyMap.id]+'">'+wheelsData[i].data[j][_this.keyMap.value]+'</li>';
tempHTML += '<li data-id="'+wheelsData[i].data[j][_this.keyMap.id]+'">'+wheelsData[i].data[j][_this.keyMap.value]+'</li>'; // 如果是JSON类型使用键值对填充列表项
}
}else{
for(var j=0; j<wheelsData[i].data.length; j++){
//行
tempHTML += '<li>'+wheelsData[i].data[j]+'</li>';
tempHTML += '<li>'+wheelsData[i].data[j]+'</li>'; // 如果不是JSON类型直接使用数据填充列表项
}
}
tempHTML += '</ul></div>';
tempHTML += '</ul></div>'; // 结束当前轮盘
}
_this.mobileSelect.querySelector('.wheels').innerHTML = tempHTML;
_this.mobileSelect.querySelector('.wheels').innerHTML = tempHTML; // 将生成的HTML添加到轮盘容器中
},
addListenerAll: function(){
var _this = this;
for(var i=0; i<_this.slider.length; i++){
//手势监听
// 为每个滑块添加手势监听和点击监听
(function (i) {
_this.addListenerWheel(_this.wheel[i], i);
_this.addListenerLi(i);
@ -227,35 +197,39 @@
addListenerWheel: function(theWheel, index){
var _this = this;
theWheel.addEventListener('touchstart', function () {
_this.touch(event, this.firstChild, index);
_this.touch(event, this.firstChild, index); // 触摸开始事件处理
},false);
theWheel.addEventListener('touchend', function () {
_this.touch(event, this.firstChild, index);
_this.touch(event, this.firstChild, index); // 触摸结束事件处理
},false);
theWheel.addEventListener('touchmove', function () {
_this.touch(event, this.firstChild, index);
_this.touch(event, this.firstChild, index); // 触摸移动事件处理
},false);
if(_this.isPC){
//如果是PC端则再增加拖拽监听 方便调试
// 如果是PC端则再增加拖拽监听方便调试
theWheel.addEventListener('mousedown', function () {
_this.dragClick(event, this.firstChild, index);
_this.dragClick(event, this.firstChild, index); // 鼠标按下事件处理
},false);
theWheel.addEventListener('mousemove', function () {
_this.dragClick(event, this.firstChild, index);
_this.dragClick(event, this.firstChild, index); // 鼠标移动事件处理
},false);
theWheel.addEventListener('mouseup', function () {
_this.dragClick(event, this.firstChild, index);
_this.dragClick(event, this.firstChild, index); // 鼠标抬起事件处理
},true);
}
},
addListenerLi: function(sliderIndex) {
// 获取当前对象引用
var _this = this;
// 获取指定滑块索引的所有列表项元素
var curWheelLi = _this.slider[sliderIndex].getElementsByTagName('li');
// 遍历所有列表项,为每个列表项添加点击事件监听器
for (var j = 0; j < curWheelLi.length; j++) {
(function(j) {
curWheelLi[j].addEventListener('click', function() {
// 当列表项被点击时调用singleClick方法处理点击事件
_this.singleClick(this, j, sliderIndex);
}, false);
})(j);
@ -263,71 +237,83 @@
},
checkDataType: function() {
// 获取当前对象引用
var _this = this;
// 检查wheelsData中第一个数据项是否为对象类型
if (typeof(_this.wheelsData[0].data[0]) == 'object') {
_this.jsonType = true;
_this.jsonType = true; // 如果是对象类型设置jsonType为true
}
},
checkCascade: function() {
// 获取当前对象引用
var _this = this;
// 如果数据类型为JSON
if (_this.jsonType) {
var node = _this.wheelsData[0].data;
// 遍历数据节点,检查是否存在子节点
for (var i = 0; i < node.length; i++) {
if (_this.keyMap.childs in node[i] && node[i][_this.keyMap.childs].length > 0) {
_this.cascade = true;
_this.cascadeJsonData = _this.wheelsData[0].data;
break;
_this.cascade = true; // 如果存在子节点设置级联标志为true
_this.cascadeJsonData = _this.wheelsData[0].data; // 保存级联数据
break; // 找到第一个有子节点的节点后退出循环
}
}
} else {
_this.cascade = false;
_this.cascade = false; // 如果数据类型不是JSON设置级联标志为false
}
},
generateArrData: function(targetArr) {
var tempArr = [];
var keyMap_id = this.keyMap.id;
var keyMap_value = this.keyMap.value;
var tempArr = []; // 初始化临时数组用于存储转换后的数据
var keyMap_id = this.keyMap.id; // 获取键映射中的ID键名
var keyMap_value = this.keyMap.value; // 获取键映射中的值键名
// 遍历目标数组将每个元素转换为包含ID和值的对象
for (var i = 0; i < targetArr.length; i++) {
var tempObj = {};
tempObj[keyMap_id] = targetArr[i][this.keyMap.id];
tempObj[keyMap_value] = targetArr[i][this.keyMap.value];
tempArr.push(tempObj);
}
return tempArr;
return tempArr; // 返回转换后的数组
},
initCascade: function() {
// 获取当前对象引用
var _this = this;
// 生成并添加级联数据的数组表示形式到displayJson中
_this.displayJson.push(_this.generateArrData(_this.cascadeJsonData));
// 如果初始化位置数组不为空,则进行深度初始化
if (_this.initPosition.length > 0) {
_this.initDeepCount = 0;
_this.initCheckArrDeep(_this.cascadeJsonData[_this.initPosition[0]]);
_this.initDeepCount = 0; // 初始化深度计数器
_this.initCheckArrDeep(_this.cascadeJsonData[_this.initPosition[0]]); // 递归初始化子节点
} else {
_this.checkArrDeep(_this.cascadeJsonData[0]);
_this.checkArrDeep(_this.cascadeJsonData[0]); // 如果初始化位置为空,直接检查第一层数据
}
_this.reRenderWheels();
_this.reRenderWheels(); // 重新渲染轮盘组件
},
initCheckArrDeep: function(parent) {
// 获取当前对象引用
var _this = this;
// 如果父节点存在且具有子节点
if (parent) {
if (_this.keyMap.childs in parent && parent[_this.keyMap.childs].length > 0) {
// 生成并添加子节点数据的数组表示形式到displayJson中
_this.displayJson.push(_this.generateArrData(parent[_this.keyMap.childs]));
_this.initDeepCount++;
var nextNode = parent[_this.keyMap.childs][_this.initPosition[_this.initDeepCount]];
_this.initDeepCount++; // 增加深度计数器
var nextNode = parent[_this.keyMap.childs][_this.initPosition[_this.initDeepCount]]; // 获取下一个节点
if (nextNode) {
_this.initCheckArrDeep(nextNode);
_this.initCheckArrDeep(nextNode); // 递归初始化下一个节点
} else {
_this.checkArrDeep(parent[_this.keyMap.childs][0]);
_this.checkArrDeep(parent[_this.keyMap.childs][0]); // 如果下一个节点不存在,检查第一个子节点
}
}
}
},
checkArrDeep: function (parent) {
//检测子节点深度 修改 displayJson
// 检测子节点深度并修改 displayJson
var _this = this;
if(parent){
if (_this.keyMap.childs in parent && parent[_this.keyMap.childs].length > 0) {
@ -341,7 +327,7 @@
var _this = this;
var deleteNum = _this.displayJson.length - 1 - index;
for(var i=0; i<deleteNum; i++){
_this.displayJson.pop(); //修改 displayJson
_this.displayJson.pop(); // 修改 displayJson,删除多余的层级
}
var resultNode;
for (var i = 0; i <= index; i++){
@ -351,11 +337,10 @@
resultNode = resultNode[_this.keyMap.childs][posIndexArr[i]];
}
}
_this.checkArrDeep(resultNode);
//console.log(_this.displayJson);
_this.reRenderWheels();
_this.fixRowStyle();
_this.setCurDistance(_this.resetPosition(index, posIndexArr));
_this.checkArrDeep(resultNode); // 检查并更新子节点深度
_this.reRenderWheels(); // 重新渲染轮盘
_this.fixRowStyle(); // 修正行样式
_this.setCurDistance(_this.resetPosition(index, posIndexArr)); // 设置当前距离和重置位置
},
resetPosition: function(index, posIndexArr){
@ -365,16 +350,16 @@
if(_this.slider.length > posIndexArr.length){
tempCount = _this.slider.length - posIndexArr.length;
for(var i=0; i<tempCount; i++){
tempPosArr.push(0);
tempPosArr.push(0); // 如果滑块数量多于位置数组长度填充0
}
}else if(_this.slider.length < posIndexArr.length){
tempCount = posIndexArr.length - _this.slider.length;
for(var i=0; i<tempCount; i++){
tempPosArr.pop();
tempPosArr.pop(); // 如果滑块数量少于位置数组长度,移除多余的位置
}
}
for(var i=index+1; i< tempPosArr.length; i++){
tempPosArr[i] = 0;
tempPosArr[i] = 0; // 将当前索引之后的位置设置为0
}
return tempPosArr;
},
@ -385,7 +370,7 @@
if(_this.wheel.length > _this.displayJson.length){
var count = _this.wheel.length - _this.displayJson.length;
for(var i=0; i<count; i++){
_this.wheels.removeChild(_this.wheel[_this.wheel.length-1]);
_this.wheels.removeChild(_this.wheel[_this.wheel.length-1]); // 移除多余的wheel元素
}
}
for(var i=0; i<_this.displayJson.length; i++){
@ -398,8 +383,7 @@
// 行
tempHTML += '<li data-id="'+_this.displayJson[i][j][_this.keyMap.id]+'">'+_this.displayJson[i][j][_this.keyMap.value]+'</li>';
}
_this.slider[i].innerHTML = tempHTML;
_this.slider[i].innerHTML = tempHTML; // 更新现有wheel的HTML内容
}else{
var tempWheel = document.createElement("div");
tempWheel.className = "wheel";
@ -409,12 +393,11 @@
tempHTML += '<li data-id="'+_this.displayJson[i][j][_this.keyMap.id]+'">'+_this.displayJson[i][j][_this.keyMap.value]+'</li>';
}
tempHTML += '</ul>';
tempWheel.innerHTML = tempHTML;
_this.addListenerWheel(tempWheel, i);
_this.wheels.appendChild(tempWheel);
tempWheel.innerHTML = tempHTML; // 创建新的wheel并设置HTML内容
_this.addListenerWheel(tempWheel, i); // 为新wheel添加事件监听器
_this.wheels.appendChild(tempWheel); // 将新wheel添加到DOM中
}
_this.addListenerLi(i);
_this.addListenerLi(i); // 为每个li添加事件监听器
})(i);
}
},
@ -422,9 +405,11 @@
updateWheels: function(data) {
var _this = this;
if (_this.cascade) {
// 更新级联数据源
_this.cascadeJsonData = data;
_this.displayJson = [];
_this.initCascade();
// 确保初始化位置数组长度与滑块数量一致
if (_this.initPosition.length < _this.slider.length) {
var diff = _this.slider.length - _this.initPosition.length;
for (var i = 0; i < diff; i++) {
@ -442,13 +427,14 @@
if (_this.cascade) {
console.error('级联格式不支持updateWheel(),请使用updateWheels()更新整个数据源');
return false;
}
else if(_this.jsonType){
} else if (_this.jsonType) {
// 处理JSON类型的数据
for (var j = 0; j < data.length; j++) {
tempHTML += '<li data-id="' + data[j][_this.keyMap.id] + '">' + data[j][_this.keyMap.value] + '</li>';
}
_this.wheelsData[sliderIndex] = { data: data };
} else {
// 处理普通数组类型的数据
for (var j = 0; j < data.length; j++) {
tempHTML += '<li>' + data[j] + '</li>';
}
@ -487,8 +473,7 @@
for (var i = 0; i < _this.wheel.length; i++) {
temp.push(_this.displayJson[i][positionArr[i]]);
}
}
else if(_this.jsonType){
} else if (_this.jsonType) {
for (var i = 0; i < _this.curDistance.length; i++) {
temp.push(_this.wheelsData[i].data[_this.getIndex(_this.curDistance[i])]);
}
@ -505,6 +490,7 @@
},
calcDistance: function(index){
// 计算给定索引对应的距离基于liHeight的倍数
return 2*this.liHeight-index*this.liHeight;
},
@ -512,38 +498,44 @@
var _this = this;
var temp = [];
for(var i=0; i<_this.slider.length; i++){
temp.push(_this.calcDistance(indexArr[i]));
_this.movePosition(_this.slider[i],temp[i]);
temp.push(_this.calcDistance(indexArr[i])); // 计算每个滑块的距离并存储在临时数组中
_this.movePosition(_this.slider[i],temp[i]); // 移动滑块到计算出的位置
}
_this.curDistance = temp;
_this.curDistance = temp; // 更新当前距离数组
},
fixPosition: function(distance){
// 根据距离修正位置,确保滑块不会超出边界
return -(this.getIndex(distance)-2)*this.liHeight;
},
movePosition: function(theSlider, distance){
// 使用CSS transform属性移动滑块到指定位置
theSlider.style.webkitTransform = 'translate3d(0,' + distance + 'px, 0)';
theSlider.style.transform = 'translate3d(0,' + distance + 'px, 0)';
},
locatePosition: function(index, posIndex){
// 定位滑块到特定位置
this.curDistance[index] = this.calcDistance(posIndex);
this.movePosition(this.slider[index],this.curDistance[index]);
if(_this.cascade){
_this.checkRange(index, _this.getIndexArr());
_this.checkRange(index, _this.getIndexArr()); // 如果启用级联,检查范围
}
},
updateCurDistance: function(theSlider, index){
// 更新当前滑块的距离
this.curDistance[index] = parseInt(theSlider.style.transform.split(',')[1]);
},
getDistance:function(theSlider){
// 获取滑块当前的垂直距离
return parseInt(theSlider.style.transform.split(',')[1]);
},
getInnerHtml: function(sliderIndex){
// 获取滑块当前选中项的内部HTML内容
var _this = this;
var index = _this.getIndex(_this.curDistance[sliderIndex]);
return _this.slider[sliderIndex].getElementsByTagName('li')[index].innerHTML;
@ -554,14 +546,13 @@
event = event || window.event;
switch (event.type) {
case "touchstart":
_this.startY = event.touches[0].clientY;
_this.oldMoveY = _this.startY;
_this.startY = event.touches[0].clientY; // 记录触摸开始时的Y坐标
_this.oldMoveY = _this.startY; // 初始化旧的移动Y坐标
break;
case "touchend":
_this.moveEndY = event.changedTouches[0].clientY;
_this.offsetSum = _this.moveEndY - _this.startY;
_this.moveEndY = event.changedTouches[0].clientY; // 记录触摸结束时的Y坐标
_this.offsetSum = _this.moveEndY - _this.startY; // 计算总偏移量
// 修正位置
_this.updateCurDistance(theSlider, index);
@ -569,14 +560,12 @@
_this.movePosition(theSlider, _this.curDistance[index]);
_this.oversizeBorder = -(theSlider.getElementsByTagName('li').length - 3) * _this.liHeight;
//反弹
// 反弹效果处理
if (_this.curDistance[index] + _this.offsetSum > 2 * _this.liHeight) {
_this.curDistance[index] = 2 * _this.liHeight;
setTimeout(function () {
_this.movePosition(theSlider, _this.curDistance[index]);
}, 100);
} else if (_this.curDistance[index] + _this.offsetSum < _this.oversizeBorder) {
_this.curDistance[index] = _this.oversizeBorder;
setTimeout(function () {
@ -584,107 +573,80 @@
}, 100);
}
_this.transitionEnd(_this.getIndexArr(),_this.getCurValue());
_this.transitionEnd(_this.getIndexArr(), _this.getCurValue()); // 触发过渡结束事件
if (_this.cascade) {
_this.checkRange(index, _this.getIndexArr());
}
break;
case "touchmove":
event.preventDefault();
_this.moveY = event.touches[0].clientY;
_this.offset = _this.moveY - _this.oldMoveY;
_this.updateCurDistance(theSlider, index);
_this.curDistance[index] = _this.curDistance[index] + _this.offset;
_this.movePosition(theSlider, _this.curDistance[index]);
_this.oldMoveY = _this.moveY;
break;
_this.checkRange(index, _this.getIndexArr()); // 如果启用级联,检查范围
}
},
dragClick: function(event, theSlider, index){
var _this = this;
event = event || window.event;
switch(event.type){
case "mousedown":
_this.startY = event.clientY;
_this.oldMoveY = _this.startY;
_this.clickStatus = true;
break;
// 处理鼠标抬起事件
case "mouseup":
_this.moveEndY = event.clientY;
_this.offsetSum = _this.moveEndY - _this.startY;
_this.moveEndY = event.clientY; // 获取鼠标抬起时的Y坐标
_this.offsetSum = _this.moveEndY - _this.startY; // 计算鼠标移动的距离
// 修正位置
_this.updateCurDistance(theSlider, index);
_this.curDistance[index] = _this.fixPosition(_this.curDistance[index]);
_this.movePosition(theSlider, _this.curDistance[index]);
_this.oversizeBorder = -(theSlider.getElementsByTagName('li').length-3)*_this.liHeight;
_this.updateCurDistance(theSlider, index); // 更新当前距离
_this.curDistance[index] = _this.fixPosition(_this.curDistance[index]); // 修正位置,防止超出边界
_this.movePosition(theSlider, _this.curDistance[index]); // 移动到新的位置
_this.oversizeBorder = -(theSlider.getElementsByTagName('li').length - 3) * _this.liHeight; // 设置超出边界的最小值
//反弹
// 反弹效果
if (_this.curDistance[index] + _this.offsetSum > 2 * _this.liHeight) {
_this.curDistance[index] = 2*_this.liHeight;
_this.curDistance[index] = 2 * _this.liHeight; // 如果超过上界,设置为上界
setTimeout(function () {
_this.movePosition(theSlider, _this.curDistance[index]);
_this.movePosition(theSlider, _this.curDistance[index]); // 延迟后移动到上界位置
}, 100);
} else if (_this.curDistance[index] + _this.offsetSum < _this.oversizeBorder) {
_this.curDistance[index] = _this.oversizeBorder;
_this.curDistance[index] = _this.oversizeBorder; // 如果超过下界,设置为下界
setTimeout(function () {
_this.movePosition(theSlider, _this.curDistance[index]);
_this.movePosition(theSlider, _this.curDistance[index]); // 延迟后移动到下界位置
}, 100);
}
_this.clickStatus = false;
_this.transitionEnd(_this.getIndexArr(),_this.getCurValue());
_this.clickStatus = false; // 重置点击状态
_this.transitionEnd(_this.getIndexArr(), _this.getCurValue()); // 触发过渡结束事件
if (_this.cascade) {
_this.checkRange(index, _this.getIndexArr());
_this.checkRange(index, _this.getIndexArr()); // 如果是级联选择器,检查范围
}
break;
// 处理鼠标移动事件
case "mousemove":
event.preventDefault();
event.preventDefault(); // 阻止默认行为
if (_this.clickStatus) {
_this.moveY = event.clientY;
_this.offset = _this.moveY - _this.oldMoveY;
_this.updateCurDistance(theSlider, index);
_this.curDistance[index] = _this.curDistance[index] + _this.offset;
_this.movePosition(theSlider, _this.curDistance[index]);
_this.oldMoveY = _this.moveY;
_this.moveY = event.clientY; // 获取当前鼠标Y坐标
_this.offset = _this.moveY - _this.oldMoveY; // 计算偏移量
_this.updateCurDistance(theSlider, index); // 更新当前距离
_this.curDistance[index] = _this.curDistance[index] + _this.offset; // 更新当前距离
_this.movePosition(theSlider, _this.curDistance[index]); // 移动到新的位置
_this.oldMoveY = _this.moveY; // 更新旧的Y坐标
}
break;
}
},
// 处理单击事件
singleClick: function (theLi, index, sliderIndex) {
var _this = this;
if (_this.cascade) {
var tempPosArr = _this.getIndexArr();
tempPosArr[sliderIndex] = index;
_this.checkRange(sliderIndex, tempPosArr);
var tempPosArr = _this.getIndexArr(); // 获取当前索引数组
tempPosArr[sliderIndex] = index; // 更新指定滑块的索引
_this.checkRange(sliderIndex, tempPosArr); // 检查范围
} else {
_this.curDistance[sliderIndex] = (2-index)*_this.liHeight;
_this.movePosition(theLi.parentNode, _this.curDistance[sliderIndex]);
_this.curDistance[sliderIndex] = (2 - index) * _this.liHeight; // 计算新的距离
_this.movePosition(theLi.parentNode, _this.curDistance[sliderIndex]); // 移动到新的位置
}
}
};
if (typeof exports == "object") {
module.exports = MobileSelect;
module.exports = MobileSelect; // CommonJS模块导出
} else if (typeof define == "function" && define.amd) {
define([], function () {
return MobileSelect;
return MobileSelect; // AMD模块定义
})
} else {
window.MobileSelect = MobileSelect;
window.MobileSelect = MobileSelect; // 全局变量导出
}
})();

@ -1,195 +1,181 @@
;!function (win) {
"use strict";
var doc = document
// 定义一个立即执行的函数表达式 (IIFE),传入全局对象 window
!function(win) {
"use strict"; // 使用严格模式
var doc = document; // 获取文档对象
,Xadmin = function(){
// 定义 Xadmin 构造函数
var Xadmin = function() {
this.v = '2.2'; // 版本号
}
// 初始化方法
Xadmin.prototype.init = function() {
var tab_list = this.get_data();
var tab_list = this.get_data(); // 获取所有标签页数据
for (var i in tab_list) {
this.add_lay_tab(tab_list[i].title,tab_list[i].url,i);
this.add_lay_tab(tab_list[i].title, tab_list[i].url, i); // 添加标签页
}
element.tabChange('xbs_tab', i);
element.tabChange('xbs_tab', i); // 切换到最后一个标签页
};
/**
* [end 执行结束要做的]
* @return {[type]} [description]
*/
Xadmin.prototype.end = function() {
var cate_list = this.get_cate_data();
// 结束方法,用于执行一些收尾工作
Xadmin.prototype.end = function() {
var cate_list = this.get_cate_data(); // 获取分类数据
for (var i in cate_list) {
if (cate_list[i] != null) {
$('.left-nav #nav li').eq(cate_list[i]).click();
$('.left-nav #nav li').eq(cate_list[i]).click(); // 点击左侧导航栏的对应项
}
}
};
// 添加标签页方法
Xadmin.prototype.add_tab = function(title, url, is_refresh) {
var id = md5(url);//md5每个url
var id = md5(url); // 对 URL 进行 MD5 加密生成唯一 ID
//重复点击
// 检查是否已经存在相同的标签页
for (var i = 0; i < $('.x-iframe').length; i++) {
if ($('.x-iframe').eq(i).attr('tab-id') == id) {
element.tabChange('xbs_tab', id);
element.tabChange('xbs_tab', id); // 切换到已存在的标签页
if (is_refresh)
$('.x-iframe').eq(i).attr("src",$('.x-iframe').eq(i).attr('src'));
$('.x-iframe').eq(i).attr("src", $('.x-iframe').eq(i).attr('src')); // 刷新页面
return;
}
};
this.add_lay_tab(title,url,id);
this.set_data(title,url,id);
element.tabChange('xbs_tab', id);
}
this.add_lay_tab(title, url, id); // 添加新的标签页
this.set_data(title, url, id); // 保存标签页数据
element.tabChange('xbs_tab', id); // 切换到新添加的标签页
}
// 删除标签页方法
Xadmin.prototype.del_tab = function(id) {
if (id) {
console.log(88);
console.log(88); // 打印日志(调试用)
} else {
var id = $(window.frameElement).attr('tab-id');
parent.element.tabDelete('xbs_tab', id);
var id = $(window.frameElement).attr('tab-id'); // 获取当前窗口的 tab-id
parent.element.tabDelete('xbs_tab', id); // 删除父窗口中的标签页
}
}
// 添加 Layui 标签页方法
Xadmin.prototype.add_lay_tab = function(title, url, id) {
element.tabAdd('xbs_tab', {
title: title
,content: '<iframe tab-id="'+id+'" frameborder="0" src="'+url+'" scrolling="yes" class="x-iframe"></iframe>'
,id: id
title: title, // 标签标题
content: '<iframe tab-id="' + id + '" frameborder="0" scrolling="yes" class="x-iframe"></iframe>', // 标签内容为 iframe
id: id // 标签 ID
})
}
/**
* [open 打开弹出层]
* @param {[type]} title [弹出层标题]
* @param {[type]} url [弹出层地址]
* @return {[type]} [description]
*/
// 打开弹出层方法
Xadmin.prototype.open = function(title, url) {
if (title == null || title == '') {
var title=false;
var title = false; // 如果标题为空,则不显示标题
};
if (url == null || url == '') {
var url="404.html";
var url = "404.html"; // 如果 URL 为空,则默认指向 404 页面
};
if (w == null || w == '') {
var w=($(window).width()*0.9);
var w = ($(window).width() * 0.9); // 设置宽度为窗口宽度的 90%
};
if (h == null || h == '') {
var h=($(window).height() - 50);
var h = ($(window).height() - 50); // 设置高度为窗口高度减去 50px
};
var index = layer.open({
type: 2,
area: [w+'px', h +'px'],
fix: false, //不固定
maxmin: true,
shadeClose: true,
shade:0.4,
title: title,
content: url
type: 2, // 类型为 iframe
area: [w + 'px', h + 'px'], // 设置弹出层大小
fix: false, // 不固定位置
maxmin: true, // 允许最大化和最小化
shadeClose: true, // 点击遮罩关闭弹出层
shade: 0.4, // 设置遮罩透明度
title: title, // 弹出层标题
content: url // 弹出层内容 URL
});
if (full) {
layer.full(index);
layer.full(index); // 如果 full 为真,则全屏显示弹出层
}
}
/**
* [close 关闭弹出层]
* @return {[type]} [description]
*/
// 关闭弹出层方法
Xadmin.prototype.close = function() {
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
var index = parent.layer.getFrameIndex(window.name); // 获取当前窗口索引
parent.layer.close(index); // 关闭弹出层
};
/**
* [close 关闭弹出层父窗口关闭]
* @return {[type]} [description]
*/
// 关闭弹出层并刷新父窗口方法
Xadmin.prototype.father_reload = function() {
parent.location.reload();
parent.location.reload(); // 刷新父窗口
};
/**
* [get_data 获取所有项]
* @return {[type]} [description]
*/
// 获取所有标签页数据方法
Xadmin.prototype.get_data = function() {
if (typeof is_remember != "undefined")
return false;
return layui.data('tab_list')
return false; // 如果 is_remember 被定义,则返回 false
return layui.data('tab_list') // 从本地存储中获取标签页数据
}
/**
* [set_data 增加某一项]
* @param {[type]} id [description]
*/
Xadmin.prototype.set_data = function(title,url,id) {
// 增加标签页数据方法
Xadmin.prototype.set_data = function(title, url, id) {
if (typeof is_remember != "undefined")
return false;
return false; // 如果 is_remember 被定义,则不执行任何操作
layui.data('tab_list', {
key: id
,value: {title:title,url:url}
key: id, // 数据的键为标签页 ID
value: { title: title, url: url } // 数据的值为包含标题和 URL 的对象
});
};
/**
* [get_data 获取所有项]
* @return {[type]} [description]
*/
// 获取分类数据方法
Xadmin.prototype.get_cate_data = function() {
if (typeof is_remember != "undefined")
return false;
return layui.data('cate')
return false; // 如果 is_remember 被定义,则返回 false
return layui.data('cate') // 从本地存储中获取分类数据
}
/**
* [set_data 增加某一项]
* @param {[type]} id [description]
* 设置分类数据
* @param {Object} data - 要存储的数据对象
*/
Xadmin.prototype.set_cate_data = function(data) {
if(typeof is_remember!="undefined")
if (typeof is_remember !== "undefined")
return false;
layui.data('cate', data);
};
/**
* [del_data 删除某一项]
* @param {[type]} id [description]
* @return {[type]} [description]
* 删除指定ID的数据
* @param {String} id - 要删除的数据的键值
*/
Xadmin.prototype.del_data = function(id) {
if(typeof is_remember!="undefined")
if (typeof is_remember !== "undefined")
return false;
if(typeof id!="undefined"){
if (typeof id !== "undefined") {
layui.data('tab_list', {
key: id
,remove: true
key: id,
remove: true
});
} else {
layui.data('tab_list', null);
}
};
/**
* [del_other_data 删除其它]
* @param {[type]} id [description]
* @return {[type]} [description]
* 删除其他数据只保留指定ID的数据
* @param {String} id - 要保留的数据的键值
*/
Xadmin.prototype.del_other_data = function(id) {
if(typeof is_remember!="undefined")
if (typeof is_remember !== "undefined")
return false;
var tab_list = this.get_data();
layui.data('tab_list', null);
layui.data('tab_list', {
key: id
,value: tab_list[id]
key: id,
value: tab_list[id]
});
};
// 初始化xadmin实例
win.xadmin = new Xadmin();
}(window);
@ -199,7 +185,6 @@ layui.use(['layer','element','jquery'],function() {
element = layui.element;
$ = layui.jquery;
// 打开页面初始
xadmin.init();
@ -208,26 +193,24 @@ layui.use(['layer','element','jquery'],function() {
var id = $(this).parent().attr('lay-id');
xadmin.del_data(id);
});
//左侧菜单
$('.left-nav #nav').on('click', 'li', function(event) {
// 左侧菜单点击事件处理
$('.left-nav #nav').on('click', 'li', function(event) {
if ($(this).parent().attr('id') == 'nav') {
xadmin.set_cate_data({key:'f1',value:$('.left-nav #nav li').index($(this))})
xadmin.set_cate_data({key:'f2',value:null})
xadmin.set_cate_data({key:'f3',value:null})
xadmin.set_cate_data({ key: 'f1', value: $('.left-nav #nav li').index($(this)) });
xadmin.set_cate_data({ key: 'f2', value: null });
xadmin.set_cate_data({ key: 'f3', value: null });
}
if ($(this).parent().parent().parent().attr('id') == 'nav') {
xadmin.set_cate_data({key:'f2',value:$('.left-nav #nav li').index($(this))})
xadmin.set_cate_data({key:'f3',value:null})
xadmin.set_cate_data({ key: 'f2', value: $('.left-nav #nav li').index($(this)) });
xadmin.set_cate_data({ key: 'f3', value: null });
}
if ($(this).parent().parent().parent().parent().parent().attr('id') == 'nav') {
xadmin.set_cate_data({key:'f3',value:$('.left-nav #nav li').index($(this))})
xadmin.set_cate_data({ key: 'f3', value: $('.left-nav #nav li').index($(this)) });
}
if ($('.left-nav').css('width') == '60px') {
$('.left-nav').animate({ width: '220px' }, 100);
$('.page-content').animate({ left: '220px' }, 100);
@ -257,19 +240,21 @@ layui.use(['layer','element','jquery'],function() {
}
}
event.stopPropagation();
})
});
var left_tips_index = null;
$('.left-nav #nav').on('mouseenter', '.left-nav-li', function(event) {
if ($('.left-nav').css('width') != '220px') {
var tips = $(this).attr('lay-tips');
left_tips_index = layer.tips(tips, $(this));
}
})
});
$('.left-nav #nav').on('mouseout', '.left-nav-li', function(event) {
layer.close(left_tips_index);
})
// 隐藏左侧
});
// 隐藏左侧导航栏
$('.container .left_open i').click(function(event) {
if ($('.left-nav').css('width') == '220px') {
$('.left-nav .open').click();
@ -339,8 +324,11 @@ layui.use(['layer','element','jquery'],function() {
* to work around bugs in some JS interpreters.
*/
function safeAdd (x, y) {
// 将 x 和 y 分别限制在 16 位,然后相加
var lsw = (x & 0xffff) + (y & 0xffff)
// 计算高位部分的和,并考虑低位部分可能产生的进位
var msw = (x >> 16) + (y >> 16) + (lsw >> 16)
// 返回合并后的 32 位结果
return (msw << 16) | (lsw & 0xffff)
}
@ -348,6 +336,7 @@ return (msw << 16) | (lsw & 0xffff)
* Bitwise rotate a 32-bit number to the left.
*/
function bitRotateLeft (num, cnt) {
// 使用位移操作实现循环左移
return (num << cnt) | (num >>> (32 - cnt))
}
@ -355,18 +344,23 @@ return (num << cnt) | (num >>> (32 - cnt))
* These functions implement the four basic operations the algorithm uses.
*/
function md5cmn (q, a, b, x, s, t) {
// 执行 MD5 算法中的一个基本操作
return safeAdd(bitRotateLeft(safeAdd(safeAdd(a, q), safeAdd(x, t)), s), b)
}
function md5ff (a, b, c, d, x, s, t) {
// 执行 MD5 算法中的 F 函数操作
return md5cmn((b & c) | (~b & d), a, b, x, s, t)
}
function md5gg (a, b, c, d, x, s, t) {
// 执行 MD5 算法中的 G 函数操作
return md5cmn((b & d) | (c & ~d), a, b, x, s, t)
}
function md5hh (a, b, c, d, x, s, t) {
// 执行 MD5 算法中的 H 函数操作
return md5cmn(b ^ c ^ d, a, b, x, s, t)
}
function md5ii (a, b, c, d, x, s, t) {
// 执行 MD5 算法中的 I 函数操作
return md5cmn(c ^ (b | ~d), a, b, x, s, t)
}
@ -375,8 +369,10 @@ return md5cmn(c ^ (b | ~d), a, b, x, s, t)
*/
function binlMD5 (x, len) {
/* append padding */
// 添加填充数据,使数据长度满足要求
x[len >> 5] |= 0x80 << (len % 32)
x[((len + 64) >>> 9 << 4) + 14] = len
// 添加原始数据长度信息(以位为单位)
x[(((len + 64) >>> 9) << 4) + 14] = len
var i
var olda
@ -389,11 +385,13 @@ var c = -1732584194
var d = 271733878
for (i = 0; i < x.length; i += 16) {
// 保存当前状态
olda = a
oldb = b
oldc = c
oldd = d
// 执行 MD5 算法的主循环,处理每个块的数据
a = md5ff(a, b, c, d, x[i], 7, -680876936)
d = md5ff(d, a, b, c, x[i + 1], 12, -389564586)
c = md5ff(c, d, a, b, x[i + 2], 17, 606105819)
@ -425,7 +423,7 @@ for (i = 0; i < x.length; i += 16) {
b = md5gg(b, c, d, a, x[i + 8], 20, 1163531501)
a = md5gg(a, b, c, d, x[i + 13], 5, -1444681467)
d = md5gg(d, a, b, c, x[i + 2], 9, -51403784)
c = md5gg(c, d, a, b, x[i + 7], 14, 1735328473)
c = md5gg(c, d, a, b, x[i + 7], 14, 173537119)
b = md5gg(b, c, d, a, x[i + 12], 20, -1926607734)
a = md5hh(a, b, c, d, x[i + 5], 4, -378558)
@ -437,7 +435,7 @@ for (i = 0; i < x.length; i += 16) {
c = md5hh(c, d, a, b, x[i + 7], 16, -155497632)
b = md5hh(b, c, d, a, x[i + 10], 23, -1094730640)
a = md5hh(a, b, c, d, x[i + 13], 4, 681279174)
d = md5hh(d, a, b, c, x[i], 11, -358537222)
d = md5hh(d, a, b, c, x[i + 0], 11, -358537222)
c = md5hh(c, d, a, b, x[i + 3], 16, -722521979)
b = md5hh(b, c, d, a, x[i + 6], 23, 76029189)
a = md5hh(a, b, c, d, x[i + 9], 4, -640364487)
@ -467,115 +465,124 @@ for (i = 0; i < x.length; i += 16) {
c = safeAdd(c, oldc)
d = safeAdd(d, oldd)
}
return [a, b, c, d]
}
/*
* Convert an array of little-endian words to a string
*/
/*
* 将小端序的字数组转换为字符串
*/
function binl2rstr (input) {
var i
var output = ''
var length32 = input.length * 32
var i;
var output = '';
var length32 = input.length * 32; // 计算输入数组的总位数
for (i = 0; i < length32; i += 8) {
output += String.fromCharCode((input[i >> 5] >>> (i % 32)) & 0xff)
// 从输入数组中提取每个字节并转换为字符
output += String.fromCharCode((input[i >> 5] >>> (i % 32)) & 0xff);
}
return output
return output;
}
/*
* Convert a raw string to an array of little-endian words
* Characters >255 have their high-byte silently ignored.
* 将原始字符串转换为小端序的字数组
* 字符值大于255的高字节将被忽略
*/
function rstr2binl (input) {
var i
var output = []
output[(input.length >> 2) - 1] = undefined
var i;
var output = [];
output[(input.length >> 2) - 1] = undefined; // 确保输出数组有足够的空间
for (i = 0; i < output.length; i += 1) {
output[i] = 0
output[i] = 0; // 用零初始化输出数组
}
var length8 = input.length * 8
var length8 = input.length * 8; // 计算输入字符串的总位数
for (i = 0; i < length8; i += 8) {
output[i >> 5] |= (input.charCodeAt(i / 8) & 0xff) << (i % 32)
// 将每个字符打包到输出数组中作为小端序字
output[i >> 5] |= (input.charCodeAt(i / 8) & 0xff) << (i % 32);
}
return output
return output;
}
/*
* Calculate the MD5 of a raw string
* 计算原始字符串的MD5哈希值
*/
function rstrMD5 (s) {
return binl2rstr(binlMD5(rstr2binl(s), s.length * 8))
return binl2rstr(binlMD5(rstr2binl(s), s.length * 8)); // 将原始字符串转换为二进制,进行哈希运算,然后转换回原始字符串
}
/*
* Calculate the HMAC-MD5, of a key and some data (raw strings)
* 计算HMAC-MD5密钥和数据
*/
function rstrHMACMD5 (key, data) {
var i
var bkey = rstr2binl(key)
var ipad = []
var opad = []
var hash
ipad[15] = opad[15] = undefined
var i;
var bkey = rstr2binl(key); // 将密钥转换为二进制数组
var ipad = [];
var opad = [];
var hash;
ipad[15] = opad[15] = undefined; // 确保ipad和opad数组有足够的空间
if (bkey.length > 16) {
bkey = binlMD5(bkey, key.length * 8)
bkey = binlMD5(bkey, key.length * 8); // 如果密钥长度超过16个字先对其进行哈希运算
}
for (i = 0; i < 16; i += 1) {
ipad[i] = bkey[i] ^ 0x36363636
opad[i] = bkey[i] ^ 0x5c5c5c5c
ipad[i] = bkey[i] ^ 0x36363636; // 使用ipad常量对密钥进行异或操作
opad[i] = bkey[i] ^ 0x5c5c5c5c; // 使用opad常量对密钥进行异或操作
}
hash = binlMD5(ipad.concat(rstr2binl(data)), 512 + data.length * 8)
return binl2rstr(binlMD5(opad.concat(hash), 512 + 128))
hash = binlMD5(ipad.concat(rstr2binl(data)), 512 + data.length * 8); // 对内填充的密钥和数据进行哈希运算
return binl2rstr(binlMD5(opad.concat(hash), 512 + 128)); // 对外填充的密钥和之前的哈希结果进行哈希运算,然后转换为原始字符串
}
/*
* Convert a raw string to a hex string
* 将原始字符串转换为十六进制字符串
*/
function rstr2hex (input) {
var hexTab = '0123456789abcdef'
var output = ''
var x
var i
var hexTab = '0123456789abcdef'; // 十六进制字符表
var output = '';
var x;
var i;
for (i = 0; i < input.length; i += 1) {
x = input.charCodeAt(i)
output += hexTab.charAt((x >>> 4) & 0x0f) + hexTab.charAt(x & 0x0f)
x = input.charCodeAt(i); // 获取每个字符的ASCII码
output += hexTab.charAt((x >>> 4) & 0x0f) + hexTab.charAt(x & 0x0f); // 将每个字符转换为其十六进制表示
}
return output
return output;
}
/*
* Encode a string as utf-8
* 将字符串编码为UTF-8格式
*/
function str2rstrUTF8 (input) {
return unescape(encodeURIComponent(input))
return unescape(encodeURIComponent(input)); // 将输入字符串编码为UTF-8格式
}
/*
* Take string arguments and return either raw or hex encoded strings
* 接受字符串参数并返回原始或十六进制编码的字符串
*/
function rawMD5 (s) {
return rstrMD5(str2rstrUTF8(s))
return rstrMD5(str2rstrUTF8(s)); // 将输入字符串转换为原始格式并计算其MD5哈希值
}
function hexMD5 (s) {
return rstr2hex(rawMD5(s))
return rstr2hex(rawMD5(s)); // 将输入字符串转换为原始格式计算其MD5哈希值然后转换为十六进制格式
}
function rawHMACMD5 (k, d) {
return rstrHMACMD5(str2rstrUTF8(k), str2rstrUTF8(d))
return rstrHMACMD5(str2rstrUTF8(k), str2rstrUTF8(d)); // 将密钥和数据转换为原始格式计算它们的HMAC-MD5哈希值并返回原始结果
}
function hexHMACMD5 (k, d) {
return rstr2hex(rawHMACMD5(k, d))
return rstr2hex(rawHMACMD5(k, d)); // 将密钥和数据转换为原始格式计算它们的HMAC-MD5哈希值转换为十六进制格式并返回十六进制结果
}
/*
* 根据提供的参数计算MD5或HMAC-MD5的主函数
*/
function md5 (string, key, raw) {
if (!key) {
if (!key) { // 如果没有提供密钥计算输入字符串的MD5哈希值
if (!raw) {
return hexMD5(string)
return hexMD5(string); // 返回十六进制编码的MD5哈希值
}
return rawMD5(string)
return rawMD5(string); // 返回原始MD5哈希值
}
if (!raw) {
return hexHMACMD5(key, string)
if (!raw) { // 如果提供了密钥使用密钥计算输入字符串的HMAC-MD5哈希值
return hexHMACMD5(key, string); // 返回十六进制编码的HMAC-MD5哈希值
}
return rawHMACMD5(key, string)
return rawHMACMD5(key, string);
}
Loading…
Cancel
Save