update to the latest version.
This commit is contained in:
Witt
parent
7d23c9269a
commit
9cea5a5b67
|
|
@ -0,0 +1,14 @@
|
||||||
|
@echo off
|
||||||
|
echo.
|
||||||
|
echo [信息] 运行Web工程。
|
||||||
|
echo.
|
||||||
|
|
||||||
|
cd %~dp0
|
||||||
|
cd ../ruoyi-admin/target
|
||||||
|
|
||||||
|
set JAVA_OPTS=-Xms256m -Xmx1024m -XX:MetaspaceSize=128m -XX:MaxMetaspaceSize=512m
|
||||||
|
|
||||||
|
java -jar %JAVA_OPTS% ruoyi-admin.jar
|
||||||
|
|
||||||
|
cd bin
|
||||||
|
pause
|
||||||
|
|
@ -0,0 +1,78 @@
|
||||||
|
若依系统开发环境搭建手册
|
||||||
|
1. 准备工作
|
||||||
|
1.1 前置环境准备 -- -- 安装Maven
|
||||||
|
若依基于Maven管理项目的构建，需要先安装好相应的版本。
|
||||||
|
1.2 开发工具
|
||||||
|
若依系统采用Eclipse作为开发工具。但不局限于Eclipse。此处仅介绍在Eclipse搭建开发环境所需的操作。
|
||||||
|
2. 开发环境搭建
|
||||||
|
2.1 开发工具的配置
|
||||||
|
2.1.1 配置Maven
|
||||||
|
进入Window->Preferences->Maven->Installations页面，设置已经安装好的Maven
|
||||||
|
|
||||||
|
2.1.2 配置Maven仓库路径
|
||||||
|
进入Window->Preferences->Maven->User Settings页面，配置仓库路径
|
||||||
|
|
||||||
|
2.1.4 关闭校验
|
||||||
|
进入Window->Preferences->Validation页面，勾选"Suspend all validators"，关闭校验
|
||||||
|
|
||||||
|
2.2 导入工程
|
||||||
|
通过Eclipse导入工程，步骤如下：
|
||||||
|
(1)点击左侧项目区域 -- >Import...
|
||||||
|
(2)选择RuoYi
|
||||||
|
(3)点击Finish(4)RuoYi的代码就被导出到Eclipse中了，此时可以在工程视图中看到。
|
||||||
|
|
||||||
|
3. 运行若依系统
|
||||||
|
3.1 必要的配置
|
||||||
|
3.1.1 修改数据库连接
|
||||||
|
编辑src/main/ resources目录下的application-druid.yml 文件，修改数据库地址账号信息。
|
||||||
|
执行sql/ ry_20180423.sql，quartz.sql 两个文件 日期随版本变化
|
||||||
|
3.1.2 开发环境配置
|
||||||
|
编辑src/main/ resources目录下的application.yml 文件，
|
||||||
|
默认端口为80
|
||||||
|
|
||||||
|
3.1.3 代码生成配置
|
||||||
|
编辑src/main/ resources目录下的application.yml 文件，
|
||||||
|
|
||||||
|
默认为module，根据实际情况修改即可。生成的表要有注释注：如对模板有特殊需求，可自行修改。编辑src/main/ resources/templates/vm目录下
|
||||||
|
|
||||||
|
3.1.4 日志配置
|
||||||
|
编辑src/main/ resources目录下的logback.yml 文件
|
||||||
|
<property name="log.path" value="/home/ruoyi/logs" />
|
||||||
|
改为自己需要的路径
|
||||||
|
<property name="log.path" value="/Users/jyking/project/logs" />
|
||||||
|
3.2 启动及验证
|
||||||
|
启动RuoYiApplication.java 出现如下图表示启动成功
|
||||||
|
打开浏览器，输入：http://localhost:80/若能正确展示登录页面，并能成功登录，登录后菜单及页面展示正常，则表明环境搭建成功。默认密码为 admin/admin123
|
||||||
|
|
||||||
|
演示地址：http://www.ruoyi.club
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
4. 部署若依系统
|
||||||
|
4.1 war部署方式
|
||||||
|
4.1.1 修改pom.xml文件。将jar修改为war
|
||||||
|
|
||||||
|
如果是分模块需要修改ruoyi-admin
|
||||||
|
|
||||||
|
|
||||||
|
4.1.2 在spring-boot-starter依赖中移除tomcat模块
|
||||||
|
|
||||||
|
<exclusions>
|
||||||
|
<exclusion>
|
||||||
|
<artifactId>spring-boot-starter-tomcat</artifactId>
|
||||||
|
<groupId>org.springframework.boot</groupId>
|
||||||
|
</exclusion>
|
||||||
|
</exclusions>
|
||||||
|
|
||||||
|
4.1.3 部署到tomcat的webapps目录下面
|
||||||
|
默认为RuoYi.war
|
||||||
|
|
||||||
|
4.1.4 启动及验证
|
||||||
|
运行startup.bat 出现如下图即部署成功
|
||||||
|
4.2 Jar方式部署
|
||||||
|
执行命令：java - jar RuoYi.jar
|
||||||
|
脚本执行：ry.sh start 启动stop 停止
|
||||||
|
|
||||||
|
|
||||||
|
演示地址：ruoyi.vip
|
||||||
|
文档地址：doc.ruoyi.vip
|
||||||
|
|
@ -0,0 +1,80 @@
|
||||||
|
package com.ruoyi.web.controller.demo.controller;
|
||||||
|
|
||||||
|
import org.springframework.stereotype.Controller;
|
||||||
|
import org.springframework.web.bind.annotation.GetMapping;
|
||||||
|
import org.springframework.web.bind.annotation.RequestMapping;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 模态窗口
|
||||||
|
*
|
||||||
|
* @author ruoyi
|
||||||
|
*/
|
||||||
|
@Controller
|
||||||
|
@RequestMapping("/demo/modal")
|
||||||
|
public class DemoDialogController
|
||||||
|
{
|
||||||
|
private String prefix = "demo/modal";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 模态窗口
|
||||||
|
*/
|
||||||
|
@GetMapping("/dialog")
|
||||||
|
public String dialog()
|
||||||
|
{
|
||||||
|
return prefix + "/dialog";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 弹层组件
|
||||||
|
*/
|
||||||
|
@GetMapping("/layer")
|
||||||
|
public String layer()
|
||||||
|
{
|
||||||
|
return prefix + "/layer";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 表单
|
||||||
|
*/
|
||||||
|
@GetMapping("/form")
|
||||||
|
public String form()
|
||||||
|
{
|
||||||
|
return prefix + "/form";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 表格
|
||||||
|
*/
|
||||||
|
@GetMapping("/table")
|
||||||
|
public String table()
|
||||||
|
{
|
||||||
|
return prefix + "/table";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 表格check
|
||||||
|
*/
|
||||||
|
@GetMapping("/check")
|
||||||
|
public String check()
|
||||||
|
{
|
||||||
|
return prefix + "/table/check";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 表格radio
|
||||||
|
*/
|
||||||
|
@GetMapping("/radio")
|
||||||
|
public String radio()
|
||||||
|
{
|
||||||
|
return prefix + "/table/radio";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 表格回传父窗体
|
||||||
|
*/
|
||||||
|
@GetMapping("/parent")
|
||||||
|
public String parent()
|
||||||
|
{
|
||||||
|
return prefix + "/table/parent";
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,35 @@
|
||||||
|
package com.ruoyi.web.controller.demo.controller;
|
||||||
|
|
||||||
|
import org.springframework.stereotype.Controller;
|
||||||
|
import org.springframework.web.bind.annotation.GetMapping;
|
||||||
|
import org.springframework.web.bind.annotation.RequestMapping;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 图标相关
|
||||||
|
*
|
||||||
|
* @author ruoyi
|
||||||
|
*/
|
||||||
|
@Controller
|
||||||
|
@RequestMapping("/demo/icon")
|
||||||
|
public class DemoIconController
|
||||||
|
{
|
||||||
|
private String prefix = "demo/icon";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* FontAwesome图标
|
||||||
|
*/
|
||||||
|
@GetMapping("/fontawesome")
|
||||||
|
public String fontAwesome()
|
||||||
|
{
|
||||||
|
return prefix + "/fontawesome";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Glyphicons图标
|
||||||
|
*/
|
||||||
|
@GetMapping("/glyphicons")
|
||||||
|
public String glyphicons()
|
||||||
|
{
|
||||||
|
return prefix + "/glyphicons";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,326 @@
|
||||||
|
package com.ruoyi.web.controller.demo.controller;
|
||||||
|
|
||||||
|
import java.util.ArrayList;
|
||||||
|
import java.util.LinkedHashMap;
|
||||||
|
import java.util.List;
|
||||||
|
import java.util.Map;
|
||||||
|
import org.springframework.stereotype.Controller;
|
||||||
|
import org.springframework.ui.ModelMap;
|
||||||
|
import org.springframework.web.bind.annotation.GetMapping;
|
||||||
|
import org.springframework.web.bind.annotation.PathVariable;
|
||||||
|
import org.springframework.web.bind.annotation.PostMapping;
|
||||||
|
import org.springframework.web.bind.annotation.RequestMapping;
|
||||||
|
import org.springframework.web.bind.annotation.ResponseBody;
|
||||||
|
import org.springframework.web.multipart.MultipartFile;
|
||||||
|
import com.ruoyi.common.core.controller.BaseController;
|
||||||
|
import com.ruoyi.common.core.domain.AjaxResult;
|
||||||
|
import com.ruoyi.common.core.page.PageDomain;
|
||||||
|
import com.ruoyi.common.core.page.TableDataInfo;
|
||||||
|
import com.ruoyi.common.core.page.TableSupport;
|
||||||
|
import com.ruoyi.common.core.text.Convert;
|
||||||
|
import com.ruoyi.common.exception.BusinessException;
|
||||||
|
import com.ruoyi.common.utils.StringUtils;
|
||||||
|
import com.ruoyi.common.utils.poi.ExcelUtil;
|
||||||
|
import com.ruoyi.web.controller.demo.domain.CustomerModel;
|
||||||
|
import com.ruoyi.web.controller.demo.domain.UserOperateModel;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 操作控制
|
||||||
|
*
|
||||||
|
* @author ruoyi
|
||||||
|
*/
|
||||||
|
@Controller
|
||||||
|
@RequestMapping("/demo/operate")
|
||||||
|
public class DemoOperateController extends BaseController
|
||||||
|
{
|
||||||
|
private String prefix = "demo/operate";
|
||||||
|
|
||||||
|
private final static Map<Integer, UserOperateModel> users = new LinkedHashMap<Integer, UserOperateModel>();
|
||||||
|
{
|
||||||
|
users.put(1, new UserOperateModel(1, "1000001", "测试1", "0", "15888888888", "ry@qq.com", 150.0, "0"));
|
||||||
|
users.put(2, new UserOperateModel(2, "1000002", "测试2", "1", "15666666666", "ry@qq.com", 180.0, "1"));
|
||||||
|
users.put(3, new UserOperateModel(3, "1000003", "测试3", "0", "15666666666", "ry@qq.com", 110.0, "1"));
|
||||||
|
users.put(4, new UserOperateModel(4, "1000004", "测试4", "1", "15666666666", "ry@qq.com", 220.0, "1"));
|
||||||
|
users.put(5, new UserOperateModel(5, "1000005", "测试5", "0", "15666666666", "ry@qq.com", 140.0, "1"));
|
||||||
|
users.put(6, new UserOperateModel(6, "1000006", "测试6", "1", "15666666666", "ry@qq.com", 330.0, "1"));
|
||||||
|
users.put(7, new UserOperateModel(7, "1000007", "测试7", "0", "15666666666", "ry@qq.com", 160.0, "1"));
|
||||||
|
users.put(8, new UserOperateModel(8, "1000008", "测试8", "1", "15666666666", "ry@qq.com", 170.0, "1"));
|
||||||
|
users.put(9, new UserOperateModel(9, "1000009", "测试9", "0", "15666666666", "ry@qq.com", 180.0, "1"));
|
||||||
|
users.put(10, new UserOperateModel(10, "1000010", "测试10", "0", "15666666666", "ry@qq.com", 210.0, "1"));
|
||||||
|
users.put(11, new UserOperateModel(11, "1000011", "测试11", "1", "15666666666", "ry@qq.com", 110.0, "1"));
|
||||||
|
users.put(12, new UserOperateModel(12, "1000012", "测试12", "0", "15666666666", "ry@qq.com", 120.0, "1"));
|
||||||
|
users.put(13, new UserOperateModel(13, "1000013", "测试13", "1", "15666666666", "ry@qq.com", 380.0, "1"));
|
||||||
|
users.put(14, new UserOperateModel(14, "1000014", "测试14", "0", "15666666666", "ry@qq.com", 280.0, "1"));
|
||||||
|
users.put(15, new UserOperateModel(15, "1000015", "测试15", "0", "15666666666", "ry@qq.com", 570.0, "1"));
|
||||||
|
users.put(16, new UserOperateModel(16, "1000016", "测试16", "1", "15666666666", "ry@qq.com", 260.0, "1"));
|
||||||
|
users.put(17, new UserOperateModel(17, "1000017", "测试17", "1", "15666666666", "ry@qq.com", 210.0, "1"));
|
||||||
|
users.put(18, new UserOperateModel(18, "1000018", "测试18", "1", "15666666666", "ry@qq.com", 340.0, "1"));
|
||||||
|
users.put(19, new UserOperateModel(19, "1000019", "测试19", "1", "15666666666", "ry@qq.com", 160.0, "1"));
|
||||||
|
users.put(20, new UserOperateModel(20, "1000020", "测试20", "1", "15666666666", "ry@qq.com", 220.0, "1"));
|
||||||
|
users.put(21, new UserOperateModel(21, "1000021", "测试21", "1", "15666666666", "ry@qq.com", 120.0, "1"));
|
||||||
|
users.put(22, new UserOperateModel(22, "1000022", "测试22", "1", "15666666666", "ry@qq.com", 130.0, "1"));
|
||||||
|
users.put(23, new UserOperateModel(23, "1000023", "测试23", "1", "15666666666", "ry@qq.com", 490.0, "1"));
|
||||||
|
users.put(24, new UserOperateModel(24, "1000024", "测试24", "1", "15666666666", "ry@qq.com", 570.0, "1"));
|
||||||
|
users.put(25, new UserOperateModel(25, "1000025", "测试25", "1", "15666666666", "ry@qq.com", 250.0, "1"));
|
||||||
|
users.put(26, new UserOperateModel(26, "1000026", "测试26", "1", "15666666666", "ry@qq.com", 250.0, "1"));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 表格
|
||||||
|
*/
|
||||||
|
@GetMapping("/table")
|
||||||
|
public String table()
|
||||||
|
{
|
||||||
|
return prefix + "/table";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 其他
|
||||||
|
*/
|
||||||
|
@GetMapping("/other")
|
||||||
|
public String other()
|
||||||
|
{
|
||||||
|
return prefix + "/other";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 查询数据
|
||||||
|
*/
|
||||||
|
@PostMapping("/list")
|
||||||
|
@ResponseBody
|
||||||
|
public TableDataInfo list(UserOperateModel userModel)
|
||||||
|
{
|
||||||
|
TableDataInfo rspData = new TableDataInfo();
|
||||||
|
List<UserOperateModel> userList = new ArrayList<UserOperateModel>(users.values());
|
||||||
|
// 查询条件过滤
|
||||||
|
if (StringUtils.isNotEmpty(userModel.getSearchValue()))
|
||||||
|
{
|
||||||
|
userList.clear();
|
||||||
|
for (Map.Entry<Integer, UserOperateModel> entry : users.entrySet())
|
||||||
|
{
|
||||||
|
if (entry.getValue().getUserName().equals(userModel.getSearchValue()))
|
||||||
|
{
|
||||||
|
userList.add(entry.getValue());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if (StringUtils.isNotEmpty(userModel.getUserName()))
|
||||||
|
{
|
||||||
|
userList.clear();
|
||||||
|
for (Map.Entry<Integer, UserOperateModel> entry : users.entrySet())
|
||||||
|
{
|
||||||
|
if (entry.getValue().getUserName().equals(userModel.getUserName()))
|
||||||
|
{
|
||||||
|
userList.add(entry.getValue());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
PageDomain pageDomain = TableSupport.buildPageRequest();
|
||||||
|
if (null == pageDomain.getPageNum() || null == pageDomain.getPageSize())
|
||||||
|
{
|
||||||
|
rspData.setRows(userList);
|
||||||
|
rspData.setTotal(userList.size());
|
||||||
|
return rspData;
|
||||||
|
}
|
||||||
|
Integer pageNum = (pageDomain.getPageNum() - 1) * 10;
|
||||||
|
Integer pageSize = pageDomain.getPageNum() * 10;
|
||||||
|
if (pageSize > userList.size())
|
||||||
|
{
|
||||||
|
pageSize = userList.size();
|
||||||
|
}
|
||||||
|
rspData.setRows(userList.subList(pageNum, pageSize));
|
||||||
|
rspData.setTotal(userList.size());
|
||||||
|
return rspData;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 新增用户
|
||||||
|
*/
|
||||||
|
@GetMapping("/add")
|
||||||
|
public String add(ModelMap mmap)
|
||||||
|
{
|
||||||
|
return prefix + "/add";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 新增保存用户
|
||||||
|
*/
|
||||||
|
@PostMapping("/add")
|
||||||
|
@ResponseBody
|
||||||
|
public AjaxResult addSave(UserOperateModel user)
|
||||||
|
{
|
||||||
|
Integer userId = users.size() + 1;
|
||||||
|
user.setUserId(userId);
|
||||||
|
return AjaxResult.success(users.put(userId, user));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 新增保存主子表信息
|
||||||
|
*/
|
||||||
|
@PostMapping("/customer/add")
|
||||||
|
@ResponseBody
|
||||||
|
public AjaxResult addSave(CustomerModel customerModel)
|
||||||
|
{
|
||||||
|
System.out.println(customerModel.toString());
|
||||||
|
return AjaxResult.success();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 修改用户
|
||||||
|
*/
|
||||||
|
@GetMapping("/edit/{userId}")
|
||||||
|
public String edit(@PathVariable("userId") Integer userId, ModelMap mmap)
|
||||||
|
{
|
||||||
|
mmap.put("user", users.get(userId));
|
||||||
|
return prefix + "/edit";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 修改保存用户
|
||||||
|
*/
|
||||||
|
@PostMapping("/edit")
|
||||||
|
@ResponseBody
|
||||||
|
public AjaxResult editSave(UserOperateModel user)
|
||||||
|
{
|
||||||
|
return AjaxResult.success(users.put(user.getUserId(), user));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 导出
|
||||||
|
*/
|
||||||
|
@PostMapping("/export")
|
||||||
|
@ResponseBody
|
||||||
|
public AjaxResult export(UserOperateModel user)
|
||||||
|
{
|
||||||
|
List<UserOperateModel> list = new ArrayList<UserOperateModel>(users.values());
|
||||||
|
ExcelUtil<UserOperateModel> util = new ExcelUtil<UserOperateModel>(UserOperateModel.class);
|
||||||
|
return util.exportExcel(list, "用户数据");
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 下载模板
|
||||||
|
*/
|
||||||
|
@GetMapping("/importTemplate")
|
||||||
|
@ResponseBody
|
||||||
|
public AjaxResult importTemplate()
|
||||||
|
{
|
||||||
|
ExcelUtil<UserOperateModel> util = new ExcelUtil<UserOperateModel>(UserOperateModel.class);
|
||||||
|
return util.importTemplateExcel("用户数据");
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 导入数据
|
||||||
|
*/
|
||||||
|
@PostMapping("/importData")
|
||||||
|
@ResponseBody
|
||||||
|
public AjaxResult importData(MultipartFile file, boolean updateSupport) throws Exception
|
||||||
|
{
|
||||||
|
ExcelUtil<UserOperateModel> util = new ExcelUtil<UserOperateModel>(UserOperateModel.class);
|
||||||
|
List<UserOperateModel> userList = util.importExcel(file.getInputStream());
|
||||||
|
String message = importUser(userList, updateSupport);
|
||||||
|
return AjaxResult.success(message);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除用户
|
||||||
|
*/
|
||||||
|
@PostMapping("/remove")
|
||||||
|
@ResponseBody
|
||||||
|
public AjaxResult remove(String ids)
|
||||||
|
{
|
||||||
|
Integer[] userIds = Convert.toIntArray(ids);
|
||||||
|
for (Integer userId : userIds)
|
||||||
|
{
|
||||||
|
users.remove(userId);
|
||||||
|
}
|
||||||
|
return AjaxResult.success();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 查看详细
|
||||||
|
*/
|
||||||
|
@GetMapping("/detail/{userId}")
|
||||||
|
public String detail(@PathVariable("userId") Integer userId, ModelMap mmap)
|
||||||
|
{
|
||||||
|
mmap.put("user", users.get(userId));
|
||||||
|
return prefix + "/detail";
|
||||||
|
}
|
||||||
|
|
||||||
|
@PostMapping("/clean")
|
||||||
|
@ResponseBody
|
||||||
|
public AjaxResult clean()
|
||||||
|
{
|
||||||
|
users.clear();
|
||||||
|
return success();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 导入用户数据
|
||||||
|
*
|
||||||
|
* @param userList 用户数据列表
|
||||||
|
* @param isUpdateSupport 是否更新支持，如果已存在，则进行更新数据
|
||||||
|
* @return 结果
|
||||||
|
*/
|
||||||
|
public String importUser(List<UserOperateModel> userList, Boolean isUpdateSupport)
|
||||||
|
{
|
||||||
|
if (StringUtils.isNull(userList) || userList.size() == 0)
|
||||||
|
{
|
||||||
|
throw new BusinessException("导入用户数据不能为空！");
|
||||||
|
}
|
||||||
|
int successNum = 0;
|
||||||
|
int failureNum = 0;
|
||||||
|
StringBuilder successMsg = new StringBuilder();
|
||||||
|
StringBuilder failureMsg = new StringBuilder();
|
||||||
|
for (UserOperateModel user : userList)
|
||||||
|
{
|
||||||
|
try
|
||||||
|
{
|
||||||
|
// 验证是否存在这个用户
|
||||||
|
boolean userFlag = false;
|
||||||
|
for (Map.Entry<Integer, UserOperateModel> entry : users.entrySet())
|
||||||
|
{
|
||||||
|
if (entry.getValue().getUserName().equals(user.getUserName()))
|
||||||
|
{
|
||||||
|
userFlag = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!userFlag)
|
||||||
|
{
|
||||||
|
Integer userId = users.size() + 1;
|
||||||
|
user.setUserId(userId);
|
||||||
|
users.put(userId, user);
|
||||||
|
successNum++;
|
||||||
|
successMsg.append("<br/>" + successNum + "、用户 " + user.getUserName() + " 导入成功");
|
||||||
|
}
|
||||||
|
else if (isUpdateSupport)
|
||||||
|
{
|
||||||
|
users.put(user.getUserId(), user);
|
||||||
|
successNum++;
|
||||||
|
successMsg.append("<br/>" + successNum + "、用户 " + user.getUserName() + " 更新成功");
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
failureNum++;
|
||||||
|
failureMsg.append("<br/>" + failureNum + "、用户 " + user.getUserName() + " 已存在");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
catch (Exception e)
|
||||||
|
{
|
||||||
|
failureNum++;
|
||||||
|
String msg = "<br/>" + failureNum + "、账号 " + user.getUserName() + " 导入失败：";
|
||||||
|
failureMsg.append(msg + e.getMessage());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (failureNum > 0)
|
||||||
|
{
|
||||||
|
failureMsg.insert(0, "很抱歉，导入失败！共 " + failureNum + " 条数据格式不正确，错误如下：");
|
||||||
|
throw new BusinessException(failureMsg.toString());
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
successMsg.insert(0, "恭喜您，数据已全部导入成功！共 " + successNum + " 条，数据如下：");
|
||||||
|
}
|
||||||
|
return successMsg.toString();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
package com.ruoyi.web.controller.demo.controller;
|
||||||
|
|
||||||
|
import org.springframework.stereotype.Controller;
|
||||||
|
import org.springframework.web.bind.annotation.GetMapping;
|
||||||
|
import org.springframework.web.bind.annotation.RequestMapping;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 报表
|
||||||
|
*
|
||||||
|
* @author ruoyi
|
||||||
|
*/
|
||||||
|
@Controller
|
||||||
|
@RequestMapping("/demo/report")
|
||||||
|
public class DemoReportController
|
||||||
|
{
|
||||||
|
private String prefix = "demo/report";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 百度ECharts
|
||||||
|
*/
|
||||||
|
@GetMapping("/echarts")
|
||||||
|
public String echarts()
|
||||||
|
{
|
||||||
|
return prefix + "/echarts";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 图表插件
|
||||||
|
*/
|
||||||
|
@GetMapping("/peity")
|
||||||
|
public String peity()
|
||||||
|
{
|
||||||
|
return prefix + "/peity";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 线状图插件
|
||||||
|
*/
|
||||||
|
@GetMapping("/sparkline")
|
||||||
|
public String sparkline()
|
||||||
|
{
|
||||||
|
return prefix + "/sparkline";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 图表组合
|
||||||
|
*/
|
||||||
|
@GetMapping("/metrics")
|
||||||
|
public String metrics()
|
||||||
|
{
|
||||||
|
return prefix + "/metrics";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,423 @@
|
||||||
|
package com.ruoyi.web.controller.demo.controller;
|
||||||
|
|
||||||
|
import java.util.ArrayList;
|
||||||
|
import java.util.Arrays;
|
||||||
|
import java.util.Collections;
|
||||||
|
import java.util.Date;
|
||||||
|
import java.util.List;
|
||||||
|
import org.springframework.stereotype.Controller;
|
||||||
|
import org.springframework.ui.ModelMap;
|
||||||
|
import org.springframework.web.bind.annotation.GetMapping;
|
||||||
|
import org.springframework.web.bind.annotation.PostMapping;
|
||||||
|
import org.springframework.web.bind.annotation.RequestMapping;
|
||||||
|
import org.springframework.web.bind.annotation.ResponseBody;
|
||||||
|
import com.fasterxml.jackson.annotation.JsonFormat;
|
||||||
|
import com.ruoyi.common.core.controller.BaseController;
|
||||||
|
import com.ruoyi.common.core.page.PageDomain;
|
||||||
|
import com.ruoyi.common.core.page.TableDataInfo;
|
||||||
|
import com.ruoyi.common.core.page.TableSupport;
|
||||||
|
import com.ruoyi.common.utils.DateUtils;
|
||||||
|
import com.ruoyi.common.utils.StringUtils;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 表格相关
|
||||||
|
*
|
||||||
|
* @author ruoyi
|
||||||
|
*/
|
||||||
|
@Controller
|
||||||
|
@RequestMapping("/demo/table")
|
||||||
|
public class DemoTableController extends BaseController
|
||||||
|
{
|
||||||
|
private String prefix = "demo/table";
|
||||||
|
|
||||||
|
private final static List<UserTableModel> users = new ArrayList<UserTableModel>();
|
||||||
|
{
|
||||||
|
users.add(new UserTableModel(1, "1000001", "测试1", "0", "15888888888", "ry@qq.com", 150.0, "0"));
|
||||||
|
users.add(new UserTableModel(2, "1000002", "测试2", "1", "15666666666", "ry@qq.com", 180.0, "1"));
|
||||||
|
users.add(new UserTableModel(3, "1000003", "测试3", "0", "15666666666", "ry@qq.com", 110.0, "1"));
|
||||||
|
users.add(new UserTableModel(4, "1000004", "测试4", "1", "15666666666", "ry@qq.com", 220.0, "1"));
|
||||||
|
users.add(new UserTableModel(5, "1000005", "测试5", "0", "15666666666", "ry@qq.com", 140.0, "1"));
|
||||||
|
users.add(new UserTableModel(6, "1000006", "测试6", "1", "15666666666", "ry@qq.com", 330.0, "1"));
|
||||||
|
users.add(new UserTableModel(7, "1000007", "测试7", "0", "15666666666", "ry@qq.com", 160.0, "1"));
|
||||||
|
users.add(new UserTableModel(8, "1000008", "测试8", "1", "15666666666", "ry@qq.com", 170.0, "1"));
|
||||||
|
users.add(new UserTableModel(9, "1000009", "测试9", "0", "15666666666", "ry@qq.com", 180.0, "1"));
|
||||||
|
users.add(new UserTableModel(10, "1000010", "测试10", "0", "15666666666", "ry@qq.com", 210.0, "1"));
|
||||||
|
users.add(new UserTableModel(11, "1000011", "测试11", "1", "15666666666", "ry@qq.com", 110.0, "1"));
|
||||||
|
users.add(new UserTableModel(12, "1000012", "测试12", "0", "15666666666", "ry@qq.com", 120.0, "1"));
|
||||||
|
users.add(new UserTableModel(13, "1000013", "测试13", "1", "15666666666", "ry@qq.com", 380.0, "1"));
|
||||||
|
users.add(new UserTableModel(14, "1000014", "测试14", "0", "15666666666", "ry@qq.com", 280.0, "1"));
|
||||||
|
users.add(new UserTableModel(15, "1000015", "测试15", "0", "15666666666", "ry@qq.com", 570.0, "1"));
|
||||||
|
users.add(new UserTableModel(16, "1000016", "测试16", "1", "15666666666", "ry@qq.com", 260.0, "1"));
|
||||||
|
users.add(new UserTableModel(17, "1000017", "测试17", "1", "15666666666", "ry@qq.com", 210.0, "1"));
|
||||||
|
users.add(new UserTableModel(18, "1000018", "测试18", "1", "15666666666", "ry@qq.com", 340.0, "1"));
|
||||||
|
users.add(new UserTableModel(19, "1000019", "测试19", "1", "15666666666", "ry@qq.com", 160.0, "1"));
|
||||||
|
users.add(new UserTableModel(20, "1000020", "测试20", "1", "15666666666", "ry@qq.com", 220.0, "1"));
|
||||||
|
users.add(new UserTableModel(21, "1000021", "测试21", "1", "15666666666", "ry@qq.com", 120.0, "1"));
|
||||||
|
users.add(new UserTableModel(22, "1000022", "测试22", "1", "15666666666", "ry@qq.com", 130.0, "1"));
|
||||||
|
users.add(new UserTableModel(23, "1000023", "测试23", "1", "15666666666", "ry@qq.com", 490.0, "1"));
|
||||||
|
users.add(new UserTableModel(24, "1000024", "测试24", "1", "15666666666", "ry@qq.com", 570.0, "1"));
|
||||||
|
users.add(new UserTableModel(25, "1000025", "测试25", "1", "15666666666", "ry@qq.com", 250.0, "1"));
|
||||||
|
users.add(new UserTableModel(26, "1000026", "测试26", "1", "15666666666", "ry@qq.com", 250.0, "1"));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 搜索相关
|
||||||
|
*/
|
||||||
|
@GetMapping("/search")
|
||||||
|
public String search()
|
||||||
|
{
|
||||||
|
return prefix + "/search";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 数据汇总
|
||||||
|
*/
|
||||||
|
@GetMapping("/footer")
|
||||||
|
public String footer()
|
||||||
|
{
|
||||||
|
return prefix + "/footer";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 组合表头
|
||||||
|
*/
|
||||||
|
@GetMapping("/groupHeader")
|
||||||
|
public String groupHeader()
|
||||||
|
{
|
||||||
|
return prefix + "/groupHeader";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 表格导出
|
||||||
|
*/
|
||||||
|
@GetMapping("/export")
|
||||||
|
public String export()
|
||||||
|
{
|
||||||
|
return prefix + "/export";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 翻页记住选择
|
||||||
|
*/
|
||||||
|
@GetMapping("/remember")
|
||||||
|
public String remember()
|
||||||
|
{
|
||||||
|
return prefix + "/remember";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 跳转至指定页
|
||||||
|
*/
|
||||||
|
@GetMapping("/pageGo")
|
||||||
|
public String pageGo()
|
||||||
|
{
|
||||||
|
return prefix + "/pageGo";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 自定义查询参数
|
||||||
|
*/
|
||||||
|
@GetMapping("/params")
|
||||||
|
public String params()
|
||||||
|
{
|
||||||
|
return prefix + "/params";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 多表格
|
||||||
|
*/
|
||||||
|
@GetMapping("/multi")
|
||||||
|
public String multi()
|
||||||
|
{
|
||||||
|
return prefix + "/multi";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 点击按钮加载表格
|
||||||
|
*/
|
||||||
|
@GetMapping("/button")
|
||||||
|
public String button()
|
||||||
|
{
|
||||||
|
return prefix + "/button";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 直接加载表格数据
|
||||||
|
*/
|
||||||
|
@GetMapping("/data")
|
||||||
|
public String data(ModelMap mmap)
|
||||||
|
{
|
||||||
|
mmap.put("users", users);
|
||||||
|
return prefix + "/data";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 表格冻结列
|
||||||
|
*/
|
||||||
|
@GetMapping("/fixedColumns")
|
||||||
|
public String fixedColumns()
|
||||||
|
{
|
||||||
|
return prefix + "/fixedColumns";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 自定义触发事件
|
||||||
|
*/
|
||||||
|
@GetMapping("/event")
|
||||||
|
public String event()
|
||||||
|
{
|
||||||
|
return prefix + "/event";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 表格细节视图
|
||||||
|
*/
|
||||||
|
@GetMapping("/detail")
|
||||||
|
public String detail()
|
||||||
|
{
|
||||||
|
return prefix + "/detail";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 表格父子视图
|
||||||
|
*/
|
||||||
|
@GetMapping("/child")
|
||||||
|
public String child()
|
||||||
|
{
|
||||||
|
return prefix + "/child";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 表格图片预览
|
||||||
|
*/
|
||||||
|
@GetMapping("/image")
|
||||||
|
public String image()
|
||||||
|
{
|
||||||
|
return prefix + "/image";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 动态增删改查
|
||||||
|
*/
|
||||||
|
@GetMapping("/curd")
|
||||||
|
public String curd()
|
||||||
|
{
|
||||||
|
return prefix + "/curd";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 表格拖拽操作
|
||||||
|
*/
|
||||||
|
@GetMapping("/reorder")
|
||||||
|
public String reorder()
|
||||||
|
{
|
||||||
|
return prefix + "/reorder";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 表格行内编辑操作
|
||||||
|
*/
|
||||||
|
@GetMapping("/editable")
|
||||||
|
public String editable()
|
||||||
|
{
|
||||||
|
return prefix + "/editable";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 主子表提交
|
||||||
|
*/
|
||||||
|
@GetMapping("/subdata")
|
||||||
|
public String subdata()
|
||||||
|
{
|
||||||
|
return prefix + "/subdata";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 表格其他操作
|
||||||
|
*/
|
||||||
|
@GetMapping("/other")
|
||||||
|
public String other()
|
||||||
|
{
|
||||||
|
return prefix + "/other";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 查询数据
|
||||||
|
*/
|
||||||
|
@PostMapping("/list")
|
||||||
|
@ResponseBody
|
||||||
|
public TableDataInfo list(UserTableModel userModel)
|
||||||
|
{
|
||||||
|
TableDataInfo rspData = new TableDataInfo();
|
||||||
|
List<UserTableModel> userList = new ArrayList<UserTableModel>(Arrays.asList(new UserTableModel[users.size()]));
|
||||||
|
Collections.copy(userList, users);
|
||||||
|
// 查询条件过滤
|
||||||
|
if (StringUtils.isNotEmpty(userModel.getUserName()))
|
||||||
|
{
|
||||||
|
userList.clear();
|
||||||
|
for (UserTableModel user : users)
|
||||||
|
{
|
||||||
|
if (user.getUserName().equals(userModel.getUserName()))
|
||||||
|
{
|
||||||
|
userList.add(user);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
PageDomain pageDomain = TableSupport.buildPageRequest();
|
||||||
|
if (null == pageDomain.getPageNum() || null == pageDomain.getPageSize())
|
||||||
|
{
|
||||||
|
rspData.setRows(userList);
|
||||||
|
rspData.setTotal(userList.size());
|
||||||
|
return rspData;
|
||||||
|
}
|
||||||
|
Integer pageNum = (pageDomain.getPageNum() - 1) * 10;
|
||||||
|
Integer pageSize = pageDomain.getPageNum() * 10;
|
||||||
|
if (pageSize > userList.size())
|
||||||
|
{
|
||||||
|
pageSize = userList.size();
|
||||||
|
}
|
||||||
|
rspData.setRows(userList.subList(pageNum, pageSize));
|
||||||
|
rspData.setTotal(userList.size());
|
||||||
|
return rspData;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class UserTableModel
|
||||||
|
{
|
||||||
|
/** 用户ID */
|
||||||
|
private int userId;
|
||||||
|
|
||||||
|
/** 用户编号 */
|
||||||
|
private String userCode;
|
||||||
|
|
||||||
|
/** 用户姓名 */
|
||||||
|
private String userName;
|
||||||
|
|
||||||
|
/** 用户性别 */
|
||||||
|
private String userSex;
|
||||||
|
|
||||||
|
/** 用户手机 */
|
||||||
|
private String userPhone;
|
||||||
|
|
||||||
|
/** 用户邮箱 */
|
||||||
|
private String userEmail;
|
||||||
|
|
||||||
|
/** 用户余额 */
|
||||||
|
private double userBalance;
|
||||||
|
|
||||||
|
/** 用户状态（0正常 1停用） */
|
||||||
|
private String status;
|
||||||
|
|
||||||
|
/** 创建时间 */
|
||||||
|
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
|
||||||
|
private Date createTime;
|
||||||
|
|
||||||
|
public UserTableModel()
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
public UserTableModel(int userId, String userCode, String userName, String userSex, String userPhone,
|
||||||
|
String userEmail, double userBalance, String status)
|
||||||
|
{
|
||||||
|
this.userId = userId;
|
||||||
|
this.userCode = userCode;
|
||||||
|
this.userName = userName;
|
||||||
|
this.userSex = userSex;
|
||||||
|
this.userPhone = userPhone;
|
||||||
|
this.userEmail = userEmail;
|
||||||
|
this.userBalance = userBalance;
|
||||||
|
this.status = status;
|
||||||
|
this.createTime = DateUtils.getNowDate();
|
||||||
|
}
|
||||||
|
|
||||||
|
public int getUserId()
|
||||||
|
{
|
||||||
|
return userId;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setUserId(int userId)
|
||||||
|
{
|
||||||
|
this.userId = userId;
|
||||||
|
}
|
||||||
|
|
||||||
|
public String getUserCode()
|
||||||
|
{
|
||||||
|
return userCode;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setUserCode(String userCode)
|
||||||
|
{
|
||||||
|
this.userCode = userCode;
|
||||||
|
}
|
||||||
|
|
||||||
|
public String getUserName()
|
||||||
|
{
|
||||||
|
return userName;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setUserName(String userName)
|
||||||
|
{
|
||||||
|
this.userName = userName;
|
||||||
|
}
|
||||||
|
|
||||||
|
public String getUserSex()
|
||||||
|
{
|
||||||
|
return userSex;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setUserSex(String userSex)
|
||||||
|
{
|
||||||
|
this.userSex = userSex;
|
||||||
|
}
|
||||||
|
|
||||||
|
public String getUserPhone()
|
||||||
|
{
|
||||||
|
return userPhone;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setUserPhone(String userPhone)
|
||||||
|
{
|
||||||
|
this.userPhone = userPhone;
|
||||||
|
}
|
||||||
|
|
||||||
|
public String getUserEmail()
|
||||||
|
{
|
||||||
|
return userEmail;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setUserEmail(String userEmail)
|
||||||
|
{
|
||||||
|
this.userEmail = userEmail;
|
||||||
|
}
|
||||||
|
|
||||||
|
public double getUserBalance()
|
||||||
|
{
|
||||||
|
return userBalance;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setUserBalance(double userBalance)
|
||||||
|
{
|
||||||
|
this.userBalance = userBalance;
|
||||||
|
}
|
||||||
|
|
||||||
|
public String getStatus()
|
||||||
|
{
|
||||||
|
return status;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setStatus(String status)
|
||||||
|
{
|
||||||
|
this.status = status;
|
||||||
|
}
|
||||||
|
|
||||||
|
public Date getCreateTime()
|
||||||
|
{
|
||||||
|
return createTime;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setCreateTime(Date createTime)
|
||||||
|
{
|
||||||
|
this.createTime = createTime;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,116 @@
|
||||||
|
package com.ruoyi.web.controller.demo.domain;
|
||||||
|
|
||||||
|
import java.util.List;
|
||||||
|
import org.apache.commons.lang3.builder.ToStringBuilder;
|
||||||
|
import org.apache.commons.lang3.builder.ToStringStyle;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 客户测试信息
|
||||||
|
*
|
||||||
|
* @author ruoyi
|
||||||
|
*/
|
||||||
|
public class CustomerModel
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* 客户姓名
|
||||||
|
*/
|
||||||
|
private String name;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 客户手机
|
||||||
|
*/
|
||||||
|
private String phonenumber;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 客户性别
|
||||||
|
*/
|
||||||
|
private String sex;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 客户生日
|
||||||
|
*/
|
||||||
|
private String birthday;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 客户描述
|
||||||
|
*/
|
||||||
|
private String remark;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 商品信息
|
||||||
|
*/
|
||||||
|
private List<GoodsModel> goods;
|
||||||
|
|
||||||
|
public String getName()
|
||||||
|
{
|
||||||
|
return name;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setName(String name)
|
||||||
|
{
|
||||||
|
this.name = name;
|
||||||
|
}
|
||||||
|
|
||||||
|
public String getPhonenumber()
|
||||||
|
{
|
||||||
|
return phonenumber;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setPhonenumber(String phonenumber)
|
||||||
|
{
|
||||||
|
this.phonenumber = phonenumber;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
public String getSex()
|
||||||
|
{
|
||||||
|
return sex;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setSex(String sex)
|
||||||
|
{
|
||||||
|
this.sex = sex;
|
||||||
|
}
|
||||||
|
|
||||||
|
public String getBirthday()
|
||||||
|
{
|
||||||
|
return birthday;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setBirthday(String birthday)
|
||||||
|
{
|
||||||
|
this.birthday = birthday;
|
||||||
|
}
|
||||||
|
|
||||||
|
public String getRemark()
|
||||||
|
{
|
||||||
|
return remark;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setRemark(String remark)
|
||||||
|
{
|
||||||
|
this.remark = remark;
|
||||||
|
}
|
||||||
|
|
||||||
|
public List<GoodsModel> getGoods()
|
||||||
|
{
|
||||||
|
return goods;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setGoods(List<GoodsModel> goods)
|
||||||
|
{
|
||||||
|
this.goods = goods;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public String toString() {
|
||||||
|
return new ToStringBuilder(this,ToStringStyle.MULTI_LINE_STYLE)
|
||||||
|
.append("name", getName())
|
||||||
|
.append("phonenumber", getPhonenumber())
|
||||||
|
.append("sex", getSex())
|
||||||
|
.append("birthday", getBirthday())
|
||||||
|
.append("goods", getGoods())
|
||||||
|
.append("remark", getRemark())
|
||||||
|
.toString();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,82 @@
|
||||||
|
package com.ruoyi.web.controller.demo.domain;
|
||||||
|
|
||||||
|
import org.apache.commons.lang3.builder.ToStringBuilder;
|
||||||
|
import org.apache.commons.lang3.builder.ToStringStyle;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 商品测试信息
|
||||||
|
*
|
||||||
|
* @author ruoyi
|
||||||
|
*/
|
||||||
|
public class GoodsModel
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* 商品名称
|
||||||
|
*/
|
||||||
|
private String name;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 商品重量
|
||||||
|
*/
|
||||||
|
private Integer weight;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 商品价格
|
||||||
|
*/
|
||||||
|
private Double price;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 商品种类
|
||||||
|
*/
|
||||||
|
private String type;
|
||||||
|
|
||||||
|
public String getName()
|
||||||
|
{
|
||||||
|
return name;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setName(String name)
|
||||||
|
{
|
||||||
|
this.name = name;
|
||||||
|
}
|
||||||
|
|
||||||
|
public Integer getWeight()
|
||||||
|
{
|
||||||
|
return weight;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setWeight(Integer weight)
|
||||||
|
{
|
||||||
|
this.weight = weight;
|
||||||
|
}
|
||||||
|
|
||||||
|
public Double getPrice()
|
||||||
|
{
|
||||||
|
return price;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setPrice(Double price)
|
||||||
|
{
|
||||||
|
this.price = price;
|
||||||
|
}
|
||||||
|
|
||||||
|
public String getType()
|
||||||
|
{
|
||||||
|
return type;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setType(String type)
|
||||||
|
{
|
||||||
|
this.type = type;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public String toString() {
|
||||||
|
return new ToStringBuilder(this,ToStringStyle.MULTI_LINE_STYLE)
|
||||||
|
.append("name", getName())
|
||||||
|
.append("weight", getWeight())
|
||||||
|
.append("price", getPrice())
|
||||||
|
.append("type", getType())
|
||||||
|
.toString();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,149 @@
|
||||||
|
package com.ruoyi.web.controller.demo.domain;
|
||||||
|
|
||||||
|
import java.util.Date;
|
||||||
|
import com.ruoyi.common.annotation.Excel;
|
||||||
|
import com.ruoyi.common.annotation.Excel.Type;
|
||||||
|
import com.ruoyi.common.core.domain.BaseEntity;
|
||||||
|
import com.ruoyi.common.utils.DateUtils;
|
||||||
|
|
||||||
|
public class UserOperateModel extends BaseEntity
|
||||||
|
{
|
||||||
|
private static final long serialVersionUID = 1L;
|
||||||
|
|
||||||
|
private int userId;
|
||||||
|
|
||||||
|
@Excel(name = "用户编号")
|
||||||
|
private String userCode;
|
||||||
|
|
||||||
|
@Excel(name = "用户姓名")
|
||||||
|
private String userName;
|
||||||
|
|
||||||
|
@Excel(name = "用户性别", readConverterExp = "0=男,1=女,2=未知")
|
||||||
|
private String userSex;
|
||||||
|
|
||||||
|
@Excel(name = "用户手机")
|
||||||
|
private String userPhone;
|
||||||
|
|
||||||
|
@Excel(name = "用户邮箱")
|
||||||
|
private String userEmail;
|
||||||
|
|
||||||
|
@Excel(name = "用户余额")
|
||||||
|
private double userBalance;
|
||||||
|
|
||||||
|
@Excel(name = "用户状态", readConverterExp = "0=正常,1=停用")
|
||||||
|
private String status;
|
||||||
|
|
||||||
|
@Excel(name = "创建时间", width = 30, dateFormat = "yyyy-MM-dd HH:mm:ss", type = Type.EXPORT)
|
||||||
|
private Date createTime;
|
||||||
|
|
||||||
|
public UserOperateModel()
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
public UserOperateModel(int userId, String userCode, String userName, String userSex, String userPhone,
|
||||||
|
String userEmail, double userBalance, String status)
|
||||||
|
{
|
||||||
|
this.userId = userId;
|
||||||
|
this.userCode = userCode;
|
||||||
|
this.userName = userName;
|
||||||
|
this.userSex = userSex;
|
||||||
|
this.userPhone = userPhone;
|
||||||
|
this.userEmail = userEmail;
|
||||||
|
this.userBalance = userBalance;
|
||||||
|
this.status = status;
|
||||||
|
this.createTime = DateUtils.getNowDate();
|
||||||
|
}
|
||||||
|
|
||||||
|
public int getUserId()
|
||||||
|
{
|
||||||
|
return userId;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setUserId(int userId)
|
||||||
|
{
|
||||||
|
this.userId = userId;
|
||||||
|
}
|
||||||
|
|
||||||
|
public String getUserCode()
|
||||||
|
{
|
||||||
|
return userCode;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setUserCode(String userCode)
|
||||||
|
{
|
||||||
|
this.userCode = userCode;
|
||||||
|
}
|
||||||
|
|
||||||
|
public String getUserName()
|
||||||
|
{
|
||||||
|
return userName;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setUserName(String userName)
|
||||||
|
{
|
||||||
|
this.userName = userName;
|
||||||
|
}
|
||||||
|
|
||||||
|
public String getUserSex()
|
||||||
|
{
|
||||||
|
return userSex;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setUserSex(String userSex)
|
||||||
|
{
|
||||||
|
this.userSex = userSex;
|
||||||
|
}
|
||||||
|
|
||||||
|
public String getUserPhone()
|
||||||
|
{
|
||||||
|
return userPhone;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setUserPhone(String userPhone)
|
||||||
|
{
|
||||||
|
this.userPhone = userPhone;
|
||||||
|
}
|
||||||
|
|
||||||
|
public String getUserEmail()
|
||||||
|
{
|
||||||
|
return userEmail;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setUserEmail(String userEmail)
|
||||||
|
{
|
||||||
|
this.userEmail = userEmail;
|
||||||
|
}
|
||||||
|
|
||||||
|
public double getUserBalance()
|
||||||
|
{
|
||||||
|
return userBalance;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setUserBalance(double userBalance)
|
||||||
|
{
|
||||||
|
this.userBalance = userBalance;
|
||||||
|
}
|
||||||
|
|
||||||
|
public String getStatus()
|
||||||
|
{
|
||||||
|
return status;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setStatus(String status)
|
||||||
|
{
|
||||||
|
this.status = status;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public Date getCreateTime()
|
||||||
|
{
|
||||||
|
return createTime;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public void setCreateTime(Date createTime)
|
||||||
|
{
|
||||||
|
this.createTime = createTime;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
package com.ruoyi.web.controller.system;
|
||||||
|
|
||||||
|
import org.springframework.beans.factory.annotation.Autowired;
|
||||||
|
import org.springframework.stereotype.Controller;
|
||||||
|
import org.springframework.util.StringUtils;
|
||||||
|
import org.springframework.web.bind.annotation.GetMapping;
|
||||||
|
import org.springframework.web.bind.annotation.PostMapping;
|
||||||
|
import org.springframework.web.bind.annotation.ResponseBody;
|
||||||
|
import com.ruoyi.common.core.controller.BaseController;
|
||||||
|
import com.ruoyi.common.core.domain.AjaxResult;
|
||||||
|
import com.ruoyi.framework.shiro.service.SysRegisterService;
|
||||||
|
import com.ruoyi.system.domain.SysUser;
|
||||||
|
import com.ruoyi.system.service.ISysConfigService;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 注册验证
|
||||||
|
*
|
||||||
|
* @author ruoyi
|
||||||
|
*/
|
||||||
|
@Controller
|
||||||
|
public class SysRegisterController extends BaseController
|
||||||
|
{
|
||||||
|
@Autowired
|
||||||
|
private SysRegisterService registerService;
|
||||||
|
|
||||||
|
@Autowired
|
||||||
|
private ISysConfigService configService;
|
||||||
|
|
||||||
|
@GetMapping("/register")
|
||||||
|
public String register()
|
||||||
|
{
|
||||||
|
return "register";
|
||||||
|
}
|
||||||
|
|
||||||
|
@PostMapping("/register")
|
||||||
|
@ResponseBody
|
||||||
|
public AjaxResult ajaxRegister(SysUser user)
|
||||||
|
{
|
||||||
|
if (!("true".equals(configService.selectConfigByKey("sys.account.registerUser"))))
|
||||||
|
{
|
||||||
|
return error("当前系统没有开启注册功能！");
|
||||||
|
}
|
||||||
|
String msg = registerService.register(user);
|
||||||
|
return StringUtils.isEmpty(msg) ? success() : error(msg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" ?>
|
||||||
|
<!DOCTYPE configuration
|
||||||
|
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
|
||||||
|
"http://mybatis.org/dtd/mybatis-3-config.dtd">
|
||||||
|
<configuration>
|
||||||
|
|
||||||
|
<settings>
|
||||||
|
<setting name="cacheEnabled" value="true" /> <!-- 全局映射器启用缓存 -->
|
||||||
|
<setting name="useGeneratedKeys" value="true" /> <!-- 允许 JDBC 支持自动生成主键 -->
|
||||||
|
<setting name="defaultExecutorType" value="REUSE" /> <!-- 配置默认的执行器 -->
|
||||||
|
<setting name="logImpl" value="SLF4J" /> <!-- 指定 MyBatis 所用日志的具体实现 -->
|
||||||
|
<!-- <setting name="mapUnderscoreToCamelCase" value="true"/> 驼峰式命名 -->
|
||||||
|
</settings>
|
||||||
|
|
||||||
|
</configuration>
|
||||||
|
|
@ -0,0 +1,550 @@
|
||||||
|
/*!
|
||||||
|
* bootstrap-fileinput v5.0.4
|
||||||
|
* http://plugins.krajee.com/file-input
|
||||||
|
*
|
||||||
|
* Krajee default styling for bootstrap-fileinput.
|
||||||
|
*
|
||||||
|
* Author: Kartik Visweswaran
|
||||||
|
* Copyright: 2014 - 2019, Kartik Visweswaran, Krajee.com
|
||||||
|
*
|
||||||
|
* Licensed under the BSD-3-Clause
|
||||||
|
* https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
|
||||||
|
*/
|
||||||
|
.file-loading input[type=file], input[type=file].file-loading {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-no-browse {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
bottom: 20%;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
font-size: 0;
|
||||||
|
opacity: 0;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
outline: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kv-hidden, .file-caption-icon, .file-zoom-dialog .modal-header:before, .file-zoom-dialog .modal-header:after, .file-input-new .file-preview, .file-input-new .close, .file-input-new .glyphicon-file, .file-input-new .fileinput-remove-button, .file-input-new .fileinput-upload-button, .file-input-new .no-browse .input-group-btn, .file-input-ajax-new .fileinput-remove-button, .file-input-ajax-new .fileinput-upload-button, .file-input-ajax-new .no-browse .input-group-btn, .hide-content .kv-file-content, .is-locked .fileinput-upload-button, .is-locked .fileinput-remove-button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-file input[type=file], .file-caption-icon, .file-preview .fileinput-remove, .krajee-default .file-thumb-progress, .file-zoom-dialog .btn-navigate, .file-zoom-dialog .floating-buttons {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-caption-icon .kv-caption-icon {
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-input, .file-loading:before, .btn-file, .file-caption, .file-preview, .krajee-default.file-preview-frame, .krajee-default .file-thumbnail-footer, .file-zoom-dialog .modal-dialog {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-error-message pre, .file-error-message ul, .krajee-default .file-actions, .krajee-default .file-other-error {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-error-message pre, .file-error-message ul {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.krajee-default .file-drag-handle, .krajee-default .file-upload-indicator {
|
||||||
|
float: left;
|
||||||
|
margin-top: 10px;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.krajee-default .file-thumb-progress .progress, .krajee-default .file-thumb-progress .progress-bar {
|
||||||
|
height: 20px;
|
||||||
|
font-family: Verdana, Helvetica, sans-serif;
|
||||||
|
font-size: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.krajee-default .file-thumb-progress .progress, .kv-upload-progress .progress {
|
||||||
|
background-color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.krajee-default .file-caption-info, .krajee-default .file-size-info {
|
||||||
|
display: block;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
width: 160px;
|
||||||
|
height: 15px;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-zoom-content > .file-object.type-video, .file-zoom-content > .file-object.type-flash, .file-zoom-content > .file-object.type-image {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-zoom-content > .file-object.type-video, .file-zoom-content > .file-object.type-flash {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-zoom-content > .file-object.type-pdf, .file-zoom-content > .file-object.type-html, .file-zoom-content > .file-object.type-text, .file-zoom-content > .file-object.type-default {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-loading:before {
|
||||||
|
content: " Loading...";
|
||||||
|
display: inline-block;
|
||||||
|
padding-left: 20px;
|
||||||
|
line-height: 16px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-variant: small-caps;
|
||||||
|
color: #999;
|
||||||
|
background: transparent url(loading.gif) top left no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-object {
|
||||||
|
margin: 0 0 -5px 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-file {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-file input[type=file] {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
min-width: 100%;
|
||||||
|
min-height: 100%;
|
||||||
|
text-align: right;
|
||||||
|
opacity: 0;
|
||||||
|
background: none repeat scroll 0 0 transparent;
|
||||||
|
cursor: inherit;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-file ::-ms-browse {
|
||||||
|
font-size: 10000px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-caption .file-caption-name {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-caption.icon-visible .file-caption-icon {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-caption.icon-visible .file-caption-name {
|
||||||
|
padding-left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-caption-icon {
|
||||||
|
left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-error-message {
|
||||||
|
color: #a94442;
|
||||||
|
background-color: #f2dede;
|
||||||
|
margin: 5px;
|
||||||
|
border: 1px solid #ebccd1;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-error-message pre {
|
||||||
|
margin: 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-caption-disabled {
|
||||||
|
background-color: #eee;
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-preview {
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
padding: 8px;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-preview .btn-xs {
|
||||||
|
padding: 1px 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.5;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-preview .fileinput-remove {
|
||||||
|
top: 1px;
|
||||||
|
right: 1px;
|
||||||
|
line-height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-preview .clickable {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-preview-image {
|
||||||
|
font: 40px Impact, Charcoal, sans-serif;
|
||||||
|
color: #008000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.krajee-default.file-preview-frame {
|
||||||
|
margin: 8px;
|
||||||
|
border: 1px solid rgba(0,0,0,0.2);
|
||||||
|
box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
|
||||||
|
padding: 6px;
|
||||||
|
float: left;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.krajee-default.file-preview-frame .kv-file-content {
|
||||||
|
width: 213px;
|
||||||
|
height: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.krajee-default .file-preview-other-frame {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.krajee-default.file-preview-frame .kv-file-content.kv-pdf-rendered {
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.krajee-default.file-preview-frame[data-template="audio"] .kv-file-content {
|
||||||
|
width: 240px;
|
||||||
|
height: 55px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.krajee-default.file-preview-frame .file-thumbnail-footer {
|
||||||
|
height: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.krajee-default.file-preview-frame:not(.file-preview-error):hover {
|
||||||
|
border: 1px solid rgba(0,0,0,0.3);
|
||||||
|
box-shadow: 0 0 10px 0 rgba(0,0,0,0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.krajee-default .file-preview-text {
|
||||||
|
display: block;
|
||||||
|
color: #428bca;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||||
|
outline: none;
|
||||||
|
padding: 8px;
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.krajee-default .file-preview-html {
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
padding: 8px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.krajee-default .file-other-icon {
|
||||||
|
font-size: 6em;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.krajee-default .file-footer-buttons {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.krajee-default .file-footer-caption {
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 4px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: #777;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-upload-stats {
|
||||||
|
font-size: 10px;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kv-upload-progress .file-upload-stats {
|
||||||
|
font-size: 12px;
|
||||||
|
margin: -10px 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.krajee-default .file-preview-error {
|
||||||
|
opacity: 0.65;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.krajee-default .file-thumb-progress {
|
||||||
|
height: 11px;
|
||||||
|
top: 37px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.krajee-default.kvsortable-ghost {
|
||||||
|
background: #e1edf7;
|
||||||
|
border: 2px solid #a1abff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.krajee-default .file-preview-other:hover {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.krajee-default .file-preview-frame:not(.file-preview-error) .file-footer-caption:hover {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kv-upload-progress .progress {
|
||||||
|
height: 20px;
|
||||||
|
margin: 10px 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kv-upload-progress .progress-bar {
|
||||||
|
height: 20px;
|
||||||
|
font-family: Verdana, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*noinspection CssOverwrittenProperties*/
|
||||||
|
.file-zoom-dialog .file-other-icon {
|
||||||
|
font-size: 22em;
|
||||||
|
font-size: 50vmin;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-zoom-dialog .modal-dialog {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-zoom-dialog .modal-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-zoom-dialog .btn-navigate {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
background: transparent;
|
||||||
|
text-decoration: none;
|
||||||
|
outline: none;
|
||||||
|
opacity: 0.7;
|
||||||
|
top: 45%;
|
||||||
|
font-size: 4em;
|
||||||
|
color: #1c94c4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-zoom-dialog .btn-navigate:not([disabled]):hover {
|
||||||
|
outline: none;
|
||||||
|
box-shadow: none;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-zoom-dialog .floating-buttons {
|
||||||
|
top: 5px;
|
||||||
|
right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-zoom-dialog .btn-navigate[disabled] {
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-zoom-dialog .btn-prev {
|
||||||
|
left: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-zoom-dialog .btn-next {
|
||||||
|
right: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-zoom-dialog .kv-zoom-title {
|
||||||
|
font-weight: 300;
|
||||||
|
color: #999;
|
||||||
|
max-width: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-input-new .no-browse .form-control {
|
||||||
|
border-top-right-radius: 4px;
|
||||||
|
border-bottom-right-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-input-ajax-new .no-browse .form-control {
|
||||||
|
border-top-right-radius: 4px;
|
||||||
|
border-bottom-right-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-caption-main {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-thumb-loading {
|
||||||
|
background: transparent url(loading.gif) no-repeat scroll center center content-box !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-drop-zone {
|
||||||
|
border: 1px dashed #aaa;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin: 12px 15px 12px 12px;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-drop-zone.clickable:hover {
|
||||||
|
border: 2px dashed #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-drop-zone.clickable:focus {
|
||||||
|
border: 2px solid #5acde2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-drop-zone .file-preview-thumbnails {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-drop-zone-title {
|
||||||
|
color: #aaa;
|
||||||
|
font-size: 1.6em;
|
||||||
|
padding: 85px 10px;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-highlighted {
|
||||||
|
border: 2px dashed #999 !important;
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-uploading {
|
||||||
|
background: url(loading-sm.gif) no-repeat center bottom 10px;
|
||||||
|
opacity: 0.65;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-zoom-fullscreen .modal-dialog {
|
||||||
|
min-width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-zoom-fullscreen .modal-content {
|
||||||
|
border-radius: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-zoom-fullscreen .modal-body {
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating-buttons {
|
||||||
|
z-index: 3000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating-buttons .btn-kv {
|
||||||
|
margin-left: 3px;
|
||||||
|
z-index: 3000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kv-zoom-actions .btn-kv {
|
||||||
|
margin-left: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-zoom-content {
|
||||||
|
height: 480px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-zoom-content .file-preview-image {
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-zoom-content .file-preview-video {
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-zoom-content > .file-object.type-image {
|
||||||
|
height: auto;
|
||||||
|
min-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-zoom-content > .file-object.type-audio {
|
||||||
|
width: auto;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
.file-zoom-dialog .modal-dialog {
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.file-zoom-dialog .modal-lg {
|
||||||
|
max-width: 800px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.file-preview-thumbnails {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-zoom-dialog .modal-header {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 350px) {
|
||||||
|
.krajee-default.file-preview-frame:not([data-template="audio"]) .kv-file-content {
|
||||||
|
width: 160px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 420px) {
|
||||||
|
.krajee-default.file-preview-frame .kv-file-content.kv-pdf-rendered {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-loading[dir=rtl]:before {
|
||||||
|
background: transparent url(loading.gif) top right no-repeat;
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-sortable .file-drag-handle {
|
||||||
|
cursor: move;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-sortable .file-drag-handle:hover {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clickable .file-drop-zone-title {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-preview-initial.sortable-chosen {
|
||||||
|
background-color: #d9edf7;
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
12
ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-fileinput/fileinput.min.css
vendored
Normal file
12
ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-fileinput/fileinput.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
10
ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-fileinput/fileinput.min.js
vendored
Normal file
10
ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-fileinput/fileinput.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 847 B |
429
ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-select/bootstrap-select.css
vendored
Normal file
429
ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-select/bootstrap-select.css
vendored
Normal file
|
|
@ -0,0 +1,429 @@
|
||||||
|
/*!
|
||||||
|
* Bootstrap-select v1.13.10 (https://developer.snapappointments.com/bootstrap-select)
|
||||||
|
*
|
||||||
|
* Copyright 2012-2019 SnapAppointments, LLC
|
||||||
|
* Licensed under MIT (https://github.com/snapappointments/bootstrap-select/blob/master/LICENSE)
|
||||||
|
*/
|
||||||
|
|
||||||
|
select.bs-select-hidden,
|
||||||
|
.bootstrap-select > select.bs-select-hidden,
|
||||||
|
select.selectpicker {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.bootstrap-select {
|
||||||
|
width: 220px \0;
|
||||||
|
/*IE9 and below*/
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.bootstrap-select > .dropdown-toggle {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
text-align: right;
|
||||||
|
white-space: nowrap;
|
||||||
|
display: -webkit-inline-box;
|
||||||
|
display: -webkit-inline-flex;
|
||||||
|
display: -ms-inline-flexbox;
|
||||||
|
display: inline-flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-box-pack: justify;
|
||||||
|
-webkit-justify-content: space-between;
|
||||||
|
-ms-flex-pack: justify;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.bootstrap-select > .dropdown-toggle:after {
|
||||||
|
margin-top: -1px;
|
||||||
|
}
|
||||||
|
.bootstrap-select > .dropdown-toggle.bs-placeholder,
|
||||||
|
.bootstrap-select > .dropdown-toggle.bs-placeholder:hover,
|
||||||
|
.bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
|
||||||
|
.bootstrap-select > .dropdown-toggle.bs-placeholder:active {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-primary,
|
||||||
|
.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-secondary,
|
||||||
|
.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-success,
|
||||||
|
.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-danger,
|
||||||
|
.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-info,
|
||||||
|
.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-dark,
|
||||||
|
.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-primary:hover,
|
||||||
|
.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-secondary:hover,
|
||||||
|
.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-success:hover,
|
||||||
|
.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-danger:hover,
|
||||||
|
.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-info:hover,
|
||||||
|
.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-dark:hover,
|
||||||
|
.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-primary:focus,
|
||||||
|
.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-secondary:focus,
|
||||||
|
.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-success:focus,
|
||||||
|
.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-danger:focus,
|
||||||
|
.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-info:focus,
|
||||||
|
.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-dark:focus,
|
||||||
|
.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-primary:active,
|
||||||
|
.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-secondary:active,
|
||||||
|
.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-success:active,
|
||||||
|
.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-danger:active,
|
||||||
|
.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-info:active,
|
||||||
|
.bootstrap-select > .dropdown-toggle.bs-placeholder.btn-dark:active {
|
||||||
|
color: rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
.bootstrap-select > select {
|
||||||
|
position: absolute !important;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
display: block !important;
|
||||||
|
width: 0.5px !important;
|
||||||
|
height: 100% !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
opacity: 0 !important;
|
||||||
|
border: none;
|
||||||
|
z-index: 0 !important;
|
||||||
|
}
|
||||||
|
.bootstrap-select > select.mobile-device {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
display: block !important;
|
||||||
|
width: 100% !important;
|
||||||
|
z-index: 2 !important;
|
||||||
|
}
|
||||||
|
.has-error .bootstrap-select .dropdown-toggle,
|
||||||
|
.error .bootstrap-select .dropdown-toggle,
|
||||||
|
.bootstrap-select.is-invalid .dropdown-toggle,
|
||||||
|
.was-validated .bootstrap-select .selectpicker:invalid + .dropdown-toggle {
|
||||||
|
border-color: #b94a48;
|
||||||
|
}
|
||||||
|
.bootstrap-select.is-valid .dropdown-toggle,
|
||||||
|
.was-validated .bootstrap-select .selectpicker:valid + .dropdown-toggle {
|
||||||
|
border-color: #28a745;
|
||||||
|
}
|
||||||
|
.bootstrap-select.fit-width {
|
||||||
|
width: auto !important;
|
||||||
|
}
|
||||||
|
.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
|
||||||
|
width: 220px;
|
||||||
|
}
|
||||||
|
.bootstrap-select > select.mobile-device:focus + .dropdown-toggle,
|
||||||
|
.bootstrap-select .dropdown-toggle:focus {
|
||||||
|
outline: thin dotted #333333 !important;
|
||||||
|
outline: 5px auto -webkit-focus-ring-color !important;
|
||||||
|
outline-offset: -2px;
|
||||||
|
}
|
||||||
|
.bootstrap-select.form-control {
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: none;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
:not(.input-group) > .bootstrap-select.form-control:not([class*="col-"]) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.bootstrap-select.form-control.input-group-btn {
|
||||||
|
float: none;
|
||||||
|
z-index: auto;
|
||||||
|
}
|
||||||
|
.form-inline .bootstrap-select,
|
||||||
|
.form-inline .bootstrap-select.form-control:not([class*="col-"]) {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
.bootstrap-select:not(.input-group-btn),
|
||||||
|
.bootstrap-select[class*="col-"] {
|
||||||
|
float: none;
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.bootstrap-select.dropdown-menu-right,
|
||||||
|
.bootstrap-select[class*="col-"].dropdown-menu-right,
|
||||||
|
.row .bootstrap-select[class*="col-"].dropdown-menu-right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
.form-inline .bootstrap-select,
|
||||||
|
.form-horizontal .bootstrap-select,
|
||||||
|
.form-group .bootstrap-select {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.form-group-lg .bootstrap-select.form-control,
|
||||||
|
.form-group-sm .bootstrap-select.form-control {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.form-group-lg .bootstrap-select.form-control .dropdown-toggle,
|
||||||
|
.form-group-sm .bootstrap-select.form-control .dropdown-toggle {
|
||||||
|
height: 100%;
|
||||||
|
font-size: inherit;
|
||||||
|
line-height: inherit;
|
||||||
|
border-radius: inherit;
|
||||||
|
}
|
||||||
|
.bootstrap-select.form-control-sm .dropdown-toggle,
|
||||||
|
.bootstrap-select.form-control-lg .dropdown-toggle {
|
||||||
|
font-size: inherit;
|
||||||
|
line-height: inherit;
|
||||||
|
border-radius: inherit;
|
||||||
|
}
|
||||||
|
.bootstrap-select.form-control-sm .dropdown-toggle {
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
}
|
||||||
|
.bootstrap-select.form-control-lg .dropdown-toggle {
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
}
|
||||||
|
.form-inline .bootstrap-select .form-control {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.bootstrap-select.disabled,
|
||||||
|
.bootstrap-select > .disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
.bootstrap-select.disabled:focus,
|
||||||
|
.bootstrap-select > .disabled:focus {
|
||||||
|
outline: none !important;
|
||||||
|
}
|
||||||
|
.bootstrap-select.bs-container {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
.bootstrap-select.bs-container .dropdown-menu {
|
||||||
|
z-index: 1060;
|
||||||
|
}
|
||||||
|
.bootstrap-select .dropdown-toggle .filter-option {
|
||||||
|
position: static;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
float: left;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-box-flex: 0;
|
||||||
|
-webkit-flex: 0 1 auto;
|
||||||
|
-ms-flex: 0 1 auto;
|
||||||
|
flex: 0 1 auto;
|
||||||
|
}
|
||||||
|
.bs3.bootstrap-select .dropdown-toggle .filter-option {
|
||||||
|
padding-right: inherit;
|
||||||
|
}
|
||||||
|
.input-group .bs3-has-addon.bootstrap-select .dropdown-toggle .filter-option {
|
||||||
|
position: absolute;
|
||||||
|
padding-top: inherit;
|
||||||
|
padding-bottom: inherit;
|
||||||
|
padding-left: inherit;
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
.input-group .bs3-has-addon.bootstrap-select .dropdown-toggle .filter-option .filter-option-inner {
|
||||||
|
padding-right: inherit;
|
||||||
|
}
|
||||||
|
.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.bootstrap-select .dropdown-toggle .filter-expand {
|
||||||
|
width: 0 !important;
|
||||||
|
float: left;
|
||||||
|
opacity: 0 !important;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.bootstrap-select .dropdown-toggle .caret {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 12px;
|
||||||
|
margin-top: -2px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.input-group .bootstrap-select.form-control .dropdown-toggle {
|
||||||
|
border-radius: inherit;
|
||||||
|
}
|
||||||
|
.bootstrap-select[class*="col-"] .dropdown-toggle {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.bootstrap-select .dropdown-menu {
|
||||||
|
min-width: 100%;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.bootstrap-select .dropdown-menu > .inner:focus {
|
||||||
|
outline: none !important;
|
||||||
|
}
|
||||||
|
.bootstrap-select .dropdown-menu.inner {
|
||||||
|
position: static;
|
||||||
|
float: none;
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
-webkit-box-shadow: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.bootstrap-select .dropdown-menu li {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.bootstrap-select .dropdown-menu li.active small {
|
||||||
|
color: rgba(255, 255, 255, 0.5) !important;
|
||||||
|
}
|
||||||
|
.bootstrap-select .dropdown-menu li.disabled a {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
.bootstrap-select .dropdown-menu li a {
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.bootstrap-select .dropdown-menu li a.opt {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 2.25em;
|
||||||
|
}
|
||||||
|
.bootstrap-select .dropdown-menu li a span.check-mark {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.bootstrap-select .dropdown-menu li a span.text {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.bootstrap-select .dropdown-menu li small {
|
||||||
|
padding-left: 0.5em;
|
||||||
|
}
|
||||||
|
.bootstrap-select .dropdown-menu .notify {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 5px;
|
||||||
|
width: 96%;
|
||||||
|
margin: 0 2%;
|
||||||
|
min-height: 26px;
|
||||||
|
padding: 3px 5px;
|
||||||
|
background: #f5f5f5;
|
||||||
|
border: 1px solid #e3e3e3;
|
||||||
|
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
|
||||||
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0.9;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.bootstrap-select .no-results {
|
||||||
|
padding: 3px;
|
||||||
|
background: #f5f5f5;
|
||||||
|
margin: 0 5px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.bootstrap-select.fit-width .dropdown-toggle .filter-option {
|
||||||
|
position: static;
|
||||||
|
display: inline;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.bootstrap-select.fit-width .dropdown-toggle .filter-option-inner,
|
||||||
|
.bootstrap-select.fit-width .dropdown-toggle .filter-option-inner-inner {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.bootstrap-select.fit-width .dropdown-toggle .bs-caret:before {
|
||||||
|
content: '\00a0';
|
||||||
|
}
|
||||||
|
.bootstrap-select.fit-width .dropdown-toggle .caret {
|
||||||
|
position: static;
|
||||||
|
top: auto;
|
||||||
|
margin-top: -1px;
|
||||||
|
}
|
||||||
|
.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
|
||||||
|
position: absolute;
|
||||||
|
display: inline-block;
|
||||||
|
right: 15px;
|
||||||
|
top: 5px;
|
||||||
|
}
|
||||||
|
.bootstrap-select.show-tick .dropdown-menu li a span.text {
|
||||||
|
margin-right: 34px;
|
||||||
|
}
|
||||||
|
.bootstrap-select .bs-ok-default:after {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: 0.5em;
|
||||||
|
height: 1em;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 0 0.26em 0.26em 0;
|
||||||
|
-webkit-transform: rotate(45deg);
|
||||||
|
-ms-transform: rotate(45deg);
|
||||||
|
-o-transform: rotate(45deg);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
.bootstrap-select.show-menu-arrow.open > .dropdown-toggle,
|
||||||
|
.bootstrap-select.show-menu-arrow.show > .dropdown-toggle {
|
||||||
|
z-index: 1061;
|
||||||
|
}
|
||||||
|
.bootstrap-select.show-menu-arrow .dropdown-toggle .filter-option:before {
|
||||||
|
content: '';
|
||||||
|
border-left: 7px solid transparent;
|
||||||
|
border-right: 7px solid transparent;
|
||||||
|
border-bottom: 7px solid rgba(204, 204, 204, 0.2);
|
||||||
|
position: absolute;
|
||||||
|
bottom: -4px;
|
||||||
|
left: 9px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.bootstrap-select.show-menu-arrow .dropdown-toggle .filter-option:after {
|
||||||
|
content: '';
|
||||||
|
border-left: 6px solid transparent;
|
||||||
|
border-right: 6px solid transparent;
|
||||||
|
border-bottom: 6px solid white;
|
||||||
|
position: absolute;
|
||||||
|
bottom: -4px;
|
||||||
|
left: 10px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle .filter-option:before {
|
||||||
|
bottom: auto;
|
||||||
|
top: -4px;
|
||||||
|
border-top: 7px solid rgba(204, 204, 204, 0.2);
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle .filter-option:after {
|
||||||
|
bottom: auto;
|
||||||
|
top: -4px;
|
||||||
|
border-top: 6px solid white;
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle .filter-option:before {
|
||||||
|
right: 12px;
|
||||||
|
left: auto;
|
||||||
|
}
|
||||||
|
.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle .filter-option:after {
|
||||||
|
right: 13px;
|
||||||
|
left: auto;
|
||||||
|
}
|
||||||
|
.bootstrap-select.show-menu-arrow.open > .dropdown-toggle .filter-option:before,
|
||||||
|
.bootstrap-select.show-menu-arrow.show > .dropdown-toggle .filter-option:before,
|
||||||
|
.bootstrap-select.show-menu-arrow.open > .dropdown-toggle .filter-option:after,
|
||||||
|
.bootstrap-select.show-menu-arrow.show > .dropdown-toggle .filter-option:after {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.bs-searchbox,
|
||||||
|
.bs-actionsbox,
|
||||||
|
.bs-donebutton {
|
||||||
|
padding: 4px 8px;
|
||||||
|
}
|
||||||
|
.bs-actionsbox {
|
||||||
|
width: 100%;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.bs-actionsbox .btn-group button {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
.bs-donebutton {
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.bs-donebutton .btn-group button {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.bs-searchbox + .bs-actionsbox {
|
||||||
|
padding: 0 8px 4px;
|
||||||
|
}
|
||||||
|
.bs-searchbox .form-control {
|
||||||
|
margin-bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
/*# sourceMappingURL=bootstrap-select.css.map */
|
||||||
3139
ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-select/bootstrap-select.js
vendored
Normal file
3139
ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-select/bootstrap-select.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
6
ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-select/bootstrap-select.min.css
vendored
Normal file
6
ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-select/bootstrap-select.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
9
ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-select/bootstrap-select.min.js
vendored
Normal file
9
ruoyi-admin/src/main/resources/static/ajax/libs/bootstrap-select/bootstrap-select.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,321 @@
|
||||||
|
/**
|
||||||
|
* 基于bootstrap-table-fixed-columns修改
|
||||||
|
* 支持左右列冻结、支持固定高度
|
||||||
|
* Copyright (c) 2019 ruoyi
|
||||||
|
*/
|
||||||
|
(function ($) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
$.extend($.fn.bootstrapTable.defaults, {
|
||||||
|
fixedColumns: false,
|
||||||
|
fixedNumber: 1,
|
||||||
|
rightFixedColumns: false,
|
||||||
|
rightFixedNumber: 1
|
||||||
|
});
|
||||||
|
|
||||||
|
var BootstrapTable = $.fn.bootstrapTable.Constructor,
|
||||||
|
_initHeader = BootstrapTable.prototype.initHeader,
|
||||||
|
_initBody = BootstrapTable.prototype.initBody,
|
||||||
|
_resetView = BootstrapTable.prototype.resetView;
|
||||||
|
|
||||||
|
BootstrapTable.prototype.initFixedColumns = function () {
|
||||||
|
this.timeoutHeaderColumns_ = 0;
|
||||||
|
this.timeoutBodyColumns_ = 0;
|
||||||
|
if (this.options.fixedColumns) {
|
||||||
|
this.$fixedHeader = $([
|
||||||
|
'<div class="left-fixed-table-columns">',
|
||||||
|
'<table>',
|
||||||
|
'<thead></thead>',
|
||||||
|
'</table>',
|
||||||
|
'</div>'].join(''));
|
||||||
|
|
||||||
|
this.$fixedHeader.find('table').attr('class', this.$el.attr('class'));
|
||||||
|
this.$fixedHeaderColumns = this.$fixedHeader.find('thead');
|
||||||
|
this.$tableHeader.before(this.$fixedHeader);
|
||||||
|
|
||||||
|
this.$fixedBody = $([
|
||||||
|
'<div class="left-fixed-body-columns">',
|
||||||
|
'<table>',
|
||||||
|
'<tbody></tbody>',
|
||||||
|
'</table>',
|
||||||
|
'</div>'].join(''));
|
||||||
|
|
||||||
|
this.$fixedBody.find('table').attr('class', this.$el.attr('class'));
|
||||||
|
this.$fixedBodyColumns = this.$fixedBody.find('tbody');
|
||||||
|
this.$tableBody.before(this.$fixedBody);
|
||||||
|
}
|
||||||
|
if (this.options.rightFixedColumns) {
|
||||||
|
this.$rightfixedBody = $([
|
||||||
|
'<div class="right-fixed-table-columns">',
|
||||||
|
'<table>',
|
||||||
|
'<thead></thead>',
|
||||||
|
'<tbody style="background-color: #fff;"></tbody>',
|
||||||
|
'</table>',
|
||||||
|
'</div>'].join(''));
|
||||||
|
this.$rightfixedBody.find('table').attr('class', this.$el.attr('class'));
|
||||||
|
this.$rightfixedHeaderColumns = this.$rightfixedBody.find('thead');
|
||||||
|
this.$rightfixedBodyColumns = this.$rightfixedBody.find('tbody');
|
||||||
|
this.$tableBody.before(this.$rightfixedBody);
|
||||||
|
if (this.options.fixedColumns) {
|
||||||
|
$('.right-fixed-table-columns').attr('style','right:0px;');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
BootstrapTable.prototype.initHeader = function () {
|
||||||
|
_initHeader.apply(this, Array.prototype.slice.apply(arguments));
|
||||||
|
|
||||||
|
if (!this.options.fixedColumns && !this.options.rightFixedColumns){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.initFixedColumns();
|
||||||
|
|
||||||
|
var $ltr = this.$header.find('tr:eq(0)').clone(true),
|
||||||
|
$rtr = this.$header.find('tr:eq(0)').clone(),
|
||||||
|
$lths = $ltr.clone(true).find('th'),
|
||||||
|
$rths = $rtr.clone().find('th');
|
||||||
|
|
||||||
|
$ltr.html('');
|
||||||
|
$rtr.html('');
|
||||||
|
//右边列冻结
|
||||||
|
if (this.options.rightFixedColumns) {
|
||||||
|
for (var i = 0; i < this.options.rightFixedNumber; i++) {
|
||||||
|
$rtr.append($rths.eq($rths.length - this.options.rightFixedNumber + i).clone());
|
||||||
|
}
|
||||||
|
this.$rightfixedHeaderColumns.html('').append($rtr);
|
||||||
|
}
|
||||||
|
|
||||||
|
//左边列冻结
|
||||||
|
if (this.options.fixedColumns) {
|
||||||
|
for (var i = 0; i < this.options.fixedNumber; i++) {
|
||||||
|
$ltr.append($lths.eq(i).clone(true));
|
||||||
|
}
|
||||||
|
this.$fixedHeaderColumns.html('').append($ltr);
|
||||||
|
this.$selectAll = $ltr.find('[name="btSelectAll"]');
|
||||||
|
this.$selectAll.on('click', function () {
|
||||||
|
var checked = $(this).prop('checked');
|
||||||
|
$(".left-fixed-body-columns input[name=btSelectItem]").filter(':enabled').prop('checked', checked);
|
||||||
|
$('.fixed-table-body input[name=btSelectItem]').closest('tr').removeClass('selected');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
BootstrapTable.prototype.initBody = function () {
|
||||||
|
_initBody.apply(this, Array.prototype.slice.apply(arguments));
|
||||||
|
|
||||||
|
if (!this.options.fixedColumns && !this.options.rightFixedColumns) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var that = this;
|
||||||
|
if (this.options.fixedColumns) {
|
||||||
|
this.$fixedBodyColumns.html('');
|
||||||
|
this.$body.find('> tr[data-index]').each(function () {
|
||||||
|
var $tr = $(this).clone(true),
|
||||||
|
$tds = $tr.clone(true).find('td');
|
||||||
|
|
||||||
|
$tr.html('');
|
||||||
|
for (var i = 0; i < that.options.fixedNumber; i++) {
|
||||||
|
$tr.append($tds.eq(i).clone(true));
|
||||||
|
}
|
||||||
|
that.$fixedBodyColumns.append($tr);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (this.options.rightFixedColumns) {
|
||||||
|
this.$rightfixedBodyColumns.html('');
|
||||||
|
this.$body.find('> tr[data-index]').each(function () {
|
||||||
|
var $tr = $(this).clone(),
|
||||||
|
$tds = $tr.clone().find('td');
|
||||||
|
|
||||||
|
$tr.html('');
|
||||||
|
for (var i = 0; i < that.options.rightFixedNumber; i++) {
|
||||||
|
var indexTd = $tds.length - that.options.rightFixedNumber + i;
|
||||||
|
var oldTd = $tds.eq(indexTd);
|
||||||
|
var fixTd = oldTd.clone();
|
||||||
|
var buttons = fixTd.find('button');
|
||||||
|
//事件转移：冻结列里面的事件转移到实际按钮的事件
|
||||||
|
buttons.each(function (key, item) {
|
||||||
|
$(item).click(function () {
|
||||||
|
that.$body.find("tr[data-index=" + $tr.attr('data-index') + "] td:eq(" + indexTd + ") button:eq(" + key + ")").click();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
$tr.append(fixTd);
|
||||||
|
}
|
||||||
|
that.$rightfixedBodyColumns.append($tr);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
BootstrapTable.prototype.resetView = function () {
|
||||||
|
_resetView.apply(this, Array.prototype.slice.apply(arguments));
|
||||||
|
|
||||||
|
if (!this.options.fixedColumns && !this.options.rightFixedColumns) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
clearTimeout(this.timeoutHeaderColumns_);
|
||||||
|
this.timeoutHeaderColumns_ = setTimeout($.proxy(this.fitHeaderColumns, this), this.$el.is(':hidden') ? 100 : 0);
|
||||||
|
|
||||||
|
clearTimeout(this.timeoutBodyColumns_);
|
||||||
|
this.timeoutBodyColumns_ = setTimeout($.proxy(this.fitBodyColumns, this), this.$el.is(':hidden') ? 100 : 0);
|
||||||
|
};
|
||||||
|
|
||||||
|
BootstrapTable.prototype.fitHeaderColumns = function () {
|
||||||
|
var that = this,
|
||||||
|
visibleFields = this.getVisibleFields(),
|
||||||
|
headerWidth = 0;
|
||||||
|
if (that.options.fixedColumns) {
|
||||||
|
this.$body.find('tr:first-child:not(.no-records-found) > *').each(function (i) {
|
||||||
|
var $this = $(this),
|
||||||
|
index = i;
|
||||||
|
|
||||||
|
if (i >= that.options.fixedNumber) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (that.options.detailView && !that.options.cardView) {
|
||||||
|
index = i - 1;
|
||||||
|
}
|
||||||
|
that.$fixedHeader.find('thead th[data-field="' + visibleFields[index] + '"]')
|
||||||
|
.find('.fht-cell').width($this.innerWidth());
|
||||||
|
headerWidth += $this.outerWidth();
|
||||||
|
});
|
||||||
|
this.$fixedHeader.width(headerWidth + 2).show();
|
||||||
|
}
|
||||||
|
if (that.options.rightFixedColumns) {
|
||||||
|
headerWidth = 0;
|
||||||
|
var totalLength = $("#" + table.options.id).find('th').length;
|
||||||
|
this.$body.find('tr:first-child:not(.no-records-found) > *').each(function (i) {
|
||||||
|
var $this = $(this),
|
||||||
|
index = totalLength - i - 1;
|
||||||
|
|
||||||
|
if (i >= that.options.rightFixedNumber) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
headerWidth += $("#" + table.options.id).find("tr:first-child>th").eq(index).width();
|
||||||
|
});
|
||||||
|
this.$rightfixedBody.width(headerWidth - 1).show();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
BootstrapTable.prototype.fitBodyColumns = function () {
|
||||||
|
var that = this,
|
||||||
|
top = -(parseInt(this.$el.css('margin-top'))),
|
||||||
|
height = this.$tableBody.height();
|
||||||
|
|
||||||
|
if (that.options.fixedColumns) {
|
||||||
|
if (!this.$body.find('> tr[data-index]').length) {
|
||||||
|
this.$fixedBody.hide();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.options.height) {
|
||||||
|
top = this.$fixedHeader.height()- 1;
|
||||||
|
height = height - top;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$fixedBody.css({
|
||||||
|
width: this.$fixedHeader.width(),
|
||||||
|
height: height,
|
||||||
|
top: top + 1
|
||||||
|
}).show();
|
||||||
|
|
||||||
|
var bsHeight = $("#" + table.options.id).find("tr").eq(1).height();
|
||||||
|
var fixedHeight = $("#" + table.options.id).parent().prev().find("tr").eq(1).height();
|
||||||
|
var resizeHeight = bsHeight > fixedHeight ? bsHeight: fixedHeight;
|
||||||
|
this.$body.find('> tr').each(function (i) {
|
||||||
|
that.$fixedBody.find('tr:eq(' + i + ')').height(i == 0 ? resizeHeight - 1 : resizeHeight);
|
||||||
|
$("#" + table.options.id).find('tbody>tr:eq(' + i + ')').height(resizeHeight);
|
||||||
|
var thattds = this;
|
||||||
|
that.$fixedBody.find('tr:eq(' + i + ')').find('td').each(function (j) {
|
||||||
|
$(this).width($($(thattds).find('td')[j]).width() + 1);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#" + table.options.id).on("check.bs.table uncheck.bs.table", function (e, rows, $element) {
|
||||||
|
var index= $element.data('index');
|
||||||
|
$(this).find('.bs-checkbox').find('input[data-index="' + index + '"]').prop("checked", true);
|
||||||
|
var selectFixedItem = $('.left-fixed-body-columns input[name=btSelectItem]');
|
||||||
|
var checkAll = selectFixedItem.filter(':enabled').length &&
|
||||||
|
selectFixedItem.filter(':enabled').length ===
|
||||||
|
selectFixedItem.filter(':enabled').filter(':checked').length;
|
||||||
|
$(".left-fixed-table-columns input[name=btSelectAll]").prop('checked', checkAll);
|
||||||
|
$('.fixed-table-body input[name=btSelectItem]').closest('tr').removeClass('selected');
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#" + table.options.id).off('click', '.fixed-table-body').on('click', '.th-inner', function (event) {
|
||||||
|
$.each(that.$fixedHeader.find('th'), function (i, th) {
|
||||||
|
$(th).find('.sortable').removeClass('desc asc').addClass('both');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// events
|
||||||
|
this.$fixedHeader.off('click', '.th-inner').on('click', '.th-inner', function (event) {
|
||||||
|
var target = $(this);
|
||||||
|
var $this = event.type === "keypress" ? $(event.currentTarget) : $(event.currentTarget).parent(), $this_ = that.$header.find('th').eq($this.index());
|
||||||
|
|
||||||
|
var sortOrder = "";
|
||||||
|
if (table.options.sortName === $this.data('field')) {
|
||||||
|
sortOrder = table.options.sortOrder === 'asc' ? 'desc' : 'asc';
|
||||||
|
} else {
|
||||||
|
sortOrder = $this.data('order') === 'asc' ? 'desc' : 'asc';
|
||||||
|
}
|
||||||
|
table.options.sortOrder = sortOrder;
|
||||||
|
var sortName = $this.data('sortName') ? $this.data('sortName') : $this.data('field');
|
||||||
|
if (target.parent().data().sortable) {
|
||||||
|
$.each(that.$fixedHeader.find('th'), function (i, th) {
|
||||||
|
$(th).find('.sortable').removeClass('desc asc').addClass(($(th).data('field') === sortName || $(th).data('sortName') === sortName) ? sortOrder : 'both');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.$tableBody.on('scroll', function () {
|
||||||
|
that.$fixedBody.find('table').css('top', -$(this).scrollTop());
|
||||||
|
});
|
||||||
|
this.$body.find('> tr[data-index]').off('hover').hover(function () {
|
||||||
|
var index = $(this).data('index');
|
||||||
|
that.$fixedBody.find('tr[data-index="' + index + '"]').addClass('hover');
|
||||||
|
}, function () {
|
||||||
|
var index = $(this).data('index');
|
||||||
|
that.$fixedBody.find('tr[data-index="' + index + '"]').removeClass('hover');
|
||||||
|
});
|
||||||
|
this.$fixedBody.find('tr[data-index]').off('hover').hover(function () {
|
||||||
|
var index = $(this).data('index');
|
||||||
|
that.$body.find('tr[data-index="' + index + '"]').addClass('hover');
|
||||||
|
}, function () {
|
||||||
|
var index = $(this).data('index');
|
||||||
|
that.$body.find('> tr[data-index="' + index + '"]').removeClass('hover');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (that.options.rightFixedColumns) {
|
||||||
|
if (!this.$body.find('> tr[data-index]').length) {
|
||||||
|
this.$rightfixedBody.hide();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$body.find('> tr').each(function (i) {
|
||||||
|
that.$rightfixedBody.find('tbody tr:eq(' + i + ')').height($(this).height());
|
||||||
|
});
|
||||||
|
|
||||||
|
//// events
|
||||||
|
this.$tableBody.on('scroll', function () {
|
||||||
|
that.$rightfixedBody.find('table').css('top', -$(this).scrollTop());
|
||||||
|
});
|
||||||
|
this.$body.find('> tr[data-index]').off('hover').hover(function () {
|
||||||
|
var index = $(this).data('index');
|
||||||
|
that.$rightfixedBody.find('tr[data-index="' + index + '"]').addClass('hover');
|
||||||
|
}, function () {
|
||||||
|
var index = $(this).data('index');
|
||||||
|
that.$rightfixedBody.find('tr[data-index="' + index + '"]').removeClass('hover');
|
||||||
|
});
|
||||||
|
this.$rightfixedBody.find('tr[data-index]').off('hover').hover(function () {
|
||||||
|
var index = $(this).data('index');
|
||||||
|
that.$body.find('tr[data-index="' + index + '"]').addClass('hover');
|
||||||
|
}, function () {
|
||||||
|
var index = $(this).data('index');
|
||||||
|
that.$body.find('> tr[data-index="' + index + '"]').removeClass('hover');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
})(jQuery);
|
||||||
|
|
@ -0,0 +1,663 @@
|
||||||
|
/*! X-editable - v1.5.1
|
||||||
|
* In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
|
||||||
|
* http://github.com/vitalets/x-editable
|
||||||
|
* Copyright (c) 2013 Vitaliy Potapov; Licensed MIT */
|
||||||
|
.editableform {
|
||||||
|
margin-bottom: 0; /* overwrites bootstrap margin */
|
||||||
|
}
|
||||||
|
|
||||||
|
.editableform .control-group {
|
||||||
|
margin-bottom: 0; /* overwrites bootstrap margin */
|
||||||
|
white-space: nowrap; /* prevent wrapping buttons on new line */
|
||||||
|
line-height: 20px; /* overwriting bootstrap line-height. See #133 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
BS3 width:1005 for inputs breaks editable form in popup
|
||||||
|
See: https://github.com/vitalets/x-editable/issues/393
|
||||||
|
*/
|
||||||
|
.editableform .form-control {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editable-buttons {
|
||||||
|
display: inline-block; /* should be inline to take effect of parent's white-space: nowrap */
|
||||||
|
vertical-align: top;
|
||||||
|
margin-left: 7px;
|
||||||
|
/* inline-block emulation for IE7*/
|
||||||
|
zoom: 1;
|
||||||
|
*display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editable-buttons.editable-buttons-bottom {
|
||||||
|
display: block;
|
||||||
|
margin-top: 7px;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editable-input {
|
||||||
|
vertical-align: top;
|
||||||
|
display: inline-block; /* should be inline to take effect of parent's white-space: nowrap */
|
||||||
|
width: auto; /* bootstrap-responsive has width: 100% that breakes layout */
|
||||||
|
white-space: normal; /* reset white-space decalred in parent*/
|
||||||
|
/* display-inline emulation for IE7*/
|
||||||
|
zoom: 1;
|
||||||
|
*display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editable-buttons .editable-cancel {
|
||||||
|
margin-left: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*for jquery-ui buttons need set height to look more pretty*/
|
||||||
|
.editable-buttons button.ui-button-icon-only {
|
||||||
|
height: 24px;
|
||||||
|
width: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editableform-loading {
|
||||||
|
background: url('loading.gif') center center no-repeat;
|
||||||
|
height: 25px;
|
||||||
|
width: auto;
|
||||||
|
min-width: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editable-inline .editableform-loading {
|
||||||
|
background-position: left 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editable-error-block {
|
||||||
|
max-width: 300px;
|
||||||
|
margin: 5px 0 0 0;
|
||||||
|
width: auto;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*add padding for jquery ui*/
|
||||||
|
.editable-error-block.ui-state-error {
|
||||||
|
padding: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editable-error {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---- For specific types ---- */
|
||||||
|
|
||||||
|
.editableform .editable-date {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* move datepicker icon to center of add-on button. See https://github.com/vitalets/x-editable/issues/183 */
|
||||||
|
.editable-inline .add-on .icon-th {
|
||||||
|
margin-top: 3px;
|
||||||
|
margin-left: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* checklist vertical alignment */
|
||||||
|
.editable-checklist label input[type="checkbox"],
|
||||||
|
.editable-checklist label span {
|
||||||
|
vertical-align: middle;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editable-checklist label {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* set exact width of textarea to fit buttons toolbar */
|
||||||
|
.editable-wysihtml5 {
|
||||||
|
width: 566px;
|
||||||
|
height: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* clear button shown as link in date inputs */
|
||||||
|
.editable-clear {
|
||||||
|
clear: both;
|
||||||
|
font-size: 0.9em;
|
||||||
|
text-decoration: none;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* IOS-style clear button for text inputs */
|
||||||
|
.editable-clear-x {
|
||||||
|
background: url('clear.png') center center no-repeat;
|
||||||
|
display: block;
|
||||||
|
width: 13px;
|
||||||
|
height: 13px;
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0.6;
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
top: 50%;
|
||||||
|
right: 6px;
|
||||||
|
margin-top: -6px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.editable-clear-x:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editable-pre-wrapped {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
.editable-container.editable-popup {
|
||||||
|
max-width: none !important; /* without this rule poshytip/tooltip does not stretch */
|
||||||
|
}
|
||||||
|
|
||||||
|
.editable-container.popover {
|
||||||
|
width: auto; /* without this rule popover does not stretch */
|
||||||
|
}
|
||||||
|
|
||||||
|
.editable-container.editable-inline {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: auto;
|
||||||
|
/* inline-block emulation for IE7*/
|
||||||
|
zoom: 1;
|
||||||
|
*display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editable-container.ui-widget {
|
||||||
|
font-size: inherit; /* jqueryui widget font 1.1em too big, overwrite it */
|
||||||
|
z-index: 9990; /* should be less than select2 dropdown z-index to close dropdown first when click */
|
||||||
|
}
|
||||||
|
.editable-click,
|
||||||
|
a.editable-click,
|
||||||
|
a.editable-click:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: dashed 1px #0088cc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editable-click.editable-disabled,
|
||||||
|
a.editable-click.editable-disabled,
|
||||||
|
a.editable-click.editable-disabled:hover {
|
||||||
|
color: #585858;
|
||||||
|
cursor: default;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editable-empty, .editable-empty:hover, .editable-empty:focus{
|
||||||
|
font-style: italic;
|
||||||
|
color: #DD1144;
|
||||||
|
/* border-bottom: none; */
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editable-unsaved {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editable-unsaved:after {
|
||||||
|
/* content: '*'*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.editable-bg-transition {
|
||||||
|
-webkit-transition: background-color 1400ms ease-out;
|
||||||
|
-moz-transition: background-color 1400ms ease-out;
|
||||||
|
-o-transition: background-color 1400ms ease-out;
|
||||||
|
-ms-transition: background-color 1400ms ease-out;
|
||||||
|
transition: background-color 1400ms ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*see https://github.com/vitalets/x-editable/issues/139 */
|
||||||
|
.form-horizontal .editable
|
||||||
|
{
|
||||||
|
padding-top: 5px;
|
||||||
|
display:inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*!
|
||||||
|
* Datepicker for Bootstrap
|
||||||
|
*
|
||||||
|
* Copyright 2012 Stefan Petre
|
||||||
|
* Improvements by Andrew Rowls
|
||||||
|
* Licensed under the Apache License v2.0
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
.datepicker {
|
||||||
|
padding: 4px;
|
||||||
|
-webkit-border-radius: 4px;
|
||||||
|
-moz-border-radius: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
direction: ltr;
|
||||||
|
/*.dow {
|
||||||
|
border-top: 1px solid #ddd !important;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
}
|
||||||
|
.datepicker-inline {
|
||||||
|
width: 220px;
|
||||||
|
}
|
||||||
|
.datepicker.datepicker-rtl {
|
||||||
|
direction: rtl;
|
||||||
|
}
|
||||||
|
.datepicker.datepicker-rtl table tr td span {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
.datepicker-dropdown {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.datepicker-dropdown:before {
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
border-left: 7px solid transparent;
|
||||||
|
border-right: 7px solid transparent;
|
||||||
|
border-bottom: 7px solid #ccc;
|
||||||
|
border-bottom-color: rgba(0, 0, 0, 0.2);
|
||||||
|
position: absolute;
|
||||||
|
top: -7px;
|
||||||
|
left: 6px;
|
||||||
|
}
|
||||||
|
.datepicker-dropdown:after {
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
border-left: 6px solid transparent;
|
||||||
|
border-right: 6px solid transparent;
|
||||||
|
border-bottom: 6px solid #ffffff;
|
||||||
|
position: absolute;
|
||||||
|
top: -6px;
|
||||||
|
left: 7px;
|
||||||
|
}
|
||||||
|
.datepicker > div {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.datepicker.days div.datepicker-days {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.datepicker.months div.datepicker-months {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.datepicker.years div.datepicker-years {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.datepicker table {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.datepicker td,
|
||||||
|
.datepicker th {
|
||||||
|
text-align: center;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
-webkit-border-radius: 4px;
|
||||||
|
-moz-border-radius: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.table-striped .datepicker table tr td,
|
||||||
|
.table-striped .datepicker table tr th {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.datepicker table tr td.day:hover {
|
||||||
|
background: #eeeeee;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.datepicker table tr td.old,
|
||||||
|
.datepicker table tr td.new {
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
.datepicker table tr td.disabled,
|
||||||
|
.datepicker table tr td.disabled:hover {
|
||||||
|
background: none;
|
||||||
|
color: #999999;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
.datepicker table tr td.today,
|
||||||
|
.datepicker table tr td.today:hover,
|
||||||
|
.datepicker table tr td.today.disabled,
|
||||||
|
.datepicker table tr td.today.disabled:hover {
|
||||||
|
background-color: #fde19a;
|
||||||
|
background-image: -moz-linear-gradient(top, #fdd49a, #fdf59a);
|
||||||
|
background-image: -ms-linear-gradient(top, #fdd49a, #fdf59a);
|
||||||
|
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
|
||||||
|
background-image: -webkit-linear-gradient(top, #fdd49a, #fdf59a);
|
||||||
|
background-image: -o-linear-gradient(top, #fdd49a, #fdf59a);
|
||||||
|
background-image: linear-gradient(top, #fdd49a, #fdf59a);
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
|
||||||
|
border-color: #fdf59a #fdf59a #fbed50;
|
||||||
|
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
.datepicker table tr td.today:hover,
|
||||||
|
.datepicker table tr td.today:hover:hover,
|
||||||
|
.datepicker table tr td.today.disabled:hover,
|
||||||
|
.datepicker table tr td.today.disabled:hover:hover,
|
||||||
|
.datepicker table tr td.today:active,
|
||||||
|
.datepicker table tr td.today:hover:active,
|
||||||
|
.datepicker table tr td.today.disabled:active,
|
||||||
|
.datepicker table tr td.today.disabled:hover:active,
|
||||||
|
.datepicker table tr td.today.active,
|
||||||
|
.datepicker table tr td.today:hover.active,
|
||||||
|
.datepicker table tr td.today.disabled.active,
|
||||||
|
.datepicker table tr td.today.disabled:hover.active,
|
||||||
|
.datepicker table tr td.today.disabled,
|
||||||
|
.datepicker table tr td.today:hover.disabled,
|
||||||
|
.datepicker table tr td.today.disabled.disabled,
|
||||||
|
.datepicker table tr td.today.disabled:hover.disabled,
|
||||||
|
.datepicker table tr td.today[disabled],
|
||||||
|
.datepicker table tr td.today:hover[disabled],
|
||||||
|
.datepicker table tr td.today.disabled[disabled],
|
||||||
|
.datepicker table tr td.today.disabled:hover[disabled] {
|
||||||
|
background-color: #fdf59a;
|
||||||
|
}
|
||||||
|
.datepicker table tr td.today:active,
|
||||||
|
.datepicker table tr td.today:hover:active,
|
||||||
|
.datepicker table tr td.today.disabled:active,
|
||||||
|
.datepicker table tr td.today.disabled:hover:active,
|
||||||
|
.datepicker table tr td.today.active,
|
||||||
|
.datepicker table tr td.today:hover.active,
|
||||||
|
.datepicker table tr td.today.disabled.active,
|
||||||
|
.datepicker table tr td.today.disabled:hover.active {
|
||||||
|
background-color: #fbf069 \9;
|
||||||
|
}
|
||||||
|
.datepicker table tr td.today:hover:hover {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
.datepicker table tr td.today.active:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.datepicker table tr td.range,
|
||||||
|
.datepicker table tr td.range:hover,
|
||||||
|
.datepicker table tr td.range.disabled,
|
||||||
|
.datepicker table tr td.range.disabled:hover {
|
||||||
|
background: #eeeeee;
|
||||||
|
-webkit-border-radius: 0;
|
||||||
|
-moz-border-radius: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.datepicker table tr td.range.today,
|
||||||
|
.datepicker table tr td.range.today:hover,
|
||||||
|
.datepicker table tr td.range.today.disabled,
|
||||||
|
.datepicker table tr td.range.today.disabled:hover {
|
||||||
|
background-color: #f3d17a;
|
||||||
|
background-image: -moz-linear-gradient(top, #f3c17a, #f3e97a);
|
||||||
|
background-image: -ms-linear-gradient(top, #f3c17a, #f3e97a);
|
||||||
|
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f3c17a), to(#f3e97a));
|
||||||
|
background-image: -webkit-linear-gradient(top, #f3c17a, #f3e97a);
|
||||||
|
background-image: -o-linear-gradient(top, #f3c17a, #f3e97a);
|
||||||
|
background-image: linear-gradient(top, #f3c17a, #f3e97a);
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3c17a', endColorstr='#f3e97a', GradientType=0);
|
||||||
|
border-color: #f3e97a #f3e97a #edde34;
|
||||||
|
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
||||||
|
-webkit-border-radius: 0;
|
||||||
|
-moz-border-radius: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.datepicker table tr td.range.today:hover,
|
||||||
|
.datepicker table tr td.range.today:hover:hover,
|
||||||
|
.datepicker table tr td.range.today.disabled:hover,
|
||||||
|
.datepicker table tr td.range.today.disabled:hover:hover,
|
||||||
|
.datepicker table tr td.range.today:active,
|
||||||
|
.datepicker table tr td.range.today:hover:active,
|
||||||
|
.datepicker table tr td.range.today.disabled:active,
|
||||||
|
.datepicker table tr td.range.today.disabled:hover:active,
|
||||||
|
.datepicker table tr td.range.today.active,
|
||||||
|
.datepicker table tr td.range.today:hover.active,
|
||||||
|
.datepicker table tr td.range.today.disabled.active,
|
||||||
|
.datepicker table tr td.range.today.disabled:hover.active,
|
||||||
|
.datepicker table tr td.range.today.disabled,
|
||||||
|
.datepicker table tr td.range.today:hover.disabled,
|
||||||
|
.datepicker table tr td.range.today.disabled.disabled,
|
||||||
|
.datepicker table tr td.range.today.disabled:hover.disabled,
|
||||||
|
.datepicker table tr td.range.today[disabled],
|
||||||
|
.datepicker table tr td.range.today:hover[disabled],
|
||||||
|
.datepicker table tr td.range.today.disabled[disabled],
|
||||||
|
.datepicker table tr td.range.today.disabled:hover[disabled] {
|
||||||
|
background-color: #f3e97a;
|
||||||
|
}
|
||||||
|
.datepicker table tr td.range.today:active,
|
||||||
|
.datepicker table tr td.range.today:hover:active,
|
||||||
|
.datepicker table tr td.range.today.disabled:active,
|
||||||
|
.datepicker table tr td.range.today.disabled:hover:active,
|
||||||
|
.datepicker table tr td.range.today.active,
|
||||||
|
.datepicker table tr td.range.today:hover.active,
|
||||||
|
.datepicker table tr td.range.today.disabled.active,
|
||||||
|
.datepicker table tr td.range.today.disabled:hover.active {
|
||||||
|
background-color: #efe24b \9;
|
||||||
|
}
|
||||||
|
.datepicker table tr td.selected,
|
||||||
|
.datepicker table tr td.selected:hover,
|
||||||
|
.datepicker table tr td.selected.disabled,
|
||||||
|
.datepicker table tr td.selected.disabled:hover {
|
||||||
|
background-color: #9e9e9e;
|
||||||
|
background-image: -moz-linear-gradient(top, #b3b3b3, #808080);
|
||||||
|
background-image: -ms-linear-gradient(top, #b3b3b3, #808080);
|
||||||
|
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b3b3b3), to(#808080));
|
||||||
|
background-image: -webkit-linear-gradient(top, #b3b3b3, #808080);
|
||||||
|
background-image: -o-linear-gradient(top, #b3b3b3, #808080);
|
||||||
|
background-image: linear-gradient(top, #b3b3b3, #808080);
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3', endColorstr='#808080', GradientType=0);
|
||||||
|
border-color: #808080 #808080 #595959;
|
||||||
|
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
.datepicker table tr td.selected:hover,
|
||||||
|
.datepicker table tr td.selected:hover:hover,
|
||||||
|
.datepicker table tr td.selected.disabled:hover,
|
||||||
|
.datepicker table tr td.selected.disabled:hover:hover,
|
||||||
|
.datepicker table tr td.selected:active,
|
||||||
|
.datepicker table tr td.selected:hover:active,
|
||||||
|
.datepicker table tr td.selected.disabled:active,
|
||||||
|
.datepicker table tr td.selected.disabled:hover:active,
|
||||||
|
.datepicker table tr td.selected.active,
|
||||||
|
.datepicker table tr td.selected:hover.active,
|
||||||
|
.datepicker table tr td.selected.disabled.active,
|
||||||
|
.datepicker table tr td.selected.disabled:hover.active,
|
||||||
|
.datepicker table tr td.selected.disabled,
|
||||||
|
.datepicker table tr td.selected:hover.disabled,
|
||||||
|
.datepicker table tr td.selected.disabled.disabled,
|
||||||
|
.datepicker table tr td.selected.disabled:hover.disabled,
|
||||||
|
.datepicker table tr td.selected[disabled],
|
||||||
|
.datepicker table tr td.selected:hover[disabled],
|
||||||
|
.datepicker table tr td.selected.disabled[disabled],
|
||||||
|
.datepicker table tr td.selected.disabled:hover[disabled] {
|
||||||
|
background-color: #808080;
|
||||||
|
}
|
||||||
|
.datepicker table tr td.selected:active,
|
||||||
|
.datepicker table tr td.selected:hover:active,
|
||||||
|
.datepicker table tr td.selected.disabled:active,
|
||||||
|
.datepicker table tr td.selected.disabled:hover:active,
|
||||||
|
.datepicker table tr td.selected.active,
|
||||||
|
.datepicker table tr td.selected:hover.active,
|
||||||
|
.datepicker table tr td.selected.disabled.active,
|
||||||
|
.datepicker table tr td.selected.disabled:hover.active {
|
||||||
|
background-color: #666666 \9;
|
||||||
|
}
|
||||||
|
.datepicker table tr td.active,
|
||||||
|
.datepicker table tr td.active:hover,
|
||||||
|
.datepicker table tr td.active.disabled,
|
||||||
|
.datepicker table tr td.active.disabled:hover {
|
||||||
|
background-color: #006dcc;
|
||||||
|
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
|
||||||
|
background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
|
||||||
|
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
|
||||||
|
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
|
||||||
|
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
|
||||||
|
background-image: linear-gradient(top, #0088cc, #0044cc);
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
|
||||||
|
border-color: #0044cc #0044cc #002a80;
|
||||||
|
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
.datepicker table tr td.active:hover,
|
||||||
|
.datepicker table tr td.active:hover:hover,
|
||||||
|
.datepicker table tr td.active.disabled:hover,
|
||||||
|
.datepicker table tr td.active.disabled:hover:hover,
|
||||||
|
.datepicker table tr td.active:active,
|
||||||
|
.datepicker table tr td.active:hover:active,
|
||||||
|
.datepicker table tr td.active.disabled:active,
|
||||||
|
.datepicker table tr td.active.disabled:hover:active,
|
||||||
|
.datepicker table tr td.active.active,
|
||||||
|
.datepicker table tr td.active:hover.active,
|
||||||
|
.datepicker table tr td.active.disabled.active,
|
||||||
|
.datepicker table tr td.active.disabled:hover.active,
|
||||||
|
.datepicker table tr td.active.disabled,
|
||||||
|
.datepicker table tr td.active:hover.disabled,
|
||||||
|
.datepicker table tr td.active.disabled.disabled,
|
||||||
|
.datepicker table tr td.active.disabled:hover.disabled,
|
||||||
|
.datepicker table tr td.active[disabled],
|
||||||
|
.datepicker table tr td.active:hover[disabled],
|
||||||
|
.datepicker table tr td.active.disabled[disabled],
|
||||||
|
.datepicker table tr td.active.disabled:hover[disabled] {
|
||||||
|
background-color: #0044cc;
|
||||||
|
}
|
||||||
|
.datepicker table tr td.active:active,
|
||||||
|
.datepicker table tr td.active:hover:active,
|
||||||
|
.datepicker table tr td.active.disabled:active,
|
||||||
|
.datepicker table tr td.active.disabled:hover:active,
|
||||||
|
.datepicker table tr td.active.active,
|
||||||
|
.datepicker table tr td.active:hover.active,
|
||||||
|
.datepicker table tr td.active.disabled.active,
|
||||||
|
.datepicker table tr td.active.disabled:hover.active {
|
||||||
|
background-color: #003399 \9;
|
||||||
|
}
|
||||||
|
.datepicker table tr td span {
|
||||||
|
display: block;
|
||||||
|
width: 23%;
|
||||||
|
height: 54px;
|
||||||
|
line-height: 54px;
|
||||||
|
float: left;
|
||||||
|
margin: 1%;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-border-radius: 4px;
|
||||||
|
-moz-border-radius: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.datepicker table tr td span:hover {
|
||||||
|
background: #eeeeee;
|
||||||
|
}
|
||||||
|
.datepicker table tr td span.disabled,
|
||||||
|
.datepicker table tr td span.disabled:hover {
|
||||||
|
background: none;
|
||||||
|
color: #999999;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
.datepicker table tr td span.active,
|
||||||
|
.datepicker table tr td span.active:hover,
|
||||||
|
.datepicker table tr td span.active.disabled,
|
||||||
|
.datepicker table tr td span.active.disabled:hover {
|
||||||
|
background-color: #006dcc;
|
||||||
|
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
|
||||||
|
background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
|
||||||
|
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
|
||||||
|
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
|
||||||
|
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
|
||||||
|
background-image: linear-gradient(top, #0088cc, #0044cc);
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
|
||||||
|
border-color: #0044cc #0044cc #002a80;
|
||||||
|
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
.datepicker table tr td span.active:hover,
|
||||||
|
.datepicker table tr td span.active:hover:hover,
|
||||||
|
.datepicker table tr td span.active.disabled:hover,
|
||||||
|
.datepicker table tr td span.active.disabled:hover:hover,
|
||||||
|
.datepicker table tr td span.active:active,
|
||||||
|
.datepicker table tr td span.active:hover:active,
|
||||||
|
.datepicker table tr td span.active.disabled:active,
|
||||||
|
.datepicker table tr td span.active.disabled:hover:active,
|
||||||
|
.datepicker table tr td span.active.active,
|
||||||
|
.datepicker table tr td span.active:hover.active,
|
||||||
|
.datepicker table tr td span.active.disabled.active,
|
||||||
|
.datepicker table tr td span.active.disabled:hover.active,
|
||||||
|
.datepicker table tr td span.active.disabled,
|
||||||
|
.datepicker table tr td span.active:hover.disabled,
|
||||||
|
.datepicker table tr td span.active.disabled.disabled,
|
||||||
|
.datepicker table tr td span.active.disabled:hover.disabled,
|
||||||
|
.datepicker table tr td span.active[disabled],
|
||||||
|
.datepicker table tr td span.active:hover[disabled],
|
||||||
|
.datepicker table tr td span.active.disabled[disabled],
|
||||||
|
.datepicker table tr td span.active.disabled:hover[disabled] {
|
||||||
|
background-color: #0044cc;
|
||||||
|
}
|
||||||
|
.datepicker table tr td span.active:active,
|
||||||
|
.datepicker table tr td span.active:hover:active,
|
||||||
|
.datepicker table tr td span.active.disabled:active,
|
||||||
|
.datepicker table tr td span.active.disabled:hover:active,
|
||||||
|
.datepicker table tr td span.active.active,
|
||||||
|
.datepicker table tr td span.active:hover.active,
|
||||||
|
.datepicker table tr td span.active.disabled.active,
|
||||||
|
.datepicker table tr td span.active.disabled:hover.active {
|
||||||
|
background-color: #003399 \9;
|
||||||
|
}
|
||||||
|
.datepicker table tr td span.old,
|
||||||
|
.datepicker table tr td span.new {
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
.datepicker th.datepicker-switch {
|
||||||
|
width: 145px;
|
||||||
|
}
|
||||||
|
.datepicker thead tr:first-child th,
|
||||||
|
.datepicker tfoot tr th {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.datepicker thead tr:first-child th:hover,
|
||||||
|
.datepicker tfoot tr th:hover {
|
||||||
|
background: #eeeeee;
|
||||||
|
}
|
||||||
|
.datepicker .cw {
|
||||||
|
font-size: 10px;
|
||||||
|
width: 12px;
|
||||||
|
padding: 0 2px 0 5px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.datepicker thead tr:first-child th.cw {
|
||||||
|
cursor: default;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.input-append.date .add-on i,
|
||||||
|
.input-prepend.date .add-on i {
|
||||||
|
display: block;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
.input-daterange input {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.input-daterange input:first-child {
|
||||||
|
-webkit-border-radius: 3px 0 0 3px;
|
||||||
|
-moz-border-radius: 3px 0 0 3px;
|
||||||
|
border-radius: 3px 0 0 3px;
|
||||||
|
}
|
||||||
|
.input-daterange input:last-child {
|
||||||
|
-webkit-border-radius: 0 3px 3px 0;
|
||||||
|
-moz-border-radius: 0 3px 3px 0;
|
||||||
|
border-radius: 0 3px 3px 0;
|
||||||
|
}
|
||||||
|
.input-daterange .add-on {
|
||||||
|
display: inline-block;
|
||||||
|
width: auto;
|
||||||
|
min-width: 16px;
|
||||||
|
height: 18px;
|
||||||
|
padding: 4px 5px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 18px;
|
||||||
|
text-align: center;
|
||||||
|
text-shadow: 0 1px 0 #ffffff;
|
||||||
|
vertical-align: middle;
|
||||||
|
background-color: #eeeeee;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
margin-left: -5px;
|
||||||
|
margin-right: -5px;
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 244 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1,117 @@
|
||||||
|
/**
|
||||||
|
* @author: Dennis Hernández
|
||||||
|
* 实现表格拖拽功能
|
||||||
|
* @version: v1.0.1
|
||||||
|
*/
|
||||||
|
(function ($) {
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var isSearch = false;
|
||||||
|
|
||||||
|
var rowAttr = function (row, index) {
|
||||||
|
return {
|
||||||
|
id: 'customId_' + index
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
$.extend($.fn.bootstrapTable.defaults, {
|
||||||
|
reorderableRows: false,
|
||||||
|
onDragStyle: null,
|
||||||
|
onDropStyle: null,
|
||||||
|
onDragClass: "reorder_rows_onDragClass",
|
||||||
|
dragHandle: null,
|
||||||
|
useRowAttrFunc: false,
|
||||||
|
onReorderRowsDrag: function (table, row) {
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
onReorderRowsDrop: function (table, row) {
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
onReorderRow: function (newData) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$.extend($.fn.bootstrapTable.Constructor.EVENTS, {
|
||||||
|
'reorder-row.bs.table': 'onReorderRow'
|
||||||
|
});
|
||||||
|
|
||||||
|
var BootstrapTable = $.fn.bootstrapTable.Constructor,
|
||||||
|
_init = BootstrapTable.prototype.init,
|
||||||
|
_initSearch = BootstrapTable.prototype.initSearch;
|
||||||
|
|
||||||
|
BootstrapTable.prototype.init = function () {
|
||||||
|
|
||||||
|
if (!this.options.reorderableRows) {
|
||||||
|
_init.apply(this, Array.prototype.slice.apply(arguments));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var that = this;
|
||||||
|
if (this.options.useRowAttrFunc) {
|
||||||
|
this.options.rowAttributes = rowAttr;
|
||||||
|
}
|
||||||
|
|
||||||
|
var onPostBody = this.options.onPostBody;
|
||||||
|
this.options.onPostBody = function () {
|
||||||
|
setTimeout(function () {
|
||||||
|
that.makeRowsReorderable();
|
||||||
|
onPostBody.apply();
|
||||||
|
}, 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
_init.apply(this, Array.prototype.slice.apply(arguments));
|
||||||
|
};
|
||||||
|
|
||||||
|
BootstrapTable.prototype.initSearch = function () {
|
||||||
|
_initSearch.apply(this, Array.prototype.slice.apply(arguments));
|
||||||
|
|
||||||
|
if (!this.options.reorderableRows) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
//Known issue after search if you reorder the rows the data is not display properly
|
||||||
|
//isSearch = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
BootstrapTable.prototype.makeRowsReorderable = function () {
|
||||||
|
if (this.options.cardView) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var that = this;
|
||||||
|
this.$el.tableDnD({
|
||||||
|
onDragStyle: that.options.onDragStyle,
|
||||||
|
onDropStyle: that.options.onDropStyle,
|
||||||
|
onDragClass: that.options.onDragClass,
|
||||||
|
onDrop: that.onDrop,
|
||||||
|
onDragStart: that.options.onReorderRowsDrag,
|
||||||
|
dragHandle: that.options.dragHandle
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
BootstrapTable.prototype.onDrop = function (table, droppedRow) {
|
||||||
|
var tableBs = $(table),
|
||||||
|
tableBsData = tableBs.data('bootstrap.table'),
|
||||||
|
tableBsOptions = tableBs.data('bootstrap.table').options,
|
||||||
|
row = null,
|
||||||
|
newData = [];
|
||||||
|
|
||||||
|
for (var i = 0; i < table.tBodies[0].rows.length; i++) {
|
||||||
|
row = $(table.tBodies[0].rows[i]);
|
||||||
|
newData.push(tableBsOptions.data[row.data('index')]);
|
||||||
|
row.data('index', i).attr('data-index', i);
|
||||||
|
}
|
||||||
|
|
||||||
|
tableBsOptions.data = tableBsOptions.data.slice(0, tableBsData.pageFrom - 1)
|
||||||
|
.concat(newData)
|
||||||
|
.concat(tableBsOptions.data.slice(tableBsData.pageTo));
|
||||||
|
|
||||||
|
//Call the user defined function
|
||||||
|
tableBsOptions.onReorderRowsDrop.apply(table, [table, droppedRow]);
|
||||||
|
|
||||||
|
//Call the event reorder-row
|
||||||
|
tableBsData.trigger('reorder-row', newData);
|
||||||
|
};
|
||||||
|
})(jQuery);
|
||||||
|
|
@ -0,0 +1,598 @@
|
||||||
|
/**
|
||||||
|
* TableDnD plug-in for JQuery, allows you to drag and drop table rows
|
||||||
|
* You can set up various options to control how the system will work
|
||||||
|
* Copyright (c) Denis Howlett <denish@isocra.com>
|
||||||
|
* License: MIT.
|
||||||
|
* See https://github.com/isocra/TableDnD
|
||||||
|
*/
|
||||||
|
!function ($, window, document, undefined) {
|
||||||
|
|
||||||
|
var startEvent = 'touchstart mousedown',
|
||||||
|
moveEvent = 'touchmove mousemove',
|
||||||
|
endEvent = 'touchend mouseup';
|
||||||
|
|
||||||
|
$(document).ready(function () {
|
||||||
|
function parseStyle(css) {
|
||||||
|
var objMap = {},
|
||||||
|
parts = css.match(/([^;:]+)/g) || [];
|
||||||
|
while (parts.length)
|
||||||
|
objMap[parts.shift()] = parts.shift().trim();
|
||||||
|
|
||||||
|
return objMap;
|
||||||
|
}
|
||||||
|
$('table').each(function () {
|
||||||
|
if ($(this).data('table') === 'dnd') {
|
||||||
|
|
||||||
|
$(this).tableDnD({
|
||||||
|
onDragStyle: $(this).data('ondragstyle') && parseStyle($(this).data('ondragstyle')) || null,
|
||||||
|
onDropStyle: $(this).data('ondropstyle') && parseStyle($(this).data('ondropstyle')) || null,
|
||||||
|
onDragClass: $(this).data('ondragclass') === undefined && "tDnD_whileDrag" || $(this).data('ondragclass'),
|
||||||
|
onDrop: $(this).data('ondrop') && new Function('table', 'row', $(this).data('ondrop')), // 'return eval("'+$(this).data('ondrop')+'");') || null,
|
||||||
|
onDragStart: $(this).data('ondragstart') && new Function('table', 'row' ,$(this).data('ondragstart')), // 'return eval("'+$(this).data('ondragstart')+'");') || null,
|
||||||
|
onDragStop: $(this).data('ondragstop') && new Function('table', 'row' ,$(this).data('ondragstop')),
|
||||||
|
scrollAmount: $(this).data('scrollamount') || 5,
|
||||||
|
sensitivity: $(this).data('sensitivity') || 10,
|
||||||
|
hierarchyLevel: $(this).data('hierarchylevel') || 0,
|
||||||
|
indentArtifact: $(this).data('indentartifact') || '<div class="indent"> </div>',
|
||||||
|
autoWidthAdjust: $(this).data('autowidthadjust') || true,
|
||||||
|
autoCleanRelations: $(this).data('autocleanrelations') || true,
|
||||||
|
jsonPretifySeparator: $(this).data('jsonpretifyseparator') || '\t',
|
||||||
|
serializeRegexp: $(this).data('serializeregexp') && new RegExp($(this).data('serializeregexp')) || /[^\-]*$/,
|
||||||
|
serializeParamName: $(this).data('serializeparamname') || false,
|
||||||
|
dragHandle: $(this).data('draghandle') || null
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
jQuery.tableDnD = {
|
||||||
|
/** Keep hold of the current table being dragged */
|
||||||
|
currentTable: null,
|
||||||
|
/** Keep hold of the current drag object if any */
|
||||||
|
dragObject: null,
|
||||||
|
/** The current mouse offset */
|
||||||
|
mouseOffset: null,
|
||||||
|
/** Remember the old value of X and Y so that we don't do too much processing */
|
||||||
|
oldX: 0,
|
||||||
|
oldY: 0,
|
||||||
|
|
||||||
|
/** Actually build the structure */
|
||||||
|
build: function(options) {
|
||||||
|
// Set up the defaults if any
|
||||||
|
|
||||||
|
this.each(function() {
|
||||||
|
// This is bound to each matching table, set up the defaults and override with user options
|
||||||
|
this.tableDnDConfig = $.extend({
|
||||||
|
onDragStyle: null,
|
||||||
|
onDropStyle: null,
|
||||||
|
// Add in the default class for whileDragging
|
||||||
|
onDragClass: "tDnD_whileDrag",
|
||||||
|
onDrop: null,
|
||||||
|
onDragStart: null,
|
||||||
|
onDragStop: null,
|
||||||
|
scrollAmount: 5,
|
||||||
|
/** Sensitivity setting will throttle the trigger rate for movement detection */
|
||||||
|
sensitivity: 10,
|
||||||
|
/** Hierarchy level to support parent child. 0 switches this functionality off */
|
||||||
|
hierarchyLevel: 0,
|
||||||
|
/** The html artifact to prepend the first cell with as indentation */
|
||||||
|
indentArtifact: '<div class="indent"> </div>',
|
||||||
|
/** Automatically adjust width of first cell */
|
||||||
|
autoWidthAdjust: true,
|
||||||
|
/** Automatic clean-up to ensure relationship integrity */
|
||||||
|
autoCleanRelations: true,
|
||||||
|
/** Specify a number (4) as number of spaces or any indent string for JSON.stringify */
|
||||||
|
jsonPretifySeparator: '\t',
|
||||||
|
/** The regular expression to use to trim row IDs */
|
||||||
|
serializeRegexp: /[^\-]*$/,
|
||||||
|
/** If you want to specify another parameter name instead of the table ID */
|
||||||
|
serializeParamName: false,
|
||||||
|
/** If you give the name of a class here, then only Cells with this class will be draggable */
|
||||||
|
dragHandle: null
|
||||||
|
}, options || {});
|
||||||
|
|
||||||
|
// Now make the rows draggable
|
||||||
|
$.tableDnD.makeDraggable(this);
|
||||||
|
// Prepare hierarchy support
|
||||||
|
this.tableDnDConfig.hierarchyLevel
|
||||||
|
&& $.tableDnD.makeIndented(this);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Don't break the chain
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
makeIndented: function (table) {
|
||||||
|
var config = table.tableDnDConfig,
|
||||||
|
rows = table.rows,
|
||||||
|
firstCell = $(rows).first().find('td:first')[0],
|
||||||
|
indentLevel = 0,
|
||||||
|
cellWidth = 0,
|
||||||
|
longestCell,
|
||||||
|
tableStyle;
|
||||||
|
|
||||||
|
if ($(table).hasClass('indtd'))
|
||||||
|
return null;
|
||||||
|
|
||||||
|
tableStyle = $(table).addClass('indtd').attr('style');
|
||||||
|
$(table).css({whiteSpace: "nowrap"});
|
||||||
|
|
||||||
|
for (var w = 0; w < rows.length; w++) {
|
||||||
|
if (cellWidth < $(rows[w]).find('td:first').text().length) {
|
||||||
|
cellWidth = $(rows[w]).find('td:first').text().length;
|
||||||
|
longestCell = w;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
$(firstCell).css({width: 'auto'});
|
||||||
|
for (w = 0; w < config.hierarchyLevel; w++)
|
||||||
|
$(rows[longestCell]).find('td:first').prepend(config.indentArtifact);
|
||||||
|
firstCell && $(firstCell).css({width: firstCell.offsetWidth});
|
||||||
|
tableStyle && $(table).css(tableStyle);
|
||||||
|
|
||||||
|
for (w = 0; w < config.hierarchyLevel; w++)
|
||||||
|
$(rows[longestCell]).find('td:first').children(':first').remove();
|
||||||
|
|
||||||
|
config.hierarchyLevel
|
||||||
|
&& $(rows).each(function () {
|
||||||
|
indentLevel = $(this).data('level') || 0;
|
||||||
|
indentLevel <= config.hierarchyLevel
|
||||||
|
&& $(this).data('level', indentLevel)
|
||||||
|
|| $(this).data('level', 0);
|
||||||
|
for (var i = 0; i < $(this).data('level'); i++)
|
||||||
|
$(this).find('td:first').prepend(config.indentArtifact);
|
||||||
|
});
|
||||||
|
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
/** This function makes all the rows on the table draggable apart from those marked as "NoDrag" */
|
||||||
|
makeDraggable: function(table) {
|
||||||
|
var config = table.tableDnDConfig;
|
||||||
|
|
||||||
|
config.dragHandle
|
||||||
|
// We only need to add the event to the specified cells
|
||||||
|
&& $(config.dragHandle, table).each(function() {
|
||||||
|
// The cell is bound to "this"
|
||||||
|
$(this).bind(startEvent, function(e) {
|
||||||
|
$.tableDnD.initialiseDrag($(this).parents('tr')[0], table, this, e, config);
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
})
|
||||||
|
// For backwards compatibility, we add the event to the whole row
|
||||||
|
// get all the rows as a wrapped set
|
||||||
|
|| $(table.rows).each(function() {
|
||||||
|
// Iterate through each row, the row is bound to "this"
|
||||||
|
if (! $(this).hasClass("nodrag")) {
|
||||||
|
$(this).bind(startEvent, function(e) {
|
||||||
|
if (e.target.tagName === "TD" && event.target.className !== "nodrag") {
|
||||||
|
$.tableDnD.initialiseDrag(this, table, this, e, config);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}).css("cursor", "move"); // Store the tableDnD object
|
||||||
|
} else {
|
||||||
|
$(this).css("cursor", ""); // Remove the cursor if we don't have the nodrag class
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
currentOrder: function() {
|
||||||
|
var rows = this.currentTable.rows;
|
||||||
|
return $.map(rows, function (val) {
|
||||||
|
return ($(val).data('level') + val.id).replace(/\s/g, '');
|
||||||
|
}).join('');
|
||||||
|
},
|
||||||
|
initialiseDrag: function(dragObject, table, target, e, config) {
|
||||||
|
this.dragObject = dragObject;
|
||||||
|
this.currentTable = table;
|
||||||
|
this.mouseOffset = this.getMouseOffset(target, e);
|
||||||
|
this.originalOrder = this.currentOrder();
|
||||||
|
|
||||||
|
// Now we need to capture the mouse up and mouse move event
|
||||||
|
// We can use bind so that we don't interfere with other event handlers
|
||||||
|
$(document)
|
||||||
|
.bind(moveEvent, this.mousemove)
|
||||||
|
.bind(endEvent, this.mouseup);
|
||||||
|
|
||||||
|
// Call the onDragStart method if there is one
|
||||||
|
config.onDragStart
|
||||||
|
&& config.onDragStart(table, target);
|
||||||
|
},
|
||||||
|
updateTables: function() {
|
||||||
|
this.each(function() {
|
||||||
|
// this is now bound to each matching table
|
||||||
|
if (this.tableDnDConfig)
|
||||||
|
$.tableDnD.makeDraggable(this);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** Get the mouse coordinates from the event (allowing for browser differences) */
|
||||||
|
mouseCoords: function(e) {
|
||||||
|
if (e.originalEvent.changedTouches)
|
||||||
|
return {
|
||||||
|
x: e.originalEvent.changedTouches[0].clientX,
|
||||||
|
y: e.originalEvent.changedTouches[0].clientY
|
||||||
|
};
|
||||||
|
|
||||||
|
if(e.pageX || e.pageY)
|
||||||
|
return {
|
||||||
|
x: e.pageX,
|
||||||
|
y: e.pageY
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
x: e.clientX + document.body.scrollLeft - document.body.clientLeft,
|
||||||
|
y: e.clientY + document.body.scrollTop - document.body.clientTop
|
||||||
|
};
|
||||||
|
},
|
||||||
|
/** Given a target element and a mouse eent, get the mouse offset from that element.
|
||||||
|
To do this we need the element's position and the mouse position */
|
||||||
|
getMouseOffset: function(target, e) {
|
||||||
|
var mousePos,
|
||||||
|
docPos;
|
||||||
|
|
||||||
|
e = e || window.event;
|
||||||
|
|
||||||
|
docPos = this.getPosition(target);
|
||||||
|
mousePos = this.mouseCoords(e);
|
||||||
|
|
||||||
|
return {
|
||||||
|
x: mousePos.x - docPos.x,
|
||||||
|
y: mousePos.y - docPos.y
|
||||||
|
};
|
||||||
|
},
|
||||||
|
/** Get the position of an element by going up the DOM tree and adding up all the offsets */
|
||||||
|
getPosition: function(element) {
|
||||||
|
var left = 0,
|
||||||
|
top = 0;
|
||||||
|
|
||||||
|
// Safari fix -- thanks to Luis Chato for this!
|
||||||
|
// Safari 2 doesn't correctly grab the offsetTop of a table row
|
||||||
|
// this is detailed here:
|
||||||
|
// http://jacob.peargrove.com/blog/2006/technical/table-row-offsettop-bug-in-safari/
|
||||||
|
// the solution is likewise noted there, grab the offset of a table cell in the row - the firstChild.
|
||||||
|
// note that firefox will return a text node as a first child, so designing a more thorough
|
||||||
|
// solution may need to take that into account, for now this seems to work in firefox, safari, ie
|
||||||
|
if (element.offsetHeight === 0)
|
||||||
|
element = element.firstChild; // a table cell
|
||||||
|
|
||||||
|
while (element.offsetParent) {
|
||||||
|
left += element.offsetLeft;
|
||||||
|
top += element.offsetTop;
|
||||||
|
element = element.offsetParent;
|
||||||
|
}
|
||||||
|
|
||||||
|
left += element.offsetLeft;
|
||||||
|
top += element.offsetTop;
|
||||||
|
|
||||||
|
return {
|
||||||
|
x: left,
|
||||||
|
y: top
|
||||||
|
};
|
||||||
|
},
|
||||||
|
autoScroll: function (mousePos) {
|
||||||
|
var config = this.currentTable.tableDnDConfig,
|
||||||
|
yOffset = window.pageYOffset,
|
||||||
|
windowHeight = window.innerHeight
|
||||||
|
? window.innerHeight
|
||||||
|
: document.documentElement.clientHeight
|
||||||
|
? document.documentElement.clientHeight
|
||||||
|
: document.body.clientHeight;
|
||||||
|
|
||||||
|
// Windows version
|
||||||
|
// yOffset=document.body.scrollTop;
|
||||||
|
if (document.all)
|
||||||
|
if (typeof document.compatMode !== 'undefined'
|
||||||
|
&& document.compatMode !== 'BackCompat')
|
||||||
|
yOffset = document.documentElement.scrollTop;
|
||||||
|
else if (typeof document.body !== 'undefined')
|
||||||
|
yOffset = document.body.scrollTop;
|
||||||
|
|
||||||
|
mousePos.y - yOffset < config.scrollAmount
|
||||||
|
&& window.scrollBy(0, - config.scrollAmount)
|
||||||
|
|| windowHeight - (mousePos.y - yOffset) < config.scrollAmount
|
||||||
|
&& window.scrollBy(0, config.scrollAmount);
|
||||||
|
|
||||||
|
},
|
||||||
|
moveVerticle: function (moving, currentRow) {
|
||||||
|
|
||||||
|
if (0 !== moving.vertical
|
||||||
|
// If we're over a row then move the dragged row to there so that the user sees the
|
||||||
|
// effect dynamically
|
||||||
|
&& currentRow
|
||||||
|
&& this.dragObject !== currentRow
|
||||||
|
&& this.dragObject.parentNode === currentRow.parentNode)
|
||||||
|
0 > moving.vertical
|
||||||
|
&& this.dragObject.parentNode.insertBefore(this.dragObject, currentRow.nextSibling)
|
||||||
|
|| 0 < moving.vertical
|
||||||
|
&& this.dragObject.parentNode.insertBefore(this.dragObject, currentRow);
|
||||||
|
|
||||||
|
},
|
||||||
|
moveHorizontal: function (moving, currentRow) {
|
||||||
|
var config = this.currentTable.tableDnDConfig,
|
||||||
|
currentLevel;
|
||||||
|
|
||||||
|
if (!config.hierarchyLevel
|
||||||
|
|| 0 === moving.horizontal
|
||||||
|
// We only care if moving left or right on the current row
|
||||||
|
|| !currentRow
|
||||||
|
|| this.dragObject !== currentRow)
|
||||||
|
return null;
|
||||||
|
|
||||||
|
currentLevel = $(currentRow).data('level');
|
||||||
|
|
||||||
|
0 < moving.horizontal
|
||||||
|
&& currentLevel > 0
|
||||||
|
&& $(currentRow).find('td:first').children(':first').remove()
|
||||||
|
&& $(currentRow).data('level', --currentLevel);
|
||||||
|
|
||||||
|
0 > moving.horizontal
|
||||||
|
&& currentLevel < config.hierarchyLevel
|
||||||
|
&& $(currentRow).prev().data('level') >= currentLevel
|
||||||
|
&& $(currentRow).children(':first').prepend(config.indentArtifact)
|
||||||
|
&& $(currentRow).data('level', ++currentLevel);
|
||||||
|
|
||||||
|
},
|
||||||
|
mousemove: function(e) {
|
||||||
|
var dragObj = $($.tableDnD.dragObject),
|
||||||
|
config = $.tableDnD.currentTable.tableDnDConfig,
|
||||||
|
currentRow,
|
||||||
|
mousePos,
|
||||||
|
moving,
|
||||||
|
x,
|
||||||
|
y;
|
||||||
|
|
||||||
|
e && e.preventDefault();
|
||||||
|
|
||||||
|
if (!$.tableDnD.dragObject)
|
||||||
|
return false;
|
||||||
|
|
||||||
|
// prevent touch device screen scrolling
|
||||||
|
e.type === 'touchmove'
|
||||||
|
&& event.preventDefault(); // TODO verify this is event and not really e
|
||||||
|
|
||||||
|
// update the style to show we're dragging
|
||||||
|
config.onDragClass
|
||||||
|
&& dragObj.addClass(config.onDragClass)
|
||||||
|
|| dragObj.css(config.onDragStyle);
|
||||||
|
|
||||||
|
mousePos = $.tableDnD.mouseCoords(e);
|
||||||
|
x = mousePos.x - $.tableDnD.mouseOffset.x;
|
||||||
|
y = mousePos.y - $.tableDnD.mouseOffset.y;
|
||||||
|
|
||||||
|
// auto scroll the window
|
||||||
|
$.tableDnD.autoScroll(mousePos);
|
||||||
|
|
||||||
|
currentRow = $.tableDnD.findDropTargetRow(dragObj, y);
|
||||||
|
moving = $.tableDnD.findDragDirection(x, y);
|
||||||
|
|
||||||
|
$.tableDnD.moveVerticle(moving, currentRow);
|
||||||
|
$.tableDnD.moveHorizontal(moving, currentRow);
|
||||||
|
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
findDragDirection: function (x,y) {
|
||||||
|
var sensitivity = this.currentTable.tableDnDConfig.sensitivity,
|
||||||
|
oldX = this.oldX,
|
||||||
|
oldY = this.oldY,
|
||||||
|
xMin = oldX - sensitivity,
|
||||||
|
xMax = oldX + sensitivity,
|
||||||
|
yMin = oldY - sensitivity,
|
||||||
|
yMax = oldY + sensitivity,
|
||||||
|
moving = {
|
||||||
|
horizontal: x >= xMin && x <= xMax ? 0 : x > oldX ? -1 : 1,
|
||||||
|
vertical : y >= yMin && y <= yMax ? 0 : y > oldY ? -1 : 1
|
||||||
|
};
|
||||||
|
|
||||||
|
// update the old value
|
||||||
|
if (moving.horizontal !== 0)
|
||||||
|
this.oldX = x;
|
||||||
|
if (moving.vertical !== 0)
|
||||||
|
this.oldY = y;
|
||||||
|
|
||||||
|
return moving;
|
||||||
|
},
|
||||||
|
/** We're only worried about the y position really, because we can only move rows up and down */
|
||||||
|
findDropTargetRow: function(draggedRow, y) {
|
||||||
|
var rowHeight = 0,
|
||||||
|
rows = this.currentTable.rows,
|
||||||
|
config = this.currentTable.tableDnDConfig,
|
||||||
|
rowY = 0,
|
||||||
|
row = null;
|
||||||
|
|
||||||
|
for (var i = 0; i < rows.length; i++) {
|
||||||
|
row = rows[i];
|
||||||
|
rowY = this.getPosition(row).y;
|
||||||
|
rowHeight = parseInt(row.offsetHeight) / 2;
|
||||||
|
if (row.offsetHeight === 0) {
|
||||||
|
rowY = this.getPosition(row.firstChild).y;
|
||||||
|
rowHeight = parseInt(row.firstChild.offsetHeight) / 2;
|
||||||
|
}
|
||||||
|
// Because we always have to insert before, we need to offset the height a bit
|
||||||
|
if (y > (rowY - rowHeight) && y < (rowY + rowHeight))
|
||||||
|
// that's the row we're over
|
||||||
|
// If it's the same as the current row, ignore it
|
||||||
|
if (draggedRow.is(row)
|
||||||
|
|| (config.onAllowDrop
|
||||||
|
&& !config.onAllowDrop(draggedRow, row))
|
||||||
|
// If a row has nodrop class, then don't allow dropping (inspired by John Tarr and Famic)
|
||||||
|
|| $(row).hasClass("nodrop"))
|
||||||
|
return null;
|
||||||
|
else
|
||||||
|
return row;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
processMouseup: function() {
|
||||||
|
if (!this.currentTable || !this.dragObject)
|
||||||
|
return null;
|
||||||
|
|
||||||
|
var config = this.currentTable.tableDnDConfig,
|
||||||
|
droppedRow = this.dragObject,
|
||||||
|
parentLevel = 0,
|
||||||
|
myLevel = 0;
|
||||||
|
|
||||||
|
// Unbind the event handlers
|
||||||
|
$(document)
|
||||||
|
.unbind(moveEvent, this.mousemove)
|
||||||
|
.unbind(endEvent, this.mouseup);
|
||||||
|
|
||||||
|
config.hierarchyLevel
|
||||||
|
&& config.autoCleanRelations
|
||||||
|
&& $(this.currentTable.rows).first().find('td:first').children().each(function () {
|
||||||
|
myLevel = $(this).parents('tr:first').data('level');
|
||||||
|
myLevel
|
||||||
|
&& $(this).parents('tr:first').data('level', --myLevel)
|
||||||
|
&& $(this).remove();
|
||||||
|
})
|
||||||
|
&& config.hierarchyLevel > 1
|
||||||
|
&& $(this.currentTable.rows).each(function () {
|
||||||
|
myLevel = $(this).data('level');
|
||||||
|
if (myLevel > 1) {
|
||||||
|
parentLevel = $(this).prev().data('level');
|
||||||
|
while (myLevel > parentLevel + 1) {
|
||||||
|
$(this).find('td:first').children(':first').remove();
|
||||||
|
$(this).data('level', --myLevel);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// If we have a dragObject, then we need to release it,
|
||||||
|
// The row will already have been moved to the right place so we just reset stuff
|
||||||
|
config.onDragClass
|
||||||
|
&& $(droppedRow).removeClass(config.onDragClass)
|
||||||
|
|| $(droppedRow).css(config.onDropStyle);
|
||||||
|
|
||||||
|
this.dragObject = null;
|
||||||
|
// Call the onDrop method if there is one
|
||||||
|
config.onDrop
|
||||||
|
&& this.originalOrder !== this.currentOrder()
|
||||||
|
&& $(droppedRow).hide().fadeIn('fast')
|
||||||
|
&& config.onDrop(this.currentTable, droppedRow);
|
||||||
|
|
||||||
|
// Call the onDragStop method if there is one
|
||||||
|
config.onDragStop
|
||||||
|
&& config.onDragStop(this.currentTable, droppedRow);
|
||||||
|
|
||||||
|
this.currentTable = null; // let go of the table too
|
||||||
|
},
|
||||||
|
mouseup: function(e) {
|
||||||
|
e && e.preventDefault();
|
||||||
|
$.tableDnD.processMouseup();
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
jsonize: function(pretify) {
|
||||||
|
var table = this.currentTable;
|
||||||
|
if (pretify)
|
||||||
|
return JSON.stringify(
|
||||||
|
this.tableData(table),
|
||||||
|
null,
|
||||||
|
table.tableDnDConfig.jsonPretifySeparator
|
||||||
|
);
|
||||||
|
return JSON.stringify(this.tableData(table));
|
||||||
|
},
|
||||||
|
serialize: function() {
|
||||||
|
return $.param(this.tableData(this.currentTable));
|
||||||
|
},
|
||||||
|
serializeTable: function(table) {
|
||||||
|
var result = "";
|
||||||
|
var paramName = table.tableDnDConfig.serializeParamName || table.id;
|
||||||
|
var rows = table.rows;
|
||||||
|
for (var i=0; i<rows.length; i++) {
|
||||||
|
if (result.length > 0) result += "&";
|
||||||
|
var rowId = rows[i].id;
|
||||||
|
if (rowId && table.tableDnDConfig && table.tableDnDConfig.serializeRegexp) {
|
||||||
|
rowId = rowId.match(table.tableDnDConfig.serializeRegexp)[0];
|
||||||
|
result += paramName + '[]=' + rowId;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
serializeTables: function() {
|
||||||
|
var result = [];
|
||||||
|
$('table').each(function() {
|
||||||
|
this.id && result.push($.param($.tableDnD.tableData(this)));
|
||||||
|
});
|
||||||
|
return result.join('&');
|
||||||
|
},
|
||||||
|
tableData: function (table) {
|
||||||
|
var config = table.tableDnDConfig,
|
||||||
|
previousIDs = [],
|
||||||
|
currentLevel = 0,
|
||||||
|
indentLevel = 0,
|
||||||
|
rowID = null,
|
||||||
|
data = {},
|
||||||
|
getSerializeRegexp,
|
||||||
|
paramName,
|
||||||
|
currentID,
|
||||||
|
rows;
|
||||||
|
|
||||||
|
if (!table)
|
||||||
|
table = this.currentTable;
|
||||||
|
if (!table || !table.rows || !table.rows.length)
|
||||||
|
return {error: { code: 500, message: "Not a valid table."}};
|
||||||
|
if (!table.id && !config.serializeParamName)
|
||||||
|
return {error: { code: 500, message: "No serializable unique id provided."}};
|
||||||
|
|
||||||
|
rows = config.autoCleanRelations
|
||||||
|
&& table.rows
|
||||||
|
|| $.makeArray(table.rows);
|
||||||
|
paramName = config.serializeParamName || table.id;
|
||||||
|
currentID = paramName;
|
||||||
|
|
||||||
|
getSerializeRegexp = function (rowId) {
|
||||||
|
if (rowId && config && config.serializeRegexp)
|
||||||
|
return rowId.match(config.serializeRegexp)[0];
|
||||||
|
return rowId;
|
||||||
|
};
|
||||||
|
|
||||||
|
data[currentID] = [];
|
||||||
|
!config.autoCleanRelations
|
||||||
|
&& $(rows[0]).data('level')
|
||||||
|
&& rows.unshift({id: 'undefined'});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
for (var i=0; i < rows.length; i++) {
|
||||||
|
if (config.hierarchyLevel) {
|
||||||
|
indentLevel = $(rows[i]).data('level') || 0;
|
||||||
|
if (indentLevel === 0) {
|
||||||
|
currentID = paramName;
|
||||||
|
previousIDs = [];
|
||||||
|
}
|
||||||
|
else if (indentLevel > currentLevel) {
|
||||||
|
previousIDs.push([currentID, currentLevel]);
|
||||||
|
currentID = getSerializeRegexp(rows[i-1].id);
|
||||||
|
}
|
||||||
|
else if (indentLevel < currentLevel) {
|
||||||
|
for (var h = 0; h < previousIDs.length; h++) {
|
||||||
|
if (previousIDs[h][1] === indentLevel)
|
||||||
|
currentID = previousIDs[h][0];
|
||||||
|
if (previousIDs[h][1] >= currentLevel)
|
||||||
|
previousIDs[h][1] = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
currentLevel = indentLevel;
|
||||||
|
|
||||||
|
if (!$.isArray(data[currentID]))
|
||||||
|
data[currentID] = [];
|
||||||
|
rowID = getSerializeRegexp(rows[i].id);
|
||||||
|
rowID && data[currentID].push(rowID);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
rowID = getSerializeRegexp(rows[i].id);
|
||||||
|
rowID && data[currentID].push(rowID);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
jQuery.fn.extend(
|
||||||
|
{
|
||||||
|
tableDnD : $.tableDnD.build,
|
||||||
|
tableDnDUpdate : $.tableDnD.updateTables,
|
||||||
|
tableDnDSerialize : $.proxy($.tableDnD.serialize, $.tableDnD),
|
||||||
|
tableDnDSerializeAll : $.tableDnD.serializeTables,
|
||||||
|
tableDnDData : $.proxy($.tableDnD.tableData, $.tableDnD)
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
}(jQuery, window, window.document);
|
||||||
|
|
@ -0,0 +1,304 @@
|
||||||
|
/*!
|
||||||
|
* Cropper.js v1.5.7
|
||||||
|
* https://fengyuanchen.github.io/cropperjs
|
||||||
|
*
|
||||||
|
* Copyright 2015-present Chen Fengyuan
|
||||||
|
* Released under the MIT license
|
||||||
|
*
|
||||||
|
* Date: 2020-05-23T05:22:57.283Z
|
||||||
|
*/
|
||||||
|
|
||||||
|
.cropper-container {
|
||||||
|
direction: ltr;
|
||||||
|
font-size: 0;
|
||||||
|
line-height: 0;
|
||||||
|
position: relative;
|
||||||
|
-ms-touch-action: none;
|
||||||
|
touch-action: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-container img {
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
image-orientation: 0deg;
|
||||||
|
max-height: none !important;
|
||||||
|
max-width: none !important;
|
||||||
|
min-height: 0 !important;
|
||||||
|
min-width: 0 !important;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-wrap-box,
|
||||||
|
.cropper-canvas,
|
||||||
|
.cropper-drag-box,
|
||||||
|
.cropper-crop-box,
|
||||||
|
.cropper-modal {
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-wrap-box,
|
||||||
|
.cropper-canvas {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-drag-box {
|
||||||
|
background-color: #fff;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-modal {
|
||||||
|
background-color: #000;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-view-box {
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
outline: 1px solid #39f;
|
||||||
|
outline-color: rgba(51, 153, 255, 0.75);
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-dashed {
|
||||||
|
border: 0 dashed #eee;
|
||||||
|
display: block;
|
||||||
|
opacity: 0.5;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-dashed.dashed-h {
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
border-top-width: 1px;
|
||||||
|
height: calc(100% / 3);
|
||||||
|
left: 0;
|
||||||
|
top: calc(100% / 3);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-dashed.dashed-v {
|
||||||
|
border-left-width: 1px;
|
||||||
|
border-right-width: 1px;
|
||||||
|
height: 100%;
|
||||||
|
left: calc(100% / 3);
|
||||||
|
top: 0;
|
||||||
|
width: calc(100% / 3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-center {
|
||||||
|
display: block;
|
||||||
|
height: 0;
|
||||||
|
left: 50%;
|
||||||
|
opacity: 0.75;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-center::before,
|
||||||
|
.cropper-center::after {
|
||||||
|
background-color: #eee;
|
||||||
|
content: ' ';
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-center::before {
|
||||||
|
height: 1px;
|
||||||
|
left: -3px;
|
||||||
|
top: 0;
|
||||||
|
width: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-center::after {
|
||||||
|
height: 7px;
|
||||||
|
left: 0;
|
||||||
|
top: -3px;
|
||||||
|
width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-face,
|
||||||
|
.cropper-line,
|
||||||
|
.cropper-point {
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 0.1;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-face {
|
||||||
|
background-color: #fff;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-line {
|
||||||
|
background-color: #39f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-line.line-e {
|
||||||
|
cursor: ew-resize;
|
||||||
|
right: -3px;
|
||||||
|
top: 0;
|
||||||
|
width: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-line.line-n {
|
||||||
|
cursor: ns-resize;
|
||||||
|
height: 5px;
|
||||||
|
left: 0;
|
||||||
|
top: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-line.line-w {
|
||||||
|
cursor: ew-resize;
|
||||||
|
left: -3px;
|
||||||
|
top: 0;
|
||||||
|
width: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-line.line-s {
|
||||||
|
bottom: -3px;
|
||||||
|
cursor: ns-resize;
|
||||||
|
height: 5px;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-point {
|
||||||
|
background-color: #39f;
|
||||||
|
height: 5px;
|
||||||
|
opacity: 0.75;
|
||||||
|
width: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-point.point-e {
|
||||||
|
cursor: ew-resize;
|
||||||
|
margin-top: -3px;
|
||||||
|
right: -3px;
|
||||||
|
top: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-point.point-n {
|
||||||
|
cursor: ns-resize;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -3px;
|
||||||
|
top: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-point.point-w {
|
||||||
|
cursor: ew-resize;
|
||||||
|
left: -3px;
|
||||||
|
margin-top: -3px;
|
||||||
|
top: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-point.point-s {
|
||||||
|
bottom: -3px;
|
||||||
|
cursor: s-resize;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-point.point-ne {
|
||||||
|
cursor: nesw-resize;
|
||||||
|
right: -3px;
|
||||||
|
top: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-point.point-nw {
|
||||||
|
cursor: nwse-resize;
|
||||||
|
left: -3px;
|
||||||
|
top: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-point.point-sw {
|
||||||
|
bottom: -3px;
|
||||||
|
cursor: nesw-resize;
|
||||||
|
left: -3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-point.point-se {
|
||||||
|
bottom: -3px;
|
||||||
|
cursor: nwse-resize;
|
||||||
|
height: 20px;
|
||||||
|
opacity: 1;
|
||||||
|
right: -3px;
|
||||||
|
width: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.cropper-point.point-se {
|
||||||
|
height: 15px;
|
||||||
|
width: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.cropper-point.point-se {
|
||||||
|
height: 10px;
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.cropper-point.point-se {
|
||||||
|
height: 5px;
|
||||||
|
opacity: 0.75;
|
||||||
|
width: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-point.point-se::before {
|
||||||
|
background-color: #39f;
|
||||||
|
bottom: -50%;
|
||||||
|
content: ' ';
|
||||||
|
display: block;
|
||||||
|
height: 200%;
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
right: -50%;
|
||||||
|
width: 200%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-invisible {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-bg {
|
||||||
|
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-hide {
|
||||||
|
display: block;
|
||||||
|
height: 0;
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-hidden {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-move {
|
||||||
|
cursor: move;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-crop {
|
||||||
|
cursor: crosshair;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cropper-disabled .cropper-drag-box,
|
||||||
|
.cropper-disabled .cropper-face,
|
||||||
|
.cropper-disabled .cropper-line,
|
||||||
|
.cropper-disabled .cropper-point {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,9 @@
|
||||||
|
/*!
|
||||||
|
* Cropper.js v1.5.7
|
||||||
|
* https://fengyuanchen.github.io/cropperjs
|
||||||
|
*
|
||||||
|
* Copyright 2015-present Chen Fengyuan
|
||||||
|
* Released under the MIT license
|
||||||
|
*
|
||||||
|
* Date: 2020-05-23T05:22:57.283Z
|
||||||
|
*/.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.75);overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,406 @@
|
||||||
|
/*!
|
||||||
|
* jQuery cxSelect
|
||||||
|
* @name jquery.cxselect.js
|
||||||
|
* @version 1.4.2
|
||||||
|
* @date 2017-09-26
|
||||||
|
* @author ciaoca
|
||||||
|
* @email ciaoca@gmail.com
|
||||||
|
* @site https://github.com/ciaoca/cxSelect
|
||||||
|
* @license Released under the MIT license
|
||||||
|
*/
|
||||||
|
(function(factory) {
|
||||||
|
if (typeof define === 'function' && define.amd) {
|
||||||
|
define(['jquery'], factory);
|
||||||
|
} else {
|
||||||
|
factory(window.jQuery || window.Zepto || window.$);
|
||||||
|
};
|
||||||
|
}(function($) {
|
||||||
|
var cxSelect = function() {
|
||||||
|
var self = this;
|
||||||
|
var dom, settings, callback;
|
||||||
|
|
||||||
|
// 分配参数
|
||||||
|
for (var i = 0, l = arguments.length; i < l; i++) {
|
||||||
|
if (cxSelect.isJquery(arguments[i]) || cxSelect.isZepto(arguments[i])) {
|
||||||
|
dom = arguments[i];
|
||||||
|
} else if (cxSelect.isElement(arguments[i])) {
|
||||||
|
dom = $(arguments[i]);
|
||||||
|
} else if (typeof arguments[i] === 'function') {
|
||||||
|
callback = arguments[i];
|
||||||
|
} else if (typeof arguments[i] === 'object') {
|
||||||
|
settings = arguments[i];
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
var api = new cxSelect.init(dom, settings);
|
||||||
|
|
||||||
|
if (typeof callback === 'function') {
|
||||||
|
callback(api);
|
||||||
|
};
|
||||||
|
|
||||||
|
return api;
|
||||||
|
};
|
||||||
|
|
||||||
|
cxSelect.isElement = function(o){
|
||||||
|
if (o && (typeof HTMLElement === 'function' || typeof HTMLElement === 'object') && o instanceof HTMLElement) {
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
return (o && o.nodeType && o.nodeType === 1) ? true : false;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
cxSelect.isJquery = function(o){
|
||||||
|
return (o && o.length && (typeof jQuery === 'function' || typeof jQuery === 'object') && o instanceof jQuery) ? true : false;
|
||||||
|
};
|
||||||
|
|
||||||
|
cxSelect.isZepto = function(o){
|
||||||
|
return (o && o.length && (typeof Zepto === 'function' || typeof Zepto === 'object') && Zepto.zepto.isZ(o)) ? true : false;
|
||||||
|
};
|
||||||
|
|
||||||
|
cxSelect.getIndex = function(n, required) {
|
||||||
|
return required ? n : n - 1;
|
||||||
|
};
|
||||||
|
|
||||||
|
cxSelect.getData = function(data, space) {
|
||||||
|
if (typeof space === 'string' && space.length) {
|
||||||
|
space = space.split('.');
|
||||||
|
for (var i = 0, l = space.length; i < l; i++) {
|
||||||
|
data = data[space[i]];
|
||||||
|
};
|
||||||
|
};
|
||||||
|
return data;
|
||||||
|
};
|
||||||
|
|
||||||
|
cxSelect.init = function(dom, settings) {
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
if (!cxSelect.isJquery(dom) && !cxSelect.isZepto(dom)) {return};
|
||||||
|
|
||||||
|
var theSelect = {
|
||||||
|
dom: {
|
||||||
|
box: dom
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
self.attach = cxSelect.attach.bind(theSelect);
|
||||||
|
self.detach = cxSelect.detach.bind(theSelect);
|
||||||
|
self.setOptions = cxSelect.setOptions.bind(theSelect);
|
||||||
|
self.clear = cxSelect.clear.bind(theSelect);
|
||||||
|
|
||||||
|
theSelect.changeEvent = function() {
|
||||||
|
cxSelect.selectChange.call(theSelect, this.className);
|
||||||
|
};
|
||||||
|
|
||||||
|
theSelect.settings = $.extend({}, $.cxSelect.defaults, settings, {
|
||||||
|
url: theSelect.dom.box.data('url'),
|
||||||
|
emptyStyle: theSelect.dom.box.data('emptyStyle'),
|
||||||
|
required: theSelect.dom.box.data('required'),
|
||||||
|
firstTitle: theSelect.dom.box.data('firstTitle'),
|
||||||
|
firstValue: theSelect.dom.box.data('firstValue'),
|
||||||
|
jsonSpace: theSelect.dom.box.data('jsonSpace'),
|
||||||
|
jsonName: theSelect.dom.box.data('jsonName'),
|
||||||
|
jsonValue: theSelect.dom.box.data('jsonValue'),
|
||||||
|
jsonSub: theSelect.dom.box.data('jsonSub')
|
||||||
|
});
|
||||||
|
|
||||||
|
var _dataSelects = theSelect.dom.box.data('selects');
|
||||||
|
|
||||||
|
if (typeof _dataSelects === 'string' && _dataSelects.length) {
|
||||||
|
theSelect.settings.selects = _dataSelects.split(',');
|
||||||
|
};
|
||||||
|
|
||||||
|
self.setOptions();
|
||||||
|
self.attach();
|
||||||
|
|
||||||
|
// 使用独立接口获取数据
|
||||||
|
if (!theSelect.settings.url && !theSelect.settings.data) {
|
||||||
|
cxSelect.start.apply(theSelect);
|
||||||
|
|
||||||
|
// 设置自定义数据
|
||||||
|
} else if ($.isArray(theSelect.settings.data)) {
|
||||||
|
cxSelect.start.call(theSelect, theSelect.settings.data);
|
||||||
|
|
||||||
|
// 设置 URL，通过 Ajax 获取数据
|
||||||
|
} else if (typeof theSelect.settings.url === 'string' && theSelect.settings.url.length) {
|
||||||
|
$.getJSON(theSelect.settings.url, function(json) {
|
||||||
|
cxSelect.start.call(theSelect, json);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// 设置参数
|
||||||
|
cxSelect.setOptions = function(opts) {
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
if (opts) {
|
||||||
|
$.extend(self.settings, opts);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 初次或重设选择器组
|
||||||
|
if (!$.isArray(self.selectArray) || !self.selectArray.length || (opts && opts.selects)) {
|
||||||
|
self.selectArray = [];
|
||||||
|
|
||||||
|
if ($.isArray(self.settings.selects) && self.settings.selects.length) {
|
||||||
|
var _tempSelect;
|
||||||
|
|
||||||
|
for (var i = 0, l = self.settings.selects.length; i < l; i++) {
|
||||||
|
_tempSelect = self.dom.box.find('select.' + self.settings.selects[i]);
|
||||||
|
|
||||||
|
if (!_tempSelect || !_tempSelect.length) {break};
|
||||||
|
|
||||||
|
self.selectArray.push(_tempSelect);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
if (opts) {
|
||||||
|
if (!$.isArray(opts.data) && typeof opts.url === 'string' && opts.url.length) {
|
||||||
|
$.getJSON(self.settings.url, function(json) {
|
||||||
|
cxSelect.start.call(self, json);
|
||||||
|
});
|
||||||
|
|
||||||
|
} else {
|
||||||
|
cxSelect.start.call(self, opts.data);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// 绑定
|
||||||
|
cxSelect.attach = function() {
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
if (!self.attachStatus) {
|
||||||
|
self.dom.box.on('change', 'select', self.changeEvent);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof self.attachStatus === 'boolean') {
|
||||||
|
cxSelect.start.call(self);
|
||||||
|
};
|
||||||
|
|
||||||
|
self.attachStatus = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 移除绑定
|
||||||
|
cxSelect.detach = function() {
|
||||||
|
var self = this;
|
||||||
|
self.dom.box.off('change', 'select', self.changeEvent);
|
||||||
|
self.attachStatus = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 清空选项
|
||||||
|
cxSelect.clear = function(index) {
|
||||||
|
var self = this;
|
||||||
|
var _style = {
|
||||||
|
display: '',
|
||||||
|
visibility: ''
|
||||||
|
};
|
||||||
|
|
||||||
|
index = isNaN(index) ? 0 : index;
|
||||||
|
|
||||||
|
// 清空后面的 select
|
||||||
|
for (var i = index, l = self.selectArray.length; i < l; i++) {
|
||||||
|
self.selectArray[i].empty().prop('disabled', true);
|
||||||
|
|
||||||
|
if (self.settings.emptyStyle === 'none') {
|
||||||
|
_style.display = 'none';
|
||||||
|
} else if (self.settings.emptyStyle === 'hidden') {
|
||||||
|
_style.visibility = 'hidden';
|
||||||
|
};
|
||||||
|
|
||||||
|
self.selectArray[i].css(_style);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
cxSelect.start = function(data) {
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
if ($.isArray(data)) {
|
||||||
|
self.settings.data = cxSelect.getData(data, self.settings.jsonSpace);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!self.selectArray.length) {return};
|
||||||
|
|
||||||
|
// 保存默认值
|
||||||
|
for (var i = 0, l = self.selectArray.length; i < l; i++) {
|
||||||
|
if (typeof self.selectArray[i].attr('data-value') !== 'string' && self.selectArray[i][0].options.length) {
|
||||||
|
self.selectArray[i].attr('data-value', self.selectArray[i].val());
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
if (self.settings.data || (typeof self.selectArray[0].data('url') === 'string' && self.selectArray[0].data('url').length)) {
|
||||||
|
cxSelect.getOptionData.call(self, 0);
|
||||||
|
} else if (self.selectArray[0][0].options.length && typeof self.selectArray[0].attr('data-value') === 'string' && self.selectArray[0].attr('data-value').length) {
|
||||||
|
self.selectArray[0].val(self.selectArray[0].attr('data-value'));
|
||||||
|
cxSelect.getOptionData.call(self, 1);
|
||||||
|
} else {
|
||||||
|
self.selectArray[0].prop('disabled', false).css({
|
||||||
|
'display': '',
|
||||||
|
'visibility': ''
|
||||||
|
});
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取选项数据
|
||||||
|
cxSelect.getOptionData = function(index) {
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
if (typeof index !== 'number' || isNaN(index) || index < 0 || index >= self.selectArray.length) {return};
|
||||||
|
|
||||||
|
var _indexPrev = index - 1;
|
||||||
|
var _select = self.selectArray[index];
|
||||||
|
var _selectData;
|
||||||
|
var _valueIndex;
|
||||||
|
var _dataUrl = _select.data('url');
|
||||||
|
var _jsonSpace = typeof _select.data('jsonSpace') === 'undefined' ? self.settings.jsonSpace : _select.data('jsonSpace');
|
||||||
|
var _query = {};
|
||||||
|
var _queryName;
|
||||||
|
var _selectName;
|
||||||
|
var _selectValue;
|
||||||
|
|
||||||
|
cxSelect.clear.call(self, index);
|
||||||
|
|
||||||
|
// 使用独立接口
|
||||||
|
if (typeof _dataUrl === 'string' && _dataUrl.length) {
|
||||||
|
if (index > 0) {
|
||||||
|
for (var i = 0, j = 1; i < index; i++, j++) {
|
||||||
|
_queryName = self.selectArray[j].data('queryName');
|
||||||
|
_selectName = self.selectArray[i].attr('name');
|
||||||
|
_selectValue = self.selectArray[i].val();
|
||||||
|
|
||||||
|
if (typeof _queryName === 'string' && _queryName.length) {
|
||||||
|
_query[_queryName] = _selectValue;
|
||||||
|
} else if (typeof _selectName === 'string' && _selectName.length) {
|
||||||
|
_query[_selectName] = _selectValue;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
$.getJSON(_dataUrl, _query, function(json) {
|
||||||
|
_selectData = cxSelect.getData(json, _jsonSpace);
|
||||||
|
|
||||||
|
cxSelect.buildOption.call(self, index, _selectData);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 使用整合数据
|
||||||
|
} else if (self.settings.data && typeof self.settings.data === 'object') {
|
||||||
|
_selectData = self.settings.data;
|
||||||
|
|
||||||
|
for (var i = 0; i < index; i++) {
|
||||||
|
_valueIndex = cxSelect.getIndex(self.selectArray[i][0].selectedIndex, typeof self.selectArray[i].data('required') === 'boolean' ? self.selectArray[i].data('required') : self.settings.required);
|
||||||
|
|
||||||
|
if (typeof _selectData[_valueIndex] === 'object' && $.isArray(_selectData[_valueIndex][self.settings.jsonSub]) && _selectData[_valueIndex][self.settings.jsonSub].length) {
|
||||||
|
_selectData = _selectData[_valueIndex][self.settings.jsonSub];
|
||||||
|
} else {
|
||||||
|
_selectData = null;
|
||||||
|
break;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
cxSelect.buildOption.call(self, index, _selectData);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// 构建选项列表
|
||||||
|
cxSelect.buildOption = function(index, data) {
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
var _select = self.selectArray[index];
|
||||||
|
var _required = typeof _select.data('required') === 'boolean' ? _select.data('required') : self.settings.required;
|
||||||
|
var _firstTitle = typeof _select.data('firstTitle') === 'undefined' ? self.settings.firstTitle : _select.data('firstTitle');
|
||||||
|
var _firstValue = typeof _select.data('firstValue') === 'undefined' ? self.settings.firstValue : _select.data('firstValue');
|
||||||
|
var _jsonName = typeof _select.data('jsonName') === 'undefined' ? self.settings.jsonName : _select.data('jsonName');
|
||||||
|
var _jsonValue = typeof _select.data('jsonValue') === 'undefined' ? self.settings.jsonValue : _select.data('jsonValue');
|
||||||
|
|
||||||
|
if (!$.isArray(data)) {return};
|
||||||
|
|
||||||
|
var _html = !_required ? '<option value="' + String(_firstValue) + '">' + String(_firstTitle) + '</option>' : '';
|
||||||
|
|
||||||
|
// 区分标题、值的数据
|
||||||
|
if (typeof _jsonName === 'string' && _jsonName.length) {
|
||||||
|
// 无值字段时使用标题作为值
|
||||||
|
if (typeof _jsonValue !== 'string' || !_jsonValue.length) {
|
||||||
|
_jsonValue = _jsonName;
|
||||||
|
};
|
||||||
|
|
||||||
|
for (var i = 0, l = data.length; i < l; i++) {
|
||||||
|
_html += '<option value="' + String(data[i][_jsonValue]) + '">' + String(data[i][_jsonName]) + '</option>';
|
||||||
|
};
|
||||||
|
|
||||||
|
// 数组即为值的数据
|
||||||
|
} else {
|
||||||
|
for (var i = 0, l = data.length; i < l; i++) {
|
||||||
|
_html += '<option value="' + String(data[i]) + '">' + String(data[i]) + '</option>';
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
_select.html(_html).prop('disabled', false).css({
|
||||||
|
'display': '',
|
||||||
|
'visibility': ''
|
||||||
|
});
|
||||||
|
|
||||||
|
// 初次加载设置默认值
|
||||||
|
if (typeof _select.attr('data-value') === 'string') {
|
||||||
|
_select.val(String(_select.attr('data-value'))).removeAttr('data-value');
|
||||||
|
|
||||||
|
if (_select[0].selectedIndex < 0) {
|
||||||
|
_select[0].options[0].selected = true;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
if (_required || _select[0].selectedIndex > 0) {
|
||||||
|
_select.trigger('change');
|
||||||
|
};
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
// 改变选择时的处理
|
||||||
|
cxSelect.selectChange = function(name) {
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
if (typeof name !== 'string' || !name.length) {return};
|
||||||
|
|
||||||
|
var index;
|
||||||
|
|
||||||
|
name = name.replace(/\s+/g, ',');
|
||||||
|
name = ',' + name + ',';
|
||||||
|
|
||||||
|
// 获取当前 select 位置
|
||||||
|
for (var i = 0, l = self.selectArray.length; i < l; i++) {
|
||||||
|
if (name.indexOf(',' + self.settings.selects[i] + ',') > -1) {
|
||||||
|
index = i;
|
||||||
|
break;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof index === 'number' && index > -1) {
|
||||||
|
index += 1;
|
||||||
|
cxSelect.getOptionData.call(self, index);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
$.cxSelect = function() {
|
||||||
|
return cxSelect.apply(this, arguments);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 默认值
|
||||||
|
$.cxSelect.defaults = {
|
||||||
|
selects: [], // 下拉选框组
|
||||||
|
url: null, // 列表数据文件路径（URL）或数组数据
|
||||||
|
data: null, // 自定义数据
|
||||||
|
emptyStyle: null, // 无数据状态显示方式
|
||||||
|
required: false, // 是否为必选
|
||||||
|
firstTitle: '请选择', // 第一个选项的标题
|
||||||
|
firstValue: '', // 第一个选项的值
|
||||||
|
jsonSpace: '', // 数据命名空间
|
||||||
|
jsonName: 'n', // 数据标题字段名称
|
||||||
|
jsonValue: '', // 数据值字段名称
|
||||||
|
jsonSub: 's' // 子集数据字段名称
|
||||||
|
};
|
||||||
|
|
||||||
|
$.fn.cxSelect = function(settings, callback) {
|
||||||
|
this.each(function(i) {
|
||||||
|
$.cxSelect(this, settings, callback);
|
||||||
|
});
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
}));
|
||||||
11
ruoyi-admin/src/main/resources/static/ajax/libs/cxselect/jquery.cxselect.min.js
vendored
Normal file
11
ruoyi-admin/src/main/resources/static/ajax/libs/cxselect/jquery.cxselect.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
418
ruoyi-admin/src/main/resources/static/ajax/libs/datapicker/bootstrap-datetimepicker.css
vendored
Normal file
418
ruoyi-admin/src/main/resources/static/ajax/libs/datapicker/bootstrap-datetimepicker.css
vendored
Normal file
|
|
@ -0,0 +1,418 @@
|
||||||
|
/*!
|
||||||
|
* Datetimepicker for Bootstrap
|
||||||
|
*
|
||||||
|
* Copyright 2012 Stefan Petre
|
||||||
|
* Improvements by Andrew Rowls
|
||||||
|
* Licensed under the Apache License v2.0
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
.datetimepicker {
|
||||||
|
padding: 4px;
|
||||||
|
margin-top: 1px;
|
||||||
|
-webkit-border-radius: 4px;
|
||||||
|
-moz-border-radius: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
direction: ltr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker-inline {
|
||||||
|
width: 220px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker.datetimepicker-rtl {
|
||||||
|
direction: rtl;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker.datetimepicker-rtl table tr td span {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker-dropdown, .datetimepicker-dropdown-left {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*=" datetimepicker-dropdown"]:before {
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
border-left: 7px solid transparent;
|
||||||
|
border-right: 7px solid transparent;
|
||||||
|
border-bottom: 7px solid #cccccc;
|
||||||
|
border-bottom-color: rgba(0, 0, 0, 0.2);
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*=" datetimepicker-dropdown"]:after {
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
border-left: 6px solid transparent;
|
||||||
|
border-right: 6px solid transparent;
|
||||||
|
border-bottom: 6px solid #ffffff;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*=" datetimepicker-dropdown-top"]:before {
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
border-left: 7px solid transparent;
|
||||||
|
border-right: 7px solid transparent;
|
||||||
|
border-top: 7px solid #cccccc;
|
||||||
|
border-top-color: rgba(0, 0, 0, 0.2);
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*=" datetimepicker-dropdown-top"]:after {
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
border-left: 6px solid transparent;
|
||||||
|
border-right: 6px solid transparent;
|
||||||
|
border-top: 6px solid #ffffff;
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker-dropdown-bottom-left:before {
|
||||||
|
top: -7px;
|
||||||
|
right: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker-dropdown-bottom-left:after {
|
||||||
|
top: -6px;
|
||||||
|
right: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker-dropdown-bottom-right:before {
|
||||||
|
top: -7px;
|
||||||
|
left: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker-dropdown-bottom-right:after {
|
||||||
|
top: -6px;
|
||||||
|
left: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker-dropdown-top-left:before {
|
||||||
|
bottom: -7px;
|
||||||
|
right: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker-dropdown-top-left:after {
|
||||||
|
bottom: -6px;
|
||||||
|
right: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker-dropdown-top-right:before {
|
||||||
|
bottom: -7px;
|
||||||
|
left: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker-dropdown-top-right:after {
|
||||||
|
bottom: -6px;
|
||||||
|
left: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker > div {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker.minutes div.datetimepicker-minutes {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker.hours div.datetimepicker-hours {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker.days div.datetimepicker-days {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker.months div.datetimepicker-months {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker.years div.datetimepicker-years {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker table {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker td,
|
||||||
|
.datetimepicker th {
|
||||||
|
text-align: center;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
-webkit-border-radius: 4px;
|
||||||
|
-moz-border-radius: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-striped .datetimepicker table tr td,
|
||||||
|
.table-striped .datetimepicker table tr th {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker table tr td.minute:hover {
|
||||||
|
background: #eeeeee;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker table tr td.hour:hover {
|
||||||
|
background: #eeeeee;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker table tr td.day:hover {
|
||||||
|
background: #eeeeee;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker table tr td.old,
|
||||||
|
.datetimepicker table tr td.new {
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker table tr td.disabled,
|
||||||
|
.datetimepicker table tr td.disabled:hover {
|
||||||
|
background: none;
|
||||||
|
color: #999999;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker table tr td.today,
|
||||||
|
.datetimepicker table tr td.today:hover,
|
||||||
|
.datetimepicker table tr td.today.disabled,
|
||||||
|
.datetimepicker table tr td.today.disabled:hover {
|
||||||
|
background-color: #fde19a;
|
||||||
|
background-image: -moz-linear-gradient(top, #fdd49a, #fdf59a);
|
||||||
|
background-image: -ms-linear-gradient(top, #fdd49a, #fdf59a);
|
||||||
|
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
|
||||||
|
background-image: -webkit-linear-gradient(top, #fdd49a, #fdf59a);
|
||||||
|
background-image: -o-linear-gradient(top, #fdd49a, #fdf59a);
|
||||||
|
background-image: linear-gradient(to bottom, #fdd49a, #fdf59a);
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
|
||||||
|
border-color: #fdf59a #fdf59a #fbed50;
|
||||||
|
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker table tr td.today:hover,
|
||||||
|
.datetimepicker table tr td.today:hover:hover,
|
||||||
|
.datetimepicker table tr td.today.disabled:hover,
|
||||||
|
.datetimepicker table tr td.today.disabled:hover:hover,
|
||||||
|
.datetimepicker table tr td.today:active,
|
||||||
|
.datetimepicker table tr td.today:hover:active,
|
||||||
|
.datetimepicker table tr td.today.disabled:active,
|
||||||
|
.datetimepicker table tr td.today.disabled:hover:active,
|
||||||
|
.datetimepicker table tr td.today.active,
|
||||||
|
.datetimepicker table tr td.today:hover.active,
|
||||||
|
.datetimepicker table tr td.today.disabled.active,
|
||||||
|
.datetimepicker table tr td.today.disabled:hover.active,
|
||||||
|
.datetimepicker table tr td.today.disabled,
|
||||||
|
.datetimepicker table tr td.today:hover.disabled,
|
||||||
|
.datetimepicker table tr td.today.disabled.disabled,
|
||||||
|
.datetimepicker table tr td.today.disabled:hover.disabled,
|
||||||
|
.datetimepicker table tr td.today[disabled],
|
||||||
|
.datetimepicker table tr td.today:hover[disabled],
|
||||||
|
.datetimepicker table tr td.today.disabled[disabled],
|
||||||
|
.datetimepicker table tr td.today.disabled:hover[disabled] {
|
||||||
|
background-color: #fdf59a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker table tr td.today:active,
|
||||||
|
.datetimepicker table tr td.today:hover:active,
|
||||||
|
.datetimepicker table tr td.today.disabled:active,
|
||||||
|
.datetimepicker table tr td.today.disabled:hover:active,
|
||||||
|
.datetimepicker table tr td.today.active,
|
||||||
|
.datetimepicker table tr td.today:hover.active,
|
||||||
|
.datetimepicker table tr td.today.disabled.active,
|
||||||
|
.datetimepicker table tr td.today.disabled:hover.active {
|
||||||
|
background-color: #fbf069;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker table tr td.active,
|
||||||
|
.datetimepicker table tr td.active:hover,
|
||||||
|
.datetimepicker table tr td.active.disabled,
|
||||||
|
.datetimepicker table tr td.active.disabled:hover {
|
||||||
|
background-color: #006dcc;
|
||||||
|
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
|
||||||
|
background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
|
||||||
|
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
|
||||||
|
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
|
||||||
|
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
|
||||||
|
background-image: linear-gradient(to bottom, #0088cc, #0044cc);
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
|
||||||
|
border-color: #0044cc #0044cc #002a80;
|
||||||
|
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
||||||
|
color: #ffffff;
|
||||||
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker table tr td.active:hover,
|
||||||
|
.datetimepicker table tr td.active:hover:hover,
|
||||||
|
.datetimepicker table tr td.active.disabled:hover,
|
||||||
|
.datetimepicker table tr td.active.disabled:hover:hover,
|
||||||
|
.datetimepicker table tr td.active:active,
|
||||||
|
.datetimepicker table tr td.active:hover:active,
|
||||||
|
.datetimepicker table tr td.active.disabled:active,
|
||||||
|
.datetimepicker table tr td.active.disabled:hover:active,
|
||||||
|
.datetimepicker table tr td.active.active,
|
||||||
|
.datetimepicker table tr td.active:hover.active,
|
||||||
|
.datetimepicker table tr td.active.disabled.active,
|
||||||
|
.datetimepicker table tr td.active.disabled:hover.active,
|
||||||
|
.datetimepicker table tr td.active.disabled,
|
||||||
|
.datetimepicker table tr td.active:hover.disabled,
|
||||||
|
.datetimepicker table tr td.active.disabled.disabled,
|
||||||
|
.datetimepicker table tr td.active.disabled:hover.disabled,
|
||||||
|
.datetimepicker table tr td.active[disabled],
|
||||||
|
.datetimepicker table tr td.active:hover[disabled],
|
||||||
|
.datetimepicker table tr td.active.disabled[disabled],
|
||||||
|
.datetimepicker table tr td.active.disabled:hover[disabled] {
|
||||||
|
background-color: #0044cc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker table tr td.active:active,
|
||||||
|
.datetimepicker table tr td.active:hover:active,
|
||||||
|
.datetimepicker table tr td.active.disabled:active,
|
||||||
|
.datetimepicker table tr td.active.disabled:hover:active,
|
||||||
|
.datetimepicker table tr td.active.active,
|
||||||
|
.datetimepicker table tr td.active:hover.active,
|
||||||
|
.datetimepicker table tr td.active.disabled.active,
|
||||||
|
.datetimepicker table tr td.active.disabled:hover.active {
|
||||||
|
background-color: #003399;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker table tr td span {
|
||||||
|
display: block;
|
||||||
|
width: 23%;
|
||||||
|
height: 54px;
|
||||||
|
line-height: 54px;
|
||||||
|
float: left;
|
||||||
|
margin: 1%;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-border-radius: 4px;
|
||||||
|
-moz-border-radius: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker .datetimepicker-hours span {
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker .datetimepicker-hours table tr td span.hour_am,
|
||||||
|
.datetimepicker .datetimepicker-hours table tr td span.hour_pm {
|
||||||
|
width: 14.6%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker .datetimepicker-hours fieldset legend,
|
||||||
|
.datetimepicker .datetimepicker-minutes fieldset legend {
|
||||||
|
margin-bottom: inherit;
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker .datetimepicker-minutes span {
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker table tr td span:hover {
|
||||||
|
background: #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker table tr td span.disabled,
|
||||||
|
.datetimepicker table tr td span.disabled:hover {
|
||||||
|
background: none;
|
||||||
|
color: #999999;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker table tr td span.active,
|
||||||
|
.datetimepicker table tr td span.active:hover,
|
||||||
|
.datetimepicker table tr td span.active.disabled,
|
||||||
|
.datetimepicker table tr td span.active.disabled:hover {
|
||||||
|
background-color: #006dcc;
|
||||||
|
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
|
||||||
|
background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
|
||||||
|
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
|
||||||
|
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
|
||||||
|
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
|
||||||
|
background-image: linear-gradient(to bottom, #0088cc, #0044cc);
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
|
||||||
|
border-color: #0044cc #0044cc #002a80;
|
||||||
|
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
||||||
|
color: #ffffff;
|
||||||
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker table tr td span.active:hover,
|
||||||
|
.datetimepicker table tr td span.active:hover:hover,
|
||||||
|
.datetimepicker table tr td span.active.disabled:hover,
|
||||||
|
.datetimepicker table tr td span.active.disabled:hover:hover,
|
||||||
|
.datetimepicker table tr td span.active:active,
|
||||||
|
.datetimepicker table tr td span.active:hover:active,
|
||||||
|
.datetimepicker table tr td span.active.disabled:active,
|
||||||
|
.datetimepicker table tr td span.active.disabled:hover:active,
|
||||||
|
.datetimepicker table tr td span.active.active,
|
||||||
|
.datetimepicker table tr td span.active:hover.active,
|
||||||
|
.datetimepicker table tr td span.active.disabled.active,
|
||||||
|
.datetimepicker table tr td span.active.disabled:hover.active,
|
||||||
|
.datetimepicker table tr td span.active.disabled,
|
||||||
|
.datetimepicker table tr td span.active:hover.disabled,
|
||||||
|
.datetimepicker table tr td span.active.disabled.disabled,
|
||||||
|
.datetimepicker table tr td span.active.disabled:hover.disabled,
|
||||||
|
.datetimepicker table tr td span.active[disabled],
|
||||||
|
.datetimepicker table tr td span.active:hover[disabled],
|
||||||
|
.datetimepicker table tr td span.active.disabled[disabled],
|
||||||
|
.datetimepicker table tr td span.active.disabled:hover[disabled] {
|
||||||
|
background-color: #0044cc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker table tr td span.active:active,
|
||||||
|
.datetimepicker table tr td span.active:hover:active,
|
||||||
|
.datetimepicker table tr td span.active.disabled:active,
|
||||||
|
.datetimepicker table tr td span.active.disabled:hover:active,
|
||||||
|
.datetimepicker table tr td span.active.active,
|
||||||
|
.datetimepicker table tr td span.active:hover.active,
|
||||||
|
.datetimepicker table tr td span.active.disabled.active,
|
||||||
|
.datetimepicker table tr td span.active.disabled:hover.active {
|
||||||
|
background-color: #003399;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker table tr td span.old {
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker th.switch {
|
||||||
|
width: 145px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker th span.glyphicon {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker thead tr:first-child th,
|
||||||
|
.datetimepicker tfoot th {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datetimepicker thead tr:first-child th:hover,
|
||||||
|
.datetimepicker tfoot th:hover {
|
||||||
|
background: #eeeeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-append.date .add-on i,
|
||||||
|
.input-prepend.date .add-on i,
|
||||||
|
.input-group.date .input-group-addon span {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
}
|
||||||
1978
ruoyi-admin/src/main/resources/static/ajax/libs/datapicker/bootstrap-datetimepicker.js
vendored
Normal file
1978
ruoyi-admin/src/main/resources/static/ajax/libs/datapicker/bootstrap-datetimepicker.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
9
ruoyi-admin/src/main/resources/static/ajax/libs/datapicker/bootstrap-datetimepicker.min.css
vendored
Normal file
9
ruoyi-admin/src/main/resources/static/ajax/libs/datapicker/bootstrap-datetimepicker.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
ruoyi-admin/src/main/resources/static/ajax/libs/datapicker/bootstrap-datetimepicker.min.js
vendored
Normal file
1
ruoyi-admin/src/main/resources/static/ajax/libs/datapicker/bootstrap-datetimepicker.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
86
ruoyi-admin/src/main/resources/static/ajax/libs/duallistbox/bootstrap-duallistbox.css
vendored
Normal file
86
ruoyi-admin/src/main/resources/static/ajax/libs/duallistbox/bootstrap-duallistbox.css
vendored
Normal file
|
|
@ -0,0 +1,86 @@
|
||||||
|
/*
|
||||||
|
* Bootstrap Duallistbox - v3.0.7
|
||||||
|
* A responsive dual listbox widget optimized for Twitter Bootstrap. It works on all modern browsers and on touch devices.
|
||||||
|
* https://www.virtuosoft.eu/code/bootstrap-duallistbox/
|
||||||
|
*
|
||||||
|
* Made by István Ujj-Mészáros
|
||||||
|
* Under Apache License v2.0 License
|
||||||
|
*/
|
||||||
|
.bootstrap-duallistbox-container .buttons {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bootstrap-duallistbox-container label {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bootstrap-duallistbox-container .info {
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bootstrap-duallistbox-container .clear1,
|
||||||
|
.bootstrap-duallistbox-container .clear2 {
|
||||||
|
display: none;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bootstrap-duallistbox-container .box1.filtered .clear1,
|
||||||
|
.bootstrap-duallistbox-container .box2.filtered .clear2 {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bootstrap-duallistbox-container .move,
|
||||||
|
.bootstrap-duallistbox-container .remove {
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bootstrap-duallistbox-container .btn-group .btn {
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
.bootstrap-duallistbox-container select {
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bootstrap-duallistbox-container .moveall,
|
||||||
|
.bootstrap-duallistbox-container .removeall {
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bootstrap-duallistbox-container.bs2compatible .btn-group > .btn + .btn {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bootstrap-duallistbox-container select {
|
||||||
|
width: 100%;
|
||||||
|
height: 300px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bootstrap-duallistbox-container .filter {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
height: 31px;
|
||||||
|
margin: 0 0 5px 0;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bootstrap-duallistbox-container .filter.placeholder {
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bootstrap-duallistbox-container.moveonselect .move,
|
||||||
|
.bootstrap-duallistbox-container.moveonselect .remove {
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bootstrap-duallistbox-container.moveonselect .moveall,
|
||||||
|
.bootstrap-duallistbox-container.moveonselect .removeall {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
841
ruoyi-admin/src/main/resources/static/ajax/libs/duallistbox/bootstrap-duallistbox.js
vendored
Normal file
841
ruoyi-admin/src/main/resources/static/ajax/libs/duallistbox/bootstrap-duallistbox.js
vendored
Normal file
|
|
@ -0,0 +1,841 @@
|
||||||
|
/*
|
||||||
|
* Bootstrap Duallistbox - v3.0.7
|
||||||
|
* A responsive dual listbox widget optimized for Twitter Bootstrap. It works on all modern browsers and on touch devices.
|
||||||
|
* https://www.virtuosoft.eu/code/bootstrap-duallistbox/
|
||||||
|
*
|
||||||
|
* Made by István Ujj-Mészáros
|
||||||
|
* Under Apache License v2.0 License
|
||||||
|
*/
|
||||||
|
;(function ($, window, document, undefined) {
|
||||||
|
// Create the defaults once
|
||||||
|
var pluginName = 'bootstrapDualListbox',
|
||||||
|
defaults = {
|
||||||
|
bootstrap2Compatible: false,
|
||||||
|
filterTextClear: 'show all',
|
||||||
|
filterPlaceHolder: 'Filter',
|
||||||
|
moveSelectedLabel: 'Move selected',
|
||||||
|
moveAllLabel: 'Move all',
|
||||||
|
removeSelectedLabel: 'Remove selected',
|
||||||
|
removeAllLabel: 'Remove all',
|
||||||
|
moveOnSelect: true, // true/false (forced true on androids, see the comment later)
|
||||||
|
moveOnDoubleClick: true, // true/false (forced false on androids, cause moveOnSelect is forced to true)
|
||||||
|
preserveSelectionOnMove: false, // 'all' / 'moved' / false
|
||||||
|
selectedListLabel: false, // 'string', false
|
||||||
|
nonSelectedListLabel: false, // 'string', false
|
||||||
|
helperSelectNamePostfix: '_helper', // 'string_of_postfix' / false
|
||||||
|
selectorMinimalHeight: 100,
|
||||||
|
showFilterInputs: true, // whether to show filter inputs
|
||||||
|
nonSelectedFilter: '', // string, filter the non selected options
|
||||||
|
selectedFilter: '', // string, filter the selected options
|
||||||
|
infoText: 'Showing all {0}', // text when all options are visible / false for no info text
|
||||||
|
infoTextFiltered: '<span class="label label-warning">Filtered</span> {0} from {1}', // when not all of the options are visible due to the filter
|
||||||
|
infoTextEmpty: 'Empty list', // when there are no options present in the list
|
||||||
|
filterOnValues: false, // filter by selector's values, boolean
|
||||||
|
sortByInputOrder: false,
|
||||||
|
eventMoveOverride: false, // boolean, allows user to unbind default event behaviour and run their own instead
|
||||||
|
eventMoveAllOverride: false, // boolean, allows user to unbind default event behaviour and run their own instead
|
||||||
|
eventRemoveOverride: false, // boolean, allows user to unbind default event behaviour and run their own instead
|
||||||
|
eventRemoveAllOverride: false // boolean, allows user to unbind default event behaviour and run their own instead
|
||||||
|
},
|
||||||
|
// Selections are invisible on android if the containing select is styled with CSS
|
||||||
|
// http://code.google.com/p/android/issues/detail?id=16922
|
||||||
|
isBuggyAndroid = /android/i.test(navigator.userAgent.toLowerCase());
|
||||||
|
|
||||||
|
// The actual plugin constructor
|
||||||
|
function BootstrapDualListbox(element, options) {
|
||||||
|
this.element = $(element);
|
||||||
|
// jQuery has an extend method which merges the contents of two or
|
||||||
|
// more objects, storing the result in the first object. The first object
|
||||||
|
// is generally empty as we don't want to alter the default options for
|
||||||
|
// future instances of the plugin
|
||||||
|
this.settings = $.extend({}, defaults, options);
|
||||||
|
this._defaults = defaults;
|
||||||
|
this._name = pluginName;
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
function triggerChangeEvent(dualListbox) {
|
||||||
|
dualListbox.element.trigger('change');
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateSelectionStates(dualListbox) {
|
||||||
|
dualListbox.element.find('option').each(function(index, item) {
|
||||||
|
var $item = $(item);
|
||||||
|
if (typeof($item.data('original-index')) === 'undefined') {
|
||||||
|
$item.data('original-index', dualListbox.elementCount++);
|
||||||
|
}
|
||||||
|
if (typeof($item.data('_selected')) === 'undefined') {
|
||||||
|
$item.data('_selected', false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function changeSelectionState(dualListbox, original_index, selected) {
|
||||||
|
dualListbox.element.find('option').each(function(index, item) {
|
||||||
|
var $item = $(item);
|
||||||
|
if ($item.data('original-index') === original_index) {
|
||||||
|
$item.prop('selected', selected);
|
||||||
|
if(selected){
|
||||||
|
$item.attr('data-sortindex', dualListbox.sortIndex);
|
||||||
|
dualListbox.sortIndex++;
|
||||||
|
} else {
|
||||||
|
$item.removeAttr('data-sortindex');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatString(s, args) {
|
||||||
|
return s.replace(/\{(\d+)\}/g, function(match, number) {
|
||||||
|
return typeof args[number] !== 'undefined' ? args[number] : match;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function refreshInfo(dualListbox) {
|
||||||
|
if (!dualListbox.settings.infoText) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var visible1 = dualListbox.elements.select1.find('option').length,
|
||||||
|
visible2 = dualListbox.elements.select2.find('option').length,
|
||||||
|
all1 = dualListbox.element.find('option').length - dualListbox.selectedElements,
|
||||||
|
all2 = dualListbox.selectedElements,
|
||||||
|
content = '';
|
||||||
|
|
||||||
|
if (all1 === 0) {
|
||||||
|
content = dualListbox.settings.infoTextEmpty;
|
||||||
|
} else if (visible1 === all1) {
|
||||||
|
content = formatString(dualListbox.settings.infoText, [visible1, all1]);
|
||||||
|
} else {
|
||||||
|
content = formatString(dualListbox.settings.infoTextFiltered, [visible1, all1]);
|
||||||
|
}
|
||||||
|
|
||||||
|
dualListbox.elements.info1.html(content);
|
||||||
|
dualListbox.elements.box1.toggleClass('filtered', !(visible1 === all1 || all1 === 0));
|
||||||
|
|
||||||
|
if (all2 === 0) {
|
||||||
|
content = dualListbox.settings.infoTextEmpty;
|
||||||
|
} else if (visible2 === all2) {
|
||||||
|
content = formatString(dualListbox.settings.infoText, [visible2, all2]);
|
||||||
|
} else {
|
||||||
|
content = formatString(dualListbox.settings.infoTextFiltered, [visible2, all2]);
|
||||||
|
}
|
||||||
|
|
||||||
|
dualListbox.elements.info2.html(content);
|
||||||
|
dualListbox.elements.box2.toggleClass('filtered', !(visible2 === all2 || all2 === 0));
|
||||||
|
}
|
||||||
|
|
||||||
|
function refreshSelects(dualListbox) {
|
||||||
|
dualListbox.selectedElements = 0;
|
||||||
|
|
||||||
|
dualListbox.elements.select1.empty();
|
||||||
|
dualListbox.elements.select2.empty();
|
||||||
|
|
||||||
|
dualListbox.element.find('option').each(function(index, item) {
|
||||||
|
var $item = $(item);
|
||||||
|
if ($item.prop('selected')) {
|
||||||
|
dualListbox.selectedElements++;
|
||||||
|
dualListbox.elements.select2.append($item.clone(true).prop('selected', $item.data('_selected')));
|
||||||
|
} else {
|
||||||
|
dualListbox.elements.select1.append($item.clone(true).prop('selected', $item.data('_selected')));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (dualListbox.settings.showFilterInputs) {
|
||||||
|
filter(dualListbox, 1);
|
||||||
|
filter(dualListbox, 2);
|
||||||
|
}
|
||||||
|
refreshInfo(dualListbox);
|
||||||
|
}
|
||||||
|
|
||||||
|
function filter(dualListbox, selectIndex) {
|
||||||
|
if (!dualListbox.settings.showFilterInputs) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
saveSelections(dualListbox, selectIndex);
|
||||||
|
|
||||||
|
dualListbox.elements['select'+selectIndex].empty().scrollTop(0);
|
||||||
|
var regex = new RegExp($.trim(dualListbox.elements['filterInput'+selectIndex].val()), 'gi'),
|
||||||
|
allOptions = dualListbox.element.find('option'),
|
||||||
|
options = dualListbox.element;
|
||||||
|
|
||||||
|
if (selectIndex === 1) {
|
||||||
|
options = allOptions.not(':selected');
|
||||||
|
} else {
|
||||||
|
options = options.find('option:selected');
|
||||||
|
}
|
||||||
|
|
||||||
|
options.each(function(index, item) {
|
||||||
|
var $item = $(item),
|
||||||
|
isFiltered = true;
|
||||||
|
if (item.text.match(regex) || (dualListbox.settings.filterOnValues && $item.attr('value').match(regex) ) ) {
|
||||||
|
isFiltered = false;
|
||||||
|
dualListbox.elements['select'+selectIndex].append($item.clone(true).prop('selected', $item.data('_selected')));
|
||||||
|
}
|
||||||
|
allOptions.eq($item.data('original-index')).data('filtered'+selectIndex, isFiltered);
|
||||||
|
});
|
||||||
|
|
||||||
|
refreshInfo(dualListbox);
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveSelections(dualListbox, selectIndex) {
|
||||||
|
var options = dualListbox.element.find('option');
|
||||||
|
dualListbox.elements['select'+selectIndex].find('option').each(function(index, item) {
|
||||||
|
var $item = $(item);
|
||||||
|
options.eq($item.data('original-index')).data('_selected', $item.prop('selected'));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function sortOptionsByInputOrder(select){
|
||||||
|
var selectopt = select.children('option');
|
||||||
|
|
||||||
|
selectopt.sort(function(a,b){
|
||||||
|
var an = parseInt(a.getAttribute('data-sortindex')),
|
||||||
|
bn = parseInt(b.getAttribute('data-sortindex'));
|
||||||
|
|
||||||
|
if(an > bn) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
if(an < bn) {
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
selectopt.detach().appendTo(select);
|
||||||
|
}
|
||||||
|
|
||||||
|
function sortOptions(select) {
|
||||||
|
select.find('option').sort(function(a, b) {
|
||||||
|
return ($(a).data('original-index') > $(b).data('original-index')) ? 1 : -1;
|
||||||
|
}).appendTo(select);
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearSelections(dualListbox) {
|
||||||
|
dualListbox.elements.select1.find('option').each(function() {
|
||||||
|
dualListbox.element.find('option').data('_selected', false);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function move(dualListbox) {
|
||||||
|
if (dualListbox.settings.preserveSelectionOnMove === 'all' && !dualListbox.settings.moveOnSelect) {
|
||||||
|
saveSelections(dualListbox, 1);
|
||||||
|
saveSelections(dualListbox, 2);
|
||||||
|
} else if (dualListbox.settings.preserveSelectionOnMove === 'moved' && !dualListbox.settings.moveOnSelect) {
|
||||||
|
saveSelections(dualListbox, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
dualListbox.elements.select1.find('option:selected').each(function(index, item) {
|
||||||
|
var $item = $(item);
|
||||||
|
if (!$item.data('filtered1')) {
|
||||||
|
changeSelectionState(dualListbox, $item.data('original-index'), true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
refreshSelects(dualListbox);
|
||||||
|
triggerChangeEvent(dualListbox);
|
||||||
|
if(dualListbox.settings.sortByInputOrder){
|
||||||
|
sortOptionsByInputOrder(dualListbox.elements.select2);
|
||||||
|
} else {
|
||||||
|
sortOptions(dualListbox.elements.select2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function remove(dualListbox) {
|
||||||
|
if (dualListbox.settings.preserveSelectionOnMove === 'all' && !dualListbox.settings.moveOnSelect) {
|
||||||
|
saveSelections(dualListbox, 1);
|
||||||
|
saveSelections(dualListbox, 2);
|
||||||
|
} else if (dualListbox.settings.preserveSelectionOnMove === 'moved' && !dualListbox.settings.moveOnSelect) {
|
||||||
|
saveSelections(dualListbox, 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
dualListbox.elements.select2.find('option:selected').each(function(index, item) {
|
||||||
|
var $item = $(item);
|
||||||
|
if (!$item.data('filtered2')) {
|
||||||
|
changeSelectionState(dualListbox, $item.data('original-index'), false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
refreshSelects(dualListbox);
|
||||||
|
triggerChangeEvent(dualListbox);
|
||||||
|
sortOptions(dualListbox.elements.select1);
|
||||||
|
if(dualListbox.settings.sortByInputOrder){
|
||||||
|
sortOptionsByInputOrder(dualListbox.elements.select2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function moveAll(dualListbox) {
|
||||||
|
if (dualListbox.settings.preserveSelectionOnMove === 'all' && !dualListbox.settings.moveOnSelect) {
|
||||||
|
saveSelections(dualListbox, 1);
|
||||||
|
saveSelections(dualListbox, 2);
|
||||||
|
} else if (dualListbox.settings.preserveSelectionOnMove === 'moved' && !dualListbox.settings.moveOnSelect) {
|
||||||
|
saveSelections(dualListbox, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
dualListbox.element.find('option').each(function(index, item) {
|
||||||
|
var $item = $(item);
|
||||||
|
if (!$item.data('filtered1')) {
|
||||||
|
$item.prop('selected', true);
|
||||||
|
$item.attr('data-sortindex', dualListbox.sortIndex);
|
||||||
|
dualListbox.sortIndex++;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
refreshSelects(dualListbox);
|
||||||
|
triggerChangeEvent(dualListbox);
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeAll(dualListbox) {
|
||||||
|
if (dualListbox.settings.preserveSelectionOnMove === 'all' && !dualListbox.settings.moveOnSelect) {
|
||||||
|
saveSelections(dualListbox, 1);
|
||||||
|
saveSelections(dualListbox, 2);
|
||||||
|
} else if (dualListbox.settings.preserveSelectionOnMove === 'moved' && !dualListbox.settings.moveOnSelect) {
|
||||||
|
saveSelections(dualListbox, 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
dualListbox.element.find('option').each(function(index, item) {
|
||||||
|
var $item = $(item);
|
||||||
|
if (!$item.data('filtered2')) {
|
||||||
|
$item.prop('selected', false);
|
||||||
|
$item.removeAttr('data-sortindex');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
refreshSelects(dualListbox);
|
||||||
|
triggerChangeEvent(dualListbox);
|
||||||
|
}
|
||||||
|
|
||||||
|
function bindEvents(dualListbox) {
|
||||||
|
dualListbox.elements.form.submit(function(e) {
|
||||||
|
if (dualListbox.elements.filterInput1.is(':focus')) {
|
||||||
|
e.preventDefault();
|
||||||
|
dualListbox.elements.filterInput1.focusout();
|
||||||
|
} else if (dualListbox.elements.filterInput2.is(':focus')) {
|
||||||
|
e.preventDefault();
|
||||||
|
dualListbox.elements.filterInput2.focusout();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
dualListbox.element.on('bootstrapDualListbox.refresh', function(e, mustClearSelections){
|
||||||
|
dualListbox.refresh(mustClearSelections);
|
||||||
|
});
|
||||||
|
|
||||||
|
dualListbox.elements.filterClear1.on('click', function() {
|
||||||
|
dualListbox.setNonSelectedFilter('', true);
|
||||||
|
});
|
||||||
|
|
||||||
|
dualListbox.elements.filterClear2.on('click', function() {
|
||||||
|
dualListbox.setSelectedFilter('', true);
|
||||||
|
});
|
||||||
|
|
||||||
|
if (dualListbox.settings.eventMoveOverride === false) {
|
||||||
|
dualListbox.elements.moveButton.on('click', function() {
|
||||||
|
move(dualListbox);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (dualListbox.settings.eventMoveAllOverride === false) {
|
||||||
|
dualListbox.elements.moveAllButton.on('click', function() {
|
||||||
|
moveAll(dualListbox);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (dualListbox.settings.eventRemoveOverride === false) {
|
||||||
|
dualListbox.elements.removeButton.on('click', function() {
|
||||||
|
remove(dualListbox);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (dualListbox.settings.eventRemoveAllOverride === false) {
|
||||||
|
dualListbox.elements.removeAllButton.on('click', function() {
|
||||||
|
removeAll(dualListbox);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
dualListbox.elements.filterInput1.on('change keyup', function() {
|
||||||
|
filter(dualListbox, 1);
|
||||||
|
});
|
||||||
|
|
||||||
|
dualListbox.elements.filterInput2.on('change keyup', function() {
|
||||||
|
filter(dualListbox, 2);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
BootstrapDualListbox.prototype = {
|
||||||
|
init: function () {
|
||||||
|
// Add the custom HTML template
|
||||||
|
this.container = $('' +
|
||||||
|
'<div class="bootstrap-duallistbox-container">' +
|
||||||
|
' <div class="box1">' +
|
||||||
|
' <label></label>' +
|
||||||
|
' <span class="info-container">' +
|
||||||
|
' <span class="info"></span>' +
|
||||||
|
' <button type="button" class="btn clear1 pull-right"></button>' +
|
||||||
|
' </span>' +
|
||||||
|
' <input class="filter" type="text">' +
|
||||||
|
' <div class="btn-group buttons">' +
|
||||||
|
' <button type="button" class="btn moveall">' +
|
||||||
|
' <i></i>' +
|
||||||
|
' <i></i>' +
|
||||||
|
' </button>' +
|
||||||
|
' <button type="button" class="btn move">' +
|
||||||
|
' <i></i>' +
|
||||||
|
' </button>' +
|
||||||
|
' </div>' +
|
||||||
|
' <select multiple="multiple"></select>' +
|
||||||
|
' </div>' +
|
||||||
|
' <div class="box2">' +
|
||||||
|
' <label></label>' +
|
||||||
|
' <span class="info-container">' +
|
||||||
|
' <span class="info"></span>' +
|
||||||
|
' <button type="button" class="btn clear2 pull-right"></button>' +
|
||||||
|
' </span>' +
|
||||||
|
' <input class="filter" type="text">' +
|
||||||
|
' <div class="btn-group buttons">' +
|
||||||
|
' <button type="button" class="btn remove">' +
|
||||||
|
' <i></i>' +
|
||||||
|
' </button>' +
|
||||||
|
' <button type="button" class="btn removeall">' +
|
||||||
|
' <i></i>' +
|
||||||
|
' <i></i>' +
|
||||||
|
' </button>' +
|
||||||
|
' </div>' +
|
||||||
|
' <select multiple="multiple"></select>' +
|
||||||
|
' </div>' +
|
||||||
|
'</div>')
|
||||||
|
.insertBefore(this.element);
|
||||||
|
|
||||||
|
// Cache the inner elements
|
||||||
|
this.elements = {
|
||||||
|
originalSelect: this.element,
|
||||||
|
box1: $('.box1', this.container),
|
||||||
|
box2: $('.box2', this.container),
|
||||||
|
filterInput1: $('.box1 .filter', this.container),
|
||||||
|
filterInput2: $('.box2 .filter', this.container),
|
||||||
|
filterClear1: $('.box1 .clear1', this.container),
|
||||||
|
filterClear2: $('.box2 .clear2', this.container),
|
||||||
|
label1: $('.box1 > label', this.container),
|
||||||
|
label2: $('.box2 > label', this.container),
|
||||||
|
info1: $('.box1 .info', this.container),
|
||||||
|
info2: $('.box2 .info', this.container),
|
||||||
|
select1: $('.box1 select', this.container),
|
||||||
|
select2: $('.box2 select', this.container),
|
||||||
|
moveButton: $('.box1 .move', this.container),
|
||||||
|
removeButton: $('.box2 .remove', this.container),
|
||||||
|
moveAllButton: $('.box1 .moveall', this.container),
|
||||||
|
removeAllButton: $('.box2 .removeall', this.container),
|
||||||
|
form: $($('.box1 .filter', this.container)[0].form)
|
||||||
|
};
|
||||||
|
|
||||||
|
// Set select IDs
|
||||||
|
this.originalSelectName = this.element.attr('name') || '';
|
||||||
|
var select1Id = 'bootstrap-duallistbox-nonselected-list_' + this.originalSelectName,
|
||||||
|
select2Id = 'bootstrap-duallistbox-selected-list_' + this.originalSelectName;
|
||||||
|
this.elements.select1.attr('id', select1Id);
|
||||||
|
this.elements.select2.attr('id', select2Id);
|
||||||
|
this.elements.label1.attr('for', select1Id);
|
||||||
|
this.elements.label2.attr('for', select2Id);
|
||||||
|
|
||||||
|
// Apply all settings
|
||||||
|
this.selectedElements = 0;
|
||||||
|
this.sortIndex = 0;
|
||||||
|
this.elementCount = 0;
|
||||||
|
this.setBootstrap2Compatible(this.settings.bootstrap2Compatible);
|
||||||
|
this.setFilterTextClear(this.settings.filterTextClear);
|
||||||
|
this.setFilterPlaceHolder(this.settings.filterPlaceHolder);
|
||||||
|
this.setMoveSelectedLabel(this.settings.moveSelectedLabel);
|
||||||
|
this.setMoveAllLabel(this.settings.moveAllLabel);
|
||||||
|
this.setRemoveSelectedLabel(this.settings.removeSelectedLabel);
|
||||||
|
this.setRemoveAllLabel(this.settings.removeAllLabel);
|
||||||
|
this.setMoveOnSelect(this.settings.moveOnSelect);
|
||||||
|
this.setMoveOnDoubleClick(this.settings.moveOnDoubleClick);
|
||||||
|
this.setPreserveSelectionOnMove(this.settings.preserveSelectionOnMove);
|
||||||
|
this.setSelectedListLabel(this.settings.selectedListLabel);
|
||||||
|
this.setNonSelectedListLabel(this.settings.nonSelectedListLabel);
|
||||||
|
this.setHelperSelectNamePostfix(this.settings.helperSelectNamePostfix);
|
||||||
|
this.setSelectOrMinimalHeight(this.settings.selectorMinimalHeight);
|
||||||
|
|
||||||
|
updateSelectionStates(this);
|
||||||
|
|
||||||
|
this.setShowFilterInputs(this.settings.showFilterInputs);
|
||||||
|
this.setNonSelectedFilter(this.settings.nonSelectedFilter);
|
||||||
|
this.setSelectedFilter(this.settings.selectedFilter);
|
||||||
|
this.setInfoText(this.settings.infoText);
|
||||||
|
this.setInfoTextFiltered(this.settings.infoTextFiltered);
|
||||||
|
this.setInfoTextEmpty(this.settings.infoTextEmpty);
|
||||||
|
this.setFilterOnValues(this.settings.filterOnValues);
|
||||||
|
this.setSortByInputOrder(this.settings.sortByInputOrder);
|
||||||
|
this.setEventMoveOverride(this.settings.eventMoveOverride);
|
||||||
|
this.setEventMoveAllOverride(this.settings.eventMoveAllOverride);
|
||||||
|
this.setEventRemoveOverride(this.settings.eventRemoveOverride);
|
||||||
|
this.setEventRemoveAllOverride(this.settings.eventRemoveAllOverride);
|
||||||
|
|
||||||
|
// Hide the original select
|
||||||
|
this.element.hide();
|
||||||
|
|
||||||
|
bindEvents(this);
|
||||||
|
refreshSelects(this);
|
||||||
|
|
||||||
|
return this.element;
|
||||||
|
},
|
||||||
|
setBootstrap2Compatible: function(value, refresh) {
|
||||||
|
this.settings.bootstrap2Compatible = value;
|
||||||
|
if (value) {
|
||||||
|
this.container.removeClass('row').addClass('row-fluid bs2compatible');
|
||||||
|
this.container.find('.box1, .box2').removeClass('col-md-6').addClass('span6');
|
||||||
|
this.container.find('.clear1, .clear2').removeClass('btn-white btn-xs').addClass('btn-mini');
|
||||||
|
this.container.find('input, select').removeClass('form-control');
|
||||||
|
this.container.find('.btn').removeClass('btn-white');
|
||||||
|
this.container.find('.moveall > i, .move > i').removeClass('glyphicon glyphicon-arrow-right').addClass('icon-arrow-right');
|
||||||
|
this.container.find('.removeall > i, .remove > i').removeClass('glyphicon glyphicon-arrow-left').addClass('icon-arrow-left');
|
||||||
|
} else {
|
||||||
|
this.container.removeClass('row-fluid bs2compatible').addClass('row');
|
||||||
|
this.container.find('.box1, .box2').removeClass('span6').addClass('col-md-6');
|
||||||
|
this.container.find('.clear1, .clear2').removeClass('btn-mini').addClass('btn-white btn-xs');
|
||||||
|
this.container.find('input, select').addClass('form-control');
|
||||||
|
this.container.find('.btn').addClass('btn-white');
|
||||||
|
this.container.find('.moveall > i, .move > i').removeClass('icon-arrow-right').addClass('glyphicon glyphicon-arrow-right');
|
||||||
|
this.container.find('.removeall > i, .remove > i').removeClass('icon-arrow-left').addClass('glyphicon glyphicon-arrow-left');
|
||||||
|
}
|
||||||
|
if (refresh) {
|
||||||
|
refreshSelects(this);
|
||||||
|
}
|
||||||
|
return this.element;
|
||||||
|
},
|
||||||
|
setFilterTextClear: function(value, refresh) {
|
||||||
|
this.settings.filterTextClear = value;
|
||||||
|
this.elements.filterClear1.html(value);
|
||||||
|
this.elements.filterClear2.html(value);
|
||||||
|
if (refresh) {
|
||||||
|
refreshSelects(this);
|
||||||
|
}
|
||||||
|
return this.element;
|
||||||
|
},
|
||||||
|
setFilterPlaceHolder: function(value, refresh) {
|
||||||
|
this.settings.filterPlaceHolder = value;
|
||||||
|
this.elements.filterInput1.attr('placeholder', value);
|
||||||
|
this.elements.filterInput2.attr('placeholder', value);
|
||||||
|
if (refresh) {
|
||||||
|
refreshSelects(this);
|
||||||
|
}
|
||||||
|
return this.element;
|
||||||
|
},
|
||||||
|
setMoveSelectedLabel: function(value, refresh) {
|
||||||
|
this.settings.moveSelectedLabel = value;
|
||||||
|
this.elements.moveButton.attr('title', value);
|
||||||
|
if (refresh) {
|
||||||
|
refreshSelects(this);
|
||||||
|
}
|
||||||
|
return this.element;
|
||||||
|
},
|
||||||
|
setMoveAllLabel: function(value, refresh) {
|
||||||
|
this.settings.moveAllLabel = value;
|
||||||
|
this.elements.moveAllButton.attr('title', value);
|
||||||
|
if (refresh) {
|
||||||
|
refreshSelects(this);
|
||||||
|
}
|
||||||
|
return this.element;
|
||||||
|
},
|
||||||
|
setRemoveSelectedLabel: function(value, refresh) {
|
||||||
|
this.settings.removeSelectedLabel = value;
|
||||||
|
this.elements.removeButton.attr('title', value);
|
||||||
|
if (refresh) {
|
||||||
|
refreshSelects(this);
|
||||||
|
}
|
||||||
|
return this.element;
|
||||||
|
},
|
||||||
|
setRemoveAllLabel: function(value, refresh) {
|
||||||
|
this.settings.removeAllLabel = value;
|
||||||
|
this.elements.removeAllButton.attr('title', value);
|
||||||
|
if (refresh) {
|
||||||
|
refreshSelects(this);
|
||||||
|
}
|
||||||
|
return this.element;
|
||||||
|
},
|
||||||
|
setMoveOnSelect: function(value, refresh) {
|
||||||
|
if (isBuggyAndroid) {
|
||||||
|
value = true;
|
||||||
|
}
|
||||||
|
this.settings.moveOnSelect = value;
|
||||||
|
if (this.settings.moveOnSelect) {
|
||||||
|
this.container.addClass('moveonselect');
|
||||||
|
var self = this;
|
||||||
|
this.elements.select1.on('change', function() {
|
||||||
|
move(self);
|
||||||
|
});
|
||||||
|
this.elements.select2.on('change', function() {
|
||||||
|
remove(self);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.container.removeClass('moveonselect');
|
||||||
|
this.elements.select1.off('change');
|
||||||
|
this.elements.select2.off('change');
|
||||||
|
}
|
||||||
|
if (refresh) {
|
||||||
|
refreshSelects(this);
|
||||||
|
}
|
||||||
|
return this.element;
|
||||||
|
},
|
||||||
|
setMoveOnDoubleClick: function(value, refresh) {
|
||||||
|
if (isBuggyAndroid) {
|
||||||
|
value = false;
|
||||||
|
}
|
||||||
|
this.settings.moveOnDoubleClick = value;
|
||||||
|
if (this.settings.moveOnDoubleClick) {
|
||||||
|
this.container.addClass('moveondoubleclick');
|
||||||
|
var self = this;
|
||||||
|
this.elements.select1.on('dblclick', function() {
|
||||||
|
move(self);
|
||||||
|
});
|
||||||
|
this.elements.select2.on('dblclick', function() {
|
||||||
|
remove(self);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.container.removeClass('moveondoubleclick');
|
||||||
|
this.elements.select1.off('dblclick');
|
||||||
|
this.elements.select2.off('dblclick');
|
||||||
|
}
|
||||||
|
if (refresh) {
|
||||||
|
refreshSelects(this);
|
||||||
|
}
|
||||||
|
return this.element;
|
||||||
|
},
|
||||||
|
setPreserveSelectionOnMove: function(value, refresh) {
|
||||||
|
// We are forcing to move on select and disabling preserveSelectionOnMove on Android
|
||||||
|
if (isBuggyAndroid) {
|
||||||
|
value = false;
|
||||||
|
}
|
||||||
|
this.settings.preserveSelectionOnMove = value;
|
||||||
|
if (refresh) {
|
||||||
|
refreshSelects(this);
|
||||||
|
}
|
||||||
|
return this.element;
|
||||||
|
},
|
||||||
|
setSelectedListLabel: function(value, refresh) {
|
||||||
|
this.settings.selectedListLabel = value;
|
||||||
|
if (value) {
|
||||||
|
this.elements.label2.show().html(value);
|
||||||
|
} else {
|
||||||
|
this.elements.label2.hide().html(value);
|
||||||
|
}
|
||||||
|
if (refresh) {
|
||||||
|
refreshSelects(this);
|
||||||
|
}
|
||||||
|
return this.element;
|
||||||
|
},
|
||||||
|
setNonSelectedListLabel: function(value, refresh) {
|
||||||
|
this.settings.nonSelectedListLabel = value;
|
||||||
|
if (value) {
|
||||||
|
this.elements.label1.show().html(value);
|
||||||
|
} else {
|
||||||
|
this.elements.label1.hide().html(value);
|
||||||
|
}
|
||||||
|
if (refresh) {
|
||||||
|
refreshSelects(this);
|
||||||
|
}
|
||||||
|
return this.element;
|
||||||
|
},
|
||||||
|
setHelperSelectNamePostfix: function(value, refresh) {
|
||||||
|
this.settings.helperSelectNamePostfix = value;
|
||||||
|
if (value) {
|
||||||
|
this.elements.select1.attr('name', this.originalSelectName + value + '1');
|
||||||
|
this.elements.select2.attr('name', this.originalSelectName + value + '2');
|
||||||
|
} else {
|
||||||
|
this.elements.select1.removeAttr('name');
|
||||||
|
this.elements.select2.removeAttr('name');
|
||||||
|
}
|
||||||
|
if (refresh) {
|
||||||
|
refreshSelects(this);
|
||||||
|
}
|
||||||
|
return this.element;
|
||||||
|
},
|
||||||
|
setSelectOrMinimalHeight: function(value, refresh) {
|
||||||
|
this.settings.selectorMinimalHeight = value;
|
||||||
|
var height = this.element.height();
|
||||||
|
if (this.element.height() < value) {
|
||||||
|
height = value;
|
||||||
|
}
|
||||||
|
this.elements.select1.height(height);
|
||||||
|
this.elements.select2.height(height);
|
||||||
|
if (refresh) {
|
||||||
|
refreshSelects(this);
|
||||||
|
}
|
||||||
|
return this.element;
|
||||||
|
},
|
||||||
|
setShowFilterInputs: function(value, refresh) {
|
||||||
|
if (!value) {
|
||||||
|
this.setNonSelectedFilter('');
|
||||||
|
this.setSelectedFilter('');
|
||||||
|
refreshSelects(this);
|
||||||
|
this.elements.filterInput1.hide();
|
||||||
|
this.elements.filterInput2.hide();
|
||||||
|
} else {
|
||||||
|
this.elements.filterInput1.show();
|
||||||
|
this.elements.filterInput2.show();
|
||||||
|
}
|
||||||
|
this.settings.showFilterInputs = value;
|
||||||
|
if (refresh) {
|
||||||
|
refreshSelects(this);
|
||||||
|
}
|
||||||
|
return this.element;
|
||||||
|
},
|
||||||
|
setNonSelectedFilter: function(value, refresh) {
|
||||||
|
if (this.settings.showFilterInputs) {
|
||||||
|
this.settings.nonSelectedFilter = value;
|
||||||
|
this.elements.filterInput1.val(value);
|
||||||
|
if (refresh) {
|
||||||
|
refreshSelects(this);
|
||||||
|
}
|
||||||
|
return this.element;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setSelectedFilter: function(value, refresh) {
|
||||||
|
if (this.settings.showFilterInputs) {
|
||||||
|
this.settings.selectedFilter = value;
|
||||||
|
this.elements.filterInput2.val(value);
|
||||||
|
if (refresh) {
|
||||||
|
refreshSelects(this);
|
||||||
|
}
|
||||||
|
return this.element;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setInfoText: function(value, refresh) {
|
||||||
|
this.settings.infoText = value;
|
||||||
|
if (value) {
|
||||||
|
this.elements.info1.show();
|
||||||
|
this.elements.info2.show();
|
||||||
|
} else {
|
||||||
|
this.elements.info1.hide();
|
||||||
|
this.elements.info2.hide();
|
||||||
|
}
|
||||||
|
if (refresh) {
|
||||||
|
refreshSelects(this);
|
||||||
|
}
|
||||||
|
return this.element;
|
||||||
|
},
|
||||||
|
setInfoTextFiltered: function(value, refresh) {
|
||||||
|
this.settings.infoTextFiltered = value;
|
||||||
|
if (refresh) {
|
||||||
|
refreshSelects(this);
|
||||||
|
}
|
||||||
|
return this.element;
|
||||||
|
},
|
||||||
|
setInfoTextEmpty: function(value, refresh) {
|
||||||
|
this.settings.infoTextEmpty = value;
|
||||||
|
if (refresh) {
|
||||||
|
refreshSelects(this);
|
||||||
|
}
|
||||||
|
return this.element;
|
||||||
|
},
|
||||||
|
setFilterOnValues: function(value, refresh) {
|
||||||
|
this.settings.filterOnValues = value;
|
||||||
|
if (refresh) {
|
||||||
|
refreshSelects(this);
|
||||||
|
}
|
||||||
|
return this.element;
|
||||||
|
},
|
||||||
|
setSortByInputOrder: function(value, refresh){
|
||||||
|
this.settings.sortByInputOrder = value;
|
||||||
|
if (refresh) {
|
||||||
|
refreshSelects(this);
|
||||||
|
}
|
||||||
|
return this.element;
|
||||||
|
},
|
||||||
|
setEventMoveOverride: function(value, refresh) {
|
||||||
|
this.settings.eventMoveOverride = value;
|
||||||
|
if (refresh) {
|
||||||
|
refreshSelects(this);
|
||||||
|
}
|
||||||
|
return this.element;
|
||||||
|
},
|
||||||
|
setEventMoveAllOverride: function(value, refresh) {
|
||||||
|
this.settings.eventMoveAllOverride = value;
|
||||||
|
if (refresh) {
|
||||||
|
refreshSelects(this);
|
||||||
|
}
|
||||||
|
return this.element;
|
||||||
|
},
|
||||||
|
setEventRemoveOverride: function(value, refresh) {
|
||||||
|
this.settings.eventRemoveOverride = value;
|
||||||
|
if (refresh) {
|
||||||
|
refreshSelects(this);
|
||||||
|
}
|
||||||
|
return this.element;
|
||||||
|
},
|
||||||
|
setEventRemoveAllOverride: function(value, refresh) {
|
||||||
|
this.settings.eventRemoveAllOverride = value;
|
||||||
|
if (refresh) {
|
||||||
|
refreshSelects(this);
|
||||||
|
}
|
||||||
|
return this.element;
|
||||||
|
},
|
||||||
|
getContainer: function() {
|
||||||
|
return this.container;
|
||||||
|
},
|
||||||
|
refresh: function(mustClearSelections) {
|
||||||
|
updateSelectionStates(this);
|
||||||
|
|
||||||
|
if (!mustClearSelections) {
|
||||||
|
saveSelections(this, 1);
|
||||||
|
saveSelections(this, 2);
|
||||||
|
} else {
|
||||||
|
clearSelections(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
refreshSelects(this);
|
||||||
|
},
|
||||||
|
destroy: function() {
|
||||||
|
this.container.remove();
|
||||||
|
this.element.show();
|
||||||
|
$.data(this, 'plugin_' + pluginName, null);
|
||||||
|
return this.element;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// A really lightweight plugin wrapper around the constructor,
|
||||||
|
// preventing against multiple instantiations
|
||||||
|
$.fn[ pluginName ] = function (options) {
|
||||||
|
var args = arguments;
|
||||||
|
|
||||||
|
// Is the first parameter an object (options), or was omitted, instantiate a new instance of the plugin.
|
||||||
|
if (options === undefined || typeof options === 'object') {
|
||||||
|
return this.each(function () {
|
||||||
|
// If this is not a select
|
||||||
|
if (!$(this).is('select')) {
|
||||||
|
$(this).find('select').each(function(index, item) {
|
||||||
|
// For each nested select, instantiate the Dual List Box
|
||||||
|
$(item).bootstrapDualListbox(options);
|
||||||
|
});
|
||||||
|
} else if (!$.data(this, 'plugin_' + pluginName)) {
|
||||||
|
// Only allow the plugin to be instantiated once so we check that the element has no plugin instantiation yet
|
||||||
|
|
||||||
|
// if it has no instance, create a new one, pass options to our plugin constructor,
|
||||||
|
// and store the plugin instance in the elements jQuery data object.
|
||||||
|
$.data(this, 'plugin_' + pluginName, new BootstrapDualListbox(this, options));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// If the first parameter is a string and it doesn't start with an underscore or "contains" the `init`-function,
|
||||||
|
// treat this as a call to a public method.
|
||||||
|
} else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
|
||||||
|
|
||||||
|
// Cache the method call to make it possible to return a value
|
||||||
|
var returns;
|
||||||
|
|
||||||
|
this.each(function () {
|
||||||
|
var instance = $.data(this, 'plugin_' + pluginName);
|
||||||
|
// Tests that there's already a plugin-instance and checks that the requested public method exists
|
||||||
|
if (instance instanceof BootstrapDualListbox && typeof instance[options] === 'function') {
|
||||||
|
// Call the method of our plugin instance, and pass it the supplied arguments.
|
||||||
|
returns = instance[options].apply(instance, Array.prototype.slice.call(args, 1));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// If the earlier cached method gives a value back return the value,
|
||||||
|
// otherwise return this to preserve chainability.
|
||||||
|
return returns !== undefined ? returns : this;
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
})(jQuery, window, document);
|
||||||
1
ruoyi-admin/src/main/resources/static/ajax/libs/duallistbox/bootstrap-duallistbox.min.css
vendored
Normal file
1
ruoyi-admin/src/main/resources/static/ajax/libs/duallistbox/bootstrap-duallistbox.min.css
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
.bootstrap-duallistbox-container .buttons{width:100%;margin-bottom:-1px}.bootstrap-duallistbox-container label{display:block}.bootstrap-duallistbox-container .info{display:inline-block;margin-bottom:5px;font-size:11px}.bootstrap-duallistbox-container .clear1,.bootstrap-duallistbox-container .clear2{display:none;font-size:10px}.bootstrap-duallistbox-container .box1.filtered .clear1,.bootstrap-duallistbox-container .box2.filtered .clear2{display:inline-block}.bootstrap-duallistbox-container .move,.bootstrap-duallistbox-container .remove{width:60%}.bootstrap-duallistbox-container .btn-group .btn{border-bottom-left-radius:0;border-bottom-right-radius:0}.bootstrap-duallistbox-container select{border-top-left-radius:0;border-top-right-radius:0}.bootstrap-duallistbox-container .moveall,.bootstrap-duallistbox-container .removeall{width:40%}.bootstrap-duallistbox-container.bs2compatible .btn-group>.btn+.btn{margin-left:0}.bootstrap-duallistbox-container select{width:100%;height:300px;padding:0}.bootstrap-duallistbox-container .filter{display:inline-block;width:100%;height:31px;margin:0 0 5px 0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bootstrap-duallistbox-container .filter.placeholder{color:#aaa}.bootstrap-duallistbox-container.moveonselect .move,.bootstrap-duallistbox-container.moveonselect .remove{display:none}.bootstrap-duallistbox-container.moveonselect .moveall,.bootstrap-duallistbox-container.moveonselect .removeall{width:100%}
|
||||||
10
ruoyi-admin/src/main/resources/static/ajax/libs/duallistbox/bootstrap-duallistbox.min.js
vendored
Normal file
10
ruoyi-admin/src/main/resources/static/ajax/libs/duallistbox/bootstrap-duallistbox.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,315 @@
|
||||||
|
/* The MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2011 by Michael Zinsmaier and nergal.dev
|
||||||
|
Copyright (c) 2012 by Thomas Ritou
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in
|
||||||
|
all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||||
|
THE SOFTWARE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
|
||||||
|
____________________________________________________
|
||||||
|
|
||||||
|
what it is:
|
||||||
|
____________________________________________________
|
||||||
|
|
||||||
|
curvedLines is a plugin for flot, that tries to display lines in a smoother way.
|
||||||
|
The plugin is based on nergal.dev's work https://code.google.com/p/flot/issues/detail?id=226
|
||||||
|
and further extended with a mode that forces the min/max points of the curves to be on the
|
||||||
|
points. Both modes are achieved through adding of more data points
|
||||||
|
=> 1) with large data sets you may get trouble
|
||||||
|
=> 2) if you want to display the points too, you have to plot them as 2nd data series over the lines
|
||||||
|
|
||||||
|
&& 3) consecutive x data points are not allowed to have the same value
|
||||||
|
|
||||||
|
This is version 0.5 of curvedLines so it will probably not work in every case. However
|
||||||
|
the basic form of use descirbed next works (:
|
||||||
|
|
||||||
|
Feel free to further improve the code
|
||||||
|
|
||||||
|
____________________________________________________
|
||||||
|
|
||||||
|
how to use it:
|
||||||
|
____________________________________________________
|
||||||
|
|
||||||
|
var d1 = [[5,5],[7,3],[9,12]];
|
||||||
|
|
||||||
|
var options = { series: { curvedLines: { active: true }}};
|
||||||
|
|
||||||
|
$.plot($("#placeholder"), [{data = d1, lines: { show: true}, curvedLines: {apply: true}}], options);
|
||||||
|
|
||||||
|
_____________________________________________________
|
||||||
|
|
||||||
|
options:
|
||||||
|
_____________________________________________________
|
||||||
|
|
||||||
|
active: bool true => plugin can be used
|
||||||
|
apply: bool true => series will be drawn as curved line
|
||||||
|
fit: bool true => forces the max,mins of the curve to be on the datapoints
|
||||||
|
curvePointFactor int defines how many "virtual" points are used per "real" data point to
|
||||||
|
emulate the curvedLines (points total = real points * curvePointFactor)
|
||||||
|
fitPointDist: int defines the x axis distance of the additional two points that are used
|
||||||
|
to enforce the min max condition.
|
||||||
|
|
||||||
|
+ line options (since v0.5 curved lines use flots line implementation for drawing
|
||||||
|
=> line options like fill, show ... are supported out of the box)
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
* v0.1 initial commit
|
||||||
|
* v0.15 negative values should work now (outcommented a negative -> 0 hook hope it does no harm)
|
||||||
|
* v0.2 added fill option (thanks to monemihir) and multi axis support (thanks to soewono effendi)
|
||||||
|
* v0.3 improved saddle handling and added basic handling of Dates
|
||||||
|
* v0.4 rewritten fill option (thomas ritou) mostly from original flot code (now fill between points rather than to graph bottom), corrected fill Opacity bug
|
||||||
|
* v0.5 rewritten instead of implementing a own draw function CurvedLines is now based on the processDatapoints flot hook (credits go to thomas ritou).
|
||||||
|
* This change breakes existing code however CurvedLines are now just many tiny straight lines to flot and therefore all flot lines options (like gradient fill,
|
||||||
|
* shadow) are now supported out of the box
|
||||||
|
* v0.6 flot 0.8 compatibility and some bug fixes
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function($) {
|
||||||
|
|
||||||
|
var options = {
|
||||||
|
series : {
|
||||||
|
curvedLines : {
|
||||||
|
active : false,
|
||||||
|
apply: false,
|
||||||
|
fit : false,
|
||||||
|
curvePointFactor : 20,
|
||||||
|
fitPointDist : undefined
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function init(plot) {
|
||||||
|
|
||||||
|
plot.hooks.processOptions.push(processOptions);
|
||||||
|
|
||||||
|
//if the plugin is active register processDatapoints method
|
||||||
|
function processOptions(plot, options) {
|
||||||
|
if (options.series.curvedLines.active) {
|
||||||
|
plot.hooks.processDatapoints.unshift(processDatapoints);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//only if the plugin is active
|
||||||
|
function processDatapoints(plot, series, datapoints) {
|
||||||
|
var nrPoints = datapoints.points.length / datapoints.pointsize;
|
||||||
|
var EPSILON = 0.5; //pretty large epsilon but save
|
||||||
|
|
||||||
|
if (series.curvedLines.apply == true && series.originSeries === undefined && nrPoints > (1 + EPSILON)) {
|
||||||
|
if (series.lines.fill) {
|
||||||
|
|
||||||
|
var pointsTop = calculateCurvePoints(datapoints, series.curvedLines, 1)
|
||||||
|
,pointsBottom = calculateCurvePoints(datapoints, series.curvedLines, 2); //flot makes sure for us that we've got a second y point if fill is true !
|
||||||
|
|
||||||
|
//Merge top and bottom curve
|
||||||
|
datapoints.pointsize = 3;
|
||||||
|
datapoints.points = [];
|
||||||
|
var j = 0;
|
||||||
|
var k = 0;
|
||||||
|
var i = 0;
|
||||||
|
var ps = 2;
|
||||||
|
while (i < pointsTop.length || j < pointsBottom.length) {
|
||||||
|
if (pointsTop[i] == pointsBottom[j]) {
|
||||||
|
datapoints.points[k] = pointsTop[i];
|
||||||
|
datapoints.points[k + 1] = pointsTop[i + 1];
|
||||||
|
datapoints.points[k + 2] = pointsBottom[j + 1];
|
||||||
|
j += ps;
|
||||||
|
i += ps;
|
||||||
|
|
||||||
|
} else if (pointsTop[i] < pointsBottom[j]) {
|
||||||
|
datapoints.points[k] = pointsTop[i];
|
||||||
|
datapoints.points[k + 1] = pointsTop[i + 1];
|
||||||
|
datapoints.points[k + 2] = k > 0 ? datapoints.points[k-1] : null;
|
||||||
|
i += ps;
|
||||||
|
} else {
|
||||||
|
datapoints.points[k] = pointsBottom[j];
|
||||||
|
datapoints.points[k + 1] = k > 1 ? datapoints.points[k-2] : null;
|
||||||
|
datapoints.points[k + 2] = pointsBottom[j + 1];
|
||||||
|
j += ps;
|
||||||
|
}
|
||||||
|
k += 3;
|
||||||
|
}
|
||||||
|
} else if (series.lines.lineWidth > 0) {
|
||||||
|
datapoints.points = calculateCurvePoints(datapoints, series.curvedLines, 1);
|
||||||
|
datapoints.pointsize = 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//no real idea whats going on here code mainly from https://code.google.com/p/flot/issues/detail?id=226
|
||||||
|
//if fit option is selected additional datapoints get inserted before the curve calculations in nergal.dev s code.
|
||||||
|
function calculateCurvePoints(datapoints, curvedLinesOptions, yPos) {
|
||||||
|
|
||||||
|
var points = datapoints.points, ps = datapoints.pointsize;
|
||||||
|
var num = curvedLinesOptions.curvePointFactor * (points.length / ps);
|
||||||
|
|
||||||
|
var xdata = new Array;
|
||||||
|
var ydata = new Array;
|
||||||
|
|
||||||
|
var curX = -1;
|
||||||
|
var curY = -1;
|
||||||
|
var j = 0;
|
||||||
|
|
||||||
|
if (curvedLinesOptions.fit) {
|
||||||
|
//insert a point before and after the "real" data point to force the line
|
||||||
|
//to have a max,min at the data point.
|
||||||
|
|
||||||
|
var fpDist;
|
||||||
|
if(typeof curvedLinesOptions.fitPointDist == 'undefined') {
|
||||||
|
//estimate it
|
||||||
|
var minX = points[0];
|
||||||
|
var maxX = points[points.length-ps];
|
||||||
|
fpDist = (maxX - minX) / (500 * 100); //x range / (estimated pixel length of placeholder * factor)
|
||||||
|
} else {
|
||||||
|
//use user defined value
|
||||||
|
fpDist = curvedLinesOptions.fitPointDist;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var i = 0; i < points.length; i += ps) {
|
||||||
|
|
||||||
|
var frontX;
|
||||||
|
var backX;
|
||||||
|
curX = i;
|
||||||
|
curY = i + yPos;
|
||||||
|
|
||||||
|
//add point X s
|
||||||
|
frontX = points[curX] - fpDist;
|
||||||
|
backX = points[curX] + fpDist;
|
||||||
|
|
||||||
|
var factor = 2;
|
||||||
|
while (frontX == points[curX] || backX == points[curX]) {
|
||||||
|
//inside the ulp
|
||||||
|
frontX = points[curX] - (fpDist * factor);
|
||||||
|
backX = points[curX] + (fpDist * factor);
|
||||||
|
factor++;
|
||||||
|
}
|
||||||
|
|
||||||
|
//add curve points
|
||||||
|
xdata[j] = frontX;
|
||||||
|
ydata[j] = points[curY];
|
||||||
|
j++;
|
||||||
|
|
||||||
|
xdata[j] = points[curX];
|
||||||
|
ydata[j] = points[curY];
|
||||||
|
j++;
|
||||||
|
|
||||||
|
xdata[j] = backX;
|
||||||
|
ydata[j] = points[curY];
|
||||||
|
j++;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
//just use the datapoints
|
||||||
|
for (var i = 0; i < points.length; i += ps) {
|
||||||
|
curX = i;
|
||||||
|
curY = i + yPos;
|
||||||
|
|
||||||
|
xdata[j] = points[curX];
|
||||||
|
ydata[j] = points[curY];
|
||||||
|
j++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var n = xdata.length;
|
||||||
|
|
||||||
|
var y2 = new Array();
|
||||||
|
var delta = new Array();
|
||||||
|
y2[0] = 0;
|
||||||
|
y2[n - 1] = 0;
|
||||||
|
delta[0] = 0;
|
||||||
|
|
||||||
|
for (var i = 1; i < n - 1; ++i) {
|
||||||
|
var d = (xdata[i + 1] - xdata[i - 1]);
|
||||||
|
if (d == 0) {
|
||||||
|
//point before current point and after current point need some space in between
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
var s = (xdata[i] - xdata[i - 1]) / d;
|
||||||
|
var p = s * y2[i - 1] + 2;
|
||||||
|
y2[i] = (s - 1) / p;
|
||||||
|
delta[i] = (ydata[i + 1] - ydata[i]) / (xdata[i + 1] - xdata[i]) - (ydata[i] - ydata[i - 1]) / (xdata[i] - xdata[i - 1]);
|
||||||
|
delta[i] = (6 * delta[i] / (xdata[i + 1] - xdata[i - 1]) - s * delta[i - 1]) / p;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var j = n - 2; j >= 0; --j) {
|
||||||
|
y2[j] = y2[j] * y2[j + 1] + delta[j];
|
||||||
|
}
|
||||||
|
|
||||||
|
// xmax - xmin / #points
|
||||||
|
var step = (xdata[n - 1] - xdata[0]) / (num - 1);
|
||||||
|
|
||||||
|
var xnew = new Array;
|
||||||
|
var ynew = new Array;
|
||||||
|
var result = new Array;
|
||||||
|
|
||||||
|
xnew[0] = xdata[0];
|
||||||
|
ynew[0] = ydata[0];
|
||||||
|
|
||||||
|
result.push(xnew[0]);
|
||||||
|
result.push(ynew[0]);
|
||||||
|
|
||||||
|
for ( j = 1; j < num; ++j) {
|
||||||
|
//new x point (sampling point for the created curve)
|
||||||
|
xnew[j] = xnew[0] + j * step;
|
||||||
|
|
||||||
|
var max = n - 1;
|
||||||
|
var min = 0;
|
||||||
|
|
||||||
|
while (max - min > 1) {
|
||||||
|
var k = Math.round((max + min) / 2);
|
||||||
|
if (xdata[k] > xnew[j]) {
|
||||||
|
max = k;
|
||||||
|
} else {
|
||||||
|
min = k;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//found point one to the left and one to the right of generated new point
|
||||||
|
var h = (xdata[max] - xdata[min]);
|
||||||
|
|
||||||
|
if (h == 0) {
|
||||||
|
//similar to above two points from original x data need some space between them
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
var a = (xdata[max] - xnew[j]) / h;
|
||||||
|
var b = (xnew[j] - xdata[min]) / h;
|
||||||
|
|
||||||
|
ynew[j] = a * ydata[min] + b * ydata[max] + ((a * a * a - a) * y2[min] + (b * b * b - b) * y2[max]) * (h * h) / 6;
|
||||||
|
|
||||||
|
result.push(xnew[j]);
|
||||||
|
result.push(ynew[j]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
}//end init
|
||||||
|
|
||||||
|
$.plot.plugins.push({
|
||||||
|
init : init,
|
||||||
|
options : options,
|
||||||
|
name : 'curvedLines',
|
||||||
|
version : '0.5'
|
||||||
|
});
|
||||||
|
|
||||||
|
})(jQuery);
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,750 @@
|
||||||
|
/*
|
||||||
|
Flot plugin for rendering pie charts. The plugin assumes the data is
|
||||||
|
coming is as a single data value for each series, and each of those
|
||||||
|
values is a positive value or zero (negative numbers don't make
|
||||||
|
any sense and will cause strange effects). The data values do
|
||||||
|
NOT need to be passed in as percentage values because it
|
||||||
|
internally calculates the total and percentages.
|
||||||
|
|
||||||
|
* Created by Brian Medendorp, June 2009
|
||||||
|
* Updated November 2009 with contributions from: btburnett3, Anthony Aragues and Xavi Ivars
|
||||||
|
|
||||||
|
* Changes:
|
||||||
|
2009-10-22: lineJoin set to round
|
||||||
|
2009-10-23: IE full circle fix, donut
|
||||||
|
2009-11-11: Added basic hover from btburnett3 - does not work in IE, and center is off in Chrome and Opera
|
||||||
|
2009-11-17: Added IE hover capability submitted by Anthony Aragues
|
||||||
|
2009-11-18: Added bug fix submitted by Xavi Ivars (issues with arrays when other JS libraries are included as well)
|
||||||
|
|
||||||
|
|
||||||
|
Available options are:
|
||||||
|
series: {
|
||||||
|
pie: {
|
||||||
|
show: true/false
|
||||||
|
radius: 0-1 for percentage of fullsize, or a specified pixel length, or 'auto'
|
||||||
|
innerRadius: 0-1 for percentage of fullsize or a specified pixel length, for creating a donut effect
|
||||||
|
startAngle: 0-2 factor of PI used for starting angle (in radians) i.e 3/2 starts at the top, 0 and 2 have the same result
|
||||||
|
tilt: 0-1 for percentage to tilt the pie, where 1 is no tilt, and 0 is completely flat (nothing will show)
|
||||||
|
offset: {
|
||||||
|
top: integer value to move the pie up or down
|
||||||
|
left: integer value to move the pie left or right, or 'auto'
|
||||||
|
},
|
||||||
|
stroke: {
|
||||||
|
color: any hexidecimal color value (other formats may or may not work, so best to stick with something like '#FFF')
|
||||||
|
width: integer pixel width of the stroke
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true/false, or 'auto'
|
||||||
|
formatter: a user-defined function that modifies the text/style of the label text
|
||||||
|
radius: 0-1 for percentage of fullsize, or a specified pixel length
|
||||||
|
background: {
|
||||||
|
color: any hexidecimal color value (other formats may or may not work, so best to stick with something like '#000')
|
||||||
|
opacity: 0-1
|
||||||
|
},
|
||||||
|
threshold: 0-1 for the percentage value at which to hide labels (if they're too small)
|
||||||
|
},
|
||||||
|
combine: {
|
||||||
|
threshold: 0-1 for the percentage value at which to combine slices (if they're too small)
|
||||||
|
color: any hexidecimal color value (other formats may or may not work, so best to stick with something like '#CCC'), if null, the plugin will automatically use the color of the first slice to be combined
|
||||||
|
label: any text value of what the combined slice should be labeled
|
||||||
|
}
|
||||||
|
highlight: {
|
||||||
|
opacity: 0-1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
More detail and specific examples can be found in the included HTML file.
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function ($)
|
||||||
|
{
|
||||||
|
function init(plot) // this is the "body" of the plugin
|
||||||
|
{
|
||||||
|
var canvas = null;
|
||||||
|
var target = null;
|
||||||
|
var maxRadius = null;
|
||||||
|
var centerLeft = null;
|
||||||
|
var centerTop = null;
|
||||||
|
var total = 0;
|
||||||
|
var redraw = true;
|
||||||
|
var redrawAttempts = 10;
|
||||||
|
var shrink = 0.95;
|
||||||
|
var legendWidth = 0;
|
||||||
|
var processed = false;
|
||||||
|
var raw = false;
|
||||||
|
|
||||||
|
// interactive variables
|
||||||
|
var highlights = [];
|
||||||
|
|
||||||
|
// add hook to determine if pie plugin in enabled, and then perform necessary operations
|
||||||
|
plot.hooks.processOptions.push(checkPieEnabled);
|
||||||
|
plot.hooks.bindEvents.push(bindEvents);
|
||||||
|
|
||||||
|
// check to see if the pie plugin is enabled
|
||||||
|
function checkPieEnabled(plot, options)
|
||||||
|
{
|
||||||
|
if (options.series.pie.show)
|
||||||
|
{
|
||||||
|
//disable grid
|
||||||
|
options.grid.show = false;
|
||||||
|
|
||||||
|
// set labels.show
|
||||||
|
if (options.series.pie.label.show=='auto')
|
||||||
|
if (options.legend.show)
|
||||||
|
options.series.pie.label.show = false;
|
||||||
|
else
|
||||||
|
options.series.pie.label.show = true;
|
||||||
|
|
||||||
|
// set radius
|
||||||
|
if (options.series.pie.radius=='auto')
|
||||||
|
if (options.series.pie.label.show)
|
||||||
|
options.series.pie.radius = 3/4;
|
||||||
|
else
|
||||||
|
options.series.pie.radius = 1;
|
||||||
|
|
||||||
|
// ensure sane tilt
|
||||||
|
if (options.series.pie.tilt>1)
|
||||||
|
options.series.pie.tilt=1;
|
||||||
|
if (options.series.pie.tilt<0)
|
||||||
|
options.series.pie.tilt=0;
|
||||||
|
|
||||||
|
// add processData hook to do transformations on the data
|
||||||
|
plot.hooks.processDatapoints.push(processDatapoints);
|
||||||
|
plot.hooks.drawOverlay.push(drawOverlay);
|
||||||
|
|
||||||
|
// add draw hook
|
||||||
|
plot.hooks.draw.push(draw);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// bind hoverable events
|
||||||
|
function bindEvents(plot, eventHolder)
|
||||||
|
{
|
||||||
|
var options = plot.getOptions();
|
||||||
|
|
||||||
|
if (options.series.pie.show && options.grid.hoverable)
|
||||||
|
eventHolder.unbind('mousemove').mousemove(onMouseMove);
|
||||||
|
|
||||||
|
if (options.series.pie.show && options.grid.clickable)
|
||||||
|
eventHolder.unbind('click').click(onClick);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// debugging function that prints out an object
|
||||||
|
function alertObject(obj)
|
||||||
|
{
|
||||||
|
var msg = '';
|
||||||
|
function traverse(obj, depth)
|
||||||
|
{
|
||||||
|
if (!depth)
|
||||||
|
depth = 0;
|
||||||
|
for (var i = 0; i < obj.length; ++i)
|
||||||
|
{
|
||||||
|
for (var j=0; j<depth; j++)
|
||||||
|
msg += '\t';
|
||||||
|
|
||||||
|
if( typeof obj[i] == "object")
|
||||||
|
{ // its an object
|
||||||
|
msg += ''+i+':\n';
|
||||||
|
traverse(obj[i], depth+1);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{ // its a value
|
||||||
|
msg += ''+i+': '+obj[i]+'\n';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
traverse(obj);
|
||||||
|
alert(msg);
|
||||||
|
}
|
||||||
|
|
||||||
|
function calcTotal(data)
|
||||||
|
{
|
||||||
|
for (var i = 0; i < data.length; ++i)
|
||||||
|
{
|
||||||
|
var item = parseFloat(data[i].data[0][1]);
|
||||||
|
if (item)
|
||||||
|
total += item;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function processDatapoints(plot, series, data, datapoints)
|
||||||
|
{
|
||||||
|
if (!processed)
|
||||||
|
{
|
||||||
|
processed = true;
|
||||||
|
|
||||||
|
canvas = plot.getCanvas();
|
||||||
|
target = $(canvas).parent();
|
||||||
|
options = plot.getOptions();
|
||||||
|
|
||||||
|
plot.setData(combine(plot.getData()));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setupPie()
|
||||||
|
{
|
||||||
|
legendWidth = target.children().filter('.legend').children().width();
|
||||||
|
|
||||||
|
// calculate maximum radius and center point
|
||||||
|
maxRadius = Math.min(canvas.width,(canvas.height/options.series.pie.tilt))/2;
|
||||||
|
centerTop = (canvas.height/2)+options.series.pie.offset.top;
|
||||||
|
centerLeft = (canvas.width/2);
|
||||||
|
|
||||||
|
if (options.series.pie.offset.left=='auto')
|
||||||
|
if (options.legend.position.match('w'))
|
||||||
|
centerLeft += legendWidth/2;
|
||||||
|
else
|
||||||
|
centerLeft -= legendWidth/2;
|
||||||
|
else
|
||||||
|
centerLeft += options.series.pie.offset.left;
|
||||||
|
|
||||||
|
if (centerLeft<maxRadius)
|
||||||
|
centerLeft = maxRadius;
|
||||||
|
else if (centerLeft>canvas.width-maxRadius)
|
||||||
|
centerLeft = canvas.width-maxRadius;
|
||||||
|
}
|
||||||
|
|
||||||
|
function fixData(data)
|
||||||
|
{
|
||||||
|
for (var i = 0; i < data.length; ++i)
|
||||||
|
{
|
||||||
|
if (typeof(data[i].data)=='number')
|
||||||
|
data[i].data = [[1,data[i].data]];
|
||||||
|
else if (typeof(data[i].data)=='undefined' || typeof(data[i].data[0])=='undefined')
|
||||||
|
{
|
||||||
|
if (typeof(data[i].data)!='undefined' && typeof(data[i].data.label)!='undefined')
|
||||||
|
data[i].label = data[i].data.label; // fix weirdness coming from flot
|
||||||
|
data[i].data = [[1,0]];
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
|
function combine(data)
|
||||||
|
{
|
||||||
|
data = fixData(data);
|
||||||
|
calcTotal(data);
|
||||||
|
var combined = 0;
|
||||||
|
var numCombined = 0;
|
||||||
|
var color = options.series.pie.combine.color;
|
||||||
|
|
||||||
|
var newdata = [];
|
||||||
|
for (var i = 0; i < data.length; ++i)
|
||||||
|
{
|
||||||
|
// make sure its a number
|
||||||
|
data[i].data[0][1] = parseFloat(data[i].data[0][1]);
|
||||||
|
if (!data[i].data[0][1])
|
||||||
|
data[i].data[0][1] = 0;
|
||||||
|
|
||||||
|
if (data[i].data[0][1]/total<=options.series.pie.combine.threshold)
|
||||||
|
{
|
||||||
|
combined += data[i].data[0][1];
|
||||||
|
numCombined++;
|
||||||
|
if (!color)
|
||||||
|
color = data[i].color;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
newdata.push({
|
||||||
|
data: [[1,data[i].data[0][1]]],
|
||||||
|
color: data[i].color,
|
||||||
|
label: data[i].label,
|
||||||
|
angle: (data[i].data[0][1]*(Math.PI*2))/total,
|
||||||
|
percent: (data[i].data[0][1]/total*100)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (numCombined>0)
|
||||||
|
newdata.push({
|
||||||
|
data: [[1,combined]],
|
||||||
|
color: color,
|
||||||
|
label: options.series.pie.combine.label,
|
||||||
|
angle: (combined*(Math.PI*2))/total,
|
||||||
|
percent: (combined/total*100)
|
||||||
|
});
|
||||||
|
return newdata;
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw(plot, newCtx)
|
||||||
|
{
|
||||||
|
if (!target) return; // if no series were passed
|
||||||
|
ctx = newCtx;
|
||||||
|
|
||||||
|
setupPie();
|
||||||
|
var slices = plot.getData();
|
||||||
|
|
||||||
|
var attempts = 0;
|
||||||
|
while (redraw && attempts<redrawAttempts)
|
||||||
|
{
|
||||||
|
redraw = false;
|
||||||
|
if (attempts>0)
|
||||||
|
maxRadius *= shrink;
|
||||||
|
attempts += 1;
|
||||||
|
clear();
|
||||||
|
if (options.series.pie.tilt<=0.8)
|
||||||
|
drawShadow();
|
||||||
|
drawPie();
|
||||||
|
}
|
||||||
|
if (attempts >= redrawAttempts) {
|
||||||
|
clear();
|
||||||
|
target.prepend('<div class="error">Could not draw pie with labels contained inside canvas</div>');
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( plot.setSeries && plot.insertLegend )
|
||||||
|
{
|
||||||
|
plot.setSeries(slices);
|
||||||
|
plot.insertLegend();
|
||||||
|
}
|
||||||
|
|
||||||
|
// we're actually done at this point, just defining internal functions at this point
|
||||||
|
|
||||||
|
function clear()
|
||||||
|
{
|
||||||
|
ctx.clearRect(0,0,canvas.width,canvas.height);
|
||||||
|
target.children().filter('.pieLabel, .pieLabelBackground').remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawShadow()
|
||||||
|
{
|
||||||
|
var shadowLeft = 5;
|
||||||
|
var shadowTop = 15;
|
||||||
|
var edge = 10;
|
||||||
|
var alpha = 0.02;
|
||||||
|
|
||||||
|
// set radius
|
||||||
|
if (options.series.pie.radius>1)
|
||||||
|
var radius = options.series.pie.radius;
|
||||||
|
else
|
||||||
|
var radius = maxRadius * options.series.pie.radius;
|
||||||
|
|
||||||
|
if (radius>=(canvas.width/2)-shadowLeft || radius*options.series.pie.tilt>=(canvas.height/2)-shadowTop || radius<=edge)
|
||||||
|
return; // shadow would be outside canvas, so don't draw it
|
||||||
|
|
||||||
|
ctx.save();
|
||||||
|
ctx.translate(shadowLeft,shadowTop);
|
||||||
|
ctx.globalAlpha = alpha;
|
||||||
|
ctx.fillStyle = '#000';
|
||||||
|
|
||||||
|
// center and rotate to starting position
|
||||||
|
ctx.translate(centerLeft,centerTop);
|
||||||
|
ctx.scale(1, options.series.pie.tilt);
|
||||||
|
|
||||||
|
//radius -= edge;
|
||||||
|
for (var i=1; i<=edge; i++)
|
||||||
|
{
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(0,0,radius,0,Math.PI*2,false);
|
||||||
|
ctx.fill();
|
||||||
|
radius -= i;
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawPie()
|
||||||
|
{
|
||||||
|
startAngle = Math.PI*options.series.pie.startAngle;
|
||||||
|
|
||||||
|
// set radius
|
||||||
|
if (options.series.pie.radius>1)
|
||||||
|
var radius = options.series.pie.radius;
|
||||||
|
else
|
||||||
|
var radius = maxRadius * options.series.pie.radius;
|
||||||
|
|
||||||
|
// center and rotate to starting position
|
||||||
|
ctx.save();
|
||||||
|
ctx.translate(centerLeft,centerTop);
|
||||||
|
ctx.scale(1, options.series.pie.tilt);
|
||||||
|
//ctx.rotate(startAngle); // start at top; -- This doesn't work properly in Opera
|
||||||
|
|
||||||
|
// draw slices
|
||||||
|
ctx.save();
|
||||||
|
var currentAngle = startAngle;
|
||||||
|
for (var i = 0; i < slices.length; ++i)
|
||||||
|
{
|
||||||
|
slices[i].startAngle = currentAngle;
|
||||||
|
drawSlice(slices[i].angle, slices[i].color, true);
|
||||||
|
}
|
||||||
|
ctx.restore();
|
||||||
|
|
||||||
|
// draw slice outlines
|
||||||
|
ctx.save();
|
||||||
|
ctx.lineWidth = options.series.pie.stroke.width;
|
||||||
|
currentAngle = startAngle;
|
||||||
|
for (var i = 0; i < slices.length; ++i)
|
||||||
|
drawSlice(slices[i].angle, options.series.pie.stroke.color, false);
|
||||||
|
ctx.restore();
|
||||||
|
|
||||||
|
// draw donut hole
|
||||||
|
drawDonutHole(ctx);
|
||||||
|
|
||||||
|
// draw labels
|
||||||
|
if (options.series.pie.label.show)
|
||||||
|
drawLabels();
|
||||||
|
|
||||||
|
// restore to original state
|
||||||
|
ctx.restore();
|
||||||
|
|
||||||
|
function drawSlice(angle, color, fill)
|
||||||
|
{
|
||||||
|
if (angle<=0)
|
||||||
|
return;
|
||||||
|
|
||||||
|
if (fill)
|
||||||
|
ctx.fillStyle = color;
|
||||||
|
else
|
||||||
|
{
|
||||||
|
ctx.strokeStyle = color;
|
||||||
|
ctx.lineJoin = 'round';
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
if (Math.abs(angle - Math.PI*2) > 0.000000001)
|
||||||
|
ctx.moveTo(0,0); // Center of the pie
|
||||||
|
else if ($.browser.msie)
|
||||||
|
angle -= 0.0001;
|
||||||
|
//ctx.arc(0,0,radius,0,angle,false); // This doesn't work properly in Opera
|
||||||
|
ctx.arc(0,0,radius,currentAngle,currentAngle+angle,false);
|
||||||
|
ctx.closePath();
|
||||||
|
//ctx.rotate(angle); // This doesn't work properly in Opera
|
||||||
|
currentAngle += angle;
|
||||||
|
|
||||||
|
if (fill)
|
||||||
|
ctx.fill();
|
||||||
|
else
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawLabels()
|
||||||
|
{
|
||||||
|
var currentAngle = startAngle;
|
||||||
|
|
||||||
|
// set radius
|
||||||
|
if (options.series.pie.label.radius>1)
|
||||||
|
var radius = options.series.pie.label.radius;
|
||||||
|
else
|
||||||
|
var radius = maxRadius * options.series.pie.label.radius;
|
||||||
|
|
||||||
|
for (var i = 0; i < slices.length; ++i)
|
||||||
|
{
|
||||||
|
if (slices[i].percent >= options.series.pie.label.threshold*100)
|
||||||
|
drawLabel(slices[i], currentAngle, i);
|
||||||
|
currentAngle += slices[i].angle;
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawLabel(slice, startAngle, index)
|
||||||
|
{
|
||||||
|
if (slice.data[0][1]==0)
|
||||||
|
return;
|
||||||
|
|
||||||
|
// format label text
|
||||||
|
var lf = options.legend.labelFormatter, text, plf = options.series.pie.label.formatter;
|
||||||
|
if (lf)
|
||||||
|
text = lf(slice.label, slice);
|
||||||
|
else
|
||||||
|
text = slice.label;
|
||||||
|
if (plf)
|
||||||
|
text = plf(text, slice);
|
||||||
|
|
||||||
|
var halfAngle = ((startAngle+slice.angle) + startAngle)/2;
|
||||||
|
var x = centerLeft + Math.round(Math.cos(halfAngle) * radius);
|
||||||
|
var y = centerTop + Math.round(Math.sin(halfAngle) * radius) * options.series.pie.tilt;
|
||||||
|
|
||||||
|
var html = '<span class="pieLabel" id="pieLabel'+index+'" style="position:absolute;top:' + y + 'px;left:' + x + 'px;">' + text + "</span>";
|
||||||
|
target.append(html);
|
||||||
|
var label = target.children('#pieLabel'+index);
|
||||||
|
var labelTop = (y - label.height()/2);
|
||||||
|
var labelLeft = (x - label.width()/2);
|
||||||
|
label.css('top', labelTop);
|
||||||
|
label.css('left', labelLeft);
|
||||||
|
|
||||||
|
// check to make sure that the label is not outside the canvas
|
||||||
|
if (0-labelTop>0 || 0-labelLeft>0 || canvas.height-(labelTop+label.height())<0 || canvas.width-(labelLeft+label.width())<0)
|
||||||
|
redraw = true;
|
||||||
|
|
||||||
|
if (options.series.pie.label.background.opacity != 0) {
|
||||||
|
// put in the transparent background separately to avoid blended labels and label boxes
|
||||||
|
var c = options.series.pie.label.background.color;
|
||||||
|
if (c == null) {
|
||||||
|
c = slice.color;
|
||||||
|
}
|
||||||
|
var pos = 'top:'+labelTop+'px;left:'+labelLeft+'px;';
|
||||||
|
$('<div class="pieLabelBackground" style="position:absolute;width:' + label.width() + 'px;height:' + label.height() + 'px;' + pos +'background-color:' + c + ';"> </div>').insertBefore(label).css('opacity', options.series.pie.label.background.opacity);
|
||||||
|
}
|
||||||
|
} // end individual label function
|
||||||
|
} // end drawLabels function
|
||||||
|
} // end drawPie function
|
||||||
|
} // end draw function
|
||||||
|
|
||||||
|
// Placed here because it needs to be accessed from multiple locations
|
||||||
|
function drawDonutHole(layer)
|
||||||
|
{
|
||||||
|
// draw donut hole
|
||||||
|
if(options.series.pie.innerRadius > 0)
|
||||||
|
{
|
||||||
|
// subtract the center
|
||||||
|
layer.save();
|
||||||
|
innerRadius = options.series.pie.innerRadius > 1 ? options.series.pie.innerRadius : maxRadius * options.series.pie.innerRadius;
|
||||||
|
layer.globalCompositeOperation = 'destination-out'; // this does not work with excanvas, but it will fall back to using the stroke color
|
||||||
|
layer.beginPath();
|
||||||
|
layer.fillStyle = options.series.pie.stroke.color;
|
||||||
|
layer.arc(0,0,innerRadius,0,Math.PI*2,false);
|
||||||
|
layer.fill();
|
||||||
|
layer.closePath();
|
||||||
|
layer.restore();
|
||||||
|
|
||||||
|
// add inner stroke
|
||||||
|
layer.save();
|
||||||
|
layer.beginPath();
|
||||||
|
layer.strokeStyle = options.series.pie.stroke.color;
|
||||||
|
layer.arc(0,0,innerRadius,0,Math.PI*2,false);
|
||||||
|
layer.stroke();
|
||||||
|
layer.closePath();
|
||||||
|
layer.restore();
|
||||||
|
// TODO: add extra shadow inside hole (with a mask) if the pie is tilted.
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//-- Additional Interactive related functions --
|
||||||
|
|
||||||
|
function isPointInPoly(poly, pt)
|
||||||
|
{
|
||||||
|
for(var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
|
||||||
|
((poly[i][1] <= pt[1] && pt[1] < poly[j][1]) || (poly[j][1] <= pt[1] && pt[1]< poly[i][1]))
|
||||||
|
&& (pt[0] < (poly[j][0] - poly[i][0]) * (pt[1] - poly[i][1]) / (poly[j][1] - poly[i][1]) + poly[i][0])
|
||||||
|
&& (c = !c);
|
||||||
|
return c;
|
||||||
|
}
|
||||||
|
|
||||||
|
function findNearbySlice(mouseX, mouseY)
|
||||||
|
{
|
||||||
|
var slices = plot.getData(),
|
||||||
|
options = plot.getOptions(),
|
||||||
|
radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius;
|
||||||
|
|
||||||
|
for (var i = 0; i < slices.length; ++i)
|
||||||
|
{
|
||||||
|
var s = slices[i];
|
||||||
|
|
||||||
|
if(s.pie.show)
|
||||||
|
{
|
||||||
|
ctx.save();
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(0,0); // Center of the pie
|
||||||
|
//ctx.scale(1, options.series.pie.tilt); // this actually seems to break everything when here.
|
||||||
|
ctx.arc(0,0,radius,s.startAngle,s.startAngle+s.angle,false);
|
||||||
|
ctx.closePath();
|
||||||
|
x = mouseX-centerLeft;
|
||||||
|
y = mouseY-centerTop;
|
||||||
|
if(ctx.isPointInPath)
|
||||||
|
{
|
||||||
|
if (ctx.isPointInPath(mouseX-centerLeft, mouseY-centerTop))
|
||||||
|
{
|
||||||
|
//alert('found slice!');
|
||||||
|
ctx.restore();
|
||||||
|
return {datapoint: [s.percent, s.data], dataIndex: 0, series: s, seriesIndex: i};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
// excanvas for IE doesn;t support isPointInPath, this is a workaround.
|
||||||
|
p1X = (radius * Math.cos(s.startAngle));
|
||||||
|
p1Y = (radius * Math.sin(s.startAngle));
|
||||||
|
p2X = (radius * Math.cos(s.startAngle+(s.angle/4)));
|
||||||
|
p2Y = (radius * Math.sin(s.startAngle+(s.angle/4)));
|
||||||
|
p3X = (radius * Math.cos(s.startAngle+(s.angle/2)));
|
||||||
|
p3Y = (radius * Math.sin(s.startAngle+(s.angle/2)));
|
||||||
|
p4X = (radius * Math.cos(s.startAngle+(s.angle/1.5)));
|
||||||
|
p4Y = (radius * Math.sin(s.startAngle+(s.angle/1.5)));
|
||||||
|
p5X = (radius * Math.cos(s.startAngle+s.angle));
|
||||||
|
p5Y = (radius * Math.sin(s.startAngle+s.angle));
|
||||||
|
arrPoly = [[0,0],[p1X,p1Y],[p2X,p2Y],[p3X,p3Y],[p4X,p4Y],[p5X,p5Y]];
|
||||||
|
arrPoint = [x,y];
|
||||||
|
// TODO: perhaps do some mathmatical trickery here with the Y-coordinate to compensate for pie tilt?
|
||||||
|
if(isPointInPoly(arrPoly, arrPoint))
|
||||||
|
{
|
||||||
|
ctx.restore();
|
||||||
|
return {datapoint: [s.percent, s.data], dataIndex: 0, series: s, seriesIndex: i};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onMouseMove(e)
|
||||||
|
{
|
||||||
|
triggerClickHoverEvent('plothover', e);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onClick(e)
|
||||||
|
{
|
||||||
|
triggerClickHoverEvent('plotclick', e);
|
||||||
|
}
|
||||||
|
|
||||||
|
// trigger click or hover event (they send the same parameters so we share their code)
|
||||||
|
function triggerClickHoverEvent(eventname, e)
|
||||||
|
{
|
||||||
|
var offset = plot.offset(),
|
||||||
|
canvasX = parseInt(e.pageX - offset.left),
|
||||||
|
canvasY = parseInt(e.pageY - offset.top),
|
||||||
|
item = findNearbySlice(canvasX, canvasY);
|
||||||
|
|
||||||
|
if (options.grid.autoHighlight)
|
||||||
|
{
|
||||||
|
// clear auto-highlights
|
||||||
|
for (var i = 0; i < highlights.length; ++i)
|
||||||
|
{
|
||||||
|
var h = highlights[i];
|
||||||
|
if (h.auto == eventname && !(item && h.series == item.series))
|
||||||
|
unhighlight(h.series);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// highlight the slice
|
||||||
|
if (item)
|
||||||
|
highlight(item.series, eventname);
|
||||||
|
|
||||||
|
// trigger any hover bind events
|
||||||
|
var pos = { pageX: e.pageX, pageY: e.pageY };
|
||||||
|
target.trigger(eventname, [ pos, item ]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function highlight(s, auto)
|
||||||
|
{
|
||||||
|
if (typeof s == "number")
|
||||||
|
s = series[s];
|
||||||
|
|
||||||
|
var i = indexOfHighlight(s);
|
||||||
|
if (i == -1)
|
||||||
|
{
|
||||||
|
highlights.push({ series: s, auto: auto });
|
||||||
|
plot.triggerRedrawOverlay();
|
||||||
|
}
|
||||||
|
else if (!auto)
|
||||||
|
highlights[i].auto = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function unhighlight(s)
|
||||||
|
{
|
||||||
|
if (s == null)
|
||||||
|
{
|
||||||
|
highlights = [];
|
||||||
|
plot.triggerRedrawOverlay();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof s == "number")
|
||||||
|
s = series[s];
|
||||||
|
|
||||||
|
var i = indexOfHighlight(s);
|
||||||
|
if (i != -1)
|
||||||
|
{
|
||||||
|
highlights.splice(i, 1);
|
||||||
|
plot.triggerRedrawOverlay();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function indexOfHighlight(s)
|
||||||
|
{
|
||||||
|
for (var i = 0; i < highlights.length; ++i)
|
||||||
|
{
|
||||||
|
var h = highlights[i];
|
||||||
|
if (h.series == s)
|
||||||
|
return i;
|
||||||
|
}
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawOverlay(plot, octx)
|
||||||
|
{
|
||||||
|
//alert(options.series.pie.radius);
|
||||||
|
var options = plot.getOptions();
|
||||||
|
//alert(options.series.pie.radius);
|
||||||
|
|
||||||
|
var radius = options.series.pie.radius > 1 ? options.series.pie.radius : maxRadius * options.series.pie.radius;
|
||||||
|
|
||||||
|
octx.save();
|
||||||
|
octx.translate(centerLeft, centerTop);
|
||||||
|
octx.scale(1, options.series.pie.tilt);
|
||||||
|
|
||||||
|
for (i = 0; i < highlights.length; ++i)
|
||||||
|
drawHighlight(highlights[i].series);
|
||||||
|
|
||||||
|
drawDonutHole(octx);
|
||||||
|
|
||||||
|
octx.restore();
|
||||||
|
|
||||||
|
function drawHighlight(series)
|
||||||
|
{
|
||||||
|
if (series.angle < 0) return;
|
||||||
|
|
||||||
|
//octx.fillStyle = parseColor(options.series.pie.highlight.color).scale(null, null, null, options.series.pie.highlight.opacity).toString();
|
||||||
|
octx.fillStyle = "rgba(255, 255, 255, "+options.series.pie.highlight.opacity+")"; // this is temporary until we have access to parseColor
|
||||||
|
|
||||||
|
octx.beginPath();
|
||||||
|
if (Math.abs(series.angle - Math.PI*2) > 0.000000001)
|
||||||
|
octx.moveTo(0,0); // Center of the pie
|
||||||
|
octx.arc(0,0,radius,series.startAngle,series.startAngle+series.angle,false);
|
||||||
|
octx.closePath();
|
||||||
|
octx.fill();
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
} // end init (plugin body)
|
||||||
|
|
||||||
|
// define pie specific options and their default values
|
||||||
|
var options = {
|
||||||
|
series: {
|
||||||
|
pie: {
|
||||||
|
show: false,
|
||||||
|
radius: 'auto', // actual radius of the visible pie (based on full calculated radius if <=1, or hard pixel value)
|
||||||
|
innerRadius:0, /* for donut */
|
||||||
|
startAngle: 3/2,
|
||||||
|
tilt: 1,
|
||||||
|
offset: {
|
||||||
|
top: 0,
|
||||||
|
left: 'auto'
|
||||||
|
},
|
||||||
|
stroke: {
|
||||||
|
color: '#FFF',
|
||||||
|
width: 1
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: 'auto',
|
||||||
|
formatter: function(label, slice){
|
||||||
|
return '<div style="font-size:x-small;text-align:center;padding:2px;color:'+slice.color+';">'+label+'<br/>'+Math.round(slice.percent)+'%</div>';
|
||||||
|
}, // formatter function
|
||||||
|
radius: 1, // radius at which to place the labels (based on full calculated radius if <=1, or hard pixel value)
|
||||||
|
background: {
|
||||||
|
color: null,
|
||||||
|
opacity: 0
|
||||||
|
},
|
||||||
|
threshold: 0 // percentage at which to hide the label (i.e. the slice is too narrow)
|
||||||
|
},
|
||||||
|
combine: {
|
||||||
|
threshold: -1, // percentage at which to combine little slices into one larger slice
|
||||||
|
color: null, // color to give the new slice (auto-generated if null)
|
||||||
|
label: 'Other' // label to give the new slice
|
||||||
|
},
|
||||||
|
highlight: {
|
||||||
|
//color: '#FFF', // will add this functionality once parseColor is available
|
||||||
|
opacity: 0.5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$.plot.plugins.push({
|
||||||
|
init: init,
|
||||||
|
options: options,
|
||||||
|
name: "pie",
|
||||||
|
version: "1.0"
|
||||||
|
});
|
||||||
|
})(jQuery);
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
/* Flot plugin for automatically redrawing plots as the placeholder resizes.
|
||||||
|
|
||||||
|
Copyright (c) 2007-2013 IOLA and Ole Laursen.
|
||||||
|
Licensed under the MIT license.
|
||||||
|
|
||||||
|
It works by listening for changes on the placeholder div (through the jQuery
|
||||||
|
resize event plugin) - if the size changes, it will redraw the plot.
|
||||||
|
|
||||||
|
There are no options. If you need to disable the plugin for some plots, you
|
||||||
|
can just fix the size of their placeholders.
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Inline dependency:
|
||||||
|
* jQuery resize event - v1.1 - 3/14/2010
|
||||||
|
* http://benalman.com/projects/jquery-resize-plugin/
|
||||||
|
*
|
||||||
|
* Copyright (c) 2010 "Cowboy" Ben Alman
|
||||||
|
* Dual licensed under the MIT and GPL licenses.
|
||||||
|
* http://benalman.com/about/license/
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function($,h,c){var a=$([]),e=$.resize=$.extend($.resize,{}),i,k="setTimeout",j="resize",d=j+"-special-event",b="delay",f="throttleWindow";e[b]=250;e[f]=true;$.event.special[j]={setup:function(){if(!e[f]&&this[k]){return false}var l=$(this);a=a.add(l);$.data(this,d,{w:l.width(),h:l.height()});if(a.length===1){g()}},teardown:function(){if(!e[f]&&this[k]){return false}var l=$(this);a=a.not(l);l.removeData(d);if(!a.length){clearTimeout(i)}},add:function(l){if(!e[f]&&this[k]){return false}var n;function m(s,o,p){var q=$(this),r=$.data(this,d);r.w=o!==c?o:q.width();r.h=p!==c?p:q.height();n.apply(this,arguments)}if($.isFunction(l)){n=l;return m}else{n=l.handler;l.handler=m}}};function g(){i=h[k](function(){a.each(function(){var n=$(this),m=n.width(),l=n.height(),o=$.data(this,d);if(m!==o.w||l!==o.h){n.trigger(j,[o.w=m,o.h=l])}});g()},e[b])}})(jQuery,this);
|
||||||
|
|
||||||
|
(function ($) {
|
||||||
|
var options = { }; // no options
|
||||||
|
|
||||||
|
function init(plot) {
|
||||||
|
function onResize() {
|
||||||
|
var placeholder = plot.getPlaceholder();
|
||||||
|
|
||||||
|
// somebody might have hidden us and we can't plot
|
||||||
|
// when we don't have the dimensions
|
||||||
|
if (placeholder.width() == 0 || placeholder.height() == 0)
|
||||||
|
return;
|
||||||
|
|
||||||
|
plot.resize();
|
||||||
|
plot.setupGrid();
|
||||||
|
plot.draw();
|
||||||
|
}
|
||||||
|
|
||||||
|
function bindEvents(plot, eventHolder) {
|
||||||
|
plot.getPlaceholder().resize(onResize);
|
||||||
|
}
|
||||||
|
|
||||||
|
function shutdown(plot, eventHolder) {
|
||||||
|
plot.getPlaceholder().unbind("resize", onResize);
|
||||||
|
}
|
||||||
|
|
||||||
|
plot.hooks.bindEvents.push(bindEvents);
|
||||||
|
plot.hooks.shutdown.push(shutdown);
|
||||||
|
}
|
||||||
|
|
||||||
|
$.plot.plugins.push({
|
||||||
|
init: init,
|
||||||
|
options: options,
|
||||||
|
name: 'resize',
|
||||||
|
version: '1.0'
|
||||||
|
});
|
||||||
|
})(jQuery);
|
||||||
|
|
@ -0,0 +1,212 @@
|
||||||
|
/**
|
||||||
|
* Flot plugin that provides spline interpolation for line graphs
|
||||||
|
* author: Alex Bardas < alex.bardas@gmail.com >
|
||||||
|
* modified by: Avi Kohn https://github.com/AMKohn
|
||||||
|
* based on the spline interpolation described at:
|
||||||
|
* http://scaledinnovation.com/analytics/splines/aboutSplines.html
|
||||||
|
*
|
||||||
|
* Example usage: (add in plot options series object)
|
||||||
|
* for linespline:
|
||||||
|
* series: {
|
||||||
|
* ...
|
||||||
|
* lines: {
|
||||||
|
* show: false
|
||||||
|
* },
|
||||||
|
* splines: {
|
||||||
|
* show: true,
|
||||||
|
* tension: x, (float between 0 and 1, defaults to 0.5),
|
||||||
|
* lineWidth: y (number, defaults to 2),
|
||||||
|
* fill: z (float between 0 .. 1 or false, as in flot documentation)
|
||||||
|
* },
|
||||||
|
* ...
|
||||||
|
* }
|
||||||
|
* areaspline:
|
||||||
|
* series: {
|
||||||
|
* ...
|
||||||
|
* lines: {
|
||||||
|
* show: true,
|
||||||
|
* lineWidth: 0, (line drawing will not execute)
|
||||||
|
* fill: x, (float between 0 .. 1, as in flot documentation)
|
||||||
|
* ...
|
||||||
|
* },
|
||||||
|
* splines: {
|
||||||
|
* show: true,
|
||||||
|
* tension: 0.5 (float between 0 and 1)
|
||||||
|
* },
|
||||||
|
* ...
|
||||||
|
* }
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function($) {
|
||||||
|
'use strict'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Number} x0, y0, x1, y1: coordinates of the end (knot) points of the segment
|
||||||
|
* @param {Number} x2, y2: the next knot (not connected, but needed to calculate p2)
|
||||||
|
* @param {Number} tension: control how far the control points spread
|
||||||
|
* @return {Array}: p1 -> control point, from x1 back toward x0
|
||||||
|
* p2 -> the next control point, returned to become the next segment's p1
|
||||||
|
*
|
||||||
|
* @api private
|
||||||
|
*/
|
||||||
|
function getControlPoints(x0, y0, x1, y1, x2, y2, tension) {
|
||||||
|
|
||||||
|
var pow = Math.pow,
|
||||||
|
sqrt = Math.sqrt,
|
||||||
|
d01, d12, fa, fb, p1x, p1y, p2x, p2y;
|
||||||
|
|
||||||
|
// Scaling factors: distances from this knot to the previous and following knots.
|
||||||
|
d01 = sqrt(pow(x1 - x0, 2) + pow(y1 - y0, 2));
|
||||||
|
d12 = sqrt(pow(x2 - x1, 2) + pow(y2 - y1, 2));
|
||||||
|
|
||||||
|
fa = tension * d01 / (d01 + d12);
|
||||||
|
fb = tension - fa;
|
||||||
|
|
||||||
|
p1x = x1 + fa * (x0 - x2);
|
||||||
|
p1y = y1 + fa * (y0 - y2);
|
||||||
|
|
||||||
|
p2x = x1 - fb * (x0 - x2);
|
||||||
|
p2y = y1 - fb * (y0 - y2);
|
||||||
|
|
||||||
|
return [p1x, p1y, p2x, p2y];
|
||||||
|
}
|
||||||
|
|
||||||
|
var line = [];
|
||||||
|
|
||||||
|
function drawLine(points, ctx, height, fill, seriesColor) {
|
||||||
|
var c = $.color.parse(seriesColor);
|
||||||
|
|
||||||
|
c.a = typeof fill == "number" ? fill : .3;
|
||||||
|
c.normalize();
|
||||||
|
c = c.toString();
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(points[0][0], points[0][1]);
|
||||||
|
|
||||||
|
var plength = points.length;
|
||||||
|
|
||||||
|
for (var i = 0; i < plength; i++) {
|
||||||
|
ctx[points[i][3]].apply(ctx, points[i][2]);
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
ctx.lineWidth = 0;
|
||||||
|
ctx.lineTo(points[plength - 1][0], height);
|
||||||
|
ctx.lineTo(points[0][0], height);
|
||||||
|
|
||||||
|
ctx.closePath();
|
||||||
|
|
||||||
|
if (fill !== false) {
|
||||||
|
ctx.fillStyle = c;
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Object} ctx: canvas context
|
||||||
|
* @param {String} type: accepted strings: 'bezier' or 'quadratic' (defaults to quadratic)
|
||||||
|
* @param {Array} points: 2 points for which to draw the interpolation
|
||||||
|
* @param {Array} cpoints: control points for those segment points
|
||||||
|
*
|
||||||
|
* @api private
|
||||||
|
*/
|
||||||
|
function queue(ctx, type, points, cpoints) {
|
||||||
|
if (type === void 0 || (type !== 'bezier' && type !== 'quadratic')) {
|
||||||
|
type = 'quadratic';
|
||||||
|
}
|
||||||
|
type = type + 'CurveTo';
|
||||||
|
|
||||||
|
if (line.length == 0) line.push([points[0], points[1], cpoints.concat(points.slice(2)), type]);
|
||||||
|
else if (type == "quadraticCurveTo" && points.length == 2) {
|
||||||
|
cpoints = cpoints.slice(0, 2).concat(points);
|
||||||
|
|
||||||
|
line.push([points[0], points[1], cpoints, type]);
|
||||||
|
}
|
||||||
|
else line.push([points[2], points[3], cpoints.concat(points.slice(2)), type]);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Object} plot
|
||||||
|
* @param {Object} ctx: canvas context
|
||||||
|
* @param {Object} series
|
||||||
|
*
|
||||||
|
* @api private
|
||||||
|
*/
|
||||||
|
|
||||||
|
function drawSpline(plot, ctx, series) {
|
||||||
|
// Not interested if spline is not requested
|
||||||
|
if (series.splines.show !== true) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var cp = [],
|
||||||
|
// array of control points
|
||||||
|
tension = series.splines.tension || 0.5,
|
||||||
|
idx, x, y, points = series.datapoints.points,
|
||||||
|
ps = series.datapoints.pointsize,
|
||||||
|
plotOffset = plot.getPlotOffset(),
|
||||||
|
len = points.length,
|
||||||
|
pts = [];
|
||||||
|
|
||||||
|
line = [];
|
||||||
|
|
||||||
|
// Cannot display a linespline/areaspline if there are less than 3 points
|
||||||
|
if (len / ps < 4) {
|
||||||
|
$.extend(series.lines, series.splines);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (idx = 0; idx < len; idx += ps) {
|
||||||
|
x = points[idx];
|
||||||
|
y = points[idx + 1];
|
||||||
|
if (x == null || x < series.xaxis.min || x > series.xaxis.max || y < series.yaxis.min || y > series.yaxis.max) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
pts.push(series.xaxis.p2c(x) + plotOffset.left, series.yaxis.p2c(y) + plotOffset.top);
|
||||||
|
}
|
||||||
|
|
||||||
|
len = pts.length;
|
||||||
|
|
||||||
|
// Draw an open curve, not connected at the ends
|
||||||
|
for (idx = 0; idx < len - 2; idx += 2) {
|
||||||
|
cp = cp.concat(getControlPoints.apply(this, pts.slice(idx, idx + 6).concat([tension])));
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.save();
|
||||||
|
ctx.strokeStyle = series.color;
|
||||||
|
ctx.lineWidth = series.splines.lineWidth;
|
||||||
|
|
||||||
|
queue(ctx, 'quadratic', pts.slice(0, 4), cp.slice(0, 2));
|
||||||
|
|
||||||
|
for (idx = 2; idx < len - 3; idx += 2) {
|
||||||
|
queue(ctx, 'bezier', pts.slice(idx, idx + 4), cp.slice(2 * idx - 2, 2 * idx + 2));
|
||||||
|
}
|
||||||
|
|
||||||
|
queue(ctx, 'quadratic', pts.slice(len - 2, len), [cp[2 * len - 10], cp[2 * len - 9], pts[len - 4], pts[len - 3]]);
|
||||||
|
|
||||||
|
drawLine(line, ctx, plot.height() + 10, series.splines.fill, series.color);
|
||||||
|
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
|
||||||
|
$.plot.plugins.push({
|
||||||
|
init: function(plot) {
|
||||||
|
plot.hooks.drawSeries.push(drawSpline);
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
series: {
|
||||||
|
splines: {
|
||||||
|
show: false,
|
||||||
|
lineWidth: 2,
|
||||||
|
tension: 0.5,
|
||||||
|
fill: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
name: 'spline',
|
||||||
|
version: '0.8.2'
|
||||||
|
});
|
||||||
|
})(jQuery);
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
/* Flot plugin that adds some extra symbols for plotting points.
|
||||||
|
|
||||||
|
Copyright (c) 2007-2014 IOLA and Ole Laursen.
|
||||||
|
Licensed under the MIT license.
|
||||||
|
|
||||||
|
The symbols are accessed as strings through the standard symbol options:
|
||||||
|
|
||||||
|
series: {
|
||||||
|
points: {
|
||||||
|
symbol: "square" // or "diamond", "triangle", "cross"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function ($) {
|
||||||
|
function processRawData(plot, series, datapoints) {
|
||||||
|
// we normalize the area of each symbol so it is approximately the
|
||||||
|
// same as a circle of the given radius
|
||||||
|
|
||||||
|
var handlers = {
|
||||||
|
square: function (ctx, x, y, radius, shadow) {
|
||||||
|
// pi * r^2 = (2s)^2 => s = r * sqrt(pi)/2
|
||||||
|
var size = radius * Math.sqrt(Math.PI) / 2;
|
||||||
|
ctx.rect(x - size, y - size, size + size, size + size);
|
||||||
|
},
|
||||||
|
diamond: function (ctx, x, y, radius, shadow) {
|
||||||
|
// pi * r^2 = 2s^2 => s = r * sqrt(pi/2)
|
||||||
|
var size = radius * Math.sqrt(Math.PI / 2);
|
||||||
|
ctx.moveTo(x - size, y);
|
||||||
|
ctx.lineTo(x, y - size);
|
||||||
|
ctx.lineTo(x + size, y);
|
||||||
|
ctx.lineTo(x, y + size);
|
||||||
|
ctx.lineTo(x - size, y);
|
||||||
|
},
|
||||||
|
triangle: function (ctx, x, y, radius, shadow) {
|
||||||
|
// pi * r^2 = 1/2 * s^2 * sin (pi / 3) => s = r * sqrt(2 * pi / sin(pi / 3))
|
||||||
|
var size = radius * Math.sqrt(2 * Math.PI / Math.sin(Math.PI / 3));
|
||||||
|
var height = size * Math.sin(Math.PI / 3);
|
||||||
|
ctx.moveTo(x - size/2, y + height/2);
|
||||||
|
ctx.lineTo(x + size/2, y + height/2);
|
||||||
|
if (!shadow) {
|
||||||
|
ctx.lineTo(x, y - height/2);
|
||||||
|
ctx.lineTo(x - size/2, y + height/2);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
cross: function (ctx, x, y, radius, shadow) {
|
||||||
|
// pi * r^2 = (2s)^2 => s = r * sqrt(pi)/2
|
||||||
|
var size = radius * Math.sqrt(Math.PI) / 2;
|
||||||
|
ctx.moveTo(x - size, y - size);
|
||||||
|
ctx.lineTo(x + size, y + size);
|
||||||
|
ctx.moveTo(x - size, y + size);
|
||||||
|
ctx.lineTo(x + size, y - size);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var s = series.points.symbol;
|
||||||
|
if (handlers[s])
|
||||||
|
series.points.symbol = handlers[s];
|
||||||
|
}
|
||||||
|
|
||||||
|
function init(plot) {
|
||||||
|
plot.hooks.processDatapoints.push(processRawData);
|
||||||
|
}
|
||||||
|
|
||||||
|
$.plot.plugins.push({
|
||||||
|
init: init,
|
||||||
|
name: 'symbols',
|
||||||
|
version: '1.0'
|
||||||
|
});
|
||||||
|
})(jQuery);
|
||||||
12
ruoyi-admin/src/main/resources/static/ajax/libs/flot/jquery.flot.tooltip.min.js
vendored
Normal file
12
ruoyi-admin/src/main/resources/static/ajax/libs/flot/jquery.flot.tooltip.min.js
vendored
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
/*
|
||||||
|
* jquery.flot.tooltip
|
||||||
|
*
|
||||||
|
* description: easy-to-use tooltips for Flot charts
|
||||||
|
* version: 0.6.2
|
||||||
|
* author: Krzysztof Urbas @krzysu [myviews.pl]
|
||||||
|
* website: https://github.com/krzysu/flot.tooltip
|
||||||
|
*
|
||||||
|
* build on 2013-09-30
|
||||||
|
* released under MIT License, 2012
|
||||||
|
*/
|
||||||
|
(function(t){var o={tooltip:!1,tooltipOpts:{content:"%s | X: %x | Y: %y",xDateFormat:null,yDateFormat:null,shifts:{x:10,y:20},defaultTheme:!0,onHover:function(){}}},i=function(t){this.tipPosition={x:0,y:0},this.init(t)};i.prototype.init=function(o){function i(t){var o={};o.x=t.pageX,o.y=t.pageY,s.updateTooltipPosition(o)}function e(t,o,i){var e=s.getDomElement();if(i){var n;n=s.stringFormat(s.tooltipOptions.content,i),e.html(n),s.updateTooltipPosition({x:o.pageX,y:o.pageY}),e.css({left:s.tipPosition.x+s.tooltipOptions.shifts.x,top:s.tipPosition.y+s.tooltipOptions.shifts.y}).show(),"function"==typeof s.tooltipOptions.onHover&&s.tooltipOptions.onHover(i,e)}else e.hide().html("")}var s=this;o.hooks.bindEvents.push(function(o,n){s.plotOptions=o.getOptions(),s.plotOptions.tooltip!==!1&&void 0!==s.plotOptions.tooltip&&(s.tooltipOptions=s.plotOptions.tooltipOpts,s.getDomElement(),t(o.getPlaceholder()).bind("plothover",e),t(n).bind("mousemove",i))}),o.hooks.shutdown.push(function(o,s){t(o.getPlaceholder()).unbind("plothover",e),t(s).unbind("mousemove",i)})},i.prototype.getDomElement=function(){var o;return t("#flotTip").length>0?o=t("#flotTip"):(o=t("<div />").attr("id","flotTip"),o.appendTo("body").hide().css({position:"absolute"}),this.tooltipOptions.defaultTheme&&o.css({background:"#fff","z-index":"100",padding:"0.4em 0.6em","border-radius":"0.5em","font-size":"0.8em",border:"1px solid #111",display:"none","white-space":"nowrap"})),o},i.prototype.updateTooltipPosition=function(o){var i=t("#flotTip").outerWidth()+this.tooltipOptions.shifts.x,e=t("#flotTip").outerHeight()+this.tooltipOptions.shifts.y;o.x-t(window).scrollLeft()>t(window).innerWidth()-i&&(o.x-=i),o.y-t(window).scrollTop()>t(window).innerHeight()-e&&(o.y-=e),this.tipPosition.x=o.x,this.tipPosition.y=o.y},i.prototype.stringFormat=function(t,o){var i=/%p\.{0,1}(\d{0,})/,e=/%s/,s=/%x\.{0,1}(?:\d{0,})/,n=/%y\.{0,1}(?:\d{0,})/;return"function"==typeof t&&(t=t(o.series.label,o.series.data[o.dataIndex][0],o.series.data[o.dataIndex][1],o)),o.series.percent!==void 0&&(t=this.adjustValPrecision(i,t,o.series.percent)),o.series.label!==void 0&&(t=t.replace(e,o.series.label)),this.isTimeMode("xaxis",o)&&this.isXDateFormat(o)&&(t=t.replace(s,this.timestampToDate(o.series.data[o.dataIndex][0],this.tooltipOptions.xDateFormat))),this.isTimeMode("yaxis",o)&&this.isYDateFormat(o)&&(t=t.replace(n,this.timestampToDate(o.series.data[o.dataIndex][1],this.tooltipOptions.yDateFormat))),"number"==typeof o.series.data[o.dataIndex][0]&&(t=this.adjustValPrecision(s,t,o.series.data[o.dataIndex][0])),"number"==typeof o.series.data[o.dataIndex][1]&&(t=this.adjustValPrecision(n,t,o.series.data[o.dataIndex][1])),o.series.xaxis.tickFormatter!==void 0&&(t=t.replace(s,o.series.xaxis.tickFormatter(o.series.data[o.dataIndex][0],o.series.xaxis))),o.series.yaxis.tickFormatter!==void 0&&(t=t.replace(n,o.series.yaxis.tickFormatter(o.series.data[o.dataIndex][1],o.series.yaxis))),t},i.prototype.isTimeMode=function(t,o){return o.series[t].options.mode!==void 0&&"time"===o.series[t].options.mode},i.prototype.isXDateFormat=function(){return this.tooltipOptions.xDateFormat!==void 0&&null!==this.tooltipOptions.xDateFormat},i.prototype.isYDateFormat=function(){return this.tooltipOptions.yDateFormat!==void 0&&null!==this.tooltipOptions.yDateFormat},i.prototype.timestampToDate=function(o,i){var e=new Date(o);return t.plot.formatDate(e,i)},i.prototype.adjustValPrecision=function(t,o,i){var e,s=o.match(t);return null!==s&&""!==RegExp.$1&&(e=RegExp.$1,i=i.toFixed(e),o=o.replace(t,i)),o};var e=function(t){new i(t)};t.plot.plugins.push({init:e,options:o,name:"tooltip",version:"0.6.1"})})(jQuery);
|
||||||
|
|
@ -0,0 +1,621 @@
|
||||||
|
/*!
|
||||||
|
* Jasny Bootstrap v3.1.3 (http://jasny.github.io/bootstrap)
|
||||||
|
* Copyright 2012-2014 Arnold Daniels
|
||||||
|
* Licensed under Apache-2.0 (https://github.com/jasny/bootstrap/blob/master/LICENSE)
|
||||||
|
*/
|
||||||
|
|
||||||
|
.container-smooth {
|
||||||
|
max-width: 1170px;
|
||||||
|
}
|
||||||
|
@media (min-width: 1px) {
|
||||||
|
.container-smooth {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn-labeled {
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
.btn-label {
|
||||||
|
position: relative;
|
||||||
|
left: -12px;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 6px 12px;
|
||||||
|
background: transparent;
|
||||||
|
background: rgba(0, 0, 0, .15);
|
||||||
|
border-radius: 3px 0 0 3px;
|
||||||
|
}
|
||||||
|
.btn-label.btn-label-right {
|
||||||
|
right: -12px;
|
||||||
|
left: auto;
|
||||||
|
border-radius: 0 3px 3px 0;
|
||||||
|
}
|
||||||
|
.btn-lg .btn-label {
|
||||||
|
left: -16px;
|
||||||
|
padding: 10px 16px;
|
||||||
|
border-radius: 5px 0 0 5px;
|
||||||
|
}
|
||||||
|
.btn-lg .btn-label.btn-label-right {
|
||||||
|
right: -16px;
|
||||||
|
left: auto;
|
||||||
|
border-radius: 0 5px 5px 0;
|
||||||
|
}
|
||||||
|
.btn-sm .btn-label {
|
||||||
|
left: -10px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 2px 0 0 2px;
|
||||||
|
}
|
||||||
|
.btn-sm .btn-label.btn-label-right {
|
||||||
|
right: -10px;
|
||||||
|
left: auto;
|
||||||
|
border-radius: 0 2px 2px 0;
|
||||||
|
}
|
||||||
|
.btn-xs .btn-label {
|
||||||
|
left: -5px;
|
||||||
|
padding: 1px 5px;
|
||||||
|
border-radius: 2px 0 0 2px;
|
||||||
|
}
|
||||||
|
.btn-xs .btn-label.btn-label-right {
|
||||||
|
right: -5px;
|
||||||
|
left: auto;
|
||||||
|
border-radius: 0 2px 2px 0;
|
||||||
|
}
|
||||||
|
.nav-tabs-bottom {
|
||||||
|
border-top: 1px solid #ddd;
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
.nav-tabs-bottom > li {
|
||||||
|
margin-top: -1px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.nav-tabs-bottom > li > a {
|
||||||
|
border-radius: 0 0 4px 4px;
|
||||||
|
}
|
||||||
|
.nav-tabs-bottom > li > a:hover,
|
||||||
|
.nav-tabs-bottom > li > a:focus,
|
||||||
|
.nav-tabs-bottom > li.active > a,
|
||||||
|
.nav-tabs-bottom > li.active > a:hover,
|
||||||
|
.nav-tabs-bottom > li.active > a:focus {
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-top-color: transparent;
|
||||||
|
}
|
||||||
|
.nav-tabs-left {
|
||||||
|
border-right: 1px solid #ddd;
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
.nav-tabs-left > li {
|
||||||
|
float: none;
|
||||||
|
margin-right: -1px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.nav-tabs-left > li > a {
|
||||||
|
margin-right: 0;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
border-radius: 4px 0 0 4px;
|
||||||
|
}
|
||||||
|
.nav-tabs-left > li > a:hover,
|
||||||
|
.nav-tabs-left > li > a:focus,
|
||||||
|
.nav-tabs-left > li.active > a,
|
||||||
|
.nav-tabs-left > li.active > a:hover,
|
||||||
|
.nav-tabs-left > li.active > a:focus {
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-right-color: transparent;
|
||||||
|
}
|
||||||
|
.row > .nav-tabs-left {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
padding-right: 0;
|
||||||
|
padding-left: 15px;
|
||||||
|
margin-right: -1px;
|
||||||
|
}
|
||||||
|
.row > .nav-tabs-left + .tab-content {
|
||||||
|
border-left: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
.nav-tabs-right {
|
||||||
|
border-bottom: 0;
|
||||||
|
border-left: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
.nav-tabs-right > li {
|
||||||
|
float: none;
|
||||||
|
margin-bottom: 0;
|
||||||
|
margin-left: -1px;
|
||||||
|
}
|
||||||
|
.nav-tabs-right > li > a {
|
||||||
|
margin-bottom: 2px;
|
||||||
|
margin-left: 0;
|
||||||
|
border-radius: 0 4px 4px 0;
|
||||||
|
}
|
||||||
|
.nav-tabs-right > li > a:hover,
|
||||||
|
.nav-tabs-right > li > a:focus,
|
||||||
|
.nav-tabs-right > li.active > a,
|
||||||
|
.nav-tabs-right > li.active > a:hover,
|
||||||
|
.nav-tabs-right > li.active > a:focus {
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-left-color: transparent;
|
||||||
|
}
|
||||||
|
.row > .nav-tabs-right {
|
||||||
|
padding-right: 15px;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
.navmenu,
|
||||||
|
.navbar-offcanvas {
|
||||||
|
width: 300px;
|
||||||
|
height: auto;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 1px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.navmenu-fixed-left,
|
||||||
|
.navmenu-fixed-right,
|
||||||
|
.navbar-offcanvas {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 1030;
|
||||||
|
overflow-y: auto;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.navmenu-fixed-left,
|
||||||
|
.navbar-offcanvas.navmenu-fixed-left {
|
||||||
|
right: auto;
|
||||||
|
left: 0;
|
||||||
|
border-width: 0 1px 0 0;
|
||||||
|
}
|
||||||
|
.navmenu-fixed-right,
|
||||||
|
.navbar-offcanvas {
|
||||||
|
right: 0;
|
||||||
|
left: auto;
|
||||||
|
border-width: 0 0 0 1px;
|
||||||
|
}
|
||||||
|
.navmenu-nav {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.navmenu-nav.dropdown-menu {
|
||||||
|
position: static;
|
||||||
|
float: none;
|
||||||
|
padding-top: 0;
|
||||||
|
margin: 0;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
-webkit-box-shadow: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.navbar-offcanvas .navbar-nav {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.navbar-offcanvas {
|
||||||
|
width: auto;
|
||||||
|
border-top: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.navbar-offcanvas.offcanvas {
|
||||||
|
position: static;
|
||||||
|
display: block !important;
|
||||||
|
height: auto !important;
|
||||||
|
padding-bottom: 0;
|
||||||
|
overflow: visible !important;
|
||||||
|
}
|
||||||
|
.navbar-offcanvas .navbar-nav.navbar-left:first-child {
|
||||||
|
margin-left: -15px;
|
||||||
|
}
|
||||||
|
.navbar-offcanvas .navbar-nav.navbar-right:last-child {
|
||||||
|
margin-right: -15px;
|
||||||
|
}
|
||||||
|
.navbar-offcanvas .navmenu-brand {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.navmenu-brand {
|
||||||
|
display: block;
|
||||||
|
padding: 10px 15px;
|
||||||
|
margin: 10px 0;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
.navmenu-brand:hover,
|
||||||
|
.navmenu-brand:focus {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.navmenu-default,
|
||||||
|
.navbar-default .navbar-offcanvas {
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
border-color: #e7e7e7;
|
||||||
|
}
|
||||||
|
.navmenu-default .navmenu-brand,
|
||||||
|
.navbar-default .navbar-offcanvas .navmenu-brand {
|
||||||
|
color: #777;
|
||||||
|
}
|
||||||
|
.navmenu-default .navmenu-brand:hover,
|
||||||
|
.navbar-default .navbar-offcanvas .navmenu-brand:hover,
|
||||||
|
.navmenu-default .navmenu-brand:focus,
|
||||||
|
.navbar-default .navbar-offcanvas .navmenu-brand:focus {
|
||||||
|
color: #5e5e5e;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.navmenu-default .navmenu-text,
|
||||||
|
.navbar-default .navbar-offcanvas .navmenu-text {
|
||||||
|
color: #777;
|
||||||
|
}
|
||||||
|
.navmenu-default .navmenu-nav > .dropdown > a:hover .caret,
|
||||||
|
.navbar-default .navbar-offcanvas .navmenu-nav > .dropdown > a:hover .caret,
|
||||||
|
.navmenu-default .navmenu-nav > .dropdown > a:focus .caret,
|
||||||
|
.navbar-default .navbar-offcanvas .navmenu-nav > .dropdown > a:focus .caret {
|
||||||
|
border-top-color: #333;
|
||||||
|
border-bottom-color: #333;
|
||||||
|
}
|
||||||
|
.navmenu-default .navmenu-nav > .open > a,
|
||||||
|
.navbar-default .navbar-offcanvas .navmenu-nav > .open > a,
|
||||||
|
.navmenu-default .navmenu-nav > .open > a:hover,
|
||||||
|
.navbar-default .navbar-offcanvas .navmenu-nav > .open > a:hover,
|
||||||
|
.navmenu-default .navmenu-nav > .open > a:focus,
|
||||||
|
.navbar-default .navbar-offcanvas .navmenu-nav > .open > a:focus {
|
||||||
|
color: #555;
|
||||||
|
background-color: #e7e7e7;
|
||||||
|
}
|
||||||
|
.navmenu-default .navmenu-nav > .open > a .caret,
|
||||||
|
.navbar-default .navbar-offcanvas .navmenu-nav > .open > a .caret,
|
||||||
|
.navmenu-default .navmenu-nav > .open > a:hover .caret,
|
||||||
|
.navbar-default .navbar-offcanvas .navmenu-nav > .open > a:hover .caret,
|
||||||
|
.navmenu-default .navmenu-nav > .open > a:focus .caret,
|
||||||
|
.navbar-default .navbar-offcanvas .navmenu-nav > .open > a:focus .caret {
|
||||||
|
border-top-color: #555;
|
||||||
|
border-bottom-color: #555;
|
||||||
|
}
|
||||||
|
.navmenu-default .navmenu-nav > .dropdown > a .caret,
|
||||||
|
.navbar-default .navbar-offcanvas .navmenu-nav > .dropdown > a .caret {
|
||||||
|
border-top-color: #777;
|
||||||
|
border-bottom-color: #777;
|
||||||
|
}
|
||||||
|
.navmenu-default .navmenu-nav.dropdown-menu,
|
||||||
|
.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu {
|
||||||
|
background-color: #e7e7e7;
|
||||||
|
}
|
||||||
|
.navmenu-default .navmenu-nav.dropdown-menu > .divider,
|
||||||
|
.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu > .divider {
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
}
|
||||||
|
.navmenu-default .navmenu-nav.dropdown-menu > .active > a,
|
||||||
|
.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a,
|
||||||
|
.navmenu-default .navmenu-nav.dropdown-menu > .active > a:hover,
|
||||||
|
.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a:hover,
|
||||||
|
.navmenu-default .navmenu-nav.dropdown-menu > .active > a:focus,
|
||||||
|
.navbar-default .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a:focus {
|
||||||
|
background-color: #d7d7d7;
|
||||||
|
}
|
||||||
|
.navmenu-default .navmenu-nav > li > a,
|
||||||
|
.navbar-default .navbar-offcanvas .navmenu-nav > li > a {
|
||||||
|
color: #777;
|
||||||
|
}
|
||||||
|
.navmenu-default .navmenu-nav > li > a:hover,
|
||||||
|
.navbar-default .navbar-offcanvas .navmenu-nav > li > a:hover,
|
||||||
|
.navmenu-default .navmenu-nav > li > a:focus,
|
||||||
|
.navbar-default .navbar-offcanvas .navmenu-nav > li > a:focus {
|
||||||
|
color: #333;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.navmenu-default .navmenu-nav > .active > a,
|
||||||
|
.navbar-default .navbar-offcanvas .navmenu-nav > .active > a,
|
||||||
|
.navmenu-default .navmenu-nav > .active > a:hover,
|
||||||
|
.navbar-default .navbar-offcanvas .navmenu-nav > .active > a:hover,
|
||||||
|
.navmenu-default .navmenu-nav > .active > a:focus,
|
||||||
|
.navbar-default .navbar-offcanvas .navmenu-nav > .active > a:focus {
|
||||||
|
color: #555;
|
||||||
|
background-color: #e7e7e7;
|
||||||
|
}
|
||||||
|
.navmenu-default .navmenu-nav > .disabled > a,
|
||||||
|
.navbar-default .navbar-offcanvas .navmenu-nav > .disabled > a,
|
||||||
|
.navmenu-default .navmenu-nav > .disabled > a:hover,
|
||||||
|
.navbar-default .navbar-offcanvas .navmenu-nav > .disabled > a:hover,
|
||||||
|
.navmenu-default .navmenu-nav > .disabled > a:focus,
|
||||||
|
.navbar-default .navbar-offcanvas .navmenu-nav > .disabled > a:focus {
|
||||||
|
color: #ccc;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.navmenu-inverse,
|
||||||
|
.navbar-inverse .navbar-offcanvas {
|
||||||
|
background-color: #222;
|
||||||
|
border-color: #080808;
|
||||||
|
}
|
||||||
|
.navmenu-inverse .navmenu-brand,
|
||||||
|
.navbar-inverse .navbar-offcanvas .navmenu-brand {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
.navmenu-inverse .navmenu-brand:hover,
|
||||||
|
.navbar-inverse .navbar-offcanvas .navmenu-brand:hover,
|
||||||
|
.navmenu-inverse .navmenu-brand:focus,
|
||||||
|
.navbar-inverse .navbar-offcanvas .navmenu-brand:focus {
|
||||||
|
color: #fff;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.navmenu-inverse .navmenu-text,
|
||||||
|
.navbar-inverse .navbar-offcanvas .navmenu-text {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
.navmenu-inverse .navmenu-nav > .dropdown > a:hover .caret,
|
||||||
|
.navbar-inverse .navbar-offcanvas .navmenu-nav > .dropdown > a:hover .caret,
|
||||||
|
.navmenu-inverse .navmenu-nav > .dropdown > a:focus .caret,
|
||||||
|
.navbar-inverse .navbar-offcanvas .navmenu-nav > .dropdown > a:focus .caret {
|
||||||
|
border-top-color: #fff;
|
||||||
|
border-bottom-color: #fff;
|
||||||
|
}
|
||||||
|
.navmenu-inverse .navmenu-nav > .open > a,
|
||||||
|
.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a,
|
||||||
|
.navmenu-inverse .navmenu-nav > .open > a:hover,
|
||||||
|
.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a:hover,
|
||||||
|
.navmenu-inverse .navmenu-nav > .open > a:focus,
|
||||||
|
.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a:focus {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #080808;
|
||||||
|
}
|
||||||
|
.navmenu-inverse .navmenu-nav > .open > a .caret,
|
||||||
|
.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a .caret,
|
||||||
|
.navmenu-inverse .navmenu-nav > .open > a:hover .caret,
|
||||||
|
.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a:hover .caret,
|
||||||
|
.navmenu-inverse .navmenu-nav > .open > a:focus .caret,
|
||||||
|
.navbar-inverse .navbar-offcanvas .navmenu-nav > .open > a:focus .caret {
|
||||||
|
border-top-color: #fff;
|
||||||
|
border-bottom-color: #fff;
|
||||||
|
}
|
||||||
|
.navmenu-inverse .navmenu-nav > .dropdown > a .caret,
|
||||||
|
.navbar-inverse .navbar-offcanvas .navmenu-nav > .dropdown > a .caret {
|
||||||
|
border-top-color: #999;
|
||||||
|
border-bottom-color: #999;
|
||||||
|
}
|
||||||
|
.navmenu-inverse .navmenu-nav.dropdown-menu,
|
||||||
|
.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu {
|
||||||
|
background-color: #080808;
|
||||||
|
}
|
||||||
|
.navmenu-inverse .navmenu-nav.dropdown-menu > .divider,
|
||||||
|
.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu > .divider {
|
||||||
|
background-color: #222;
|
||||||
|
}
|
||||||
|
.navmenu-inverse .navmenu-nav.dropdown-menu > .active > a,
|
||||||
|
.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a,
|
||||||
|
.navmenu-inverse .navmenu-nav.dropdown-menu > .active > a:hover,
|
||||||
|
.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a:hover,
|
||||||
|
.navmenu-inverse .navmenu-nav.dropdown-menu > .active > a:focus,
|
||||||
|
.navbar-inverse .navbar-offcanvas .navmenu-nav.dropdown-menu > .active > a:focus {
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
.navmenu-inverse .navmenu-nav > li > a,
|
||||||
|
.navbar-inverse .navbar-offcanvas .navmenu-nav > li > a {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
.navmenu-inverse .navmenu-nav > li > a:hover,
|
||||||
|
.navbar-inverse .navbar-offcanvas .navmenu-nav > li > a:hover,
|
||||||
|
.navmenu-inverse .navmenu-nav > li > a:focus,
|
||||||
|
.navbar-inverse .navbar-offcanvas .navmenu-nav > li > a:focus {
|
||||||
|
color: #fff;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.navmenu-inverse .navmenu-nav > .active > a,
|
||||||
|
.navbar-inverse .navbar-offcanvas .navmenu-nav > .active > a,
|
||||||
|
.navmenu-inverse .navmenu-nav > .active > a:hover,
|
||||||
|
.navbar-inverse .navbar-offcanvas .navmenu-nav > .active > a:hover,
|
||||||
|
.navmenu-inverse .navmenu-nav > .active > a:focus,
|
||||||
|
.navbar-inverse .navbar-offcanvas .navmenu-nav > .active > a:focus {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #080808;
|
||||||
|
}
|
||||||
|
.navmenu-inverse .navmenu-nav > .disabled > a,
|
||||||
|
.navbar-inverse .navbar-offcanvas .navmenu-nav > .disabled > a,
|
||||||
|
.navmenu-inverse .navmenu-nav > .disabled > a:hover,
|
||||||
|
.navbar-inverse .navbar-offcanvas .navmenu-nav > .disabled > a:hover,
|
||||||
|
.navmenu-inverse .navmenu-nav > .disabled > a:focus,
|
||||||
|
.navbar-inverse .navbar-offcanvas .navmenu-nav > .disabled > a:focus {
|
||||||
|
color: #444;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.alert-fixed-top,
|
||||||
|
.alert-fixed-bottom {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1035;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.alert-fixed-top,
|
||||||
|
.alert-fixed-bottom {
|
||||||
|
left: 50%;
|
||||||
|
width: 992px;
|
||||||
|
margin-left: -496px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.alert-fixed-top {
|
||||||
|
top: 0;
|
||||||
|
border-width: 0 0 1px 0;
|
||||||
|
}
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.alert-fixed-top {
|
||||||
|
border-width: 0 1px 1px 1px;
|
||||||
|
border-bottom-right-radius: 4px;
|
||||||
|
border-bottom-left-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.alert-fixed-bottom {
|
||||||
|
bottom: 0;
|
||||||
|
border-width: 1px 0 0 0;
|
||||||
|
}
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.alert-fixed-bottom {
|
||||||
|
border-width: 1px 1px 0 1px;
|
||||||
|
border-top-left-radius: 4px;
|
||||||
|
border-top-right-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.offcanvas {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.offcanvas.in {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.offcanvas-xs {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.offcanvas-xs.in {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 991px) {
|
||||||
|
.offcanvas-sm {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.offcanvas-sm.in {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 1199px) {
|
||||||
|
.offcanvas-md {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.offcanvas-md.in {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.offcanvas-lg {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.offcanvas-lg.in {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.canvas-sliding {
|
||||||
|
-webkit-transition: top .35s, left .35s, bottom .35s, right .35s;
|
||||||
|
transition: top .35s, left .35s, bottom .35s, right .35s;
|
||||||
|
}
|
||||||
|
.offcanvas-clone {
|
||||||
|
position: absolute !important;
|
||||||
|
top: auto !important;
|
||||||
|
right: 0 !important;
|
||||||
|
bottom: 0 !important;
|
||||||
|
left: auto !important;
|
||||||
|
width: 0 !important;
|
||||||
|
height: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
border: none !important;
|
||||||
|
opacity: 0 !important;
|
||||||
|
}
|
||||||
|
.table.rowlink td:not(.rowlink-skip),
|
||||||
|
.table .rowlink td:not(.rowlink-skip) {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.table.rowlink td:not(.rowlink-skip) a,
|
||||||
|
.table .rowlink td:not(.rowlink-skip) a {
|
||||||
|
font: inherit;
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
.table-hover.rowlink tr:hover td,
|
||||||
|
.table-hover .rowlink tr:hover td {
|
||||||
|
background-color: #cfcfcf;
|
||||||
|
}
|
||||||
|
.btn-file {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.btn-file > input {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 23px;
|
||||||
|
cursor: pointer;
|
||||||
|
filter: alpha(opacity=0);
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
direction: ltr;
|
||||||
|
}
|
||||||
|
.fileinput {
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: 9px;
|
||||||
|
}
|
||||||
|
.fileinput .form-control {
|
||||||
|
display: inline-block;
|
||||||
|
padding-top: 7px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
vertical-align: middle;
|
||||||
|
cursor: text;
|
||||||
|
}
|
||||||
|
.fileinput .thumbnail {
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.fileinput .thumbnail > img {
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
.fileinput .btn {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.fileinput-exists .fileinput-new,
|
||||||
|
.fileinput-new .fileinput-exists {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.fileinput-inline .fileinput-controls {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.fileinput-filename {
|
||||||
|
display: inline-block;
|
||||||
|
overflow: hidden;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.form-control .fileinput-filename {
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
.fileinput.input-group {
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
.fileinput.input-group > * {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.fileinput.input-group > .btn-file {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.fileinput-new.input-group .btn-file,
|
||||||
|
.fileinput-new .input-group .btn-file {
|
||||||
|
border-radius: 0 4px 4px 0;
|
||||||
|
}
|
||||||
|
.fileinput-new.input-group .btn-file.btn-xs,
|
||||||
|
.fileinput-new .input-group .btn-file.btn-xs,
|
||||||
|
.fileinput-new.input-group .btn-file.btn-sm,
|
||||||
|
.fileinput-new .input-group .btn-file.btn-sm {
|
||||||
|
border-radius: 0 3px 3px 0;
|
||||||
|
}
|
||||||
|
.fileinput-new.input-group .btn-file.btn-lg,
|
||||||
|
.fileinput-new .input-group .btn-file.btn-lg {
|
||||||
|
border-radius: 0 6px 6px 0;
|
||||||
|
}
|
||||||
|
.form-group.has-warning .fileinput .fileinput-preview {
|
||||||
|
color: #8a6d3b;
|
||||||
|
}
|
||||||
|
.form-group.has-warning .fileinput .thumbnail {
|
||||||
|
border-color: #faebcc;
|
||||||
|
}
|
||||||
|
.form-group.has-error .fileinput .fileinput-preview {
|
||||||
|
color: #a94442;
|
||||||
|
}
|
||||||
|
.form-group.has-error .fileinput .thumbnail {
|
||||||
|
border-color: #ebccd1;
|
||||||
|
}
|
||||||
|
.form-group.has-success .fileinput .fileinput-preview {
|
||||||
|
color: #3c763d;
|
||||||
|
}
|
||||||
|
.form-group.has-success .fileinput .thumbnail {
|
||||||
|
border-color: #d6e9c6;
|
||||||
|
}
|
||||||
|
.input-group-addon:not(:first-child) {
|
||||||
|
border-left: 0;
|
||||||
|
}
|
||||||
|
/*# sourceMappingURL=jasny-bootstrap.css.map */
|
||||||
File diff suppressed because it is too large
Load Diff
7
ruoyi-admin/src/main/resources/static/ajax/libs/jasny/jasny-bootstrap.min.css
vendored
Normal file
7
ruoyi-admin/src/main/resources/static/ajax/libs/jasny/jasny-bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,50 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
.jsonview {
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 1.1em;
|
||||||
|
white-space: pre-wrap; }
|
||||||
|
.jsonview .prop {
|
||||||
|
font-weight: bold; }
|
||||||
|
.jsonview .null {
|
||||||
|
color: red; }
|
||||||
|
.jsonview .bool {
|
||||||
|
color: blue; }
|
||||||
|
.jsonview .num {
|
||||||
|
color: blue; }
|
||||||
|
.jsonview .string {
|
||||||
|
color: green;
|
||||||
|
white-space: pre-wrap; }
|
||||||
|
.jsonview .string.multiline {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: text-top; }
|
||||||
|
.jsonview .collapser {
|
||||||
|
position: absolute;
|
||||||
|
left: -1em;
|
||||||
|
cursor: pointer; }
|
||||||
|
.jsonview .collapsible {
|
||||||
|
transition: height 1.2s;
|
||||||
|
transition: width 1.2s; }
|
||||||
|
.jsonview .collapsible.collapsed {
|
||||||
|
height: .8em;
|
||||||
|
width: 1em;
|
||||||
|
display: inline-block;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0; }
|
||||||
|
.jsonview .collapsible.collapsed:before {
|
||||||
|
content: "…";
|
||||||
|
width: 1em;
|
||||||
|
margin-left: .2em; }
|
||||||
|
.jsonview .collapser.collapsed {
|
||||||
|
transform: rotate(0deg); }
|
||||||
|
.jsonview .q {
|
||||||
|
display: inline-block;
|
||||||
|
width: 0px;
|
||||||
|
color: transparent; }
|
||||||
|
.jsonview li {
|
||||||
|
position: relative; }
|
||||||
|
.jsonview ul {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0 0 0 2em;
|
||||||
|
padding: 0; }
|
||||||
|
.jsonview h1 {
|
||||||
|
font-size: 1.2em; }
|
||||||
|
|
@ -0,0 +1,250 @@
|
||||||
|
(function(jQuery) {
|
||||||
|
var $, Collapser, JSONFormatter, JSONView;
|
||||||
|
JSONFormatter = (function() {
|
||||||
|
function JSONFormatter(options) {
|
||||||
|
if (options == null) {
|
||||||
|
options = {};
|
||||||
|
}
|
||||||
|
this.options = options;
|
||||||
|
}
|
||||||
|
|
||||||
|
JSONFormatter.prototype.htmlEncode = function(html) {
|
||||||
|
if (html !== null) {
|
||||||
|
return html.toString().replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<").replace(/>/g, ">");
|
||||||
|
} else {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
JSONFormatter.prototype.jsString = function(s) {
|
||||||
|
s = JSON.stringify(s).slice(1, -1);
|
||||||
|
return this.htmlEncode(s);
|
||||||
|
};
|
||||||
|
|
||||||
|
JSONFormatter.prototype.decorateWithSpan = function(value, className) {
|
||||||
|
return "<span class=\"" + className + "\">" + (this.htmlEncode(value)) + "</span>";
|
||||||
|
};
|
||||||
|
|
||||||
|
JSONFormatter.prototype.valueToHTML = function(value, level) {
|
||||||
|
var valueType;
|
||||||
|
if (level == null) {
|
||||||
|
level = 0;
|
||||||
|
}
|
||||||
|
valueType = Object.prototype.toString.call(value).match(/\s(.+)]/)[1].toLowerCase();
|
||||||
|
return this["" + valueType + "ToHTML"].call(this, value, level);
|
||||||
|
};
|
||||||
|
|
||||||
|
JSONFormatter.prototype.nullToHTML = function(value) {
|
||||||
|
return this.decorateWithSpan('null', 'null');
|
||||||
|
};
|
||||||
|
|
||||||
|
JSONFormatter.prototype.numberToHTML = function(value) {
|
||||||
|
return this.decorateWithSpan(value, 'num');
|
||||||
|
};
|
||||||
|
|
||||||
|
JSONFormatter.prototype.stringToHTML = function(value) {
|
||||||
|
var multilineClass, newLinePattern;
|
||||||
|
if (/^(http|https|file):\/\/[^\s]+$/i.test(value)) {
|
||||||
|
return "<a href=\"" + (this.htmlEncode(value)) + "\"><span class=\"q\">\"</span>" + (this.jsString(value)) + "<span class=\"q\">\"</span></a>";
|
||||||
|
} else {
|
||||||
|
multilineClass = '';
|
||||||
|
value = this.jsString(value);
|
||||||
|
if (this.options.nl2br) {
|
||||||
|
newLinePattern = /([^>\\r\\n]?)(\\r\\n|\\n\\r|\\r|\\n)/g;
|
||||||
|
if (newLinePattern.test(value)) {
|
||||||
|
multilineClass = ' multiline';
|
||||||
|
value = (value + '').replace(newLinePattern, '$1' + '<br />');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return "<span class=\"string" + multilineClass + "\">\"" + value + "\"</span>";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
JSONFormatter.prototype.booleanToHTML = function(value) {
|
||||||
|
return this.decorateWithSpan(value, 'bool');
|
||||||
|
};
|
||||||
|
|
||||||
|
JSONFormatter.prototype.arrayToHTML = function(array, level) {
|
||||||
|
var collapsible, hasContents, index, numProps, output, value, _i, _len;
|
||||||
|
if (level == null) {
|
||||||
|
level = 0;
|
||||||
|
}
|
||||||
|
hasContents = false;
|
||||||
|
output = '';
|
||||||
|
numProps = array.length;
|
||||||
|
for (index = _i = 0, _len = array.length; _i < _len; index = ++_i) {
|
||||||
|
value = array[index];
|
||||||
|
hasContents = true;
|
||||||
|
output += '<li>' + this.valueToHTML(value, level + 1);
|
||||||
|
if (numProps > 1) {
|
||||||
|
output += ',';
|
||||||
|
}
|
||||||
|
output += '</li>';
|
||||||
|
numProps--;
|
||||||
|
}
|
||||||
|
if (hasContents) {
|
||||||
|
collapsible = level === 0 ? '' : ' collapsible';
|
||||||
|
return "[<ul class=\"array level" + level + collapsible + "\">" + output + "</ul>]";
|
||||||
|
} else {
|
||||||
|
return '[ ]';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
JSONFormatter.prototype.objectToHTML = function(object, level) {
|
||||||
|
var collapsible, hasContents, numProps, output, prop, value;
|
||||||
|
if (level == null) {
|
||||||
|
level = 0;
|
||||||
|
}
|
||||||
|
hasContents = false;
|
||||||
|
output = '';
|
||||||
|
numProps = 0;
|
||||||
|
for (prop in object) {
|
||||||
|
numProps++;
|
||||||
|
}
|
||||||
|
for (prop in object) {
|
||||||
|
value = object[prop];
|
||||||
|
hasContents = true;
|
||||||
|
output += "<li><span class=\"prop\"><span class=\"q\">\"</span>" + (this.jsString(prop)) + "<span class=\"q\">\"</span></span>: " + (this.valueToHTML(value, level + 1));
|
||||||
|
if (numProps > 1) {
|
||||||
|
output += ',';
|
||||||
|
}
|
||||||
|
output += '</li>';
|
||||||
|
numProps--;
|
||||||
|
}
|
||||||
|
if (hasContents) {
|
||||||
|
collapsible = level === 0 ? '' : ' collapsible';
|
||||||
|
return "{<ul class=\"obj level" + level + collapsible + "\">" + output + "</ul>}";
|
||||||
|
} else {
|
||||||
|
return '{ }';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
JSONFormatter.prototype.jsonToHTML = function(json) {
|
||||||
|
return "<div class=\"jsonview\">" + (this.valueToHTML(json)) + "</div>";
|
||||||
|
};
|
||||||
|
|
||||||
|
return JSONFormatter;
|
||||||
|
|
||||||
|
})();
|
||||||
|
(typeof module !== "undefined" && module !== null) && (module.exports = JSONFormatter);
|
||||||
|
Collapser = {
|
||||||
|
bindEvent: function(item, collapsed) {
|
||||||
|
var collapser;
|
||||||
|
collapser = document.createElement('div');
|
||||||
|
collapser.className = 'collapser';
|
||||||
|
collapser.innerHTML = collapsed ? '+' : '-';
|
||||||
|
collapser.addEventListener('click', (function(_this) {
|
||||||
|
return function(event) {
|
||||||
|
return _this.toggle(event.target);
|
||||||
|
};
|
||||||
|
})(this));
|
||||||
|
item.insertBefore(collapser, item.firstChild);
|
||||||
|
if (collapsed) {
|
||||||
|
return this.collapse(collapser);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
expand: function(collapser) {
|
||||||
|
var ellipsis, target;
|
||||||
|
target = this.collapseTarget(collapser);
|
||||||
|
ellipsis = target.parentNode.getElementsByClassName('ellipsis')[0];
|
||||||
|
target.parentNode.removeChild(ellipsis);
|
||||||
|
target.style.display = '';
|
||||||
|
return collapser.innerHTML = '-';
|
||||||
|
},
|
||||||
|
collapse: function(collapser) {
|
||||||
|
var ellipsis, target;
|
||||||
|
target = this.collapseTarget(collapser);
|
||||||
|
target.style.display = 'none';
|
||||||
|
ellipsis = document.createElement('span');
|
||||||
|
ellipsis.className = 'ellipsis';
|
||||||
|
ellipsis.innerHTML = ' … ';
|
||||||
|
target.parentNode.insertBefore(ellipsis, target);
|
||||||
|
return collapser.innerHTML = '+';
|
||||||
|
},
|
||||||
|
toggle: function(collapser) {
|
||||||
|
var target;
|
||||||
|
target = this.collapseTarget(collapser);
|
||||||
|
if (target.style.display === 'none') {
|
||||||
|
return this.expand(collapser);
|
||||||
|
} else {
|
||||||
|
return this.collapse(collapser);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
collapseTarget: function(collapser) {
|
||||||
|
var target, targets;
|
||||||
|
targets = collapser.parentNode.getElementsByClassName('collapsible');
|
||||||
|
if (!targets.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
return target = targets[0];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
$ = jQuery;
|
||||||
|
JSONView = {
|
||||||
|
collapse: function(el) {
|
||||||
|
if (el.innerHTML === '-') {
|
||||||
|
return Collapser.collapse(el);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
expand: function(el) {
|
||||||
|
if (el.innerHTML === '+') {
|
||||||
|
return Collapser.expand(el);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
toggle: function(el) {
|
||||||
|
return Collapser.toggle(el);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return $.fn.JSONView = function() {
|
||||||
|
var args, defaultOptions, formatter, json, method, options, outputDoc;
|
||||||
|
args = arguments;
|
||||||
|
if (JSONView[args[0]] != null) {
|
||||||
|
method = args[0];
|
||||||
|
return this.each(function() {
|
||||||
|
var $this, level;
|
||||||
|
$this = $(this);
|
||||||
|
if (args[1] != null) {
|
||||||
|
level = args[1];
|
||||||
|
return $this.find(".jsonview .collapsible.level" + level).siblings('.collapser').each(function() {
|
||||||
|
return JSONView[method](this);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
return $this.find('.jsonview > ul > li > .collapsible').siblings('.collapser').each(function() {
|
||||||
|
return JSONView[method](this);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
json = args[0];
|
||||||
|
options = args[1] || {};
|
||||||
|
defaultOptions = {
|
||||||
|
collapsed: false,
|
||||||
|
nl2br: false
|
||||||
|
};
|
||||||
|
options = $.extend(defaultOptions, options);
|
||||||
|
formatter = new JSONFormatter({
|
||||||
|
nl2br: options.nl2br
|
||||||
|
});
|
||||||
|
if (Object.prototype.toString.call(json) === '[object String]') {
|
||||||
|
json = JSON.parse(json);
|
||||||
|
}
|
||||||
|
outputDoc = formatter.jsonToHTML(json);
|
||||||
|
return this.each(function() {
|
||||||
|
var $this, item, items, _i, _len, _results;
|
||||||
|
$this = $(this);
|
||||||
|
$this.html(outputDoc);
|
||||||
|
items = $this[0].getElementsByClassName('collapsible');
|
||||||
|
_results = [];
|
||||||
|
for (_i = 0, _len = items.length; _i < _len; _i++) {
|
||||||
|
item = items[_i];
|
||||||
|
if (item.parentNode.nodeName === 'LI') {
|
||||||
|
_results.push(Collapser.bindEvent(item.parentNode, options.collapsed));
|
||||||
|
} else {
|
||||||
|
_results.push(void 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return _results;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
})(jQuery);
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
|
|
@ -0,0 +1,138 @@
|
||||||
|
/**
|
||||||
|
* layer皮肤
|
||||||
|
* Copyright (c) 2019 ruoyi
|
||||||
|
*/
|
||||||
|
html #layui_layer_skinmoonstylecss {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
width: 1989px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body .layer-ext-moon[type="dialog"] {
|
||||||
|
min-width: 320px;
|
||||||
|
}
|
||||||
|
body .layer-ext-moon-msg[type="dialog"]{min-width:200px;}
|
||||||
|
body .layer-ext-moon .layui-layer-title {
|
||||||
|
background: #F8F8F8;
|
||||||
|
color: #333;
|
||||||
|
font-size: 14px;
|
||||||
|
height: 42px;
|
||||||
|
line-height: 42px;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
body .layer-ext-moon .layui-layer-content .layui-layer-ico {
|
||||||
|
height: 32px;
|
||||||
|
width: 32px;
|
||||||
|
top:18.5px;
|
||||||
|
}
|
||||||
|
body .layer-ext-moon .layui-layer-ico0 {
|
||||||
|
background: url(default.png) no-repeat -96px 0;
|
||||||
|
;
|
||||||
|
}
|
||||||
|
body .layer-ext-moon .layui-layer-ico1 {
|
||||||
|
background: url(default.png) no-repeat -224px 0;
|
||||||
|
;
|
||||||
|
}
|
||||||
|
body .layer-ext-moon .layui-layer-ico2 {
|
||||||
|
background: url(default.png) no-repeat -192px 0;
|
||||||
|
}
|
||||||
|
body .layer-ext-moon .layui-layer-ico3 {
|
||||||
|
background: url(default.png) no-repeat -160px 0;
|
||||||
|
}
|
||||||
|
body .layer-ext-moon .layui-layer-ico4 {
|
||||||
|
background: url(default.png) no-repeat -320px 0;
|
||||||
|
}
|
||||||
|
body .layer-ext-moon .layui-layer-ico5 {
|
||||||
|
background: url(default.png) no-repeat -288px 0;
|
||||||
|
}
|
||||||
|
body .layer-ext-moon .layui-layer-ico6 {
|
||||||
|
background: url(default.png) -256px 0;
|
||||||
|
}
|
||||||
|
body .layer-ext-moon .layui-layer-ico7 {
|
||||||
|
background: url(default.png) no-repeat -128px 0;
|
||||||
|
}
|
||||||
|
body .layer-ext-moon .layui-layer-setwin {
|
||||||
|
top: 15px;
|
||||||
|
right: 15px;
|
||||||
|
}
|
||||||
|
body .layer-ext-moon .layui-layer-setwin a {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
body .layer-ext-moon .layui-layer-setwin .layui-layer-min cite:hover {
|
||||||
|
background-color: #56abe4;
|
||||||
|
}
|
||||||
|
body .layer-ext-moon .layui-layer-setwin .layui-layer-max {
|
||||||
|
background: url(default.png) no-repeat -80px 0;
|
||||||
|
}
|
||||||
|
body .layer-ext-moon .layui-layer-setwin .layui-layer-max:hover {
|
||||||
|
background: url(default.png) no-repeat -64px 0;
|
||||||
|
}
|
||||||
|
body .layer-ext-moon .layui-layer-setwin .layui-layer-maxmin {
|
||||||
|
background: url(default.png) no-repeat -32px 0;
|
||||||
|
}
|
||||||
|
body .layer-ext-moon .layui-layer-setwin .layui-layer-maxmin:hover {
|
||||||
|
background: url(default.png) no-repeat -16px 0;
|
||||||
|
}
|
||||||
|
body .layer-ext-moon .layui-layer-setwin .layui-layer-close1,body .layer-ext-moon .layui-layer-setwin .layui-layer-close2 {
|
||||||
|
background: url(default.png) 0 0;
|
||||||
|
}
|
||||||
|
body .layer-ext-moon .layui-layer-setwin .layui-layer-close1:hover,body .layer-ext-moon .layui-layer-setwin .layui-layer-close2:hover {
|
||||||
|
background: url(default.png) -48px 0;
|
||||||
|
}
|
||||||
|
body .layer-ext-moon .layui-layer-padding{padding-top: 24px;}
|
||||||
|
body .layer-ext-moon .layui-layer-btn {
|
||||||
|
text-align: right;
|
||||||
|
padding: 10px 15px 12px;
|
||||||
|
background: #f0f4f7;
|
||||||
|
border-top: 1px #c7c7c7 solid;
|
||||||
|
}
|
||||||
|
body .layer-ext-moon .layui-layer-btn a {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: normal;
|
||||||
|
margin: 0 3px;
|
||||||
|
margin-right: 7px;
|
||||||
|
margin-left: 7px;
|
||||||
|
padding: 0 15px;
|
||||||
|
color: #fff;
|
||||||
|
border: 1px solid #0064b6;
|
||||||
|
background: #0071ce;
|
||||||
|
border-radius: 3px;
|
||||||
|
display: inline-block;
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
text-decoration: none;
|
||||||
|
outline: none;
|
||||||
|
-moz-box-sizing: content-box;
|
||||||
|
-webkit-box-sizing: content-box;
|
||||||
|
box-sizing: content-box;
|
||||||
|
}
|
||||||
|
body .layer-ext-moon .layui-layer-btn .layui-layer-btn0 {
|
||||||
|
background: #0071ce;
|
||||||
|
}
|
||||||
|
body .layer-ext-moon .layui-layer-btn .layui-layer-btn1 {
|
||||||
|
background: #fff;
|
||||||
|
color: #404a58;
|
||||||
|
border: 1px solid #c0c4cd;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
body .layer-ext-moon .layui-layer-btn .layui-layer-btn2 {
|
||||||
|
background: #f60;
|
||||||
|
color: #fff;
|
||||||
|
border: 1px solid #f60;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
body .layer-ext-moon .layui-layer-btn .layui-layer-btn3 {
|
||||||
|
background: #f00;
|
||||||
|
color: #fff;
|
||||||
|
border: 1px solid #f00;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body .layer-ext-moon .layui-layer-title span.layui-layer-tabnow{
|
||||||
|
height:47px;
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
13
ruoyi-admin/src/main/resources/static/ajax/libs/report/peity/jquery.peity.min.js
vendored
Normal file
13
ruoyi-admin/src/main/resources/static/ajax/libs/report/peity/jquery.peity.min.js
vendored
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
// Peity jQuery plugin version 2.0.3
|
||||||
|
// (c) 2014 Ben Pickles
|
||||||
|
//
|
||||||
|
// http://benpickles.github.io/peity
|
||||||
|
//
|
||||||
|
// Released under MIT license.
|
||||||
|
(function(e,q,h){var o=function(a,b){var c=q.createElementNS("http://www.w3.org/2000/svg",a);e.each(b,function(a,b){c.setAttribute(a,b)});return c},t="createElementNS"in q&&o("svg",{}).createSVGRect,r=1/(window.devicePixelRatio||1),j=e.fn.peity=function(a,b){t&&this.each(function(){var c=e(this),d=c.data("peity");if(d)a&&(d.type=a),e.extend(d.opts,b);else{var f=j.defaults[a],g={};e.each(c.data(),function(a,b){a in f&&(g[a]=b)});var h=e.extend({},f,g,b),d=new s(c,a,h);c.change(function(){d.draw()}).data("peity",
|
||||||
|
d)}d.draw()});return this},s=function(a,b,c){this.$el=a;this.type=b;this.opts=c},m=s.prototype;m.draw=function(){j.graphers[this.type].call(this,this.opts)};m.fill=function(){var a=this.opts.fill,b=a;e.isFunction(b)||(b=function(b,d){return a[d%a.length]});return b};m.prepare=function(a,b){var c;this.svg?c=e(this.svg).empty():(this.svg=o("svg",{"class":"peity"}),this.$el.hide().after(this.svg),c=e(this.svg).data("peity",this));this.svg.setAttribute("height",b);this.svg.setAttribute("width",a);return c};
|
||||||
|
m.values=function(){return e.map(this.$el.text().split(this.opts.delimiter),function(a){return parseFloat(a)})};j.defaults={};j.graphers={};j.register=function(a,b,c){this.defaults[a]=b;this.graphers[a]=c};j.register("pie",{delimiter:null,diameter:16,fill:["#ff9900","#fff4dd","#ffc66e"]},function(a){if(!a.delimiter){var b=this.$el.text().match(/[^0-9\.]/);a.delimiter=b?b[0]:","}b=this.values();if("/"==a.delimiter)var c=b[0],b=[c,h.max(0,b[1]-c)];for(var d=0,c=b.length,f=0;d<c;d++)f+=b[d];for(var a=
|
||||||
|
this.prepare(a.width||a.diameter,a.height||a.diameter),d=a.width(),g=a.height(),a=d/2,g=g/2,p=h.min(a,g),e=h.PI,j=this.fill(),i=-e/2,d=0;d<c;d++){var n=b[d],l=n/f,k;if(0!=l){if(1==l)k=o("circle",{cx:a,cy:g,r:p});else{k=2*l*e;var l=i+k,m=p*h.cos(i)+a,i=p*h.sin(i)+g,q=p*h.cos(l)+a,r=p*h.sin(l)+g;k=o("path",{d:["M",a,g,"L",m,i,"A",p,p,0,k>e?1:0,1,q,r,"Z"].join(" ")});i=l}k.setAttribute("fill",j.call(this,n,d,b));this.svg.appendChild(k)}}});j.register("line",{delimiter:",",fill:"#c6d9fd",height:16,max:null,
|
||||||
|
min:0,stroke:"#4d89f9",strokeWidth:1,width:32},function(a){var b=this.values();1==b.length&&b.push(b[0]);for(var c=h.max.apply(h,b.concat([a.max])),d=h.min.apply(h,b.concat([a.min])),f=this.prepare(a.width,a.height),g=f.width(),f=f.height()-a.strokeWidth,e=g/(b.length-1),c=c-d,j=0==c?f:f/c,m=f+d*j,c=[0,m],i=0;i<b.length;i++)c.push(i*e,f-j*(b[i]-d)+a.strokeWidth/2);c.push(g,m);b=o("polygon",{fill:a.fill,points:c.join(" ")});this.svg.appendChild(b);a.strokeWidth&&(a=o("polyline",{fill:"transparent",
|
||||||
|
points:c.slice(2,c.length-2).join(" "),stroke:a.stroke,"stroke-width":a.strokeWidth,"stroke-linecap":"square"}),this.svg.appendChild(a))});j.register("bar",{delimiter:",",fill:["#4D89F9"],gap:1,height:16,max:null,min:0,width:32},function(a){for(var b=this.values(),c=h.max.apply(h,b.concat([a.max])),d=h.min.apply(h,b.concat([a.min])),f=this.prepare(a.width,a.height),g=f.width(),f=f.height(),e=c-d,j=0==e?0:f/e,a=a.gap,g=(g+a)/b.length,m=this.fill(),i=0;i<b.length;i++){var n=b[i],l=f-j*(n-d),k=j*n;if(0==
|
||||||
|
k){if(k=r,0>=d&&0<c||0==e)l-=r}else 0>k&&(l+=k,k=-k);n=o("rect",{fill:m.call(this,n,i,b),x:i*g,y:l,width:g-a,height:k});this.svg.appendChild(n)}})})(jQuery,document,Math);
|
||||||
5
ruoyi-admin/src/main/resources/static/ajax/libs/report/sparkline/jquery.sparkline.min.js
vendored
Normal file
5
ruoyi-admin/src/main/resources/static/ajax/libs/report/sparkline/jquery.sparkline.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
7
ruoyi-admin/src/main/resources/static/ajax/libs/select2/select2-bootstrap.css
vendored
Normal file
7
ruoyi-admin/src/main/resources/static/ajax/libs/select2/select2-bootstrap.css
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,484 @@
|
||||||
|
.select2-container {
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: middle; }
|
||||||
|
.select2-container .select2-selection--single {
|
||||||
|
box-sizing: border-box;
|
||||||
|
cursor: pointer;
|
||||||
|
display: block;
|
||||||
|
height: 28px;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-user-select: none; }
|
||||||
|
.select2-container .select2-selection--single .select2-selection__rendered {
|
||||||
|
display: block;
|
||||||
|
padding-left: 8px;
|
||||||
|
padding-right: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap; }
|
||||||
|
.select2-container .select2-selection--single .select2-selection__clear {
|
||||||
|
position: relative; }
|
||||||
|
.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
|
||||||
|
padding-right: 8px;
|
||||||
|
padding-left: 20px; }
|
||||||
|
.select2-container .select2-selection--multiple {
|
||||||
|
box-sizing: border-box;
|
||||||
|
cursor: pointer;
|
||||||
|
display: block;
|
||||||
|
min-height: 32px;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-user-select: none; }
|
||||||
|
.select2-container .select2-selection--multiple .select2-selection__rendered {
|
||||||
|
display: inline-block;
|
||||||
|
overflow: hidden;
|
||||||
|
padding-left: 8px;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap; }
|
||||||
|
.select2-container .select2-search--inline {
|
||||||
|
float: left; }
|
||||||
|
.select2-container .select2-search--inline .select2-search__field {
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: none;
|
||||||
|
font-size: 100%;
|
||||||
|
margin-top: 5px;
|
||||||
|
padding: 0; }
|
||||||
|
.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
|
||||||
|
-webkit-appearance: none; }
|
||||||
|
|
||||||
|
.select2-dropdown {
|
||||||
|
background-color: white;
|
||||||
|
border: 1px solid #aaa;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
left: -100000px;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 1051; }
|
||||||
|
|
||||||
|
.select2-results {
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
.select2-results__options {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0; }
|
||||||
|
|
||||||
|
.select2-results__option {
|
||||||
|
padding: 6px;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-user-select: none; }
|
||||||
|
.select2-results__option[aria-selected] {
|
||||||
|
cursor: pointer; }
|
||||||
|
|
||||||
|
.select2-container--open .select2-dropdown {
|
||||||
|
left: 0; }
|
||||||
|
|
||||||
|
.select2-container--open .select2-dropdown--above {
|
||||||
|
border-bottom: none;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
border-bottom-right-radius: 0; }
|
||||||
|
|
||||||
|
.select2-container--open .select2-dropdown--below {
|
||||||
|
border-top: none;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-top-right-radius: 0; }
|
||||||
|
|
||||||
|
.select2-search--dropdown {
|
||||||
|
display: block;
|
||||||
|
padding: 4px; }
|
||||||
|
.select2-search--dropdown .select2-search__field {
|
||||||
|
padding: 4px;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box; }
|
||||||
|
.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
|
||||||
|
-webkit-appearance: none; }
|
||||||
|
.select2-search--dropdown.select2-search--hide {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
.select2-close-mask {
|
||||||
|
border: 0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
min-height: 100%;
|
||||||
|
min-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
width: auto;
|
||||||
|
opacity: 0;
|
||||||
|
z-index: 99;
|
||||||
|
background-color: #fff;
|
||||||
|
filter: alpha(opacity=0); }
|
||||||
|
|
||||||
|
.select2-hidden-accessible {
|
||||||
|
border: 0 !important;
|
||||||
|
clip: rect(0 0 0 0) !important;
|
||||||
|
-webkit-clip-path: inset(50%) !important;
|
||||||
|
clip-path: inset(50%) !important;
|
||||||
|
height: 1px !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
position: absolute !important;
|
||||||
|
width: 1px !important;
|
||||||
|
white-space: nowrap !important; }
|
||||||
|
|
||||||
|
.select2-container--default .select2-selection--single {
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #aaa;
|
||||||
|
border-radius: 4px; }
|
||||||
|
.select2-container--default .select2-selection--single .select2-selection__rendered {
|
||||||
|
color: #444;
|
||||||
|
line-height: 28px; }
|
||||||
|
.select2-container--default .select2-selection--single .select2-selection__clear {
|
||||||
|
cursor: pointer;
|
||||||
|
float: right;
|
||||||
|
font-weight: bold; }
|
||||||
|
.select2-container--default .select2-selection--single .select2-selection__placeholder {
|
||||||
|
color: #999; }
|
||||||
|
.select2-container--default .select2-selection--single .select2-selection__arrow {
|
||||||
|
height: 26px;
|
||||||
|
position: absolute;
|
||||||
|
top: 1px;
|
||||||
|
right: 1px;
|
||||||
|
width: 20px; }
|
||||||
|
.select2-container--default .select2-selection--single .select2-selection__arrow b {
|
||||||
|
border-color: #888 transparent transparent transparent;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 5px 4px 0 4px;
|
||||||
|
height: 0;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -4px;
|
||||||
|
margin-top: -2px;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
width: 0; }
|
||||||
|
|
||||||
|
.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear {
|
||||||
|
float: left; }
|
||||||
|
|
||||||
|
.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
|
||||||
|
left: 1px;
|
||||||
|
right: auto; }
|
||||||
|
|
||||||
|
.select2-container--default.select2-container--disabled .select2-selection--single {
|
||||||
|
background-color: #eee;
|
||||||
|
cursor: default; }
|
||||||
|
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
|
||||||
|
border-color: transparent transparent #888 transparent;
|
||||||
|
border-width: 0 4px 5px 4px; }
|
||||||
|
|
||||||
|
.select2-container--default .select2-selection--multiple {
|
||||||
|
background-color: white;
|
||||||
|
border: 1px solid #aaa;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: text; }
|
||||||
|
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
|
||||||
|
box-sizing: border-box;
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 5px;
|
||||||
|
width: 100%; }
|
||||||
|
.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
|
||||||
|
list-style: none; }
|
||||||
|
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
|
||||||
|
color: #999;
|
||||||
|
margin-top: 5px;
|
||||||
|
float: left; }
|
||||||
|
.select2-container--default .select2-selection--multiple .select2-selection__clear {
|
||||||
|
cursor: pointer;
|
||||||
|
float: right;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-right: 10px; }
|
||||||
|
.select2-container--default .select2-selection--multiple .select2-selection__choice {
|
||||||
|
background-color: #e4e4e4;
|
||||||
|
border: 1px solid #aaa;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: default;
|
||||||
|
float: left;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-top: 5px;
|
||||||
|
padding: 0 5px; }
|
||||||
|
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
|
||||||
|
color: #999;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-right: 2px; }
|
||||||
|
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
|
||||||
|
color: #333; }
|
||||||
|
|
||||||
|
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder, .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline {
|
||||||
|
float: right; }
|
||||||
|
|
||||||
|
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
|
||||||
|
margin-left: 5px;
|
||||||
|
margin-right: auto; }
|
||||||
|
|
||||||
|
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
|
||||||
|
margin-left: 2px;
|
||||||
|
margin-right: auto; }
|
||||||
|
|
||||||
|
.select2-container--default.select2-container--focus .select2-selection--multiple {
|
||||||
|
border: solid black 1px;
|
||||||
|
outline: 0; }
|
||||||
|
|
||||||
|
.select2-container--default.select2-container--disabled .select2-selection--multiple {
|
||||||
|
background-color: #eee;
|
||||||
|
cursor: default; }
|
||||||
|
|
||||||
|
.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-top-right-radius: 0; }
|
||||||
|
|
||||||
|
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
border-bottom-right-radius: 0; }
|
||||||
|
|
||||||
|
.select2-container--default .select2-search--dropdown .select2-search__field {
|
||||||
|
border: 1px solid #aaa; }
|
||||||
|
|
||||||
|
.select2-container--default .select2-search--inline .select2-search__field {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
outline: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
-webkit-appearance: textfield; }
|
||||||
|
|
||||||
|
.select2-container--default .select2-results > .select2-results__options {
|
||||||
|
max-height: 200px;
|
||||||
|
overflow-y: auto; }
|
||||||
|
|
||||||
|
.select2-container--default .select2-results__option[role=group] {
|
||||||
|
padding: 0; }
|
||||||
|
|
||||||
|
.select2-container--default .select2-results__option[aria-disabled=true] {
|
||||||
|
color: #999; }
|
||||||
|
|
||||||
|
.select2-container--default .select2-results__option[aria-selected=true] {
|
||||||
|
background-color: #ddd; }
|
||||||
|
|
||||||
|
.select2-container--default .select2-results__option .select2-results__option {
|
||||||
|
padding-left: 1em; }
|
||||||
|
.select2-container--default .select2-results__option .select2-results__option .select2-results__group {
|
||||||
|
padding-left: 0; }
|
||||||
|
.select2-container--default .select2-results__option .select2-results__option .select2-results__option {
|
||||||
|
margin-left: -1em;
|
||||||
|
padding-left: 2em; }
|
||||||
|
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
|
||||||
|
margin-left: -2em;
|
||||||
|
padding-left: 3em; }
|
||||||
|
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
|
||||||
|
margin-left: -3em;
|
||||||
|
padding-left: 4em; }
|
||||||
|
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
|
||||||
|
margin-left: -4em;
|
||||||
|
padding-left: 5em; }
|
||||||
|
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
|
||||||
|
margin-left: -5em;
|
||||||
|
padding-left: 6em; }
|
||||||
|
|
||||||
|
.select2-container--default .select2-results__option--highlighted[aria-selected] {
|
||||||
|
background-color: #5897fb;
|
||||||
|
color: white; }
|
||||||
|
|
||||||
|
.select2-container--default .select2-results__group {
|
||||||
|
cursor: default;
|
||||||
|
display: block;
|
||||||
|
padding: 6px; }
|
||||||
|
|
||||||
|
.select2-container--classic .select2-selection--single {
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
border: 1px solid #aaa;
|
||||||
|
border-radius: 4px;
|
||||||
|
outline: 0;
|
||||||
|
background-image: -webkit-linear-gradient(top, white 50%, #eeeeee 100%);
|
||||||
|
background-image: -o-linear-gradient(top, white 50%, #eeeeee 100%);
|
||||||
|
background-image: linear-gradient(to bottom, white 50%, #eeeeee 100%);
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); }
|
||||||
|
.select2-container--classic .select2-selection--single:focus {
|
||||||
|
border: 1px solid #5897fb; }
|
||||||
|
.select2-container--classic .select2-selection--single .select2-selection__rendered {
|
||||||
|
color: #444;
|
||||||
|
line-height: 28px; }
|
||||||
|
.select2-container--classic .select2-selection--single .select2-selection__clear {
|
||||||
|
cursor: pointer;
|
||||||
|
float: right;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-right: 10px; }
|
||||||
|
.select2-container--classic .select2-selection--single .select2-selection__placeholder {
|
||||||
|
color: #999; }
|
||||||
|
.select2-container--classic .select2-selection--single .select2-selection__arrow {
|
||||||
|
background-color: #ddd;
|
||||||
|
border: none;
|
||||||
|
border-left: 1px solid #aaa;
|
||||||
|
border-top-right-radius: 4px;
|
||||||
|
border-bottom-right-radius: 4px;
|
||||||
|
height: 26px;
|
||||||
|
position: absolute;
|
||||||
|
top: 1px;
|
||||||
|
right: 1px;
|
||||||
|
width: 20px;
|
||||||
|
background-image: -webkit-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
|
||||||
|
background-image: -o-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
|
||||||
|
background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%);
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0); }
|
||||||
|
.select2-container--classic .select2-selection--single .select2-selection__arrow b {
|
||||||
|
border-color: #888 transparent transparent transparent;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 5px 4px 0 4px;
|
||||||
|
height: 0;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -4px;
|
||||||
|
margin-top: -2px;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
width: 0; }
|
||||||
|
|
||||||
|
.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear {
|
||||||
|
float: left; }
|
||||||
|
|
||||||
|
.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow {
|
||||||
|
border: none;
|
||||||
|
border-right: 1px solid #aaa;
|
||||||
|
border-radius: 0;
|
||||||
|
border-top-left-radius: 4px;
|
||||||
|
border-bottom-left-radius: 4px;
|
||||||
|
left: 1px;
|
||||||
|
right: auto; }
|
||||||
|
|
||||||
|
.select2-container--classic.select2-container--open .select2-selection--single {
|
||||||
|
border: 1px solid #5897fb; }
|
||||||
|
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
|
||||||
|
background: transparent;
|
||||||
|
border: none; }
|
||||||
|
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
|
||||||
|
border-color: transparent transparent #888 transparent;
|
||||||
|
border-width: 0 4px 5px 4px; }
|
||||||
|
|
||||||
|
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
|
||||||
|
border-top: none;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
background-image: -webkit-linear-gradient(top, white 0%, #eeeeee 50%);
|
||||||
|
background-image: -o-linear-gradient(top, white 0%, #eeeeee 50%);
|
||||||
|
background-image: linear-gradient(to bottom, white 0%, #eeeeee 50%);
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); }
|
||||||
|
|
||||||
|
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
|
||||||
|
border-bottom: none;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
background-image: -webkit-linear-gradient(top, #eeeeee 50%, white 100%);
|
||||||
|
background-image: -o-linear-gradient(top, #eeeeee 50%, white 100%);
|
||||||
|
background-image: linear-gradient(to bottom, #eeeeee 50%, white 100%);
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0); }
|
||||||
|
|
||||||
|
.select2-container--classic .select2-selection--multiple {
|
||||||
|
background-color: white;
|
||||||
|
border: 1px solid #aaa;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: text;
|
||||||
|
outline: 0; }
|
||||||
|
.select2-container--classic .select2-selection--multiple:focus {
|
||||||
|
border: 1px solid #5897fb; }
|
||||||
|
.select2-container--classic .select2-selection--multiple .select2-selection__rendered {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 5px; }
|
||||||
|
.select2-container--classic .select2-selection--multiple .select2-selection__clear {
|
||||||
|
display: none; }
|
||||||
|
.select2-container--classic .select2-selection--multiple .select2-selection__choice {
|
||||||
|
background-color: #e4e4e4;
|
||||||
|
border: 1px solid #aaa;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: default;
|
||||||
|
float: left;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-top: 5px;
|
||||||
|
padding: 0 5px; }
|
||||||
|
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
|
||||||
|
color: #888;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-right: 2px; }
|
||||||
|
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
|
||||||
|
color: #555; }
|
||||||
|
|
||||||
|
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
|
||||||
|
float: right;
|
||||||
|
margin-left: 5px;
|
||||||
|
margin-right: auto; }
|
||||||
|
|
||||||
|
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
|
||||||
|
margin-left: 2px;
|
||||||
|
margin-right: auto; }
|
||||||
|
|
||||||
|
.select2-container--classic.select2-container--open .select2-selection--multiple {
|
||||||
|
border: 1px solid #5897fb; }
|
||||||
|
|
||||||
|
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {
|
||||||
|
border-top: none;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-top-right-radius: 0; }
|
||||||
|
|
||||||
|
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {
|
||||||
|
border-bottom: none;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
border-bottom-right-radius: 0; }
|
||||||
|
|
||||||
|
.select2-container--classic .select2-search--dropdown .select2-search__field {
|
||||||
|
border: 1px solid #aaa;
|
||||||
|
outline: 0; }
|
||||||
|
|
||||||
|
.select2-container--classic .select2-search--inline .select2-search__field {
|
||||||
|
outline: 0;
|
||||||
|
box-shadow: none; }
|
||||||
|
|
||||||
|
.select2-container--classic .select2-dropdown {
|
||||||
|
background-color: white;
|
||||||
|
border: 1px solid transparent; }
|
||||||
|
|
||||||
|
.select2-container--classic .select2-dropdown--above {
|
||||||
|
border-bottom: none; }
|
||||||
|
|
||||||
|
.select2-container--classic .select2-dropdown--below {
|
||||||
|
border-top: none; }
|
||||||
|
|
||||||
|
.select2-container--classic .select2-results > .select2-results__options {
|
||||||
|
max-height: 200px;
|
||||||
|
overflow-y: auto; }
|
||||||
|
|
||||||
|
.select2-container--classic .select2-results__option[role=group] {
|
||||||
|
padding: 0; }
|
||||||
|
|
||||||
|
.select2-container--classic .select2-results__option[aria-disabled=true] {
|
||||||
|
color: grey; }
|
||||||
|
|
||||||
|
.select2-container--classic .select2-results__option--highlighted[aria-selected] {
|
||||||
|
background-color: #3875d7;
|
||||||
|
color: white; }
|
||||||
|
|
||||||
|
.select2-container--classic .select2-results__group {
|
||||||
|
cursor: default;
|
||||||
|
display: block;
|
||||||
|
padding: 6px; }
|
||||||
|
|
||||||
|
.select2-container--classic.select2-container--open .select2-dropdown {
|
||||||
|
border-color: #5897fb; }
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,381 @@
|
||||||
|
/*
|
||||||
|
Common
|
||||||
|
*/
|
||||||
|
|
||||||
|
.wizard,
|
||||||
|
.tabcontrol
|
||||||
|
{
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard a,
|
||||||
|
.tabcontrol a
|
||||||
|
{
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard ul,
|
||||||
|
.tabcontrol ul
|
||||||
|
{
|
||||||
|
list-style: none !important;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard ul > li,
|
||||||
|
.tabcontrol ul > li
|
||||||
|
{
|
||||||
|
display: block;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Accessibility */
|
||||||
|
.wizard > .steps .current-info,
|
||||||
|
.tabcontrol > .steps .current-info
|
||||||
|
{
|
||||||
|
position: absolute;
|
||||||
|
left: -999em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard > .content > .title,
|
||||||
|
.tabcontrol > .content > .title
|
||||||
|
{
|
||||||
|
position: absolute;
|
||||||
|
left: -999em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
Wizard
|
||||||
|
*/
|
||||||
|
|
||||||
|
.wizard > .steps
|
||||||
|
{
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard.vertical > .steps
|
||||||
|
{
|
||||||
|
display: inline;
|
||||||
|
float: left;
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard > .steps > ul > li
|
||||||
|
{
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard > .steps > ul > li,
|
||||||
|
.wizard > .actions > ul > li
|
||||||
|
{
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard.vertical > .steps > ul > li
|
||||||
|
{
|
||||||
|
float: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard > .steps a,
|
||||||
|
.wizard > .steps a:hover,
|
||||||
|
.wizard > .steps a:active
|
||||||
|
{
|
||||||
|
display: block;
|
||||||
|
width: auto;
|
||||||
|
margin: 0 0.5em 0.5em;
|
||||||
|
padding: 8px;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
-webkit-border-radius: 5px;
|
||||||
|
-moz-border-radius: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard > .steps .disabled a,
|
||||||
|
.wizard > .steps .disabled a:hover,
|
||||||
|
.wizard > .steps .disabled a:active
|
||||||
|
{
|
||||||
|
background: #eee;
|
||||||
|
color: #aaa;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard > .steps .current a,
|
||||||
|
.wizard > .steps .current a:hover,
|
||||||
|
.wizard > .steps .current a:active
|
||||||
|
{
|
||||||
|
background: #1AB394;
|
||||||
|
color: #fff;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard > .steps .done a,
|
||||||
|
.wizard > .steps .done a:hover,
|
||||||
|
.wizard > .steps .done a:active
|
||||||
|
{
|
||||||
|
background: #6fd1bd;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard > .steps .error a,
|
||||||
|
.wizard > .steps .error a:hover,
|
||||||
|
.wizard > .steps .error a:active
|
||||||
|
{
|
||||||
|
background: #ED5565 ;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard > .content
|
||||||
|
{
|
||||||
|
background: #eee;
|
||||||
|
display: block;
|
||||||
|
margin: 5px 5px 10px 5px;
|
||||||
|
min-height: 120px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
width: auto;
|
||||||
|
|
||||||
|
-webkit-border-radius: 5px;
|
||||||
|
-moz-border-radius: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard-big.wizard > .content {
|
||||||
|
min-height: 320px;
|
||||||
|
}
|
||||||
|
.wizard.vertical > .content
|
||||||
|
{
|
||||||
|
display: inline;
|
||||||
|
float: left;
|
||||||
|
margin: 0 2.5% 0.5em 2.5%;
|
||||||
|
width: 65%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard > .content > .body
|
||||||
|
{
|
||||||
|
float: left;
|
||||||
|
position: absolute;
|
||||||
|
width: 95%;
|
||||||
|
height: 95%;
|
||||||
|
padding: 2.5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard > .content > .body ul
|
||||||
|
{
|
||||||
|
list-style: disc !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard > .content > .body ul > li
|
||||||
|
{
|
||||||
|
display: list-item;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard > .content > .body > iframe
|
||||||
|
{
|
||||||
|
border: 0 none;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard > .content > .body input
|
||||||
|
{
|
||||||
|
display: block;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard > .content > .body input[type="checkbox"]
|
||||||
|
{
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard > .content > .body input.error
|
||||||
|
{
|
||||||
|
background: rgb(251, 227, 228);
|
||||||
|
border: 1px solid #fbc2c4;
|
||||||
|
color: #8a1f11;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard > .content > .body label
|
||||||
|
{
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard > .content > .body label.error
|
||||||
|
{
|
||||||
|
color: #8a1f11;
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard > .actions
|
||||||
|
{
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
text-align: right;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard.vertical > .actions
|
||||||
|
{
|
||||||
|
display: inline;
|
||||||
|
float: right;
|
||||||
|
margin: 0 2.5%;
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard > .actions > ul
|
||||||
|
{
|
||||||
|
display: inline-block;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard > .actions > ul > li
|
||||||
|
{
|
||||||
|
margin: 0 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard.vertical > .actions > ul > li
|
||||||
|
{
|
||||||
|
margin: 0 0 0 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard > .actions a,
|
||||||
|
.wizard > .actions a:hover,
|
||||||
|
.wizard > .actions a:active
|
||||||
|
{
|
||||||
|
background: #1AB394;
|
||||||
|
color: #fff;
|
||||||
|
display: block;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
-webkit-border-radius: 5px;
|
||||||
|
-moz-border-radius: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard > .actions .disabled a,
|
||||||
|
.wizard > .actions .disabled a:hover,
|
||||||
|
.wizard > .actions .disabled a:active
|
||||||
|
{
|
||||||
|
background: #eee;
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard > .loading
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
.wizard > .loading .spinner
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
Tabcontrol
|
||||||
|
*/
|
||||||
|
|
||||||
|
.tabcontrol > .steps
|
||||||
|
{
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabcontrol > .steps > ul
|
||||||
|
{
|
||||||
|
position: relative;
|
||||||
|
margin: 6px 0 0 0;
|
||||||
|
top: 1px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabcontrol > .steps > ul > li
|
||||||
|
{
|
||||||
|
float: left;
|
||||||
|
margin: 5px 2px 0 0;
|
||||||
|
padding: 1px;
|
||||||
|
|
||||||
|
-webkit-border-top-left-radius: 5px;
|
||||||
|
-webkit-border-top-right-radius: 5px;
|
||||||
|
-moz-border-radius-topleft: 5px;
|
||||||
|
-moz-border-radius-topright: 5px;
|
||||||
|
border-top-left-radius: 5px;
|
||||||
|
border-top-right-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabcontrol > .steps > ul > li:hover
|
||||||
|
{
|
||||||
|
background: #edecec;
|
||||||
|
border: 1px solid #bbb;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabcontrol > .steps > ul > li.current
|
||||||
|
{
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #bbb;
|
||||||
|
border-bottom: 0 none;
|
||||||
|
padding: 0 0 1px 0;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabcontrol > .steps > ul > li > a
|
||||||
|
{
|
||||||
|
color: #5f5f5f;
|
||||||
|
display: inline-block;
|
||||||
|
border: 0 none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 10px 30px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabcontrol > .steps > ul > li > a:hover
|
||||||
|
{
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabcontrol > .steps > ul > li.current > a
|
||||||
|
{
|
||||||
|
padding: 15px 30px 10px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabcontrol > .content
|
||||||
|
{
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
height: 35em;
|
||||||
|
overflow: hidden;
|
||||||
|
border-top: 1px solid #bbb;
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabcontrol > .content > .body
|
||||||
|
{
|
||||||
|
float: left;
|
||||||
|
position: absolute;
|
||||||
|
width: 95%;
|
||||||
|
height: 95%;
|
||||||
|
padding: 2.5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabcontrol > .content > .body ul
|
||||||
|
{
|
||||||
|
list-style: disc !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabcontrol > .content > .body ul > li
|
||||||
|
{
|
||||||
|
display: list-item;
|
||||||
|
}
|
||||||
|
label.error { position:inherit; }
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
1042
ruoyi-admin/src/main/resources/static/ajax/libs/suggest/bootstrap-suggest.js
vendored
Normal file
1042
ruoyi-admin/src/main/resources/static/ajax/libs/suggest/bootstrap-suggest.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
10
ruoyi-admin/src/main/resources/static/ajax/libs/suggest/bootstrap-suggest.min.js
vendored
Normal file
10
ruoyi-admin/src/main/resources/static/ajax/libs/suggest/bootstrap-suggest.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
774
ruoyi-admin/src/main/resources/static/ajax/libs/typeahead/bootstrap3-typeahead.js
vendored
Normal file
774
ruoyi-admin/src/main/resources/static/ajax/libs/typeahead/bootstrap3-typeahead.js
vendored
Normal file
|
|
@ -0,0 +1,774 @@
|
||||||
|
/* =============================================================
|
||||||
|
* bootstrap3-typeahead.js v4.0.2
|
||||||
|
* https://github.com/bassjobsen/Bootstrap-3-Typeahead
|
||||||
|
* =============================================================
|
||||||
|
* Original written by @mdo and @fat
|
||||||
|
* =============================================================
|
||||||
|
* Copyright 2014 Bass Jobsen @bassjobsen
|
||||||
|
*
|
||||||
|
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||||
|
* you may not use this file except in compliance with the License.
|
||||||
|
* You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
* ============================================================ */
|
||||||
|
|
||||||
|
|
||||||
|
(function (root, factory) {
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// CommonJS module is defined
|
||||||
|
if (typeof module !== 'undefined' && module.exports) {
|
||||||
|
module.exports = factory(require('jquery'));
|
||||||
|
}
|
||||||
|
// AMD module is defined
|
||||||
|
else if (typeof define === 'function' && define.amd) {
|
||||||
|
define(['jquery'], function ($) {
|
||||||
|
return factory($);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
factory(root.jQuery);
|
||||||
|
}
|
||||||
|
|
||||||
|
}(this, function ($) {
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
// jshint laxcomma: true
|
||||||
|
|
||||||
|
|
||||||
|
/* TYPEAHEAD PUBLIC CLASS DEFINITION
|
||||||
|
* ================================= */
|
||||||
|
|
||||||
|
var Typeahead = function (element, options) {
|
||||||
|
this.$element = $(element);
|
||||||
|
this.options = $.extend({}, Typeahead.defaults, options);
|
||||||
|
this.matcher = this.options.matcher || this.matcher;
|
||||||
|
this.sorter = this.options.sorter || this.sorter;
|
||||||
|
this.select = this.options.select || this.select;
|
||||||
|
this.autoSelect = typeof this.options.autoSelect == 'boolean' ? this.options.autoSelect : true;
|
||||||
|
this.highlighter = this.options.highlighter || this.highlighter;
|
||||||
|
this.render = this.options.render || this.render;
|
||||||
|
this.updater = this.options.updater || this.updater;
|
||||||
|
this.displayText = this.options.displayText || this.displayText;
|
||||||
|
this.itemLink = this.options.itemLink || this.itemLink;
|
||||||
|
this.itemTitle = this.options.itemTitle || this.itemTitle;
|
||||||
|
this.followLinkOnSelect = this.options.followLinkOnSelect || this.followLinkOnSelect;
|
||||||
|
this.source = this.options.source;
|
||||||
|
this.delay = this.options.delay;
|
||||||
|
this.theme = this.options.theme && this.options.themes && this.options.themes[this.options.theme] || Typeahead.defaults.themes[Typeahead.defaults.theme];
|
||||||
|
this.$menu = $(this.options.menu || this.theme.menu);
|
||||||
|
this.$appendTo = this.options.appendTo ? $(this.options.appendTo) : null;
|
||||||
|
this.fitToElement = typeof this.options.fitToElement == 'boolean' ? this.options.fitToElement : false;
|
||||||
|
this.shown = false;
|
||||||
|
this.listen();
|
||||||
|
this.showHintOnFocus = typeof this.options.showHintOnFocus == 'boolean' || this.options.showHintOnFocus === 'all' ? this.options.showHintOnFocus : false;
|
||||||
|
this.afterSelect = this.options.afterSelect;
|
||||||
|
this.afterEmptySelect = this.options.afterEmptySelect;
|
||||||
|
this.addItem = false;
|
||||||
|
this.value = this.$element.val() || this.$element.text();
|
||||||
|
this.keyPressed = false;
|
||||||
|
this.focused = this.$element.is(':focus');
|
||||||
|
this.changeInputOnSelect = this.options.changeInputOnSelect || this.changeInputOnSelect;
|
||||||
|
this.changeInputOnMove = this.options.changeInputOnMove || this.changeInputOnMove;
|
||||||
|
this.openLinkInNewTab = this.options.openLinkInNewTab || this.openLinkInNewTab;
|
||||||
|
this.selectOnBlur = this.options.selectOnBlur || this.selectOnBlur;
|
||||||
|
this.showCategoryHeader = this.options.showCategoryHeader || this.showCategoryHeader;
|
||||||
|
};
|
||||||
|
|
||||||
|
Typeahead.prototype = {
|
||||||
|
|
||||||
|
constructor: Typeahead,
|
||||||
|
|
||||||
|
|
||||||
|
setDefault: function (val) {
|
||||||
|
// var val = this.$menu.find('.active').data('value');
|
||||||
|
this.$element.data('active', val);
|
||||||
|
if (this.autoSelect || val) {
|
||||||
|
var newVal = this.updater(val);
|
||||||
|
// Updater can be set to any random functions via "options" parameter in constructor above.
|
||||||
|
// Add null check for cases when updater returns void or undefined.
|
||||||
|
if (!newVal) {
|
||||||
|
newVal = '';
|
||||||
|
}
|
||||||
|
this.$element
|
||||||
|
.val(this.displayText(newVal) || newVal)
|
||||||
|
.text(this.displayText(newVal) || newVal)
|
||||||
|
.change();
|
||||||
|
this.afterSelect(newVal);
|
||||||
|
}
|
||||||
|
return this.hide();
|
||||||
|
},
|
||||||
|
|
||||||
|
select: function () {
|
||||||
|
var val = this.$menu.find('.active').data('value');
|
||||||
|
|
||||||
|
this.$element.data('active', val);
|
||||||
|
if (this.autoSelect || val) {
|
||||||
|
var newVal = this.updater(val);
|
||||||
|
// Updater can be set to any random functions via "options" parameter in constructor above.
|
||||||
|
// Add null check for cases when updater returns void or undefined.
|
||||||
|
if (!newVal) {
|
||||||
|
newVal = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.changeInputOnSelect) {
|
||||||
|
this.$element
|
||||||
|
.val(this.displayText(newVal) || newVal)
|
||||||
|
.text(this.displayText(newVal) || newVal)
|
||||||
|
.change();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.followLinkOnSelect && this.itemLink(val)) {
|
||||||
|
if (this.openLinkInNewTab) {
|
||||||
|
window.open(this.itemLink(val), '_blank');
|
||||||
|
} else {
|
||||||
|
document.location = this.itemLink(val);
|
||||||
|
}
|
||||||
|
this.afterSelect(newVal);
|
||||||
|
} else if (this.followLinkOnSelect && !this.itemLink(val)) {
|
||||||
|
this.afterEmptySelect(newVal);
|
||||||
|
} else {
|
||||||
|
this.afterSelect(newVal);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.afterEmptySelect();
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.hide();
|
||||||
|
},
|
||||||
|
|
||||||
|
updater: function (item) {
|
||||||
|
return item;
|
||||||
|
},
|
||||||
|
|
||||||
|
setSource: function (source) {
|
||||||
|
this.source = source;
|
||||||
|
},
|
||||||
|
|
||||||
|
show: function () {
|
||||||
|
var pos = $.extend({}, this.$element.position(), {
|
||||||
|
height: this.$element[0].offsetHeight
|
||||||
|
});
|
||||||
|
|
||||||
|
var scrollHeight = typeof this.options.scrollHeight == 'function' ?
|
||||||
|
this.options.scrollHeight.call() :
|
||||||
|
this.options.scrollHeight;
|
||||||
|
|
||||||
|
var element;
|
||||||
|
if (this.shown) {
|
||||||
|
element = this.$menu;
|
||||||
|
} else if (this.$appendTo) {
|
||||||
|
element = this.$menu.appendTo(this.$appendTo);
|
||||||
|
this.hasSameParent = this.$appendTo.is(this.$element.parent());
|
||||||
|
} else {
|
||||||
|
element = this.$menu.insertAfter(this.$element);
|
||||||
|
this.hasSameParent = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.hasSameParent) {
|
||||||
|
// We cannot rely on the element position, need to position relative to the window
|
||||||
|
element.css('position', 'fixed');
|
||||||
|
var offset = this.$element.offset();
|
||||||
|
pos.top = offset.top;
|
||||||
|
pos.left = offset.left;
|
||||||
|
}
|
||||||
|
// The rules for bootstrap are: 'dropup' in the parent and 'dropdown-menu-right' in the element.
|
||||||
|
// Note that to get right alignment, you'll need to specify `menu` in the options to be:
|
||||||
|
// '<ul class="typeahead dropdown-menu" role="listbox"></ul>'
|
||||||
|
var dropup = $(element).parent().hasClass('dropup');
|
||||||
|
var newTop = dropup ? 'auto' : (pos.top + pos.height + scrollHeight);
|
||||||
|
var right = $(element).hasClass('dropdown-menu-right');
|
||||||
|
var newLeft = right ? 'auto' : pos.left;
|
||||||
|
// it seems like setting the css is a bad idea (just let Bootstrap do it), but I'll keep the old
|
||||||
|
// logic in place except for the dropup/right-align cases.
|
||||||
|
element.css({ top: newTop, left: newLeft }).show();
|
||||||
|
|
||||||
|
if (this.options.fitToElement === true) {
|
||||||
|
element.css('width', this.$element.outerWidth() + 'px');
|
||||||
|
}
|
||||||
|
|
||||||
|
this.shown = true;
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
hide: function () {
|
||||||
|
this.$menu.hide();
|
||||||
|
this.shown = false;
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
lookup: function (query) {
|
||||||
|
if (typeof(query) != 'undefined' && query !== null) {
|
||||||
|
this.query = query;
|
||||||
|
} else {
|
||||||
|
this.query = this.$element.val();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.query.length < this.options.minLength && !this.options.showHintOnFocus) {
|
||||||
|
return this.shown ? this.hide() : this;
|
||||||
|
}
|
||||||
|
|
||||||
|
var worker = $.proxy(function () {
|
||||||
|
|
||||||
|
// Bloodhound (since 0.11) needs three arguments.
|
||||||
|
// Two of them are callback functions (sync and async) for local and remote data processing
|
||||||
|
// see https://github.com/twitter/typeahead.js/blob/master/src/bloodhound/bloodhound.js#L132
|
||||||
|
if ($.isFunction(this.source) && this.source.length === 3) {
|
||||||
|
this.source(this.query, $.proxy(this.process, this), $.proxy(this.process, this));
|
||||||
|
} else if ($.isFunction(this.source)) {
|
||||||
|
this.source(this.query, $.proxy(this.process, this));
|
||||||
|
} else if (this.source) {
|
||||||
|
this.process(this.source);
|
||||||
|
}
|
||||||
|
}, this);
|
||||||
|
|
||||||
|
clearTimeout(this.lookupWorker);
|
||||||
|
this.lookupWorker = setTimeout(worker, this.delay);
|
||||||
|
},
|
||||||
|
|
||||||
|
process: function (items) {
|
||||||
|
var that = this;
|
||||||
|
|
||||||
|
items = $.grep(items, function (item) {
|
||||||
|
return that.matcher(item);
|
||||||
|
});
|
||||||
|
|
||||||
|
items = this.sorter(items);
|
||||||
|
|
||||||
|
if (!items.length && !this.options.addItem) {
|
||||||
|
return this.shown ? this.hide() : this;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (items.length > 0) {
|
||||||
|
this.$element.data('active', items[0]);
|
||||||
|
} else {
|
||||||
|
this.$element.data('active', null);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.options.items != 'all') {
|
||||||
|
items = items.slice(0, this.options.items);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add item
|
||||||
|
if (this.options.addItem) {
|
||||||
|
items.push(this.options.addItem);
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.render(items).show();
|
||||||
|
},
|
||||||
|
|
||||||
|
matcher: function (item) {
|
||||||
|
var it = this.displayText(item);
|
||||||
|
return ~it.toLowerCase().indexOf(this.query.toLowerCase());
|
||||||
|
},
|
||||||
|
|
||||||
|
sorter: function (items) {
|
||||||
|
var beginswith = [];
|
||||||
|
var caseSensitive = [];
|
||||||
|
var caseInsensitive = [];
|
||||||
|
var item;
|
||||||
|
|
||||||
|
while ((item = items.shift())) {
|
||||||
|
var it = this.displayText(item);
|
||||||
|
if (!it.toLowerCase().indexOf(this.query.toLowerCase())) {
|
||||||
|
beginswith.push(item);
|
||||||
|
} else if (~it.indexOf(this.query)) {
|
||||||
|
caseSensitive.push(item);
|
||||||
|
} else {
|
||||||
|
caseInsensitive.push(item);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return beginswith.concat(caseSensitive, caseInsensitive);
|
||||||
|
},
|
||||||
|
|
||||||
|
highlighter: function (item) {
|
||||||
|
var text = this.query;
|
||||||
|
if (text === '') {
|
||||||
|
return item;
|
||||||
|
}
|
||||||
|
var matches = item.match(/(>)([^<]*)(<)/g);
|
||||||
|
var first = [];
|
||||||
|
var second = [];
|
||||||
|
var i;
|
||||||
|
if (matches && matches.length) {
|
||||||
|
// html
|
||||||
|
for (i = 0; i < matches.length; ++i) {
|
||||||
|
if (matches[i].length > 2) {// escape '><'
|
||||||
|
first.push(matches[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// text
|
||||||
|
first = [];
|
||||||
|
first.push(item);
|
||||||
|
}
|
||||||
|
text = text.replace((/[\(\)\/\.\*\+\?\[\]]/g), function (mat) {
|
||||||
|
return '\\' + mat;
|
||||||
|
});
|
||||||
|
var reg = new RegExp(text, 'g');
|
||||||
|
var m;
|
||||||
|
for (i = 0; i < first.length; ++i) {
|
||||||
|
m = first[i].match(reg);
|
||||||
|
if (m && m.length > 0) {// find all text nodes matches
|
||||||
|
second.push(first[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (i = 0; i < second.length; ++i) {
|
||||||
|
item = item.replace(second[i], second[i].replace(reg, '<strong>$&</strong>'));
|
||||||
|
}
|
||||||
|
return item;
|
||||||
|
},
|
||||||
|
|
||||||
|
render: function (items) {
|
||||||
|
var that = this;
|
||||||
|
var self = this;
|
||||||
|
var activeFound = false;
|
||||||
|
var data = [];
|
||||||
|
var _category = that.options.separator;
|
||||||
|
|
||||||
|
$.each(items, function (key, value) {
|
||||||
|
// inject separator
|
||||||
|
if (key > 0 && value[_category] !== items[key - 1][_category]) {
|
||||||
|
data.push({
|
||||||
|
__type: 'divider'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.showCategoryHeader) {
|
||||||
|
// inject category header
|
||||||
|
if (value[_category] && (key === 0 || value[_category] !== items[key - 1][_category])) {
|
||||||
|
data.push({
|
||||||
|
__type: 'category',
|
||||||
|
name: value[_category]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
data.push(value);
|
||||||
|
});
|
||||||
|
|
||||||
|
items = $(data).map(function (i, item) {
|
||||||
|
if ((item.__type || false) == 'category'){
|
||||||
|
return $(that.options.headerHtml || that.theme.headerHtml).text(item.name)[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
if ((item.__type || false) == 'divider'){
|
||||||
|
return $(that.options.headerDivider || that.theme.headerDivider)[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
var text = self.displayText(item);
|
||||||
|
i = $(that.options.item || that.theme.item).data('value', item);
|
||||||
|
i.find(that.options.itemContentSelector || that.theme.itemContentSelector)
|
||||||
|
.addBack(that.options.itemContentSelector || that.theme.itemContentSelector)
|
||||||
|
.html(that.highlighter(text, item));
|
||||||
|
if(that.options.followLinkOnSelect) {
|
||||||
|
i.find('a').attr('href', self.itemLink(item));
|
||||||
|
}
|
||||||
|
i.find('a').attr('title', self.itemTitle(item));
|
||||||
|
if (text == self.$element.val()) {
|
||||||
|
i.addClass('active');
|
||||||
|
self.$element.data('active', item);
|
||||||
|
activeFound = true;
|
||||||
|
}
|
||||||
|
return i[0];
|
||||||
|
});
|
||||||
|
|
||||||
|
if (this.autoSelect && !activeFound) {
|
||||||
|
items.filter(':not(.dropdown-header)').first().addClass('active');
|
||||||
|
this.$element.data('active', items.first().data('value'));
|
||||||
|
}
|
||||||
|
this.$menu.html(items);
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
displayText: function (item) {
|
||||||
|
return typeof item !== 'undefined' && typeof item.name != 'undefined' ? item.name : item;
|
||||||
|
},
|
||||||
|
|
||||||
|
itemLink: function (item) {
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
|
||||||
|
itemTitle: function (item) {
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
|
||||||
|
next: function (event) {
|
||||||
|
var active = this.$menu.find('.active').removeClass('active');
|
||||||
|
var next = active.next();
|
||||||
|
|
||||||
|
if (!next.length) {
|
||||||
|
next = $(this.$menu.find($(this.options.item || this.theme.item).prop('tagName'))[0]);
|
||||||
|
}
|
||||||
|
|
||||||
|
while (next.hasClass('divider') || next.hasClass('dropdown-header')) {
|
||||||
|
next = next.next();
|
||||||
|
}
|
||||||
|
|
||||||
|
next.addClass('active');
|
||||||
|
// added for screen reader
|
||||||
|
var newVal = this.updater(next.data('value'));
|
||||||
|
if (this.changeInputOnMove) {
|
||||||
|
this.$element.val(this.displayText(newVal) || newVal);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
prev: function (event) {
|
||||||
|
var active = this.$menu.find('.active').removeClass('active');
|
||||||
|
var prev = active.prev();
|
||||||
|
|
||||||
|
if (!prev.length) {
|
||||||
|
prev = this.$menu.find($(this.options.item || this.theme.item).prop('tagName')).last();
|
||||||
|
}
|
||||||
|
|
||||||
|
while (prev.hasClass('divider') || prev.hasClass('dropdown-header')) {
|
||||||
|
prev = prev.prev();
|
||||||
|
}
|
||||||
|
|
||||||
|
prev.addClass('active');
|
||||||
|
// added for screen reader
|
||||||
|
var newVal = this.updater(prev.data('value'));
|
||||||
|
if (this.changeInputOnMove) {
|
||||||
|
this.$element.val(this.displayText(newVal) || newVal);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
listen: function () {
|
||||||
|
this.$element
|
||||||
|
.on('focus.bootstrap3Typeahead', $.proxy(this.focus, this))
|
||||||
|
.on('blur.bootstrap3Typeahead', $.proxy(this.blur, this))
|
||||||
|
.on('keypress.bootstrap3Typeahead', $.proxy(this.keypress, this))
|
||||||
|
.on('propertychange.bootstrap3Typeahead input.bootstrap3Typeahead', $.proxy(this.input, this))
|
||||||
|
.on('keyup.bootstrap3Typeahead', $.proxy(this.keyup, this));
|
||||||
|
|
||||||
|
if (this.eventSupported('keydown')) {
|
||||||
|
this.$element.on('keydown.bootstrap3Typeahead', $.proxy(this.keydown, this));
|
||||||
|
}
|
||||||
|
|
||||||
|
var itemTagName = $(this.options.item || this.theme.item).prop('tagName');
|
||||||
|
if ('ontouchstart' in document.documentElement && 'onmousemove' in document.documentElement) {
|
||||||
|
this.$menu
|
||||||
|
.on('touchstart', itemTagName, $.proxy(this.touchstart, this))
|
||||||
|
.on('touchend', itemTagName, $.proxy(this.click, this))
|
||||||
|
.on('click', $.proxy(this.click, this))
|
||||||
|
.on('mouseenter', itemTagName, $.proxy(this.mouseenter, this))
|
||||||
|
.on('mouseleave', itemTagName, $.proxy(this.mouseleave, this))
|
||||||
|
.on('mousedown', $.proxy(this.mousedown,this));
|
||||||
|
} else if ('ontouchstart' in document.documentElement) {
|
||||||
|
this.$menu
|
||||||
|
.on('touchstart', itemTagName, $.proxy(this.touchstart, this))
|
||||||
|
.on('touchend', itemTagName, $.proxy(this.click, this));
|
||||||
|
} else {
|
||||||
|
this.$menu
|
||||||
|
.on('click', $.proxy(this.click, this))
|
||||||
|
.on('mouseenter', itemTagName, $.proxy(this.mouseenter, this))
|
||||||
|
.on('mouseleave', itemTagName, $.proxy(this.mouseleave, this))
|
||||||
|
.on('mousedown', $.proxy(this.mousedown, this));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
destroy: function () {
|
||||||
|
this.$element.data('typeahead', null);
|
||||||
|
this.$element.data('active', null);
|
||||||
|
this.$element
|
||||||
|
.unbind('focus.bootstrap3Typeahead')
|
||||||
|
.unbind('blur.bootstrap3Typeahead')
|
||||||
|
.unbind('keypress.bootstrap3Typeahead')
|
||||||
|
.unbind('propertychange.bootstrap3Typeahead input.bootstrap3Typeahead')
|
||||||
|
.unbind('keyup.bootstrap3Typeahead');
|
||||||
|
|
||||||
|
if (this.eventSupported('keydown')) {
|
||||||
|
this.$element.unbind('keydown.bootstrap3-typeahead');
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$menu.remove();
|
||||||
|
this.destroyed = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
eventSupported: function (eventName) {
|
||||||
|
var isSupported = eventName in this.$element;
|
||||||
|
if (!isSupported) {
|
||||||
|
this.$element.setAttribute(eventName, 'return;');
|
||||||
|
isSupported = typeof this.$element[eventName] === 'function';
|
||||||
|
}
|
||||||
|
return isSupported;
|
||||||
|
},
|
||||||
|
|
||||||
|
move: function (e) {
|
||||||
|
if (!this.shown) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (e.keyCode) {
|
||||||
|
case 9: // tab
|
||||||
|
case 13: // enter
|
||||||
|
case 27: // escape
|
||||||
|
e.preventDefault();
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 38: // up arrow
|
||||||
|
// with the shiftKey (this is actually the left parenthesis)
|
||||||
|
if (e.shiftKey) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
e.preventDefault();
|
||||||
|
this.prev();
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 40: // down arrow
|
||||||
|
// with the shiftKey (this is actually the right parenthesis)
|
||||||
|
if (e.shiftKey) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
e.preventDefault();
|
||||||
|
this.next();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
keydown: function (e) {
|
||||||
|
/**
|
||||||
|
* Prevent to make an ajax call while copying and pasting.
|
||||||
|
*
|
||||||
|
* @author Simone Sacchi
|
||||||
|
* @version 2018/01/18
|
||||||
|
*/
|
||||||
|
if (e.keyCode === 17) { // ctrl
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.keyPressed = true;
|
||||||
|
this.suppressKeyPressRepeat = ~$.inArray(e.keyCode, [40, 38, 9, 13, 27]);
|
||||||
|
if (!this.shown && e.keyCode == 40) {
|
||||||
|
this.lookup();
|
||||||
|
} else {
|
||||||
|
this.move(e);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
keypress: function (e) {
|
||||||
|
if (this.suppressKeyPressRepeat) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.move(e);
|
||||||
|
},
|
||||||
|
|
||||||
|
input: function (e) {
|
||||||
|
// This is a fixed for IE10/11 that fires the input event when a placehoder is changed
|
||||||
|
// (https://connect.microsoft.com/IE/feedback/details/810538/ie-11-fires-input-event-on-focus)
|
||||||
|
var currentValue = this.$element.val() || this.$element.text();
|
||||||
|
if (this.value !== currentValue) {
|
||||||
|
this.value = currentValue;
|
||||||
|
this.lookup();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
keyup: function (e) {
|
||||||
|
if (this.destroyed) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
switch (e.keyCode) {
|
||||||
|
case 40: // down arrow
|
||||||
|
case 38: // up arrow
|
||||||
|
case 16: // shift
|
||||||
|
case 17: // ctrl
|
||||||
|
case 18: // alt
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 9: // tab
|
||||||
|
if (!this.shown || (this.showHintOnFocus && !this.keyPressed)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.select();
|
||||||
|
break;
|
||||||
|
case 13: // enter
|
||||||
|
if (!this.shown) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.select();
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 27: // escape
|
||||||
|
if (!this.shown) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.hide();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
focus: function (e) {
|
||||||
|
if (!this.focused) {
|
||||||
|
this.focused = true;
|
||||||
|
this.keyPressed = false;
|
||||||
|
if (this.options.showHintOnFocus && this.skipShowHintOnFocus !== true) {
|
||||||
|
if (this.options.showHintOnFocus === 'all') {
|
||||||
|
this.lookup('');
|
||||||
|
} else {
|
||||||
|
this.lookup();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.skipShowHintOnFocus) {
|
||||||
|
this.skipShowHintOnFocus = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
blur: function (e) {
|
||||||
|
if (!this.mousedover && !this.mouseddown && this.shown) {
|
||||||
|
if (this.selectOnBlur) {
|
||||||
|
this.select();
|
||||||
|
}
|
||||||
|
this.hide();
|
||||||
|
this.focused = false;
|
||||||
|
this.keyPressed = false;
|
||||||
|
} else if (this.mouseddown) {
|
||||||
|
// This is for IE that blurs the input when user clicks on scroll.
|
||||||
|
// We set the focus back on the input and prevent the lookup to occur again
|
||||||
|
this.skipShowHintOnFocus = true;
|
||||||
|
this.$element.focus();
|
||||||
|
this.mouseddown = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
click: function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.skipShowHintOnFocus = true;
|
||||||
|
this.select();
|
||||||
|
this.$element.focus();
|
||||||
|
this.hide();
|
||||||
|
},
|
||||||
|
|
||||||
|
mouseenter: function (e) {
|
||||||
|
this.mousedover = true;
|
||||||
|
this.$menu.find('.active').removeClass('active');
|
||||||
|
$(e.currentTarget).addClass('active');
|
||||||
|
},
|
||||||
|
|
||||||
|
mouseleave: function (e) {
|
||||||
|
this.mousedover = false;
|
||||||
|
if (!this.focused && this.shown) {
|
||||||
|
this.hide();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* We track the mousedown for IE. When clicking on the menu scrollbar, IE makes the input blur thus hiding the menu.
|
||||||
|
*/
|
||||||
|
mousedown: function (e) {
|
||||||
|
this.mouseddown = true;
|
||||||
|
this.$menu.one('mouseup', function (e) {
|
||||||
|
// IE won't fire this, but FF and Chrome will so we reset our flag for them here
|
||||||
|
this.mouseddown = false;
|
||||||
|
}.bind(this));
|
||||||
|
},
|
||||||
|
|
||||||
|
touchstart: function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.$menu.find('.active').removeClass('active');
|
||||||
|
$(e.currentTarget).addClass('active');
|
||||||
|
},
|
||||||
|
|
||||||
|
touchend: function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.select();
|
||||||
|
this.$element.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/* TYPEAHEAD PLUGIN DEFINITION
|
||||||
|
* =========================== */
|
||||||
|
|
||||||
|
var old = $.fn.typeahead;
|
||||||
|
|
||||||
|
$.fn.typeahead = function (option) {
|
||||||
|
var arg = arguments;
|
||||||
|
if (typeof option == 'string' && option == 'getActive') {
|
||||||
|
return this.data('active');
|
||||||
|
}
|
||||||
|
return this.each(function () {
|
||||||
|
var $this = $(this);
|
||||||
|
var data = $this.data('typeahead');
|
||||||
|
var options = typeof option == 'object' && option;
|
||||||
|
if (!data) {
|
||||||
|
$this.data('typeahead', (data = new Typeahead(this, options)));
|
||||||
|
}
|
||||||
|
if (typeof option == 'string' && data[option]) {
|
||||||
|
if (arg.length > 1) {
|
||||||
|
data[option].apply(data, Array.prototype.slice.call(arg, 1));
|
||||||
|
} else {
|
||||||
|
data[option]();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
Typeahead.defaults = {
|
||||||
|
source: [],
|
||||||
|
items: 8,
|
||||||
|
minLength: 1,
|
||||||
|
scrollHeight: 0,
|
||||||
|
autoSelect: true,
|
||||||
|
afterSelect: $.noop,
|
||||||
|
afterEmptySelect: $.noop,
|
||||||
|
addItem: false,
|
||||||
|
followLinkOnSelect: false,
|
||||||
|
delay: 0,
|
||||||
|
separator: 'category',
|
||||||
|
changeInputOnSelect: true,
|
||||||
|
changeInputOnMove: true,
|
||||||
|
openLinkInNewTab: false,
|
||||||
|
selectOnBlur: true,
|
||||||
|
showCategoryHeader: true,
|
||||||
|
theme: "bootstrap3",
|
||||||
|
themes: {
|
||||||
|
bootstrap3: {
|
||||||
|
menu: '<ul class="typeahead dropdown-menu" role="listbox"></ul>',
|
||||||
|
item: '<li><a class="dropdown-item" href="#" role="option"></a></li>',
|
||||||
|
itemContentSelector: "a",
|
||||||
|
headerHtml: '<li class="dropdown-header"></li>',
|
||||||
|
headerDivider: '<li class="divider" role="separator"></li>'
|
||||||
|
},
|
||||||
|
bootstrap4: {
|
||||||
|
menu: '<div class="typeahead dropdown-menu" role="listbox"></div>',
|
||||||
|
item: '<button class="dropdown-item" role="option"></button>',
|
||||||
|
itemContentSelector: '.dropdown-item',
|
||||||
|
headerHtml: '<h6 class="dropdown-header"></h6>',
|
||||||
|
headerDivider: '<div class="dropdown-divider"></div>'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$.fn.typeahead.Constructor = Typeahead;
|
||||||
|
|
||||||
|
/* TYPEAHEAD NO CONFLICT
|
||||||
|
* =================== */
|
||||||
|
|
||||||
|
$.fn.typeahead.noConflict = function () {
|
||||||
|
$.fn.typeahead = old;
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/* TYPEAHEAD DATA-API
|
||||||
|
* ================== */
|
||||||
|
|
||||||
|
$(document).on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) {
|
||||||
|
var $this = $(this);
|
||||||
|
if ($this.data('typeahead')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
$this.typeahead($this.data());
|
||||||
|
});
|
||||||
|
|
||||||
|
}));
|
||||||
1
ruoyi-admin/src/main/resources/static/ajax/libs/typeahead/bootstrap3-typeahead.min.js
vendored
Normal file
1
ruoyi-admin/src/main/resources/static/ajax/libs/typeahead/bootstrap3-typeahead.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,985 @@
|
||||||
|
/*
|
||||||
|
*
|
||||||
|
* SKIN blue 若依管理系统
|
||||||
|
* NAME - blue/green/purple/red/yellow
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
/** 蓝色主题 skin-blue **/
|
||||||
|
.navbar, .skin-blue .navbar {
|
||||||
|
background-color: #3c8dbc
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-blue .navbar-default .nav>li.selected>a,
|
||||||
|
.skin-blue .navbar-default .nav>li.selected>a:focus {
|
||||||
|
background-color: #1890ff;
|
||||||
|
color: rgba(255,255,255,1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-blue .navbar .nav>li>a {
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-blue .navbar .nav>li>a:hover,
|
||||||
|
.skin-blue .navbar .nav>li>a:active,
|
||||||
|
.skin-blue .navbar .nav>li>a:focus,
|
||||||
|
.skin-blue .navbar .nav .open>a,
|
||||||
|
.skin-blue .navbar .nav .open>a:hover,
|
||||||
|
.skin-blue .navbar .nav .open>a:focus,
|
||||||
|
.skin-blue .navbar .nav>.active>a {
|
||||||
|
background: rgba(0, 0, 0, 0.1);
|
||||||
|
color: #f6f6f6
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-blue .navbar .sidebar-toggle {
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-blue .navbar .sidebar-toggle:hover {
|
||||||
|
color: #f6f6f6;
|
||||||
|
background: rgba(0, 0, 0, 0.1)
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-blue .navbar .sidebar-toggle {
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-blue .navbar .sidebar-toggle:hover {
|
||||||
|
background-color: #367fa9
|
||||||
|
}
|
||||||
|
|
||||||
|
@media ( max-width :767px) {
|
||||||
|
.skin-blue .navbar .dropdown-menu li.divider {
|
||||||
|
background-color: rgba(255, 255, 255, 0.1)
|
||||||
|
}
|
||||||
|
.skin-blue .navbar .dropdown-menu li a {
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
.skin-blue .navbar .dropdown-menu li a:hover {
|
||||||
|
background: #367fa9
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-blue .logo {
|
||||||
|
background-color: #367fa9;
|
||||||
|
color: #fff;
|
||||||
|
border-bottom: 0 solid transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-blue .logo:hover {
|
||||||
|
background-color: #357ca5
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-blue li.user-header {
|
||||||
|
background-color: #3c8dbc
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-blue .content-header {
|
||||||
|
background: transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-blue .wrapper,
|
||||||
|
.skin-blue .main-sidebar,
|
||||||
|
.skin-blue .left-side {
|
||||||
|
background-color: #222d32
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-blue .user-panel>.info,
|
||||||
|
.skin-blue .user-panel>.info>a {
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-blue .nav>li.header {
|
||||||
|
color: #4b646f;
|
||||||
|
background: #1a2226
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-blue .nav>li.active {
|
||||||
|
color: #fff;
|
||||||
|
background: #293846;
|
||||||
|
border-left: 3px solid #3c8dbc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-blue .nav>li.active>ul li.active {
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-blue .sidebar a {
|
||||||
|
color: #b8c7ce
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-blue .sidebar a:hover {
|
||||||
|
text-decoration: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-blue .sidebar-form {
|
||||||
|
border-radius: 3px;
|
||||||
|
border: 1px solid #374850;
|
||||||
|
margin: 10px 10px
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-blue .sidebar-form input[type="text"],
|
||||||
|
.skin-blue .sidebar-form .btn {
|
||||||
|
box-shadow: none;
|
||||||
|
background-color: #374850;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
height: 35px
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-blue .sidebar-form input[type="text"] {
|
||||||
|
color: #666;
|
||||||
|
border-top-left-radius: 2px;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
border-bottom-left-radius: 2px
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-blue .sidebar-form input[type="text"]:focus,
|
||||||
|
.skin-blue .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
|
||||||
|
background-color: #fff;
|
||||||
|
color: #666
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-blue .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
|
||||||
|
border-left-color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-blue .sidebar-form .btn {
|
||||||
|
color: #999;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-top-right-radius: 2px;
|
||||||
|
border-bottom-right-radius: 2px;
|
||||||
|
border-bottom-left-radius: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-blue.layout-top-nav>.logo {
|
||||||
|
background-color: #3c8dbc;
|
||||||
|
color: #fff;
|
||||||
|
border-bottom: 0 solid transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-blue.layout-top-nav>.logo:hover {
|
||||||
|
background-color: #3b8ab8
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-blue .content-tabs {
|
||||||
|
border-bottom: 1px solid #e5e5e5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-blue.layout-top-nav>.logo {
|
||||||
|
background-color: #3c8dbc;
|
||||||
|
color: #fff;
|
||||||
|
border-bottom: 0 solid transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-blue.layout-top-nav>.logo:hover {
|
||||||
|
background-color: #3b8ab8
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 绿色主题 skin-green **/
|
||||||
|
.skin-green .navbar {
|
||||||
|
background-color: #00a65a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-green .navbar-default .nav>li.selected>a,
|
||||||
|
.skin-green .navbar-default .nav>li.selected>a:focus {
|
||||||
|
background-color: #52c41a;
|
||||||
|
color: rgba(255,255,255,1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-green .content-tabs {
|
||||||
|
border-bottom: 1px solid #e5e5e5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-green .navbar .nav>li>a {
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-green .navbar .nav>li>a:hover,
|
||||||
|
.skin-green .navbar .nav>li>a:active,
|
||||||
|
.skin-green .navbar .nav>li>a:focus,
|
||||||
|
.skin-green .navbar .nav .open>a,
|
||||||
|
.skin-green .navbar .nav .open>a:hover,
|
||||||
|
.skin-green .navbar .nav .open>a:focus,
|
||||||
|
.skin-green .navbar .nav>.active>a {
|
||||||
|
background: rgba(0, 0, 0, 0.1);
|
||||||
|
color: #f6f6f6
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-green .navbar .sidebar-toggle {
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-green .navbar .sidebar-toggle:hover {
|
||||||
|
color: #f6f6f6;
|
||||||
|
background: rgba(0, 0, 0, 0.1)
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-green .navbar .sidebar-toggle {
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-green .navbar .sidebar-toggle:hover {
|
||||||
|
background-color: #008d4c
|
||||||
|
}
|
||||||
|
|
||||||
|
@media ( max-width :767px) {
|
||||||
|
.skin-green .navbar .dropdown-menu li.divider {
|
||||||
|
background-color: rgba(255, 255, 255, 0.1)
|
||||||
|
}
|
||||||
|
.skin-green .navbar .dropdown-menu li a {
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
.skin-green .navbar .dropdown-menu li a:hover {
|
||||||
|
background: #008d4c
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-green .logo {
|
||||||
|
background-color: #008d4c;
|
||||||
|
color: #fff;
|
||||||
|
border-bottom: 0 solid transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-green .logo:hover {
|
||||||
|
background-color: #008749
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-green li.user-header {
|
||||||
|
background-color: #00a65a
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-green .content-header {
|
||||||
|
background: transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-green .wrapper,
|
||||||
|
.skin-green .main-sidebar,
|
||||||
|
.skin-green .left-side {
|
||||||
|
background-color: #222d32
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-green .user-panel>.info,
|
||||||
|
.skin-green .user-panel>.info>a {
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-green .nav>li.header {
|
||||||
|
color: #4b646f;
|
||||||
|
background: #1a2226;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-green .nav>li.active {
|
||||||
|
color: #fff;
|
||||||
|
background: #293846;
|
||||||
|
border-left: 3px solid #00a65a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-green .nav>li.active>ul li.active {
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-green .sidebar a {
|
||||||
|
color: #b8c7ce
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-green .sidebar a:hover {
|
||||||
|
text-decoration: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-green .sidebar-form {
|
||||||
|
border-radius: 3px;
|
||||||
|
border: 1px solid #374850;
|
||||||
|
margin: 10px 10px
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-green .sidebar-form input[type="text"],
|
||||||
|
.skin-green .sidebar-form .btn {
|
||||||
|
box-shadow: none;
|
||||||
|
background-color: #374850;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
height: 35px
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-green .sidebar-form input[type="text"] {
|
||||||
|
color: #666;
|
||||||
|
border-top-left-radius: 2px;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
border-bottom-left-radius: 2px
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-green .sidebar-form input[type="text"]:focus,
|
||||||
|
.skin-green .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
|
||||||
|
background-color: #fff;
|
||||||
|
color: #666
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-green .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
|
||||||
|
border-left-color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-green .sidebar-form .btn {
|
||||||
|
color: #999;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-top-right-radius: 2px;
|
||||||
|
border-bottom-right-radius: 2px;
|
||||||
|
border-bottom-left-radius: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 红色主题 skin-red **/
|
||||||
|
.skin-red .navbar {
|
||||||
|
background-color: #dd4b39
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-red .navbar-default .nav>li.selected>a,
|
||||||
|
.skin-red .navbar-default .nav>li.selected>a:focus {
|
||||||
|
background-color: #f5222d;
|
||||||
|
color: rgba(255,255,255,1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-red .navbar .nav>li>a {
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-red .navbar .nav>li>a:hover,
|
||||||
|
.skin-red .navbar .nav>li>a:active,
|
||||||
|
.skin-red .navbar .nav>li>a:focus,
|
||||||
|
.skin-red .navbar .nav .open>a,
|
||||||
|
.skin-red .navbar .nav .open>a:hover,
|
||||||
|
.skin-red .navbar .nav .open>a:focus,
|
||||||
|
.skin-red .navbar .nav>.active>a {
|
||||||
|
background: rgba(0, 0, 0, 0.1);
|
||||||
|
color: #f6f6f6
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-red .navbar .sidebar-toggle {
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-red .navbar .sidebar-toggle:hover {
|
||||||
|
color: #f6f6f6;
|
||||||
|
background: rgba(0, 0, 0, 0.1)
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-red .navbar .sidebar-toggle {
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-red .navbar .sidebar-toggle:hover {
|
||||||
|
background-color: #d73925
|
||||||
|
}
|
||||||
|
|
||||||
|
@media ( max-width :767px) {
|
||||||
|
.skin-red .navbar .dropdown-menu li.divider {
|
||||||
|
background-color: rgba(255, 255, 255, 0.1)
|
||||||
|
}
|
||||||
|
.skin-red .navbar .dropdown-menu li a {
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
.skin-red .navbar .dropdown-menu li a:hover {
|
||||||
|
background: #d73925
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-red .logo {
|
||||||
|
background-color: #d73925;
|
||||||
|
color: #fff;
|
||||||
|
border-bottom: 0 solid transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-red .logo:hover {
|
||||||
|
background-color: #d33724
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-red li.user-header {
|
||||||
|
background-color: #dd4b39
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-red .content-header {
|
||||||
|
background: transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-red .wrapper,
|
||||||
|
.skin-red .main-sidebar,
|
||||||
|
.skin-red .left-side {
|
||||||
|
background-color: #222d32
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-red .user-panel>.info,
|
||||||
|
.skin-red .user-panel>.info>a {
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-red .nav>li.header {
|
||||||
|
color: #4b646f;
|
||||||
|
background: #1a2226
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-red .nav>li.active {
|
||||||
|
color: #fff;
|
||||||
|
border-left: 3px solid #dd4b39;
|
||||||
|
background: #293846;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-red .nav>li.active>ul li.active {
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-red .content-tabs {
|
||||||
|
border-bottom: 1px solid #e5e5e5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-red .sidebar a {
|
||||||
|
color: #b8c7ce
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-red .sidebar a:hover {
|
||||||
|
text-decoration: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-red .sidebar-form {
|
||||||
|
border-radius: 3px;
|
||||||
|
border: 1px solid #374850;
|
||||||
|
margin: 10px 10px
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-red .sidebar-form input[type="text"],
|
||||||
|
.skin-red .sidebar-form .btn {
|
||||||
|
box-shadow: none;
|
||||||
|
background-color: #374850;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
height: 35px
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-red .sidebar-form input[type="text"] {
|
||||||
|
color: #fff;
|
||||||
|
border-top-left-radius: 2px;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
border-bottom-left-radius: 2px
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-red .sidebar-form input[type="text"]:focus,
|
||||||
|
.skin-red .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
|
||||||
|
background-color: #fff;
|
||||||
|
color: #666
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-red .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
|
||||||
|
border-left-color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-red .sidebar-form .btn {
|
||||||
|
color: #999;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-top-right-radius: 2px;
|
||||||
|
border-bottom-right-radius: 2px;
|
||||||
|
border-bottom-left-radius: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 黄色主题 skin-red **/
|
||||||
|
.skin-yellow .navbar {
|
||||||
|
background-color: #f39c12
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-yellow .navbar-default .nav>li.selected>a,
|
||||||
|
.skin-yellow .navbar-default .nav>li.selected>a:focus {
|
||||||
|
background-color: #faad14;
|
||||||
|
color: rgba(255,255,255,1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-yellow .navbar .nav>li>a {
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-yellow .navbar .nav>li>a:hover,
|
||||||
|
.skin-yellow .navbar .nav>li>a:active,
|
||||||
|
.skin-yellow .navbar .nav>li>a:focus,
|
||||||
|
.skin-yellow .navbar .nav .open>a,
|
||||||
|
.skin-yellow .navbar .nav .open>a:hover,
|
||||||
|
.skin-yellow .navbar .nav .open>a:focus,
|
||||||
|
.skin-yellow .navbar .nav>.active>a {
|
||||||
|
background: rgba(0, 0, 0, 0.1);
|
||||||
|
color: #f6f6f6
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-yellow .navbar .sidebar-toggle {
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-yellow .navbar .sidebar-toggle:hover {
|
||||||
|
color: #f6f6f6;
|
||||||
|
background: rgba(0, 0, 0, 0.1)
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-yellow .navbar .sidebar-toggle {
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-yellow .navbar .sidebar-toggle:hover {
|
||||||
|
background-color: #e08e0b
|
||||||
|
}
|
||||||
|
|
||||||
|
@media ( max-width :767px) {
|
||||||
|
.skin-yellow .navbar .dropdown-menu li.divider {
|
||||||
|
background-color: rgba(255, 255, 255, 0.1)
|
||||||
|
}
|
||||||
|
.skin-yellow .navbar .dropdown-menu li a {
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
.skin-yellow .navbar .dropdown-menu li a:hover {
|
||||||
|
background: #e08e0b
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-yellow .logo {
|
||||||
|
background-color: #e08e0b;
|
||||||
|
color: #fff;
|
||||||
|
border-bottom: 0 solid transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-yellow .logo:hover {
|
||||||
|
background-color: #db8b0b
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-yellow li.user-header {
|
||||||
|
background-color: #f39c12
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-yellow .content-header {
|
||||||
|
background: transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-yellow .wrapper,
|
||||||
|
.skin-yellow .main-sidebar,
|
||||||
|
.skin-yellow .left-side {
|
||||||
|
background-color: #222d32
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-yellow .user-panel>.info,
|
||||||
|
.skin-yellow .user-panel>.info>a {
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-yellow .nav>li.header {
|
||||||
|
color: #4b646f;
|
||||||
|
background: #1a2226
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-yellow .nav>li.active {
|
||||||
|
color: #fff;
|
||||||
|
background: #293846;
|
||||||
|
border-left: 3px solid #f39c12;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-yellow .nav>li.active>ul li.active {
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-yellow .content-tabs {
|
||||||
|
border-bottom: 1px solid #e5e5e5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-yellow .sidebar a {
|
||||||
|
color: #b8c7ce
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-yellow .sidebar a:hover {
|
||||||
|
text-decoration: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-yellow .sidebar-form {
|
||||||
|
border-radius: 3px;
|
||||||
|
border: 1px solid #374850;
|
||||||
|
margin: 10px 10px
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-yellow .sidebar-form input[type="text"],
|
||||||
|
.skin-yellow .sidebar-form .btn {
|
||||||
|
box-shadow: none;
|
||||||
|
background-color: #374850;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
height: 35px
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-yellow .sidebar-form input[type="text"] {
|
||||||
|
color: #666;
|
||||||
|
border-top-left-radius: 2px;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
border-bottom-left-radius: 2px
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-yellow .sidebar-form input[type="text"]:focus,
|
||||||
|
.skin-yellow .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
|
||||||
|
background-color: #fff;
|
||||||
|
color: #666
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-yellow .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
|
||||||
|
border-left-color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-yellow .sidebar-form .btn {
|
||||||
|
color: #999;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-top-right-radius: 2px;
|
||||||
|
border-bottom-right-radius: 2px;
|
||||||
|
border-bottom-left-radius: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 紫色主题 skin-purple **/
|
||||||
|
.skin-purple .navbar {
|
||||||
|
background-color: #605ca8
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-purple .navbar-default .nav>li.selected>a,
|
||||||
|
.skin-purple .navbar-default .nav>li.selected>a:focus {
|
||||||
|
background-color: #722ed1;
|
||||||
|
color: rgba(255,255,255,1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-purple .navbar .nav>li>a {
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-purple .navbar .nav>li>a:hover,
|
||||||
|
.skin-purple .navbar .nav>li>a:active,
|
||||||
|
.skin-purple .navbar .nav>li>a:focus,
|
||||||
|
.skin-purple .navbar .nav .open>a,
|
||||||
|
.skin-purple .navbar .nav .open>a:hover,
|
||||||
|
.skin-purple .navbar .nav .open>a:focus,
|
||||||
|
.skin-purple .navbar .nav>.active>a {
|
||||||
|
background: rgba(0, 0, 0, 0.1);
|
||||||
|
color: #f6f6f6
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-purple .navbar .sidebar-toggle {
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-purple .navbar .sidebar-toggle:hover {
|
||||||
|
color: #f6f6f6;
|
||||||
|
background: rgba(0, 0, 0, 0.1)
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-purple .navbar .sidebar-toggle {
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-purple .navbar .sidebar-toggle:hover {
|
||||||
|
background-color: #555299
|
||||||
|
}
|
||||||
|
|
||||||
|
@media ( max-width :767px) {
|
||||||
|
.skin-purple .navbar .dropdown-menu li.divider {
|
||||||
|
background-color: rgba(255, 255, 255, 0.1)
|
||||||
|
}
|
||||||
|
.skin-purple .navbar .dropdown-menu li a {
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
.skin-purple .navbar .dropdown-menu li a:hover {
|
||||||
|
background: #555299
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-purple .logo {
|
||||||
|
background-color: #555299;
|
||||||
|
color: #fff;
|
||||||
|
border-bottom: 0 solid transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-purple .logo:hover {
|
||||||
|
background-color: #545096
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-purple li.user-header {
|
||||||
|
background-color: #605ca8
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-purple .content-header {
|
||||||
|
background: transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-purple .wrapper,
|
||||||
|
.skin-purple .main-sidebar,
|
||||||
|
.skin-purple .left-side {
|
||||||
|
background-color: #222d32
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-purple .user-panel>.info,
|
||||||
|
.skin-purple .user-panel>.info>a {
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-purple .nav>li.header {
|
||||||
|
color: #4b646f;
|
||||||
|
background: #1a2226
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-purple .nav>li.active {
|
||||||
|
color: #fff;
|
||||||
|
background: #293846;
|
||||||
|
border-left: 3px solid #605ca8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-purple .nav>li.active>ul li.active {
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-purple .content-tabs {
|
||||||
|
border-bottom: 1px solid #e5e5e5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-purple .sidebar a {
|
||||||
|
color: #b8c7ce
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-purple .sidebar a:hover {
|
||||||
|
text-decoration: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-purple .sidebar-form {
|
||||||
|
border-radius: 3px;
|
||||||
|
border: 1px solid #374850;
|
||||||
|
margin: 10px 10px
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-purple .sidebar-form input[type="text"],
|
||||||
|
.skin-purple .sidebar-form .btn {
|
||||||
|
box-shadow: none;
|
||||||
|
background-color: #374850;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
height: 35px
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-purple .sidebar-form input[type="text"] {
|
||||||
|
color: #666;
|
||||||
|
border-top-left-radius: 2px;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
border-bottom-left-radius: 2px
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-purple .sidebar-form input[type="text"]:focus,
|
||||||
|
.skin-purple .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
|
||||||
|
background-color: #fff;
|
||||||
|
color: #666
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-purple .sidebar-form input[type="text"]:focus+.input-group-btn .btn {
|
||||||
|
border-left-color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.skin-purple .sidebar-form .btn {
|
||||||
|
color: #999;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-top-right-radius: 2px;
|
||||||
|
border-bottom-right-radius: 2px;
|
||||||
|
border-bottom-left-radius: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
*
|
||||||
|
* 侧边栏主题 若依管理系统
|
||||||
|
* NAME - .theme-dark/theme-light
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
/** 深黑主题 .theme-dark **/
|
||||||
|
.theme-dark .user-panel>.info>p, .theme-dark .user-panel>.info, .theme-dark .user-panel>.info>a{
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-dark .nav>li.active {
|
||||||
|
background: #293846;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-dark .navbar-static-side {
|
||||||
|
background-color: #2f4050;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-dark .user-panel {
|
||||||
|
background-color: #2f4050;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-dark .navbar-default .nav>li>a:hover,
|
||||||
|
.theme-dark .navbar-default .nav>li>a:focus {
|
||||||
|
background: #293846;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 浅色主题 theme-light **/
|
||||||
|
.theme-light .user-panel>.info>p, .theme-light .user-panel>.info, .theme-light .user-panel>.info>a{
|
||||||
|
color: #555
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .nav>li.active{
|
||||||
|
background: #f9fafc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .navbar-static-side {
|
||||||
|
background-color: #f9fafc;
|
||||||
|
box-shadow: 2px 0 2px 0 rgba(29,35,41,.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .user-panel {
|
||||||
|
background-color: #f9fafc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .navbar-default .nav>li>a {
|
||||||
|
color: #777;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light.skin-blue .navbar-default .nav>li.active>a {
|
||||||
|
color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light.skin-blue .navbar-default .nav>li.selected>a,
|
||||||
|
.theme-light.skin-blue .navbar-default .nav>li.selected>a:focus {
|
||||||
|
background-color: rgb(240, 245, 255);
|
||||||
|
color: rgb(47, 84, 235);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light.skin-green .navbar-default .nav>li.active>a {
|
||||||
|
color: #52c41a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light.skin-green .navbar-default .nav>li.selected>a,
|
||||||
|
.theme-light.skin-green .navbar-default .nav>li.selected>a:focus {
|
||||||
|
background-color: rgb(246, 255, 237);
|
||||||
|
color: rgb(82, 196, 26);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light.skin-purple .navbar-default .nav>li.active>a {
|
||||||
|
color: rgb(114, 46, 209);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light.skin-purple .navbar-default .nav>li.selected>a,
|
||||||
|
.theme-light.skin-purple .navbar-default .nav>li.selected>a:focus {
|
||||||
|
background-color: #f9f0ff;
|
||||||
|
color: #722ed1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light.skin-red .navbar-default .nav>li.active>a {
|
||||||
|
color: rgb(245, 34, 45);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light.skin-red .navbar-default .nav>li.selected>a,
|
||||||
|
.theme-light.skin-red .navbar-default .nav>li.selected>a:focus {
|
||||||
|
background-color: rgb(255, 241, 240);
|
||||||
|
color: rgb(245, 34, 45);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light.skin-yellow .navbar-default .nav>li.active>a {
|
||||||
|
color: rgb(250, 173, 20);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light.skin-yellow .navbar-default .nav>li.selected>a,
|
||||||
|
.theme-light.skin-yellow .navbar-default .nav>li.selected>a:focus {
|
||||||
|
background-color: #fffbe6;
|
||||||
|
color: #faad14;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .navbar-default .nav>li>a:hover,
|
||||||
|
.theme-light .navbar-default .nav>li>a:focus {
|
||||||
|
background-color: rgb(240, 245, 255);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-sidebar.theme-light.mini-navbar .nav li:hover>a> span.nav-label {
|
||||||
|
background-color: #f9fafc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-sidebar.theme-light.mini-navbar .nav li:hover>.nav-second-level {
|
||||||
|
background-color: #f9fafc;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 深蓝主题 theme-light **/
|
||||||
|
/**
|
||||||
|
.skin-blue.theme-blue .logo, .skin-white.theme-blue .logo {
|
||||||
|
background-color: rgba(15,41,80,1) !important;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
**/
|
||||||
|
.theme-blue .user-panel>.info>p, .theme-blue .user-panel>.info, .theme-blue .user-panel>.info>a{
|
||||||
|
color: #a3b1cc
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-blue .nav>li.active{
|
||||||
|
background-color: rgba(15,41,80,1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-blue .navbar-static-side {
|
||||||
|
background-color: rgba(15,41,80,1);
|
||||||
|
box-shadow: 2px 0 2px 0 rgba(29,35,41,.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-blue .user-panel {
|
||||||
|
background-color: rgba(15,41,80,1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-blue .navbar-default .nav>li>a {
|
||||||
|
color: #a3b1cc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-blue.skin-blue .navbar-default .nav>li.active>a {
|
||||||
|
color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-blue.skin-blue .navbar-default .nav>li.selected>a,
|
||||||
|
.theme-blue.skin-blue .navbar-default .nav>li.selected>a:focus {
|
||||||
|
background-color: #1890ff;
|
||||||
|
color: rgba(255,255,255,1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-blue.skin-green .navbar-default .nav>li.active>a {
|
||||||
|
color: #52c41a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-blue.skin-green .navbar-default .nav>li.selected>a,
|
||||||
|
.theme-blue.skin-green .navbar-default .nav>li.selected>a:focus {
|
||||||
|
background-color: #52c41a;
|
||||||
|
color: rgba(255,255,255,1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-blue.skin-purple .navbar-default .nav>li.active>a {
|
||||||
|
color: rgb(114, 46, 209);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-blue.skin-purple .navbar-default .nav>li.selected>a,
|
||||||
|
.theme-blue.skin-purple .navbar-default .nav>li.selected>a:focus {
|
||||||
|
background-color: #722ed1;
|
||||||
|
color: rgba(255,255,255,1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-blue.skin-red .navbar-default .nav>li.active>a {
|
||||||
|
color: rgb(245, 34, 45);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-blue.skin-red .navbar-default .nav>li.selected>a,
|
||||||
|
.theme-blue.skin-red .navbar-default .nav>li.selected>a:focus {
|
||||||
|
background-color: #f5222d;
|
||||||
|
color: rgba(255,255,255,1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-blue.skin-yellow .navbar-default .nav>li.active>a {
|
||||||
|
color: rgb(250, 173, 20);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-blue.skin-yellow .navbar-default .nav>li.selected>a,
|
||||||
|
.theme-blue.skin-yellow .navbar-default .nav>li.selected>a:focus {
|
||||||
|
background-color: #faad14;
|
||||||
|
color: rgba(255,255,255,1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-blue .navbar-default .nav>li>a:hover,
|
||||||
|
.theme-blue .navbar-default .nav>li>a:focus {
|
||||||
|
background-color: rgba(15,41,80,1);
|
||||||
|
box-shadow: 2px 0 2px 0 rgba(29,35,41,.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-sidebar.theme-blue.mini-navbar .nav li:hover>a> span.nav-label {
|
||||||
|
background-color: rgba(15,41,80,1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-sidebar.theme-blue.mini-navbar .nav li:hover>.nav-second-level {
|
||||||
|
background-color: rgba(15,41,80,1);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
#错误消息
|
||||||
|
not.null=* 必须填写
|
||||||
|
user.jcaptcha.error=验证码错误
|
||||||
|
user.not.exists=用户不存在/密码错误
|
||||||
|
user.password.not.match=用户不存在/密码错误
|
||||||
|
user.password.retry.limit.count=密码输入错误{0}次
|
||||||
|
user.password.retry.limit.exceed=密码输入错误{0}次，帐户锁定10分钟
|
||||||
|
user.password.delete=对不起，您的账号已被删除
|
||||||
|
user.blocked=用户已封禁，请联系管理员
|
||||||
|
role.blocked=角色已封禁，请联系管理员
|
||||||
|
user.logout.success=退出成功
|
||||||
|
|
||||||
|
length.not.valid=长度必须在{min}到{max}个字符之间
|
||||||
|
|
||||||
|
user.username.not.valid=* 2到20个汉字、字母、数字或下划线组成，且必须以非数字开头
|
||||||
|
user.password.not.valid=* 5-50个字符
|
||||||
|
|
||||||
|
user.email.not.valid=邮箱格式错误
|
||||||
|
user.mobile.phone.number.not.valid=手机号格式错误
|
||||||
|
user.login.success=登录成功
|
||||||
|
user.register.success=注册成功
|
||||||
|
user.notfound=请重新登录
|
||||||
|
user.forcelogout=管理员强制退出，请重新登录
|
||||||
|
user.unknown.error=未知错误，请重新登录
|
||||||
|
|
||||||
|
##文件上传消息
|
||||||
|
upload.exceed.maxSize=上传的文件大小超出限制的文件大小！<br/>允许的文件最大大小是：{0}MB！
|
||||||
|
upload.filename.exceed.length=上传的文件名最长{0}个字符
|
||||||
|
|
||||||
|
##权限
|
||||||
|
no.permission=您没有数据的权限，请联系管理员添加权限 [{0}]
|
||||||
|
no.create.permission=您没有创建数据的权限，请联系管理员添加权限 [{0}]
|
||||||
|
no.update.permission=您没有修改数据的权限，请联系管理员添加权限 [{0}]
|
||||||
|
no.delete.permission=您没有删除数据的权限，请联系管理员添加权限 [{0}]
|
||||||
|
no.export.permission=您没有导出数据的权限，请联系管理员添加权限 [{0}]
|
||||||
|
no.view.permission=您没有查看数据的权限，请联系管理员添加权限 [{0}]
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,9 @@
|
||||||
|
(function(k){function t(a){a.debug&&(g("callbackIfComplete()"),g("totalFiles: "+a.totalFiles),g("filesLoaded: "+a.filesLoaded));a.async&&a.filesLoaded===a.totalFiles&&a.callback&&a.callback()}function n(a,d){d.debug&&g("loadAndParseFiles");null!==a&&0<a.length?u(a[0],d,function(){a.shift();n(a,d)}):t(d)}function u(a,d,b){d.debug&&(g("loadAndParseFile('"+a+"')"),g("totalFiles: "+d.totalFiles),g("filesLoaded: "+d.filesLoaded));null!==a&&"undefined"!==typeof a&&k.ajax({url:a,async:d.async,cache:d.cache,
|
||||||
|
dataType:"text",success:function(h,c){d.debug&&(g("Succeeded in downloading "+a+"."),g(h));v(h,d);b()},error:function(h,c,e){d.debug&&g("Failed to download or parse "+a+". errorThrown: "+e);404===h.status&&--d.totalFiles;b()}})}function v(a,d){var b="",h=a.split(/\n/),c=/(\{\d+})/g,e=/\{(\d+)}/g,g=/(\\u.{4})/ig;h.forEach(function(a,w){a=a.trim();if(0<a.length&&"#"!=a.match("^#")){var l=a.split("=");if(0<l.length){for(var m=decodeURI(l[0]).trim(),f=1==l.length?"":l[1];"\\"===f.match(/\\$/);)f=f.substring(0,
|
||||||
|
f.length-1),f+=h[++w].trimRight();for(var p=2;p<l.length;p++)f+="="+l[p];f=f.trim();if("map"==d.mode||"both"==d.mode)(l=f.match(g))&&l.forEach(function(a){f=f.replace(a,x(a))}),k.i18n.map[m]=f;if("vars"==d.mode||"both"==d.mode)if(f=f.replace(/"/g,'\\"'),y(m),c.test(f)){var n=!0,q="",r=[];f.split(c).forEach(function(a){!c.test(a)||0!==r.length&&-1!=r.indexOf(a)||(n||(q+=","),q+=a.replace(e,"v$1"),r.push(a),n=!1)});b+=m+"=function("+q+"){";m='"'+f.replace(e,'"+v$1+"')+'"';b+="return "+m+";};"}else b+=
|
||||||
|
m+'="'+f+'";'}}});eval(b);d.filesLoaded+=1}function y(a){if(/\./.test(a)){var d="";a.split(/\./).forEach(function(a,h){0<h&&(d+=".");d+=a;eval("typeof "+d+' == "undefined"')&&eval(d+"={};")})}}function x(a){var d=[];a=parseInt(a.substr(2),16);0<=a&&a<Math.pow(2,16)&&d.push(a);return d.reduce(function(a,d){return a+String.fromCharCode(d)},"")}k.i18n={};k.i18n.map={};var g=function(a){window.console&&console.log("i18n::"+a)};k.i18n.properties=function(a){a=k.extend({name:"Messages",language:"",path:"",
|
||||||
|
mode:"vars",cache:!1,debug:!1,encoding:"UTF-8",async:!1,callback:null},a);a.path.match(/\/$/)||(a.path+="/");a.language=this.normaliseLanguageCode(a.language);var d=a.name&&a.name.constructor===Array?a.name:[a.name];a.totalFiles=2*d.length+(5<=a.language.length?d.length:0);a.debug&&g("totalFiles: "+a.totalFiles);a.filesLoaded=0;d.forEach(function(b){var d=a.path+b+".properties";var c=a.language.substring(0,2);c=a.path+b+"_"+c+".properties";if(5<=a.language.length){var e=a.language.substring(0,5);
|
||||||
|
b=a.path+b+"_"+e+".properties";d=[d,c,b]}else d=[d,c];n(d,a)});a.callback&&!a.async&&a.callback()};k.i18n.prop=function(a){var d,b=k.i18n.map[a];if(null===b)return"["+a+"]";var h;2==arguments.length&&k.isArray(arguments[1])&&(h=arguments[1]);var c;if("string"==typeof b){for(c=0;-1!=(c=b.indexOf("\\",c));)b="t"==b.charAt(c+1)?b.substring(0,c)+"\t"+b.substring(c++ +2):"r"==b.charAt(c+1)?b.substring(0,c)+"\r"+b.substring(c++ +2):"n"==b.charAt(c+1)?b.substring(0,c)+"\n"+b.substring(c++ +2):"f"==b.charAt(c+
|
||||||
|
1)?b.substring(0,c)+"\f"+b.substring(c++ +2):"\\"==b.charAt(c+1)?b.substring(0,c)+"\\"+b.substring(c++ +2):b.substring(0,c)+b.substring(c+1);var e=[];for(c=0;c<b.length;)if("'"==b.charAt(c))if(c==b.length-1)b=b.substring(0,c);else if("'"==b.charAt(c+1))b=b.substring(0,c)+b.substring(++c);else{for(d=c+2;-1!=(d=b.indexOf("'",d));)if(d==b.length-1||"'"!=b.charAt(d+1)){b=b.substring(0,c)+b.substring(c+1,d)+b.substring(d+1);c=d-1;break}else b=b.substring(0,d)+b.substring(++d);-1==d&&(b=b.substring(0,c)+
|
||||||
|
b.substring(c+1))}else if("{"==b.charAt(c))if(d=b.indexOf("}",c+1),-1==d)c++;else{var g=parseInt(b.substring(c+1,d));!isNaN(g)&&0<=g?(c=b.substring(0,c),""!==c&&e.push(c),e.push(g),c=0,b=b.substring(d+1)):c=d+1}else c++;""!==b&&e.push(b);b=e;k.i18n.map[a]=e}if(0===b.length)return"";if(1==b.length&&"string"==typeof b[0])return b[0];e="";c=0;for(d=b.length;c<d;c++)e="string"==typeof b[c]?e+b[c]:h&&b[c]<h.length?e+h[b[c]]:!h&&b[c]+1<arguments.length?e+arguments[b[c]+1]:e+("{"+b[c]+"}");return e};k.i18n.normaliseLanguageCode=
|
||||||
|
function(a){if(!a||2>a.length)a=navigator.languages&&0<navigator.languages.length?navigator.languages[0]:navigator.language||navigator.userLanguage||"en";a=a.toLowerCase();a=a.replace(/-/,"_");3<a.length&&(a=a.substring(0,3)+a.substring(3).toUpperCase());return a}})(jQuery);
|
||||||
|
|
@ -0,0 +1,492 @@
|
||||||
|
/*!
|
||||||
|
* jQuery Templates Plugin 1.0.0pre
|
||||||
|
* http://github.com/jquery/jquery-tmpl
|
||||||
|
* Requires jQuery 1.4.2
|
||||||
|
*
|
||||||
|
* Copyright 2011, Software Freedom Conservancy, Inc.
|
||||||
|
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||||
|
* http://jquery.org/license
|
||||||
|
*/
|
||||||
|
(function( factory ) {
|
||||||
|
if (typeof define === 'function' && define.amd) {
|
||||||
|
// Loading from AMD script loader. Register as an anonymous module.
|
||||||
|
define( ['jquery'], factory );
|
||||||
|
} else {
|
||||||
|
// Browser using plain <script> tag
|
||||||
|
factory( jQuery );
|
||||||
|
}
|
||||||
|
}(function( jQuery ){
|
||||||
|
var oldManip = jQuery.fn.domManip, tmplItmAtt = "_tmplitem", htmlExpr = /^[^<]*(<[\w\W]+>)[^>]*$|\{\{\! /,
|
||||||
|
newTmplItems = {}, wrappedItems = {}, appendToTmplItems, topTmplItem = { key: 0, data: {} }, itemKey = 0, cloneIndex = 0, stack = [];
|
||||||
|
|
||||||
|
function newTmplItem( options, parentItem, fn, data ) {
|
||||||
|
// Returns a template item data structure for a new rendered instance of a template (a 'template item').
|
||||||
|
// The content field is a hierarchical array of strings and nested items (to be
|
||||||
|
// removed and replaced by nodes field of dom elements, once inserted in DOM).
|
||||||
|
var newItem = {
|
||||||
|
data: data || (data === 0 || data === false) ? data : (parentItem ? parentItem.data : {}),
|
||||||
|
_wrap: parentItem ? parentItem._wrap : null,
|
||||||
|
tmpl: null,
|
||||||
|
parent: parentItem || null,
|
||||||
|
nodes: [],
|
||||||
|
calls: tiCalls,
|
||||||
|
nest: tiNest,
|
||||||
|
wrap: tiWrap,
|
||||||
|
html: tiHtml,
|
||||||
|
update: tiUpdate
|
||||||
|
};
|
||||||
|
if ( options ) {
|
||||||
|
jQuery.extend( newItem, options, { nodes: [], parent: parentItem });
|
||||||
|
}
|
||||||
|
if ( fn ) {
|
||||||
|
// Build the hierarchical content to be used during insertion into DOM
|
||||||
|
newItem.tmpl = fn;
|
||||||
|
newItem._ctnt = newItem._ctnt || newItem.tmpl( jQuery, newItem );
|
||||||
|
newItem.key = ++itemKey;
|
||||||
|
// Keep track of new template item, until it is stored as jQuery Data on DOM element
|
||||||
|
(stack.length ? wrappedItems : newTmplItems)[itemKey] = newItem;
|
||||||
|
}
|
||||||
|
return newItem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Override appendTo etc., in order to provide support for targeting multiple elements. (This code would disappear if integrated in jquery core).
|
||||||
|
jQuery.each({
|
||||||
|
appendTo: "append",
|
||||||
|
prependTo: "prepend",
|
||||||
|
insertBefore: "before",
|
||||||
|
insertAfter: "after",
|
||||||
|
replaceAll: "replaceWith"
|
||||||
|
}, function( name, original ) {
|
||||||
|
jQuery.fn[ name ] = function( selector ) {
|
||||||
|
var ret = [], insert = jQuery( selector ), elems, i, l, tmplItems,
|
||||||
|
parent = this.length === 1 && this[0].parentNode;
|
||||||
|
|
||||||
|
appendToTmplItems = newTmplItems || {};
|
||||||
|
if ( parent && parent.nodeType === 11 && parent.childNodes.length === 1 && insert.length === 1 ) {
|
||||||
|
insert[ original ]( this[0] );
|
||||||
|
ret = this;
|
||||||
|
} else {
|
||||||
|
for ( i = 0, l = insert.length; i < l; i++ ) {
|
||||||
|
cloneIndex = i;
|
||||||
|
elems = (i > 0 ? this.clone(true) : this).get();
|
||||||
|
jQuery( insert[i] )[ original ]( elems );
|
||||||
|
ret = ret.concat( elems );
|
||||||
|
}
|
||||||
|
cloneIndex = 0;
|
||||||
|
ret = this.pushStack( ret, name, insert.selector );
|
||||||
|
}
|
||||||
|
tmplItems = appendToTmplItems;
|
||||||
|
appendToTmplItems = null;
|
||||||
|
jQuery.tmpl.complete( tmplItems );
|
||||||
|
return ret;
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
jQuery.fn.extend({
|
||||||
|
// Use first wrapped element as template markup.
|
||||||
|
// Return wrapped set of template items, obtained by rendering template against data.
|
||||||
|
tmpl: function( data, options, parentItem ) {
|
||||||
|
return jQuery.tmpl( this[0], data, options, parentItem );
|
||||||
|
},
|
||||||
|
|
||||||
|
// Find which rendered template item the first wrapped DOM element belongs to
|
||||||
|
tmplItem: function() {
|
||||||
|
return jQuery.tmplItem( this[0] );
|
||||||
|
},
|
||||||
|
|
||||||
|
// Consider the first wrapped element as a template declaration, and get the compiled template or store it as a named template.
|
||||||
|
template: function( name ) {
|
||||||
|
return jQuery.template( name, this[0] );
|
||||||
|
},
|
||||||
|
|
||||||
|
domManip: function( args, table, callback, options ) {
|
||||||
|
if ( args[0] && jQuery.isArray( args[0] )) {
|
||||||
|
var dmArgs = jQuery.makeArray( arguments ), elems = args[0], elemsLength = elems.length, i = 0, tmplItem;
|
||||||
|
while ( i < elemsLength && !(tmplItem = jQuery.data( elems[i++], "tmplItem" ))) {}
|
||||||
|
if ( tmplItem && cloneIndex ) {
|
||||||
|
dmArgs[2] = function( fragClone ) {
|
||||||
|
// Handler called by oldManip when rendered template has been inserted into DOM.
|
||||||
|
jQuery.tmpl.afterManip( this, fragClone, callback );
|
||||||
|
};
|
||||||
|
}
|
||||||
|
oldManip.apply( this, dmArgs );
|
||||||
|
} else {
|
||||||
|
oldManip.apply( this, arguments );
|
||||||
|
}
|
||||||
|
cloneIndex = 0;
|
||||||
|
if ( !appendToTmplItems ) {
|
||||||
|
jQuery.tmpl.complete( newTmplItems );
|
||||||
|
}
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
jQuery.extend({
|
||||||
|
// Return wrapped set of template items, obtained by rendering template against data.
|
||||||
|
tmpl: function( tmpl, data, options, parentItem ) {
|
||||||
|
var ret, topLevel = !parentItem;
|
||||||
|
if ( topLevel ) {
|
||||||
|
// This is a top-level tmpl call (not from a nested template using {{tmpl}})
|
||||||
|
parentItem = topTmplItem;
|
||||||
|
tmpl = jQuery.template[tmpl] || jQuery.template( null, tmpl );
|
||||||
|
wrappedItems = {}; // Any wrapped items will be rebuilt, since this is top level
|
||||||
|
} else if ( !tmpl ) {
|
||||||
|
// The template item is already associated with DOM - this is a refresh.
|
||||||
|
// Re-evaluate rendered template for the parentItem
|
||||||
|
tmpl = parentItem.tmpl;
|
||||||
|
newTmplItems[parentItem.key] = parentItem;
|
||||||
|
parentItem.nodes = [];
|
||||||
|
if ( parentItem.wrapped ) {
|
||||||
|
updateWrapped( parentItem, parentItem.wrapped );
|
||||||
|
}
|
||||||
|
// Rebuild, without creating a new template item
|
||||||
|
return jQuery( build( parentItem, null, parentItem.tmpl( jQuery, parentItem ) ));
|
||||||
|
}
|
||||||
|
if ( !tmpl ) {
|
||||||
|
return []; // Could throw...
|
||||||
|
}
|
||||||
|
if ( typeof data === "function" ) {
|
||||||
|
data = data.call( parentItem || {} );
|
||||||
|
}
|
||||||
|
if ( options && options.wrapped ) {
|
||||||
|
updateWrapped( options, options.wrapped );
|
||||||
|
}
|
||||||
|
ret = jQuery.isArray( data ) ?
|
||||||
|
jQuery.map( data, function( dataItem ) {
|
||||||
|
return dataItem ? newTmplItem( options, parentItem, tmpl, dataItem ) : null;
|
||||||
|
}) :
|
||||||
|
[ newTmplItem( options, parentItem, tmpl, data ) ];
|
||||||
|
return topLevel ? jQuery( build( parentItem, null, ret ) ) : ret;
|
||||||
|
},
|
||||||
|
|
||||||
|
// Return rendered template item for an element.
|
||||||
|
tmplItem: function( elem ) {
|
||||||
|
var tmplItem;
|
||||||
|
if ( elem instanceof jQuery ) {
|
||||||
|
elem = elem[0];
|
||||||
|
}
|
||||||
|
while ( elem && elem.nodeType === 1 && !(tmplItem = jQuery.data( elem, "tmplItem" )) && (elem = elem.parentNode) ) {}
|
||||||
|
return tmplItem || topTmplItem;
|
||||||
|
},
|
||||||
|
|
||||||
|
// Set:
|
||||||
|
// Use $.template( name, tmpl ) to cache a named template,
|
||||||
|
// where tmpl is a template string, a script element or a jQuery instance wrapping a script element, etc.
|
||||||
|
// Use $( "selector" ).template( name ) to provide access by name to a script block template declaration.
|
||||||
|
|
||||||
|
// Get:
|
||||||
|
// Use $.template( name ) to access a cached template.
|
||||||
|
// Also $( selectorToScriptBlock ).template(), or $.template( null, templateString )
|
||||||
|
// will return the compiled template, without adding a name reference.
|
||||||
|
// If templateString includes at least one HTML tag, $.template( templateString ) is equivalent
|
||||||
|
// to $.template( null, templateString )
|
||||||
|
template: function( name, tmpl ) {
|
||||||
|
if (tmpl) {
|
||||||
|
// Compile template and associate with name
|
||||||
|
if ( typeof tmpl === "string" ) {
|
||||||
|
// This is an HTML string being passed directly in.
|
||||||
|
tmpl = buildTmplFn( tmpl );
|
||||||
|
} else if ( tmpl instanceof jQuery ) {
|
||||||
|
tmpl = tmpl[0] || {};
|
||||||
|
}
|
||||||
|
if ( tmpl.nodeType ) {
|
||||||
|
// If this is a template block, use cached copy, or generate tmpl function and cache.
|
||||||
|
tmpl = jQuery.data( tmpl, "tmpl" ) || jQuery.data( tmpl, "tmpl", buildTmplFn( tmpl.innerHTML ));
|
||||||
|
// Issue: In IE, if the container element is not a script block, the innerHTML will remove quotes from attribute values whenever the value does not include white space.
|
||||||
|
// This means that foo="${x}" will not work if the value of x includes white space: foo="${x}" -> foo=value of x.
|
||||||
|
// To correct this, include space in tag: foo="${ x }" -> foo="value of x"
|
||||||
|
}
|
||||||
|
return typeof name === "string" ? (jQuery.template[name] = tmpl) : tmpl;
|
||||||
|
}
|
||||||
|
// Return named compiled template
|
||||||
|
return name ? (typeof name !== "string" ? jQuery.template( null, name ):
|
||||||
|
(jQuery.template[name] ||
|
||||||
|
// If not in map, and not containing at least on HTML tag, treat as a selector.
|
||||||
|
// (If integrated with core, use quickExpr.exec)
|
||||||
|
jQuery.template( null, htmlExpr.test( name ) ? name : jQuery( name )))) : null;
|
||||||
|
},
|
||||||
|
|
||||||
|
encode: function( text ) {
|
||||||
|
// Do HTML encoding replacing < > & and ' and " by corresponding entities.
|
||||||
|
return ("" + text).split("<").join("<").split(">").join(">").split('"').join(""").split("'").join("'");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
jQuery.extend( jQuery.tmpl, {
|
||||||
|
tag: {
|
||||||
|
"tmpl": {
|
||||||
|
_default: { $2: "null" },
|
||||||
|
open: "if($notnull_1){__=__.concat($item.nest($1,$2));}"
|
||||||
|
// tmpl target parameter can be of type function, so use $1, not $1a (so not auto detection of functions)
|
||||||
|
// This means that {{tmpl foo}} treats foo as a template (which IS a function).
|
||||||
|
// Explicit parens can be used if foo is a function that returns a template: {{tmpl foo()}}.
|
||||||
|
},
|
||||||
|
"wrap": {
|
||||||
|
_default: { $2: "null" },
|
||||||
|
open: "$item.calls(__,$1,$2);__=[];",
|
||||||
|
close: "call=$item.calls();__=call._.concat($item.wrap(call,__));"
|
||||||
|
},
|
||||||
|
"each": {
|
||||||
|
_default: { $2: "$index, $value" },
|
||||||
|
open: "if($notnull_1){$.each($1a,function($2){with(this){",
|
||||||
|
close: "}});}"
|
||||||
|
},
|
||||||
|
"if": {
|
||||||
|
open: "if(($notnull_1) && $1a){",
|
||||||
|
close: "}"
|
||||||
|
},
|
||||||
|
"else": {
|
||||||
|
_default: { $1: "true" },
|
||||||
|
open: "}else if(($notnull_1) && $1a){"
|
||||||
|
},
|
||||||
|
"html": {
|
||||||
|
// Unecoded expression evaluation.
|
||||||
|
open: "if($notnull_1){__.push($1a);}"
|
||||||
|
},
|
||||||
|
"=": {
|
||||||
|
// Encoded expression evaluation. Abbreviated form is ${}.
|
||||||
|
_default: { $1: "$data" },
|
||||||
|
open: "if($notnull_1){__.push($.encode($1a));}"
|
||||||
|
},
|
||||||
|
"!": {
|
||||||
|
// Comment tag. Skipped by parser
|
||||||
|
open: ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// This stub can be overridden, e.g. in jquery.tmplPlus for providing rendered events
|
||||||
|
complete: function( items ) {
|
||||||
|
newTmplItems = {};
|
||||||
|
},
|
||||||
|
|
||||||
|
// Call this from code which overrides domManip, or equivalent
|
||||||
|
// Manage cloning/storing template items etc.
|
||||||
|
afterManip: function afterManip( elem, fragClone, callback ) {
|
||||||
|
// Provides cloned fragment ready for fixup prior to and after insertion into DOM
|
||||||
|
var content = fragClone.nodeType === 11 ?
|
||||||
|
jQuery.makeArray(fragClone.childNodes) :
|
||||||
|
fragClone.nodeType === 1 ? [fragClone] : [];
|
||||||
|
|
||||||
|
// Return fragment to original caller (e.g. append) for DOM insertion
|
||||||
|
callback.call( elem, fragClone );
|
||||||
|
|
||||||
|
// Fragment has been inserted:- Add inserted nodes to tmplItem data structure. Replace inserted element annotations by jQuery.data.
|
||||||
|
storeTmplItems( content );
|
||||||
|
cloneIndex++;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//========================== Private helper functions, used by code above ==========================
|
||||||
|
|
||||||
|
function build( tmplItem, nested, content ) {
|
||||||
|
// Convert hierarchical content into flat string array
|
||||||
|
// and finally return array of fragments ready for DOM insertion
|
||||||
|
var frag, ret = content ? jQuery.map( content, function( item ) {
|
||||||
|
return (typeof item === "string") ?
|
||||||
|
// Insert template item annotations, to be converted to jQuery.data( "tmplItem" ) when elems are inserted into DOM.
|
||||||
|
(tmplItem.key ? item.replace( /(<\w+)(?=[\s>])(?![^>]*_tmplitem)([^>]*)/g, "$1 " + tmplItmAtt + "=\"" + tmplItem.key + "\" $2" ) : item) :
|
||||||
|
// This is a child template item. Build nested template.
|
||||||
|
build( item, tmplItem, item._ctnt );
|
||||||
|
}) :
|
||||||
|
// If content is not defined, insert tmplItem directly. Not a template item. May be a string, or a string array, e.g. from {{html $item.html()}}.
|
||||||
|
tmplItem;
|
||||||
|
if ( nested ) {
|
||||||
|
return ret;
|
||||||
|
}
|
||||||
|
|
||||||
|
// top-level template
|
||||||
|
ret = ret.join("");
|
||||||
|
|
||||||
|
// Support templates which have initial or final text nodes, or consist only of text
|
||||||
|
// Also support HTML entities within the HTML markup.
|
||||||
|
ret.replace( /^\s*([^<\s][^<]*)?(<[\w\W]+>)([^>]*[^>\s])?\s*$/, function( all, before, middle, after) {
|
||||||
|
frag = jQuery( middle ).get();
|
||||||
|
|
||||||
|
storeTmplItems( frag );
|
||||||
|
if ( before ) {
|
||||||
|
frag = unencode( before ).concat(frag);
|
||||||
|
}
|
||||||
|
if ( after ) {
|
||||||
|
frag = frag.concat(unencode( after ));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return frag ? frag : unencode( ret );
|
||||||
|
}
|
||||||
|
|
||||||
|
function unencode( text ) {
|
||||||
|
// Use createElement, since createTextNode will not render HTML entities correctly
|
||||||
|
var el = document.createElement( "div" );
|
||||||
|
el.innerHTML = text;
|
||||||
|
return jQuery.makeArray(el.childNodes);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generate a reusable function that will serve to render a template against data
|
||||||
|
function buildTmplFn( markup ) {
|
||||||
|
return new Function("jQuery","$item",
|
||||||
|
// Use the variable __ to hold a string array while building the compiled template. (See https://github.com/jquery/jquery-tmpl/issues#issue/10).
|
||||||
|
"var $=jQuery,call,__=[],$data=$item.data;" +
|
||||||
|
|
||||||
|
// Introduce the data as local variables using with(){}
|
||||||
|
"with($data){__.push('" +
|
||||||
|
|
||||||
|
// Convert the template into pure JavaScript
|
||||||
|
jQuery.trim(markup)
|
||||||
|
.replace( /([\\'])/g, "\\$1" )
|
||||||
|
.replace( /[\r\t\n]/g, " " )
|
||||||
|
.replace( /\$\{([^\}]*)\}/g, "{{= $1}}" )
|
||||||
|
.replace( /\{\{(\/?)(\w+|.)(?:\(((?:[^\}]|\}(?!\}))*?)?\))?(?:\s+(.*?)?)?(\(((?:[^\}]|\}(?!\}))*?)\))?\s*\}\}/g,
|
||||||
|
function( all, slash, type, fnargs, target, parens, args ) {
|
||||||
|
var tag = jQuery.tmpl.tag[ type ], def, expr, exprAutoFnDetect;
|
||||||
|
if ( !tag ) {
|
||||||
|
throw "Unknown template tag: " + type;
|
||||||
|
}
|
||||||
|
def = tag._default || [];
|
||||||
|
if ( parens && !/\w$/.test(target)) {
|
||||||
|
target += parens;
|
||||||
|
parens = "";
|
||||||
|
}
|
||||||
|
if ( target ) {
|
||||||
|
target = unescape( target );
|
||||||
|
args = args ? ("," + unescape( args ) + ")") : (parens ? ")" : "");
|
||||||
|
// Support for target being things like a.toLowerCase();
|
||||||
|
// In that case don't call with template item as 'this' pointer. Just evaluate...
|
||||||
|
expr = parens ? (target.indexOf(".") > -1 ? target + unescape( parens ) : ("(" + target + ").call($item" + args)) : target;
|
||||||
|
exprAutoFnDetect = parens ? expr : "(typeof(" + target + ")==='function'?(" + target + ").call($item):(" + target + "))";
|
||||||
|
} else {
|
||||||
|
exprAutoFnDetect = expr = def.$1 || "null";
|
||||||
|
}
|
||||||
|
fnargs = unescape( fnargs );
|
||||||
|
return "');" +
|
||||||
|
tag[ slash ? "close" : "open" ]
|
||||||
|
.split( "$notnull_1" ).join( target ? "typeof(" + target + ")!=='undefined' && (" + target + ")!=null" : "true" )
|
||||||
|
.split( "$1a" ).join( exprAutoFnDetect )
|
||||||
|
.split( "$1" ).join( expr )
|
||||||
|
.split( "$2" ).join( fnargs || def.$2 || "" ) +
|
||||||
|
"__.push('";
|
||||||
|
}) +
|
||||||
|
"');}return __;"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
function updateWrapped( options, wrapped ) {
|
||||||
|
// Build the wrapped content.
|
||||||
|
options._wrap = build( options, true,
|
||||||
|
// Suport imperative scenario in which options.wrapped can be set to a selector or an HTML string.
|
||||||
|
jQuery.isArray( wrapped ) ? wrapped : [htmlExpr.test( wrapped ) ? wrapped : jQuery( wrapped ).html()]
|
||||||
|
).join("");
|
||||||
|
}
|
||||||
|
|
||||||
|
function unescape( args ) {
|
||||||
|
return args ? args.replace( /\\'/g, "'").replace(/\\\\/g, "\\" ) : null;
|
||||||
|
}
|
||||||
|
function outerHtml( elem ) {
|
||||||
|
var div = document.createElement("div");
|
||||||
|
div.appendChild( elem.cloneNode(true) );
|
||||||
|
return div.innerHTML;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Store template items in jQuery.data(), ensuring a unique tmplItem data data structure for each rendered template instance.
|
||||||
|
function storeTmplItems( content ) {
|
||||||
|
var keySuffix = "_" + cloneIndex, elem, elems, newClonedItems = {}, i, l, m;
|
||||||
|
for ( i = 0, l = content.length; i < l; i++ ) {
|
||||||
|
if ( (elem = content[i]).nodeType !== 1 ) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
elems = elem.getElementsByTagName("*");
|
||||||
|
for ( m = elems.length - 1; m >= 0; m-- ) {
|
||||||
|
processItemKey( elems[m] );
|
||||||
|
}
|
||||||
|
processItemKey( elem );
|
||||||
|
}
|
||||||
|
function processItemKey( el ) {
|
||||||
|
var pntKey, pntNode = el, pntItem, tmplItem, key;
|
||||||
|
// Ensure that each rendered template inserted into the DOM has its own template item,
|
||||||
|
if ( (key = el.getAttribute( tmplItmAtt ))) {
|
||||||
|
while ( pntNode.parentNode && (pntNode = pntNode.parentNode).nodeType === 1 && !(pntKey = pntNode.getAttribute( tmplItmAtt ))) { }
|
||||||
|
if ( pntKey !== key ) {
|
||||||
|
// The next ancestor with a _tmplitem expando is on a different key than this one.
|
||||||
|
// So this is a top-level element within this template item
|
||||||
|
// Set pntNode to the key of the parentNode, or to 0 if pntNode.parentNode is null, or pntNode is a fragment.
|
||||||
|
pntNode = pntNode.parentNode ? (pntNode.nodeType === 11 ? 0 : (pntNode.getAttribute( tmplItmAtt ) || 0)) : 0;
|
||||||
|
if ( !(tmplItem = newTmplItems[key]) ) {
|
||||||
|
// The item is for wrapped content, and was copied from the temporary parent wrappedItem.
|
||||||
|
tmplItem = wrappedItems[key];
|
||||||
|
tmplItem = newTmplItem( tmplItem, newTmplItems[pntNode]||wrappedItems[pntNode] );
|
||||||
|
tmplItem.key = ++itemKey;
|
||||||
|
newTmplItems[itemKey] = tmplItem;
|
||||||
|
}
|
||||||
|
if ( cloneIndex ) {
|
||||||
|
cloneTmplItem( key );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
el.removeAttribute( tmplItmAtt );
|
||||||
|
} else if ( cloneIndex && (tmplItem = jQuery.data( el, "tmplItem" )) ) {
|
||||||
|
// This was a rendered element, cloned during append or appendTo etc.
|
||||||
|
// TmplItem stored in jQuery data has already been cloned in cloneCopyEvent. We must replace it with a fresh cloned tmplItem.
|
||||||
|
cloneTmplItem( tmplItem.key );
|
||||||
|
newTmplItems[tmplItem.key] = tmplItem;
|
||||||
|
pntNode = jQuery.data( el.parentNode, "tmplItem" );
|
||||||
|
pntNode = pntNode ? pntNode.key : 0;
|
||||||
|
}
|
||||||
|
if ( tmplItem ) {
|
||||||
|
pntItem = tmplItem;
|
||||||
|
// Find the template item of the parent element.
|
||||||
|
// (Using !=, not !==, since pntItem.key is number, and pntNode may be a string)
|
||||||
|
while ( pntItem && pntItem.key != pntNode ) {
|
||||||
|
// Add this element as a top-level node for this rendered template item, as well as for any
|
||||||
|
// ancestor items between this item and the item of its parent element
|
||||||
|
pntItem.nodes.push( el );
|
||||||
|
pntItem = pntItem.parent;
|
||||||
|
}
|
||||||
|
// Delete content built during rendering - reduce API surface area and memory use, and avoid exposing of stale data after rendering...
|
||||||
|
delete tmplItem._ctnt;
|
||||||
|
delete tmplItem._wrap;
|
||||||
|
// Store template item as jQuery data on the element
|
||||||
|
jQuery.data( el, "tmplItem", tmplItem );
|
||||||
|
}
|
||||||
|
function cloneTmplItem( key ) {
|
||||||
|
key = key + keySuffix;
|
||||||
|
tmplItem = newClonedItems[key] =
|
||||||
|
(newClonedItems[key] || newTmplItem( tmplItem, newTmplItems[tmplItem.parent.key + keySuffix] || tmplItem.parent ));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//---- Helper functions for template item ----
|
||||||
|
|
||||||
|
function tiCalls( content, tmpl, data, options ) {
|
||||||
|
if ( !content ) {
|
||||||
|
return stack.pop();
|
||||||
|
}
|
||||||
|
stack.push({ _: content, tmpl: tmpl, item:this, data: data, options: options });
|
||||||
|
}
|
||||||
|
|
||||||
|
function tiNest( tmpl, data, options ) {
|
||||||
|
// nested template, using {{tmpl}} tag
|
||||||
|
return jQuery.tmpl( jQuery.template( tmpl ), data, options, this );
|
||||||
|
}
|
||||||
|
|
||||||
|
function tiWrap( call, wrapped ) {
|
||||||
|
// nested template, using {{wrap}} tag
|
||||||
|
var options = call.options || {};
|
||||||
|
options.wrapped = wrapped;
|
||||||
|
// Apply the template, which may incorporate wrapped content,
|
||||||
|
return jQuery.tmpl( jQuery.template( call.tmpl ), call.data, options, call.item );
|
||||||
|
}
|
||||||
|
|
||||||
|
function tiHtml( filter, textOnly ) {
|
||||||
|
var wrapped = this._wrap;
|
||||||
|
return jQuery.map(
|
||||||
|
jQuery( jQuery.isArray( wrapped ) ? wrapped.join("") : wrapped ).filter( filter || "*" ),
|
||||||
|
function(e) {
|
||||||
|
return textOnly ?
|
||||||
|
e.innerText || e.textContent :
|
||||||
|
e.outerHTML || outerHtml(e);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function tiUpdate() {
|
||||||
|
var coll = this.nodes;
|
||||||
|
jQuery.tmpl( null, null, null, this).insertBefore( coll[0] );
|
||||||
|
jQuery( coll ).remove();
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
|
@ -0,0 +1,82 @@
|
||||||
|
|
||||||
|
$(function() {
|
||||||
|
validateRule();
|
||||||
|
$('.imgcode').click(function() {
|
||||||
|
var url = ctx + "captcha/captchaImage?type=" + captchaType + "&s=" + Math.random();
|
||||||
|
$(".imgcode").attr("src", url);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
$.validator.setDefaults({
|
||||||
|
submitHandler: function() {
|
||||||
|
register();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function register() {
|
||||||
|
$.modal.loading($("#btnSubmit").data("loading"));
|
||||||
|
var username = $.common.trim($("input[name='username']").val());
|
||||||
|
var password = $.common.trim($("input[name='password']").val());
|
||||||
|
var validateCode = $("input[name='validateCode']").val();
|
||||||
|
$.ajax({
|
||||||
|
type: "post",
|
||||||
|
url: ctx + "register",
|
||||||
|
data: {
|
||||||
|
"loginName": username,
|
||||||
|
"password": password,
|
||||||
|
"validateCode": validateCode
|
||||||
|
},
|
||||||
|
success: function(r) {
|
||||||
|
if (r.code == 0) {
|
||||||
|
layer.alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", {
|
||||||
|
icon: 1,
|
||||||
|
title: "系统提示"
|
||||||
|
},
|
||||||
|
function(index) {
|
||||||
|
//关闭弹窗
|
||||||
|
layer.close(index);
|
||||||
|
location.href = ctx + 'login';
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
$.modal.closeLoading();
|
||||||
|
$('.imgcode').click();
|
||||||
|
$(".code").val("");
|
||||||
|
$.modal.msg(r.msg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function validateRule() {
|
||||||
|
var icon = "<i class='fa fa-times-circle'></i> ";
|
||||||
|
$("#registerForm").validate({
|
||||||
|
rules: {
|
||||||
|
username: {
|
||||||
|
required: true,
|
||||||
|
minlength: 2
|
||||||
|
},
|
||||||
|
password: {
|
||||||
|
required: true,
|
||||||
|
minlength: 5
|
||||||
|
},
|
||||||
|
confirmPassword: {
|
||||||
|
required: true,
|
||||||
|
equalTo: "[name='password']"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
messages: {
|
||||||
|
username: {
|
||||||
|
required: icon + "请输入您的用户名",
|
||||||
|
minlength: icon + "用户名不能小于2个字符"
|
||||||
|
},
|
||||||
|
password: {
|
||||||
|
required: icon + "请输入您的密码",
|
||||||
|
minlength: icon + "密码不能小于5个字符",
|
||||||
|
},
|
||||||
|
confirmPassword: {
|
||||||
|
required: icon + "请再次输入您的密码",
|
||||||
|
equalTo: icon + "两次密码输入不一致"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,322 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh">
|
||||||
|
<head>
|
||||||
|
<th:block th:include="include :: header('搜索自动补全')" />
|
||||||
|
</head>
|
||||||
|
<body class="gray-bg">
|
||||||
|
<div class="wrapper wrapper-content animated fadeInRight">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>搜索自动补全<small>https://github.com/lzwme/bootstrap-suggest-plugin</small></h5>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<p>展示下拉菜单按钮。</p>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control" id="suggest-demo-1">
|
||||||
|
<div class="input-group-btn">
|
||||||
|
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
|
||||||
|
<span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>不展示下拉菜单按钮。</p>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control" id="suggest-demo-2">
|
||||||
|
<div class="input-group-btn">
|
||||||
|
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
|
||||||
|
<span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>前端json中获取数据</p>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control" id="suggest-demo-3">
|
||||||
|
<div class="input-group-btn">
|
||||||
|
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
|
||||||
|
<span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- /btn-group -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>百度搜索</h3>
|
||||||
|
<p>支持逗号分隔多关键字</p>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="input-group" style="width: 300px;">
|
||||||
|
<input type="text" class="form-control" id="baidu">
|
||||||
|
<div class="input-group-btn">
|
||||||
|
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
|
||||||
|
<span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- /btn-group -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>淘宝搜索</h3>
|
||||||
|
<p>支持逗号分隔多关键字</p>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<div class="input-group" style="width: 400px;">
|
||||||
|
<input type="text" class="form-control" id="taobao">
|
||||||
|
<div class="input-group-btn">
|
||||||
|
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
|
||||||
|
<span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- /btn-group -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">相关参数详细信息</label>
|
||||||
|
<div><a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-suggest" target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-suggest</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>搜索自动补全<small>https://github.com/bassjobsen/Bootstrap-3-Typeahead</small></h5>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<p>通过数据属性的基本示例。</p>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<input type="text" placeholder="ruoyi..." data-provide="typeahead" data-source='["ruoyi 1","ruoyi 2","ruoyi 3"]' class="form-control" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p>通过javascript的基本示例。</p>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<input type="text" placeholder="ruoyi..." class="form-control" id="typeahead-demo-1"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
<p>通过javascript的复杂示例。</p>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<input type="text" placeholder="ruoyi..." class="form-control" id="typeahead-demo-2"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
<p>后台url中获取简单数据</p>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-6">
|
||||||
|
<input type="text" placeholder="ruoyi..." class="form-control" id="typeahead-demo-3"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">相关参数详细信息</label>
|
||||||
|
<div><a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-typeahead" target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-typeahead</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<th:block th:include="include :: footer" />
|
||||||
|
<th:block th:include="include :: bootstrap-suggest-js" />
|
||||||
|
<th:block th:include="include :: bootstrap-typeahead-js" />
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
var testBsSuggest = $("#suggest-demo-1").bsSuggest({
|
||||||
|
url: ctx + "demo/form/userModel",
|
||||||
|
idField: "userId",
|
||||||
|
keyField: "userName"
|
||||||
|
}).on('onDataRequestSuccess', function (e, result) {
|
||||||
|
console.log('onDataRequestSuccess: ', result);
|
||||||
|
}).on('onSetSelectValue', function (e, keyword) {
|
||||||
|
console.log('onSetSelectValue: ', keyword);
|
||||||
|
}).on('onUnsetSelectValue', function (e) {
|
||||||
|
console.log("onUnsetSelectValue");
|
||||||
|
});
|
||||||
|
|
||||||
|
var testBsSuggest = $("#suggest-demo-2").bsSuggest({
|
||||||
|
url: ctx + "demo/form/userModel",
|
||||||
|
showBtn: false,
|
||||||
|
idField: "userId",
|
||||||
|
keyField: "userName"
|
||||||
|
}).on('onDataRequestSuccess', function (e, result) {
|
||||||
|
console.log('onDataRequestSuccess: ', result);
|
||||||
|
}).on('onSetSelectValue', function (e, keyword) {
|
||||||
|
console.log('onSetSelectValue: ', keyword);
|
||||||
|
}).on('onUnsetSelectValue', function (e) {
|
||||||
|
console.log("onUnsetSelectValue");
|
||||||
|
});
|
||||||
|
|
||||||
|
//data 数据中获取
|
||||||
|
var testdataBsSuggest = $("#suggest-demo-3").bsSuggest({
|
||||||
|
indexId: 1,
|
||||||
|
indexKey: 2,
|
||||||
|
data: {
|
||||||
|
'value': [
|
||||||
|
{
|
||||||
|
'userId': '1',
|
||||||
|
'userCode': '1000001',
|
||||||
|
'userName': '测试1',
|
||||||
|
'userPhone': '15888888888'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'userId': '2',
|
||||||
|
'userCode': '1000002',
|
||||||
|
'userName': '测试2',
|
||||||
|
'userPhone': '15888888888'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'userId': '3',
|
||||||
|
'userCode': '1000003',
|
||||||
|
'userName': '测试3',
|
||||||
|
'userPhone': '15888888888'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'userId': '4',
|
||||||
|
'userCode': '1000004',
|
||||||
|
'userName': '测试4',
|
||||||
|
'userPhone': '15888888888'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'userId': '5',
|
||||||
|
'userCode': '1000005',
|
||||||
|
'userName': '测试5',
|
||||||
|
'userPhone': '15888888888'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
'defaults': 'http://ruoyi.vip'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//百度搜索测试
|
||||||
|
var baiduBsSuggest = $("#baidu").bsSuggest({
|
||||||
|
allowNoKeyword: false, //是否允许无关键字时请求数据
|
||||||
|
multiWord: true, //以分隔符号分割的多关键字支持
|
||||||
|
separator: ",", //多关键字支持时的分隔符，默认为空格
|
||||||
|
getDataMethod: "url", //获取数据的方式，总是从 URL 获取
|
||||||
|
url: 'http://unionsug.baidu.com/su?p=3&t=' + (new Date()).getTime() + '&wd=',
|
||||||
|
/*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/
|
||||||
|
jsonp: 'cb',
|
||||||
|
/*如果从 url 获取数据，并且需要跨域，则该参数必须设置*/
|
||||||
|
processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
|
||||||
|
var i, len, data = {
|
||||||
|
value: []
|
||||||
|
};
|
||||||
|
if (!json || !json.s || json.s.length === 0) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(json);
|
||||||
|
len = json.s.length;
|
||||||
|
|
||||||
|
jsonStr = "{'value':[";
|
||||||
|
for (i = 0; i < len; i++) {
|
||||||
|
data.value.push({
|
||||||
|
word: json.s[i]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
data.defaults = 'baidu';
|
||||||
|
|
||||||
|
//字符串转化为 js 对象
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//淘宝搜索建议测试
|
||||||
|
var taobaoBsSuggest = $("#taobao").bsSuggest({
|
||||||
|
indexId: 2, //data.value 的第几个数据，作为input输入框的内容
|
||||||
|
indexKey: 1, //data.value 的第几个数据，作为input输入框的内容
|
||||||
|
allowNoKeyword: false, //是否允许无关键字时请求数据
|
||||||
|
multiWord: true, //以分隔符号分割的多关键字支持
|
||||||
|
separator: ",", //多关键字支持时的分隔符，默认为空格
|
||||||
|
getDataMethod: "url", //获取数据的方式，总是从 URL 获取
|
||||||
|
effectiveFieldsAlias: {
|
||||||
|
Id: "序号",
|
||||||
|
Keyword: "关键字",
|
||||||
|
Count: "数量"
|
||||||
|
},
|
||||||
|
showHeader: true,
|
||||||
|
url: 'http://suggest.taobao.com/sug?code=utf-8&extras=1&q=',
|
||||||
|
/*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/
|
||||||
|
jsonp: 'callback',
|
||||||
|
/*如果从 url 获取数据，并且需要跨域，则该参数必须设置*/
|
||||||
|
processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
|
||||||
|
var i, len, data = {
|
||||||
|
value: []
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!json || !json.result || json.result.length == 0) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(json);
|
||||||
|
len = json.result.length;
|
||||||
|
|
||||||
|
for (i = 0; i < len; i++) {
|
||||||
|
data.value.push({
|
||||||
|
"Id": (i + 1),
|
||||||
|
"Keyword": json.result[i][0],
|
||||||
|
"Count": json.result[i][1]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
console.log(data);
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#typeahead-demo-1').typeahead({
|
||||||
|
source: ["ruoyi 1","ruoyi 2","ruoyi 3"]
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#typeahead-demo-2').typeahead({
|
||||||
|
source: [
|
||||||
|
{"name": "Afghanistan", "code": "AF", "ccn0": "040"},
|
||||||
|
{"name": "Land Islands", "code": "AX", "ccn0": "050"},
|
||||||
|
{"name": "Albania", "code": "AL","ccn0": "060"},
|
||||||
|
{"name": "Algeria", "code": "DZ","ccn0": "070"}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
$.get(ctx + "demo/form/collection", function(data){
|
||||||
|
$("#typeahead-demo-3").typeahead({
|
||||||
|
source: data.value
|
||||||
|
});
|
||||||
|
},'json');
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,593 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh">
|
||||||
|
<head>
|
||||||
|
<th:block th:include="include :: header('基本表单')" />
|
||||||
|
</head>
|
||||||
|
<body class="gray-bg">
|
||||||
|
<div class="wrapper wrapper-content animated fadeInRight">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-7">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>基本表单 <small>简单登录表单示例</small></h5>
|
||||||
|
<div class="ibox-tools">
|
||||||
|
<a class="collapse-link">
|
||||||
|
<i class="fa fa-chevron-up"></i>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||||
|
<i class="fa fa-wrench"></i>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu dropdown-user">
|
||||||
|
<li><a href="#">选项1</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">选项2</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a class="close-link">
|
||||||
|
<i class="fa fa-times"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-6 b-r">
|
||||||
|
<h3 class="m-t-none m-b">登录</h3>
|
||||||
|
<p>欢迎登录本站(⊙o⊙)</p>
|
||||||
|
<form role="form">
|
||||||
|
<div class="form-group">
|
||||||
|
<label>用户名</label>
|
||||||
|
<input type="email" placeholder="请输入您注册的E-mail" class="form-control">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>密码</label>
|
||||||
|
<input type="password" placeholder="请输入密码" class="form-control">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit"><strong>登 录</strong>
|
||||||
|
</button>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox">自动登录</label>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<h4>还不是会员？</h4>
|
||||||
|
<p>您可以注册一个新账户</p>
|
||||||
|
<p class="text-center">
|
||||||
|
<a href="#"><i class="fa fa-sign-in big-icon"></i></a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-5">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>横向表单</h5>
|
||||||
|
<div class="ibox-tools">
|
||||||
|
<a class="collapse-link">
|
||||||
|
<i class="fa fa-chevron-up"></i>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||||
|
<i class="fa fa-wrench"></i>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu dropdown-user">
|
||||||
|
<li><a href="#">选项1</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">选项2</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a class="close-link">
|
||||||
|
<i class="fa fa-times"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<form class="form-horizontal">
|
||||||
|
<p>欢迎登录本站(⊙o⊙)</p>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-3 control-label">用户名：</label>
|
||||||
|
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<input type="email" placeholder="用户名" class="form-control"> <span class="help-block m-b-none">请输入您注册时所填的E-mail</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-3 control-label">密码：</label>
|
||||||
|
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<input type="password" placeholder="密码" class="form-control">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="col-sm-offset-3 col-sm-8">
|
||||||
|
<button class="btn btn-sm btn-white" type="submit">登 录</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>内联表单</h5>
|
||||||
|
<div class="ibox-tools">
|
||||||
|
<a class="collapse-link">
|
||||||
|
<i class="fa fa-chevron-up"></i>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||||
|
<i class="fa fa-wrench"></i>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu dropdown-user">
|
||||||
|
<li><a href="#">选项1</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">选项2</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a class="close-link">
|
||||||
|
<i class="fa fa-times"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<form role="form" class="form-inline">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="exampleInputEmail2" class="sr-only">用户名</label>
|
||||||
|
<input type="email" placeholder="请输入用户名" id="exampleInputEmail2" class="form-control">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="exampleInputPassword2" class="sr-only">密码</label>
|
||||||
|
<input type="password" placeholder="请输入密码" id="exampleInputPassword2" class="form-control">
|
||||||
|
</div>
|
||||||
|
<div class="checkbox m-l m-r-xs">
|
||||||
|
<label>
|
||||||
|
<input type="checkbox"><i></i> 自动登录</label>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-white" type="submit">登录</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>弹出表单 <small>弹出框登录示例</small></h5>
|
||||||
|
<div class="ibox-tools">
|
||||||
|
<a class="collapse-link">
|
||||||
|
<i class="fa fa-chevron-up"></i>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||||
|
<i class="fa fa-wrench"></i>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu dropdown-user">
|
||||||
|
<li><a href="#">选项1</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">选项2</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a class="close-link">
|
||||||
|
<i class="fa fa-times"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<div class="text-center">
|
||||||
|
<a data-toggle="modal" class="btn btn-primary" href="#modal-form">打开登录窗口</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>所有表单元素 <small>包括自定义样式的复选和单选按钮</small></h5>
|
||||||
|
<div class="ibox-tools">
|
||||||
|
<a class="collapse-link">
|
||||||
|
<i class="fa fa-chevron-up"></i>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||||
|
<i class="fa fa-wrench"></i>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu dropdown-user">
|
||||||
|
<li><a href="#">选项1</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">选项2</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a class="close-link">
|
||||||
|
<i class="fa fa-times"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<form method="get" class="form-horizontal">
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-2 control-label">普通</label>
|
||||||
|
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input type="text" class="form-control">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hr-line-dashed"></div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-2 control-label">带说明信息</label>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input type="text" class="form-control"> <span class="help-block m-b-none">帮助文本，可能会超过一行，以块级元素显示</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hr-line-dashed"></div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-2 control-label">密码</label>
|
||||||
|
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input type="password" class="form-control" name="password">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hr-line-dashed"></div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-2 control-label">提示</label>
|
||||||
|
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input type="text" placeholder="提示信息" class="form-control">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hr-line-dashed"></div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-2 control-label">禁用</label>
|
||||||
|
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input type="text" disabled="" placeholder="已被禁用" class="form-control">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hr-line-dashed"></div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-2 control-label">静态控制</label>
|
||||||
|
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<p class="form-control-static">ruoyi.vip</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hr-line-dashed"></div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-2 control-label">复选框&单选框
|
||||||
|
<br/>
|
||||||
|
<small class="text-navy">普通Bootstrap元素</small>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<div class="checkbox">
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" value="">选项1</label>
|
||||||
|
</div>
|
||||||
|
<div class="radio">
|
||||||
|
<label>
|
||||||
|
<input type="radio" checked="" value="option1" id="optionsRadios1" name="optionsRadios">选项1</label>
|
||||||
|
</div>
|
||||||
|
<div class="radio">
|
||||||
|
<label>
|
||||||
|
<input type="radio" value="option2" id="optionsRadios2" name="optionsRadios">选项2</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hr-line-dashed"></div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-2 control-label">内联复选框</label>
|
||||||
|
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<label class="checkbox-inline">
|
||||||
|
<input type="checkbox" value="option1" id="inlineCheckbox1">a</label>
|
||||||
|
<label class="checkbox-inline">
|
||||||
|
<input type="checkbox" value="option2" id="inlineCheckbox2">b</label>
|
||||||
|
<label class="checkbox-inline">
|
||||||
|
<input type="checkbox" value="option3" id="inlineCheckbox3">c</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hr-line-dashed"></div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-2 control-label">复选框&单选框
|
||||||
|
<br/><small class="text-navy">自定义样式</small>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<div class="checkbox check-box">
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" value=""> <i></i> 选项1</label>
|
||||||
|
</div>
|
||||||
|
<div class="checkbox check-box">
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" value="" checked=""> <i></i> 选项2（选中）</label>
|
||||||
|
</div>
|
||||||
|
<div class="checkbox check-box">
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" value="" disabled="" checked=""> <i></i> 选项3（选中并禁用）</label>
|
||||||
|
</div>
|
||||||
|
<div class="checkbox check-box">
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" value="" disabled=""> <i></i> 选项4（禁用）</label>
|
||||||
|
</div>
|
||||||
|
<div class="radio check-box">
|
||||||
|
<label>
|
||||||
|
<input type="radio" value="option1" name="a"> <i></i> 选项1</label>
|
||||||
|
</div>
|
||||||
|
<div class="radio check-box">
|
||||||
|
<label>
|
||||||
|
<input type="radio" checked="" value="option2" name="a"> <i></i> 选项2（选中）</label>
|
||||||
|
</div>
|
||||||
|
<div class="radio check-box">
|
||||||
|
<label>
|
||||||
|
<input type="radio" disabled="" checked="" value="option2"> <i></i> 选项3（选中并禁用）</label>
|
||||||
|
</div>
|
||||||
|
<div class="radio check-box">
|
||||||
|
<label>
|
||||||
|
<input type="radio" disabled="" name="a"> <i></i> 选项4（禁用）</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hr-line-dashed"></div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-2 control-label">内联复选框</label>
|
||||||
|
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<label class="checkbox-inline check-box">
|
||||||
|
<input type="checkbox" value="option1">a</label>
|
||||||
|
<label class="checkbox-inline check-box">
|
||||||
|
<input type="checkbox" value="option2">b</label>
|
||||||
|
<label class="checkbox-inline check-box">
|
||||||
|
<input type="checkbox" value="option3">c</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hr-line-dashed"></div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-2 control-label">Select</label>
|
||||||
|
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<select class="form-control m-b" name="account">
|
||||||
|
<option>选项 1</option>
|
||||||
|
<option>选项 2</option>
|
||||||
|
<option>选项 3</option>
|
||||||
|
<option>选项 4</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<div class="col-sm-4 m-l-n">
|
||||||
|
<select class="form-control" multiple="">
|
||||||
|
<option>选项 1</option>
|
||||||
|
<option>选项 2</option>
|
||||||
|
<option>选项 3</option>
|
||||||
|
<option>选项 4</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hr-line-dashed"></div>
|
||||||
|
<div class="form-group has-success">
|
||||||
|
<label class="col-sm-2 control-label">验证通过</label>
|
||||||
|
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input type="text" class="form-control">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hr-line-dashed"></div>
|
||||||
|
<div class="form-group has-warning">
|
||||||
|
<label class="col-sm-2 control-label">未填写</label>
|
||||||
|
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input type="text" class="form-control">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hr-line-dashed"></div>
|
||||||
|
<div class="form-group has-error">
|
||||||
|
<label class="col-sm-2 control-label">验证未通过</label>
|
||||||
|
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input type="text" class="form-control">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hr-line-dashed"></div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-2 control-label">自定义尺寸</label>
|
||||||
|
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input type="text" placeholder=".input-lg" class="form-control input-lg m-b">
|
||||||
|
<input type="text" placeholder="Default input" class="form-control m-b">
|
||||||
|
<input type="text" placeholder=".input-sm" class="form-control input-sm">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hr-line-dashed"></div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-2 control-label">列尺寸</label>
|
||||||
|
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-2">
|
||||||
|
<input type="text" placeholder=".col-md-2" class="form-control">
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3">
|
||||||
|
<input type="text" placeholder=".col-md-3" class="form-control">
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<input type="text" placeholder=".col-md-4" class="form-control">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hr-line-dashed"></div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-2 control-label">文本框组</label>
|
||||||
|
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<div class="input-group m-b"><span class="input-group-addon">@</span>
|
||||||
|
<input type="text" placeholder="用户名" class="form-control">
|
||||||
|
</div>
|
||||||
|
<div class="input-group m-b">
|
||||||
|
<input type="text" class="form-control"> <span class="input-group-addon">.00</span>
|
||||||
|
</div>
|
||||||
|
<div class="input-group m-b"><span class="input-group-addon">¥</span>
|
||||||
|
<input type="text" class="form-control"> <span class="input-group-addon">.00</span>
|
||||||
|
</div>
|
||||||
|
<div class="input-group m-b"><span class="input-group-addon"> <input type="checkbox"> </span>
|
||||||
|
<input type="text" class="form-control">
|
||||||
|
</div>
|
||||||
|
<div class="input-group"><span class="input-group-addon"> <input type="radio"> </span>
|
||||||
|
<input type="text" class="form-control">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hr-line-dashed"></div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-2 control-label">按钮插件</label>
|
||||||
|
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<div class="input-group m-b"><span class="input-group-btn">
|
||||||
|
<button type="button" class="btn btn-primary">搜</button> </span>
|
||||||
|
<input type="text" class="form-control">
|
||||||
|
</div>
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control"> <span class="input-group-btn"> <button type="button" class="btn btn-primary">搜索
|
||||||
|
</button> </span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hr-line-dashed"></div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-2 control-label">带下拉框</label>
|
||||||
|
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<div class="input-group m-b">
|
||||||
|
<div class="input-group-btn">
|
||||||
|
<button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button">操作 <span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a href="#">选项1</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">选项2</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">选项3</a>
|
||||||
|
</li>
|
||||||
|
<li class="divider"></li>
|
||||||
|
<li><a href="#">选项4</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<input type="text" class="form-control">
|
||||||
|
</div>
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control">
|
||||||
|
|
||||||
|
<div class="input-group-btn">
|
||||||
|
<button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button">操作 <span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu pull-right">
|
||||||
|
<li><a href="#">选项1</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">选项2</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">选项3</a>
|
||||||
|
</li>
|
||||||
|
<li class="divider"></li>
|
||||||
|
<li><a href="#">选项4</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hr-line-dashed"></div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-2 control-label">分段</label>
|
||||||
|
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<div class="input-group m-b">
|
||||||
|
<div class="input-group-btn">
|
||||||
|
<button tabindex="-1" class="btn btn-white" type="button">操作</button>
|
||||||
|
<button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button"><span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a href="#">选项1</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">选项2</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">选项3</a>
|
||||||
|
</li>
|
||||||
|
<li class="divider"></li>
|
||||||
|
<li><a href="#">选项4</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<input type="text" class="form-control">
|
||||||
|
</div>
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control">
|
||||||
|
|
||||||
|
<div class="input-group-btn">
|
||||||
|
<button tabindex="-1" class="btn btn-white" type="button">操作</button>
|
||||||
|
<button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button"><span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu pull-right">
|
||||||
|
分段
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hr-line-dashed"></div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="col-sm-4 col-sm-offset-2">
|
||||||
|
<button class="btn btn-primary" type="submit">保存内容</button>
|
||||||
|
<button class="btn btn-white" type="submit">取消</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="modal-form" class="modal fade" aria-hidden="true">
|
||||||
|
<div class="modal-dialog">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-6 b-r">
|
||||||
|
<h3 class="m-t-none m-b">登录</h3>
|
||||||
|
|
||||||
|
<p>欢迎登录本站(⊙o⊙)</p>
|
||||||
|
|
||||||
|
<form role="form">
|
||||||
|
<div class="form-group">
|
||||||
|
<label>用户名：</label>
|
||||||
|
<input type="email" placeholder="请输入用户名" class="form-control">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>密码：</label>
|
||||||
|
<input type="password" placeholder="请输入密码" class="form-control">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit"><strong>登录</strong>
|
||||||
|
</button>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" class="i-checks">自动登录</label>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<h4>还不是会员？</h4>
|
||||||
|
<p>您可以注册一个账户</p>
|
||||||
|
<p class="text-center">
|
||||||
|
<a href="#"><i class="fa fa-sign-in big-icon"></i></a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<th:block th:include="include :: footer" />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,620 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh">
|
||||||
|
<head>
|
||||||
|
<th:block th:include="include :: header('按钮')" />
|
||||||
|
</head>
|
||||||
|
<body class="gray-bg">
|
||||||
|
<div class="row wrapper wrapper-content animated fadeInRight">
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>按钮颜色</h5>
|
||||||
|
<div class="ibox-tools">
|
||||||
|
<a class="collapse-link">
|
||||||
|
<i class="fa fa-chevron-up"></i>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||||
|
<i class="fa fa-wrench"></i>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu dropdown-user">
|
||||||
|
<li><a href="#">选项1</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">选项2</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a class="close-link">
|
||||||
|
<i class="fa fa-times"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<p>
|
||||||
|
可使用class来快速改变按钮的颜色，如<code>.btn-primary</code>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3 class="font-bold">
|
||||||
|
普通按钮
|
||||||
|
</h3>
|
||||||
|
<p>
|
||||||
|
<button type="button" class="btn btn-w-m btn-default">btn-default</button>
|
||||||
|
<button type="button" class="btn btn-w-m btn-primary">btn-primary</button>
|
||||||
|
<button type="button" class="btn btn-w-m btn-success">btn-success</button>
|
||||||
|
<button type="button" class="btn btn-w-m btn-info">btn-info</button>
|
||||||
|
<button type="button" class="btn btn-w-m btn-warning">btn-warning</button>
|
||||||
|
<button type="button" class="btn btn-w-m btn-danger">btn-danger</button>
|
||||||
|
<button type="button" class="btn btn-w-m btn-white">btn-white</button>
|
||||||
|
<button type="button" class="btn btn-w-m btn-link">btn-link</button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>按钮大小</h5>
|
||||||
|
<div class="ibox-tools">
|
||||||
|
<a class="collapse-link">
|
||||||
|
<i class="fa fa-chevron-up"></i>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||||
|
<i class="fa fa-wrench"></i>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu dropdown-user">
|
||||||
|
<li><a href="#">选项1</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">选项2</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a class="close-link">
|
||||||
|
<i class="fa fa-times"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<p>
|
||||||
|
可以通过添加class的值为<code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code>来修改按钮的大小
|
||||||
|
</p>
|
||||||
|
<h3 class="font-bold">按钮尺寸</h3>
|
||||||
|
<p>
|
||||||
|
<button type="button" class="btn btn-primary btn-lg">大按钮</button>
|
||||||
|
<button type="button" class="btn btn-default btn-lg">大按钮</button>
|
||||||
|
<br/>
|
||||||
|
<button type="button" class="btn btn-primary">默认按钮</button>
|
||||||
|
<button type="button" class="btn btn-default">默认按钮</button>
|
||||||
|
<br/>
|
||||||
|
<button type="button" class="btn btn-primary btn-sm">小按钮</button>
|
||||||
|
<button type="button" class="btn btn-default btn-sm">小按钮</button>
|
||||||
|
<br/>
|
||||||
|
<button type="button" class="btn btn-primary btn-xs">Mini按钮</button>
|
||||||
|
<button type="button" class="btn btn-default btn-xs">Mini按钮</button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>线性按钮</h5>
|
||||||
|
<div class="ibox-tools">
|
||||||
|
<a class="collapse-link">
|
||||||
|
<i class="fa fa-chevron-up"></i>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||||
|
<i class="fa fa-wrench"></i>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu dropdown-user">
|
||||||
|
<li><a href="#">选项1</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">选项2</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a class="close-link">
|
||||||
|
<i class="fa fa-times"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<p>
|
||||||
|
要使用线性按钮，可添加class<code>.btn-block</code>或<code>.btn-outline</code>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3 class="font-bold">线性按钮</h3>
|
||||||
|
<p>
|
||||||
|
<button type="button" class="btn btn-outline btn-default">默认</button>
|
||||||
|
<button type="button" class="btn btn-outline btn-primary">主要</button>
|
||||||
|
<button type="button" class="btn btn-outline btn-success">成功</button>
|
||||||
|
<button type="button" class="btn btn-outline btn-info">信息</button>
|
||||||
|
<button type="button" class="btn btn-outline btn-warning">警告</button>
|
||||||
|
<button type="button" class="btn btn-outline btn-danger">危险</button>
|
||||||
|
<button type="button" class="btn btn-outline btn-link">链接</button>
|
||||||
|
</p>
|
||||||
|
<h3 class="font-bold">块级按钮</h3>
|
||||||
|
<p>
|
||||||
|
<button type="button" class="btn btn-block btn-outline btn-primary">这是一个块级按钮</button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>3D按钮</h5>
|
||||||
|
<div class="ibox-tools">
|
||||||
|
<a class="collapse-link">
|
||||||
|
<i class="fa fa-chevron-up"></i>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||||
|
<i class="fa fa-wrench"></i>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu dropdown-user">
|
||||||
|
<li><a href="#">选项1</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">选项2</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a class="close-link">
|
||||||
|
<i class="fa fa-times"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<p>
|
||||||
|
可以通过添加<code>.dim</code>class来使用3D按钮.
|
||||||
|
</p>
|
||||||
|
<h3 class="font-bold">3D按钮</h3>
|
||||||
|
|
||||||
|
<button class="btn btn-primary dim btn-large-dim" type="button"><i class="fa fa-money"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-warning dim btn-large-dim" type="button"><i class="fa fa-warning"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-danger dim btn-large-dim" type="button"><i class="fa fa-heart"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-primary dim btn-large-dim" type="button"><i class="fa fa-dollar"></i>6</button>
|
||||||
|
<button class="btn btn-info dim btn-large-dim btn-outline" type="button"><i class="fa fa-ruble"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-primary dim" type="button"><i class="fa fa-money"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-warning dim" type="button"><i class="fa fa-warning"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-primary dim" type="button"><i class="fa fa-check"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-success dim" type="button"><i class="fa fa-upload"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-info dim" type="button"><i class="fa fa-paste"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-warning dim" type="button"><i class="fa fa-warning"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-default dim " type="button"><i class="fa fa-star"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-danger dim " type="button"><i class="fa fa-heart"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="btn btn-outline btn-primary dim" type="button"><i class="fa fa-money"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-outline btn-warning dim" type="button"><i class="fa fa-warning"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-outline btn-primary dim" type="button"><i class="fa fa-check"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-outline btn-success dim" type="button"><i class="fa fa-upload"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-outline btn-info dim" type="button"><i class="fa fa-paste"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-outline btn-warning dim" type="button"><i class="fa fa-warning"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-outline btn-danger dim " type="button"><i class="fa fa-heart"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>下拉按钮</h5>
|
||||||
|
<div class="ibox-tools">
|
||||||
|
<a class="collapse-link">
|
||||||
|
<i class="fa fa-chevron-up"></i>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||||
|
<i class="fa fa-wrench"></i>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu dropdown-user">
|
||||||
|
<li><a href="#">选项1</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">选项2</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a class="close-link">
|
||||||
|
<i class="fa fa-times"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<p>
|
||||||
|
下拉按钮可使用任何颜色任何大小
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3 class="font-bold">下拉按钮</h3>
|
||||||
|
<div class="btn-group">
|
||||||
|
<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">操作 <span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a href="#">置顶</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#" class="font-bold">修改</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">禁用</a>
|
||||||
|
</li>
|
||||||
|
<li class="divider"></li>
|
||||||
|
<li><a href="#">删除</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group">
|
||||||
|
<button data-toggle="dropdown" class="btn btn-warning dropdown-toggle">操作 <span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a href="#">置顶</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">修改</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">禁用</a>
|
||||||
|
</li>
|
||||||
|
<li class="divider"></li>
|
||||||
|
<li><a href="#">删除</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group">
|
||||||
|
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle">操作 <span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a href="#">置顶</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#" class="font-bold">修改</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">禁用</a>
|
||||||
|
</li>
|
||||||
|
<li class="divider"></li>
|
||||||
|
<li><a href="#">删除</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
<div class="btn-group">
|
||||||
|
<button data-toggle="dropdown" class="btn btn-primary btn-sm dropdown-toggle">操作 <span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a href="#">置顶</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#" class="font-bold">修改</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">禁用</a>
|
||||||
|
</li>
|
||||||
|
<li class="divider"></li>
|
||||||
|
<li><a href="#">删除</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group">
|
||||||
|
<button data-toggle="dropdown" class="btn btn-warning btn-sm dropdown-toggle">操作 <span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a href="#">置顶</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#" class="font-bold">修改</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">禁用</a>
|
||||||
|
</li>
|
||||||
|
<li class="divider"></li>
|
||||||
|
<li><a href="#">删除</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group">
|
||||||
|
<button data-toggle="dropdown" class="btn btn-default btn-sm dropdown-toggle">操作 <span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a href="#">置顶</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#" class="font-bold">修改</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">禁用</a>
|
||||||
|
</li>
|
||||||
|
<li class="divider"></li>
|
||||||
|
<li><a href="#">删除</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
<div class="btn-group">
|
||||||
|
<button data-toggle="dropdown" class="btn btn-primary btn-xs dropdown-toggle">操作 <span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a href="#">置顶</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#" class="font-bold">修改</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">禁用</a>
|
||||||
|
</li>
|
||||||
|
<li class="divider"></li>
|
||||||
|
<li><a href="#">删除</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group">
|
||||||
|
<button data-toggle="dropdown" class="btn btn-warning btn-xs dropdown-toggle">操作 <span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a href="#">置顶</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#" class="font-bold">修改</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">禁用</a>
|
||||||
|
</li>
|
||||||
|
<li class="divider"></li>
|
||||||
|
<li><a href="#">删除</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group">
|
||||||
|
<button data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle">操作 <span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a href="#">置顶</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#" class="font-bold">修改</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">禁用</a>
|
||||||
|
</li>
|
||||||
|
<li class="divider"></li>
|
||||||
|
<li><a href="#">删除</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>按钮组</h5>
|
||||||
|
<div class="ibox-tools">
|
||||||
|
<a class="collapse-link">
|
||||||
|
<i class="fa fa-chevron-up"></i>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||||
|
<i class="fa fa-wrench"></i>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu dropdown-user">
|
||||||
|
<li><a href="#">选项1</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">选项2</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a class="close-link">
|
||||||
|
<i class="fa fa-times"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
|
||||||
|
<h3 class="font-bold">按钮组</h3>
|
||||||
|
<div class="btn-group">
|
||||||
|
<button class="btn btn-white" type="button">左</button>
|
||||||
|
<button class="btn btn-primary" type="button">中</button>
|
||||||
|
<button class="btn btn-white" type="button">右</button>
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="button" class="btn btn-white"><i class="fa fa-chevron-left"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-white">1</button>
|
||||||
|
<button class="btn btn-white active">2</button>
|
||||||
|
<button class="btn btn-white">3</button>
|
||||||
|
<button class="btn btn-white">4</button>
|
||||||
|
<button type="button" class="btn btn-white"><i class="fa fa-chevron-right"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>图标按钮 </h5>
|
||||||
|
<div class="ibox-tools">
|
||||||
|
<a class="collapse-link">
|
||||||
|
<i class="fa fa-chevron-up"></i>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||||
|
<i class="fa fa-wrench"></i>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu dropdown-user">
|
||||||
|
<li><a href="#">选项1</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">选项2</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a class="close-link">
|
||||||
|
<i class="fa fa-times"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<p>
|
||||||
|
任何按钮都可以在左侧或右侧添加图标
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3 class="font-bold">图标按钮</h3>
|
||||||
|
<p>
|
||||||
|
<button class="btn btn-primary " type="button"><i class="fa fa-check"></i> 提交</button>
|
||||||
|
<button class="btn btn-success " type="button"><i class="fa fa-upload"></i> <span class="bold">上传</span>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-info " type="button"><i class="fa fa-paste"></i> 编辑</button>
|
||||||
|
<button class="btn btn-warning " type="button"><i class="fa fa-warning"></i> <span class="bold">警告</span>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-default " type="button"><i class="fa fa-map-marker"></i> 百度地图</button>
|
||||||
|
|
||||||
|
<a class="btn btn-success">
|
||||||
|
<i class="fa fa-weixin"> </i> 分享到微信
|
||||||
|
</a>
|
||||||
|
<a class="btn btn-success btn-outline">
|
||||||
|
<i class="fa fa-qq"> </i> 使用QQ账号登录
|
||||||
|
</a>
|
||||||
|
<a class="btn btn-white btn-bitbucket">
|
||||||
|
<i class="fa fa-user-md"></i>
|
||||||
|
</a>
|
||||||
|
<a class="btn btn-white btn-bitbucket">
|
||||||
|
<i class="fa fa-group"></i>
|
||||||
|
</a>
|
||||||
|
<a class="btn btn-white btn-bitbucket">
|
||||||
|
<i class="fa fa-wrench"></i>
|
||||||
|
</a>
|
||||||
|
<a class="btn btn-white btn-bitbucket">
|
||||||
|
<i class="fa fa-exchange"></i>
|
||||||
|
</a>
|
||||||
|
<a class="btn btn-white btn-bitbucket">
|
||||||
|
<i class="fa fa-check-circle-o"></i>
|
||||||
|
</a>
|
||||||
|
<a class="btn btn-white btn-bitbucket">
|
||||||
|
<i class="fa fa-road"></i>
|
||||||
|
</a>
|
||||||
|
<a class="btn btn-white btn-bitbucket">
|
||||||
|
<i class="fa fa-ambulance"></i>
|
||||||
|
</a>
|
||||||
|
<a class="btn btn-white btn-bitbucket">
|
||||||
|
<i class="fa fa-star"></i> 收藏
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3 class="font-bold">按钮切换</h3>
|
||||||
|
<button data-toggle="button" class="btn btn-primary btn-outline" type="button">按钮1</button>
|
||||||
|
<button data-toggle="button" class="btn btn-primary" type="button">按钮2</button>
|
||||||
|
<div data-toggle="buttons-checkbox" class="btn-group">
|
||||||
|
<button class="btn btn-primary active" type="button"><i class="fa fa-bold"></i> 粗体</button>
|
||||||
|
<button class="btn btn-primary" type="button"><i class="fa fa-underline"></i> 下划线</button>
|
||||||
|
<button class="btn btn-primary active" type="button"><i class="fa fa-italic"></i> 斜体</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>圆形图标按钮</h5>
|
||||||
|
<div class="ibox-tools">
|
||||||
|
<a class="collapse-link">
|
||||||
|
<i class="fa fa-chevron-up"></i>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||||
|
<i class="fa fa-wrench"></i>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu dropdown-user">
|
||||||
|
<li><a href="#">选项1</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">选项2</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a class="close-link">
|
||||||
|
<i class="fa fa-times"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<p>
|
||||||
|
要使用圆形图标按钮，可以通过添加class为<code>.btn-circle</code>实现
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3 class="font-bold">圆形按钮</h3>
|
||||||
|
<br/>
|
||||||
|
<button class="btn btn-default btn-circle" type="button"><i class="fa fa-check"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-primary btn-circle" type="button"><i class="fa fa-list"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-success btn-circle" type="button"><i class="fa fa-link"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-info btn-circle" type="button"><i class="fa fa-check"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-warning btn-circle" type="button"><i class="fa fa-times"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-danger btn-circle" type="button"><i class="fa fa-heart"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-danger btn-circle btn-outline" type="button"><i class="fa fa-heart"></i>
|
||||||
|
</button>
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
<button class="btn btn-default btn-circle btn-lg" type="button"><i class="fa fa-check"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-primary btn-circle btn-lg" type="button"><i class="fa fa-list"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-success btn-circle btn-lg" type="button"><i class="fa fa-link"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-info btn-circle btn-lg" type="button"><i class="fa fa-check"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-warning btn-circle btn-lg" type="button"><i class="fa fa-times"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-danger btn-circle btn-lg" type="button"><i class="fa fa-heart"></i>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-danger btn-circle btn-lg btn-outline" type="button"><i class="fa fa-heart"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>圆角按钮</h5>
|
||||||
|
<div class="ibox-tools">
|
||||||
|
<a class="collapse-link">
|
||||||
|
<i class="fa fa-chevron-up"></i>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||||
|
<i class="fa fa-wrench"></i>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu dropdown-user">
|
||||||
|
<li><a href="#">选项1</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">选项2</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a class="close-link">
|
||||||
|
<i class="fa fa-times"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<p>
|
||||||
|
可以通过添加class的值微<code>.btn-rounded</code>来实现圆角按钮
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3 class="font-bold">按钮组</h3>
|
||||||
|
<p>
|
||||||
|
<a class="btn btn-default btn-rounded" href="#">默认</a>
|
||||||
|
<a class="btn btn-primary btn-rounded" href="#">主要</a>
|
||||||
|
<a class="btn btn-success btn-rounded" href="#">成果</a>
|
||||||
|
<a class="btn btn-info btn-rounded" href="#">信息</a>
|
||||||
|
<a class="btn btn-warning btn-rounded" href="#">警告</a>
|
||||||
|
<a class="btn btn-danger btn-rounded" href="#">危险</a>
|
||||||
|
<a class="btn btn-danger btn-rounded btn-outline" href="#">危险</a>
|
||||||
|
<br/>
|
||||||
|
<br/>
|
||||||
|
<a class="btn btn-primary btn-rounded btn-block" href="#"><i class="fa fa-info-circle"></i> 圆角块级带图标按钮</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<th:block th:include="include :: footer" />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,319 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh">
|
||||||
|
<head>
|
||||||
|
<th:block th:include="include :: header('卡片列表')" />
|
||||||
|
</head>
|
||||||
|
<body class="gray-bg">
|
||||||
|
<div class="wrapper wrapper-content animated fadeInRight">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<span class="label label-primary pull-right">NEW</span>
|
||||||
|
<h5>IT-01 - 设计部</h5>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<h4>部门简介</h4>
|
||||||
|
<p>
|
||||||
|
平面设计（graphic design），也称为视觉传达设计，是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。
|
||||||
|
</p>
|
||||||
|
<div>
|
||||||
|
<span>当前项目进度：</span>
|
||||||
|
<div class="stat-percent">48%</div>
|
||||||
|
<div class="progress progress-mini">
|
||||||
|
<div style="width: 48%;" class="progress-bar"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row m-t-sm">
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="font-bold">项目</div>
|
||||||
|
12
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="font-bold">周期</div>
|
||||||
|
4个月
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4 text-right">
|
||||||
|
<div class="font-bold">预算</div>
|
||||||
|
¥200,913 <i class="fa fa-level-up text-navy"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>IT-04 - 市场部</h5>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<h4>部门简介</h4>
|
||||||
|
<p>
|
||||||
|
平面设计（graphic design），也称为视觉传达设计，是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。
|
||||||
|
</p>
|
||||||
|
<div>
|
||||||
|
<span>当前项目进度：</span>
|
||||||
|
<div class="stat-percent">32%</div>
|
||||||
|
<div class="progress progress-mini">
|
||||||
|
<div style="width: 32%;" class="progress-bar"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row m-t-sm">
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="font-bold">项目</div>
|
||||||
|
24
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="font-bold">周期</div>
|
||||||
|
3个月
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4 text-right">
|
||||||
|
<div class="font-bold">预算</div>
|
||||||
|
¥190,325 <i class="fa fa-level-up text-navy"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>IT-07 - 财务部</h5>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<h4>部门简介</h4>
|
||||||
|
<p>
|
||||||
|
平面设计（graphic design），也称为视觉传达设计，是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。
|
||||||
|
</p>
|
||||||
|
<div>
|
||||||
|
<span>当前项目进度：</span>
|
||||||
|
<div class="stat-percent">73%</div>
|
||||||
|
<div class="progress progress-mini">
|
||||||
|
<div style="width: 73%;" class="progress-bar"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row m-t-sm">
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="font-bold">项目</div>
|
||||||
|
11
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="font-bold">周期</div>
|
||||||
|
6个月
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4 text-right">
|
||||||
|
<div class="font-bold">预算</div>
|
||||||
|
¥560,105 <i class="fa fa-level-up text-navy"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>IT-02 - 开发部</h5>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<h4>部门简介</h4>
|
||||||
|
<p>
|
||||||
|
平面设计（graphic design），也称为视觉传达设计，是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。
|
||||||
|
</p>
|
||||||
|
<div>
|
||||||
|
<span>当前项目进度：</span>
|
||||||
|
<div class="stat-percent">61%</div>
|
||||||
|
<div class="progress progress-mini">
|
||||||
|
<div style="width: 61%;" class="progress-bar"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row m-t-sm">
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="font-bold">项目</div>
|
||||||
|
43
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="font-bold">周期</div>
|
||||||
|
1个月
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4 text-right">
|
||||||
|
<div class="font-bold">预算</div>
|
||||||
|
¥705,913 <i class="fa fa-level-up text-navy"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<span class="label label-warning pull-right">截止</span>
|
||||||
|
<h5>IT-05 - 管理层</h5>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<h4>部门简介</h4>
|
||||||
|
<p>
|
||||||
|
平面设计（graphic design），也称为视觉传达设计，是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。
|
||||||
|
</p>
|
||||||
|
<div>
|
||||||
|
<span>当前项目进度：</span>
|
||||||
|
<div class="stat-percent">14%</div>
|
||||||
|
<div class="progress progress-mini">
|
||||||
|
<div style="width: 14%;" class="progress-bar"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row m-t-sm">
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="font-bold">项目</div>
|
||||||
|
8
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="font-bold">周期</div>
|
||||||
|
7个月
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4 text-right">
|
||||||
|
<div class="font-bold">预算</div>
|
||||||
|
¥40,200 <i class="fa fa-level-up text-navy"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>IT-08 - 销售部</h5>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<h4>部门简介</h4>
|
||||||
|
<p>
|
||||||
|
平面设计（graphic design），也称为视觉传达设计，是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。
|
||||||
|
</p>
|
||||||
|
<div>
|
||||||
|
<span>当前项目进度：</span>
|
||||||
|
<div class="stat-percent">25%</div>
|
||||||
|
<div class="progress progress-mini">
|
||||||
|
<div style="width: 25%;" class="progress-bar"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row m-t-sm">
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="font-bold">项目</div>
|
||||||
|
25
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="font-bold">周期</div>
|
||||||
|
4个月
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4 text-right">
|
||||||
|
<div class="font-bold">预算</div>
|
||||||
|
¥140,105 <i class="fa fa-level-up text-navy"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-title">
|
||||||
|
|
||||||
|
<h5>IT-02 - 销售部</h5>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<h4>部门简介</h4>
|
||||||
|
<p>
|
||||||
|
平面设计（graphic design），也称为视觉传达设计，是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。
|
||||||
|
</p>
|
||||||
|
<div>
|
||||||
|
<span>当前项目进度：</span>
|
||||||
|
<div class="stat-percent">82%</div>
|
||||||
|
<div class="progress progress-mini">
|
||||||
|
<div style="width: 82%;" class="progress-bar"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row m-t-sm">
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="font-bold">项目</div>
|
||||||
|
68
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="font-bold">周期</div>
|
||||||
|
2个月
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4 text-right">
|
||||||
|
<div class="font-bold">预算</div>
|
||||||
|
¥701,400 <i class="fa fa-level-up text-navy"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>IT-06 - 销售部</h5>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<h4>部门简介</h4>
|
||||||
|
<p>
|
||||||
|
平面设计（graphic design），也称为视觉传达设计，是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。
|
||||||
|
</p>
|
||||||
|
<div>
|
||||||
|
<span>当前项目进度：</span>
|
||||||
|
<div class="stat-percent">26%</div>
|
||||||
|
<div class="progress progress-mini">
|
||||||
|
<div style="width: 26%;" class="progress-bar"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row m-t-sm">
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="font-bold">项目</div>
|
||||||
|
16
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="font-bold">周期</div>
|
||||||
|
8个月
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4 text-right">
|
||||||
|
<div class="font-bold">预算</div>
|
||||||
|
¥160,100 <i class="fa fa-level-up text-navy"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>IT-09 - 销售部</h5>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<h4>部门简介</h4>
|
||||||
|
<p>
|
||||||
|
平面设计（graphic design），也称为视觉传达设计，是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。
|
||||||
|
</p>
|
||||||
|
<div>
|
||||||
|
<span>当前项目进度：</span>
|
||||||
|
<div class="stat-percent">18%</div>
|
||||||
|
<div class="progress progress-mini">
|
||||||
|
<div style="width: 18%;" class="progress-bar"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row m-t-sm">
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="font-bold">项目</div>
|
||||||
|
53
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="font-bold">周期</div>
|
||||||
|
9个月
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4 text-right">
|
||||||
|
<div class="font-bold">预算</div>
|
||||||
|
¥60,140 <i class="fa fa-level-up text-navy"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<th:block th:include="include :: footer" />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,161 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh">
|
||||||
|
<head>
|
||||||
|
<th:block th:include="include :: header('多级联动下拉')" />
|
||||||
|
</head>
|
||||||
|
<body class="gray-bg">
|
||||||
|
<div class="wrapper wrapper-content animated fadeInRight">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>多级联动下拉<small>https://github.com/ciaoca/cxSelect</small></h5>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<p>简单联动示例。</p>
|
||||||
|
<div id="element" class="row">
|
||||||
|
<div class="col-sm-2">
|
||||||
|
<select class="type form-control m-b" data-first-title="请选择">
|
||||||
|
<option value="">请选择</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-2">
|
||||||
|
<select class="router form-control m-b" data-first-title="请选择">
|
||||||
|
<option value="">请选择</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p>国内省市区联动。</p>
|
||||||
|
<div id="element1" class="row">
|
||||||
|
<div class="col-sm-2">
|
||||||
|
<select class="province form-control m-b" data-first-title="选择省">
|
||||||
|
<option value="">请选择</option>
|
||||||
|
<option value="广东省" selected>广东省</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-2">
|
||||||
|
<select class="city form-control m-b" data-first-title="选择市">
|
||||||
|
<option value="">请选择</option>
|
||||||
|
<option value="深圳市" selected>深圳市</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-2">
|
||||||
|
<select class="area form-control m-b" data-first-title="选择地区">
|
||||||
|
<option value="">请选择</option>
|
||||||
|
<option value="南山区" selected>南山区</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p>自定义选项。</p>
|
||||||
|
<div id="element2" class="row">
|
||||||
|
<div class="col-sm-2">
|
||||||
|
<select class="first form-control m-b"></select>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-2">
|
||||||
|
<select class="second form-control m-b"></select>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-2">
|
||||||
|
<select class="third form-control m-b"></select>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-2">
|
||||||
|
<select class="fourth form-control m-b"></select>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-2">
|
||||||
|
<select class="fifth form-control m-b"></select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">相关参数详细信息</label>
|
||||||
|
<div><a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#jquery-cxselect" target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#jquery-cxselect</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<th:block th:include="include :: footer" />
|
||||||
|
<th:block th:include="include :: jquery-cxselect-js" />
|
||||||
|
<script th:inline="javascript">
|
||||||
|
// 直接返回获取
|
||||||
|
var data = [[${data}]];
|
||||||
|
$('#element').cxSelect({
|
||||||
|
selects: ['type', 'router'],
|
||||||
|
jsonValue: 'v',
|
||||||
|
data: data
|
||||||
|
});
|
||||||
|
|
||||||
|
// 通过默认url获取
|
||||||
|
var urlChina = 'cityData';
|
||||||
|
$.cxSelect.defaults.url = urlChina;
|
||||||
|
$('#element1').cxSelect({
|
||||||
|
selects: ['province', 'city', 'area'],
|
||||||
|
nodata: 'none'
|
||||||
|
});
|
||||||
|
|
||||||
|
// 固定值获取
|
||||||
|
$('#element2').cxSelect({
|
||||||
|
selects: ['first', 'second', 'third', 'fourth', 'fifth'],
|
||||||
|
required: true,
|
||||||
|
jsonValue: 'v',
|
||||||
|
data: [
|
||||||
|
{'v': '1', 'n': '第一级 >', 's': [
|
||||||
|
{'v': '2', 'n': '第二级 >', 's': [
|
||||||
|
{'v': '3', 'n': '第三级 >', 's': [
|
||||||
|
{'v': '4', 'n': '第四级 >', 's': [
|
||||||
|
{'v': '5', 'n': '第五级 >', 's': [
|
||||||
|
{'v': '6', 'n': '第六级 >'}
|
||||||
|
]}
|
||||||
|
]}
|
||||||
|
]}
|
||||||
|
]}
|
||||||
|
]},
|
||||||
|
{'v': 'test number', 'n': '测试数字', 's': [
|
||||||
|
{'v': 'text', 'n': '文本类型', 's': [
|
||||||
|
{'v': '4', 'n': '4'},
|
||||||
|
{'v': '5', 'n': '5'},
|
||||||
|
{'v': '6', 'n': '6'},
|
||||||
|
{'v': '7', 'n': '7'},
|
||||||
|
{'v': '8', 'n': '8'},
|
||||||
|
{'v': '9', 'n': '9'},
|
||||||
|
{'v': '10', 'n': '10'}
|
||||||
|
]},
|
||||||
|
{'v': 'number', 'n': '数值类型', 's': [
|
||||||
|
{'v': 11, 'n': 11},
|
||||||
|
{'v': 12, 'n': 12},
|
||||||
|
{'v': 13, 'n': 13},
|
||||||
|
{'v': 14, 'n': 14},
|
||||||
|
{'v': 15, 'n': 15},
|
||||||
|
{'v': 16, 'n': 16},
|
||||||
|
{'v': 17, 'n': 17}
|
||||||
|
]}
|
||||||
|
]},
|
||||||
|
{'v': 'test boolean','n': '测试 Boolean 类型', 's': [
|
||||||
|
{'v': true ,'n': true},
|
||||||
|
{'v': false ,'n': false}
|
||||||
|
]},
|
||||||
|
{v: 'test quotes', n: '测试属性不加引号', s: [
|
||||||
|
{v: 'quotes', n: '引号'}
|
||||||
|
]},
|
||||||
|
{v: 'test other', n: '测试奇怪的值', s: [
|
||||||
|
{v: '[]', n: '数组（空）'},
|
||||||
|
{v: [1,2,3], n: '数组（数值）'},
|
||||||
|
{v: ['a','b','c'], n: '数组（文字）'},
|
||||||
|
{v: new Date(), n: '日期'},
|
||||||
|
{v: new RegExp('\\d+'), n: '正则对象'},
|
||||||
|
{v: /\d+/, n: '正则直接量'},
|
||||||
|
{v: {}, n: '对象'},
|
||||||
|
{v: document.getElementById('custom_data'), n: 'DOM'},
|
||||||
|
{v: null, n: 'Null'},
|
||||||
|
{n: '未设置 value'}
|
||||||
|
]},
|
||||||
|
{'v': '' , 'n': '无子级'}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,236 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh">
|
||||||
|
<head>
|
||||||
|
<th:block th:include="include :: header('日期和时间')" />
|
||||||
|
<th:block th:include="include :: datetimepicker-css" />
|
||||||
|
</head>
|
||||||
|
<body class="gray-bg">
|
||||||
|
<div class="wrapper wrapper-content animated fadeInRight">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>日期选择器 <small>https://github.com/smalot/bootstrap-datetimepicker</small></h5>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">简单示例</label>
|
||||||
|
<div class="input-group date">
|
||||||
|
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||||
|
<input type="text" class="form-control" id="datetimepicker-demo-1" placeholder="yyyy-MM-dd HH:mm">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">显示年月日</label>
|
||||||
|
<div class="input-group date">
|
||||||
|
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||||
|
<input type="text" class="form-control" id="datetimepicker-demo-2" placeholder="yyyy-MM-dd">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">显示年月日时分秒</label>
|
||||||
|
<div class="input-group date">
|
||||||
|
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||||
|
<input type="text" class="form-control" id="datetimepicker-demo-3" placeholder="yyyy-MM-dd HH:mm:ss">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">带清空的按钮</label>
|
||||||
|
<div class="input-group date form_date">
|
||||||
|
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||||
|
<input class="form-control" size="16" type="text" readonly>
|
||||||
|
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">日期范围选择</label>
|
||||||
|
<div class="input-daterange input-group">
|
||||||
|
<input type="text" class="input-sm form-control" id="datetimepicker-startTime" placeholder="yyyy-MM-dd"/>
|
||||||
|
<span class="input-group-addon">到</span>
|
||||||
|
<input type="text" class="input-sm form-control" id="datetimepicker-endTime" placeholder="yyyy-MM-dd"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">相关参数详细信息</label>
|
||||||
|
<div><a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-datetimepicker" target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-datetimepicker</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>日期选择器 <small>https://github.com/sentsin/laydate</small></h5>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">简单示例</label>
|
||||||
|
<div class="input-group date">
|
||||||
|
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||||
|
<input type="text" class="form-control" id="laydate-demo-1" placeholder="yyyy-MM-dd">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">显示年月日</label>
|
||||||
|
<div class="input-group date">
|
||||||
|
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||||
|
<input type="text" class="form-control" id="laydate-demo-2" placeholder="yyyy-MM-dd">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">显示年月日时分秒</label>
|
||||||
|
<div class="input-group date">
|
||||||
|
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||||
|
<input type="text" class="form-control" id="laydate-demo-3" placeholder="yyyy-MM-dd HH:mm:ss">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">单框范围选择</label>
|
||||||
|
<div class="input-group date">
|
||||||
|
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||||
|
<input type="text" class="form-control" id="laydate-demo-4" placeholder="yyyy-MM-dd - yyyy-MM-dd">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">日期范围选择</label>
|
||||||
|
<div class="input-daterange input-group">
|
||||||
|
<input type="text" class="input-sm form-control" id="laydate-startTime" placeholder="yyyy-MM-dd"/>
|
||||||
|
<span class="input-group-addon">到</span>
|
||||||
|
<input type="text" class="input-sm form-control" id="laydate-endTime" placeholder="yyyy-MM-dd"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">相关参数详细信息</label>
|
||||||
|
<div><a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#laydate" target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#laydate</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<th:block th:include="include :: footer" />
|
||||||
|
<th:block th:include="include :: datetimepicker-js" />
|
||||||
|
<script type="text/javascript">
|
||||||
|
$(function(){
|
||||||
|
<!-- datetimepicker示例 -->
|
||||||
|
$("#datetimepicker-demo-1").datetimepicker();
|
||||||
|
|
||||||
|
$("#datetimepicker-demo-2").datetimepicker({
|
||||||
|
format: "yyyy-mm-dd",
|
||||||
|
minView: "month",
|
||||||
|
autoclose: true
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#datetimepicker-demo-3").datetimepicker({
|
||||||
|
format: "yyyy-mm-dd hh:ii:ss",
|
||||||
|
autoclose: true
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.form_date').datetimepicker({
|
||||||
|
format: "yyyy-mm-dd",
|
||||||
|
minView: "month",
|
||||||
|
autoclose: true
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#datetimepicker-startTime").datetimepicker({
|
||||||
|
format: 'yyyy-mm-dd',
|
||||||
|
minView: "month",
|
||||||
|
todayBtn: true,
|
||||||
|
autoclose: true,
|
||||||
|
endDate : new Date(),
|
||||||
|
}).on('changeDate', function(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
var startTime = event.date;
|
||||||
|
$('#datetimepicker-endTime').datetimepicker('setStartDate', startTime);
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#datetimepicker-endTime").datetimepicker({
|
||||||
|
format: 'yyyy-mm-dd',
|
||||||
|
minView: "month",
|
||||||
|
todayBtn: true,
|
||||||
|
autoclose: true,
|
||||||
|
endDate : new Date(),
|
||||||
|
}).on('changeDate', function(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
var endTime = event.date;
|
||||||
|
$("#datetimepicker-startTime").datetimepicker('setEndDate', endTime);
|
||||||
|
});
|
||||||
|
|
||||||
|
<!-- laydate示例 -->
|
||||||
|
layui.use('laydate', function(){
|
||||||
|
var laydate = layui.laydate;
|
||||||
|
|
||||||
|
laydate.render({
|
||||||
|
elem: '#laydate-demo-1'
|
||||||
|
});
|
||||||
|
|
||||||
|
laydate.render({
|
||||||
|
elem: '#laydate-demo-2',
|
||||||
|
type: 'date'
|
||||||
|
});
|
||||||
|
|
||||||
|
laydate.render({
|
||||||
|
elem: '#laydate-demo-3',
|
||||||
|
type: 'datetime',
|
||||||
|
trigger: 'click'
|
||||||
|
});
|
||||||
|
|
||||||
|
laydate.render({
|
||||||
|
elem: '#laydate-demo-4',
|
||||||
|
range: true
|
||||||
|
});
|
||||||
|
|
||||||
|
var startDate = laydate.render({
|
||||||
|
elem: '#laydate-startTime',
|
||||||
|
max: $('#laydate-endTime').val(),
|
||||||
|
theme: 'molv',
|
||||||
|
trigger: 'click',
|
||||||
|
done: function(value, date) {
|
||||||
|
// 结束时间大于开始时间
|
||||||
|
if (value !== '') {
|
||||||
|
endDate.config.min.year = date.year;
|
||||||
|
endDate.config.min.month = date.month - 1;
|
||||||
|
endDate.config.min.date = date.date;
|
||||||
|
} else {
|
||||||
|
endDate.config.min.year = '';
|
||||||
|
endDate.config.min.month = '';
|
||||||
|
endDate.config.min.date = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var endDate = laydate.render({
|
||||||
|
elem: '#laydate-endTime',
|
||||||
|
min: $('#laydate-startTime').val(),
|
||||||
|
theme: 'molv',
|
||||||
|
trigger: 'click',
|
||||||
|
done: function(value, date) {
|
||||||
|
// 开始时间小于结束时间
|
||||||
|
if (value !== '') {
|
||||||
|
startDate.config.max.year = date.year;
|
||||||
|
startDate.config.max.month = date.month - 1;
|
||||||
|
startDate.config.max.date = date.date;
|
||||||
|
} else {
|
||||||
|
startDate.config.max.year = '';
|
||||||
|
startDate.config.max.month = '';
|
||||||
|
startDate.config.max.date = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,65 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh">
|
||||||
|
<head>
|
||||||
|
<th:block th:include="include :: header('左右互选组件')" />
|
||||||
|
<th:block th:include="include :: bootstrap-duallistbox-css" />
|
||||||
|
</head>
|
||||||
|
<body class="gray-bg">
|
||||||
|
<div class="wrapper wrapper-content animated fadeInRight">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-12">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>双重列表框 <small>https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox</small></h5>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<p>
|
||||||
|
Bootstrap Dual Listbox是针对Twitter Bootstrap进行了优化的响应式双列表框。它适用于所有现代浏览器和触摸设备。
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<form id="form" action="#" class="wizard-big">
|
||||||
|
<select class="form-control dual_select" multiple>
|
||||||
|
<option value="1">若依1</option>
|
||||||
|
<option value="2">若依2</option>
|
||||||
|
<option value="3">若依3</option>
|
||||||
|
<option selected value="4">若依4</option>
|
||||||
|
<option selected value="5">若依5</option>
|
||||||
|
<option value="6">若依6</option>
|
||||||
|
<option value="7">若依7</option>
|
||||||
|
<option value="8">若依8</option>
|
||||||
|
<option value="9">若依9</option>
|
||||||
|
<option value="10">若依10</option>
|
||||||
|
<option value="11">若依11</option>
|
||||||
|
<option value="12">若依12</option>
|
||||||
|
</select>
|
||||||
|
</form>
|
||||||
|
<hr>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">相关参数详细信息</label>
|
||||||
|
<div><a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-duallistbox" target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-duallistbox</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<th:block th:include="include :: footer" />
|
||||||
|
<th:block th:include="include :: bootstrap-duallistbox-js" />
|
||||||
|
<script type="text/javascript">
|
||||||
|
$('.dual_select').bootstrapDualListbox({
|
||||||
|
nonSelectedListLabel: '未有用户',
|
||||||
|
selectedListLabel: '已有用户',
|
||||||
|
preserveSelectionOnMove: 'moved',
|
||||||
|
moveOnSelect: false, // 出现一个剪头，表示可以一次选择一个
|
||||||
|
filterTextClear: '展示所有',
|
||||||
|
moveSelectedLabel: "添加",
|
||||||
|
moveAllLabel: '添加所有',
|
||||||
|
removeSelectedLabel: "移除",
|
||||||
|
removeAllLabel: '移除所有',
|
||||||
|
infoText: '共{0}个',
|
||||||
|
showFilterInputs: false, // 是否带搜索
|
||||||
|
selectorMinimalHeight: 160
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,432 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh">
|
||||||
|
<head>
|
||||||
|
<th:block th:include="include :: header('栅格')" />
|
||||||
|
</head>
|
||||||
|
<body class="gray-bg">
|
||||||
|
<div class="wrapper wrapper-content">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>栅格设置</h5>
|
||||||
|
<div class="ibox-tools">
|
||||||
|
<a class="collapse-link">
|
||||||
|
<i class="fa fa-chevron-up"></i>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||||
|
<i class="fa fa-wrench"></i>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu dropdown-user">
|
||||||
|
<li><a href="#">选项1</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">选项2</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a class="close-link">
|
||||||
|
<i class="fa fa-times"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
|
||||||
|
<p>通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。</p>
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table class="table table-bordered table-striped">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th></th>
|
||||||
|
<th>
|
||||||
|
超小屏幕
|
||||||
|
<small>手机 (<768px)</small>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
小屏幕
|
||||||
|
<small>平板 (≥768px)</small>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
中等屏幕
|
||||||
|
<small>桌面显示器 (≥992px)</small>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
大屏幕
|
||||||
|
<small>大桌面显示器 (≥1200px)</small>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th class="text-nowrap">栅格系统行为</th>
|
||||||
|
<td>总是水平排列</td>
|
||||||
|
<td colspan="3">开始是堆叠在一起的，当大于这些阈值时将变为水平排列C</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th class="text-nowrap"><code>.container</code> 最大宽度</th>
|
||||||
|
<td>None （自动）</td>
|
||||||
|
<td>750px</td>
|
||||||
|
<td>970px</td>
|
||||||
|
<td>1170px</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th class="text-nowrap">类前缀</th>
|
||||||
|
<td><code>.col-xs-</code>
|
||||||
|
</td>
|
||||||
|
<td><code>.col-sm-</code>
|
||||||
|
</td>
|
||||||
|
<td><code>.col-md-</code>
|
||||||
|
</td>
|
||||||
|
<td><code>.col-lg-</code>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th class="text-nowrap">列（column）数</th>
|
||||||
|
<td colspan="4">12</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th class="text-nowrap">最大列（column）宽</th>
|
||||||
|
<td class="text-muted">自动</td>
|
||||||
|
<td>~62px</td>
|
||||||
|
<td>~81px</td>
|
||||||
|
<td>~97px</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th class="text-nowrap">槽（gutter）宽</th>
|
||||||
|
<td colspan="4">30px （每列左右均有 15px）</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th class="text-nowrap">可嵌套</th>
|
||||||
|
<td colspan="4">是</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th class="text-nowrap">偏移（Offsets）</th>
|
||||||
|
<td colspan="4">是</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th class="text-nowrap">列排序</th>
|
||||||
|
<td colspan="4">是</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>从堆叠到水平排列</h5>
|
||||||
|
<div class="ibox-tools">
|
||||||
|
<a class="collapse-link">
|
||||||
|
<i class="fa fa-chevron-up"></i>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||||
|
<i class="fa fa-wrench"></i>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu dropdown-user">
|
||||||
|
<li><a href="#">选项1</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">选项2</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a class="close-link">
|
||||||
|
<i class="fa fa-times"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
|
||||||
|
<p>使用单一的一组 <code>.col-md-*</code> 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” <code>.row</code> 内。</p>
|
||||||
|
<div class="row show-grid">
|
||||||
|
<div class="col-md-1">.col-md-1</div>
|
||||||
|
<div class="col-md-1">.col-md-1</div>
|
||||||
|
<div class="col-md-1">.col-md-1</div>
|
||||||
|
<div class="col-md-1">.col-md-1</div>
|
||||||
|
<div class="col-md-1">.col-md-1</div>
|
||||||
|
<div class="col-md-1">.col-md-1</div>
|
||||||
|
<div class="col-md-1">.col-md-1</div>
|
||||||
|
<div class="col-md-1">.col-md-1</div>
|
||||||
|
<div class="col-md-1">.col-md-1</div>
|
||||||
|
<div class="col-md-1">.col-md-1</div>
|
||||||
|
<div class="col-md-1">.col-md-1</div>
|
||||||
|
<div class="col-md-1">.col-md-1</div>
|
||||||
|
</div>
|
||||||
|
<div class="row show-grid">
|
||||||
|
<div class="col-md-8">.col-md-8</div>
|
||||||
|
<div class="col-md-4">.col-md-4</div>
|
||||||
|
</div>
|
||||||
|
<div class="row show-grid">
|
||||||
|
<div class="col-md-4">.col-md-4</div>
|
||||||
|
<div class="col-md-4">.col-md-4</div>
|
||||||
|
<div class="col-md-4">.col-md-4</div>
|
||||||
|
</div>
|
||||||
|
<div class="row show-grid">
|
||||||
|
<div class="col-md-6">.col-md-6</div>
|
||||||
|
<div class="col-md-6">.col-md-6</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>移动设备和桌面屏幕</h5>
|
||||||
|
<div class="ibox-tools">
|
||||||
|
<a class="collapse-link">
|
||||||
|
<i class="fa fa-chevron-up"></i>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||||
|
<i class="fa fa-wrench"></i>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu dropdown-user">
|
||||||
|
<li><a href="#">选项1</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">选项2</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a class="close-link">
|
||||||
|
<i class="fa fa-times"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
|
||||||
|
<p>是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即 <code>.col-xs-*</code> 和 <code>.col-md-*</code>。请看下面的实例，研究一下这些是如何工作的。</p>
|
||||||
|
<div class="row show-grid">
|
||||||
|
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
|
||||||
|
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||||||
|
</div>
|
||||||
|
<div class="row show-grid">
|
||||||
|
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||||||
|
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||||||
|
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||||||
|
</div>
|
||||||
|
<div class="row show-grid">
|
||||||
|
<div class="col-xs-6">.col-xs-6</div>
|
||||||
|
<div class="col-xs-6">.col-xs-6</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>手机、平板、桌面</h5>
|
||||||
|
<div class="ibox-tools">
|
||||||
|
<a class="collapse-link">
|
||||||
|
<i class="fa fa-chevron-up"></i>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||||
|
<i class="fa fa-wrench"></i>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu dropdown-user">
|
||||||
|
<li><a href="#">选项1</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">选项2</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a class="close-link">
|
||||||
|
<i class="fa fa-times"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
|
||||||
|
<p>在上面案例的基础上，通过使用针对平板设备的 <code>.col-sm-*</code> 类，我们来创建更加动态和强大的布局吧。</p>
|
||||||
|
<div class="row show-grid">
|
||||||
|
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
|
||||||
|
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||||||
|
</div>
|
||||||
|
<div class="row show-grid">
|
||||||
|
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
|
||||||
|
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
|
||||||
|
<!-- Optional: clear the XS cols if their content doesn't match in height -->
|
||||||
|
<div class="clearfix visible-xs"></div>
|
||||||
|
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>多余的列（column）将另起一行排列</h5>
|
||||||
|
|
||||||
|
<div class="ibox-tools">
|
||||||
|
<a class="collapse-link">
|
||||||
|
<i class="fa fa-chevron-up"></i>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||||
|
<i class="fa fa-wrench"></i>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu dropdown-user">
|
||||||
|
<li><a href="#">选项1</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">选项2</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a class="close-link">
|
||||||
|
<i class="fa fa-times"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<p>在等宽的4网格中，网格不等高会碰到问题，为了解决这个问题，可使用<code>.clearfix</code>。<a href="#responsive-utilities">响应实用工具类</a>
|
||||||
|
</p>
|
||||||
|
<div class="row show-grid">
|
||||||
|
<div class="col-xs-6 col-sm-3">
|
||||||
|
.col-xs-6 .col-sm-3
|
||||||
|
<br>调整窗口大小或者在手机上查看本示例
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
|
||||||
|
|
||||||
|
<!-- Add the extra clearfix for only the required viewport -->
|
||||||
|
<div class="clearfix visible-xs"></div>
|
||||||
|
|
||||||
|
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
|
||||||
|
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>列偏移</h5>
|
||||||
|
|
||||||
|
<div class="ibox-tools">
|
||||||
|
<a class="collapse-link">
|
||||||
|
<i class="fa fa-chevron-up"></i>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||||
|
<i class="fa fa-wrench"></i>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu dropdown-user">
|
||||||
|
<li><a href="#">选项1</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">选项2</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a class="close-link">
|
||||||
|
<i class="fa fa-times"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
|
||||||
|
<p>使用 <code>.col-md-offset-*</code> 类可以将列向右侧偏移。这些类实际是通过使用 <code>*</code> 选择器为当前元素增加了左侧的边距（margin）。例如，<code>.col-md-offset-4</code> 类将 <code>.col-md-4</code> 元素向右侧偏移了4个列（column）的宽度。</p>
|
||||||
|
<div class="row show-grid">
|
||||||
|
<div class="col-md-4">.col-md-4</div>
|
||||||
|
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
|
||||||
|
</div>
|
||||||
|
<div class="row show-grid">
|
||||||
|
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
|
||||||
|
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
|
||||||
|
</div>
|
||||||
|
<div class="row show-grid">
|
||||||
|
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>嵌套列</h5>
|
||||||
|
|
||||||
|
<div class="ibox-tools">
|
||||||
|
<a class="collapse-link">
|
||||||
|
<i class="fa fa-chevron-up"></i>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||||
|
<i class="fa fa-wrench"></i>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu dropdown-user">
|
||||||
|
<li><a href="#">选项1</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">选项2</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a class="close-link">
|
||||||
|
<i class="fa fa-times"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<p>为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 <code>.row</code> 元素和一系列 <code>.col-sm-*</code> 元素到已经存在的 <code>.col-sm-*</code> 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。</p>
|
||||||
|
<div class="row show-grid">
|
||||||
|
<div class="col-md-9">
|
||||||
|
第一级： .col-md-9
|
||||||
|
<div class="row show-grid">
|
||||||
|
<div class="col-md-6">
|
||||||
|
第二级： .col-md-6
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
第二级： .col-md-6
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>列排序</h5>
|
||||||
|
<div class="ibox-tools">
|
||||||
|
<a class="collapse-link">
|
||||||
|
<i class="fa fa-chevron-up"></i>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||||
|
<i class="fa fa-wrench"></i>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu dropdown-user">
|
||||||
|
<li><a href="#">选项1</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">选项2</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a class="close-link">
|
||||||
|
<i class="fa fa-times"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<p>通过使用 <code>.col-md-push-*</code> 和 <code>.col-md-pull-*</code> 类就可以很容易的改变列（column）的顺序。</p>
|
||||||
|
<div class="row show-grid">
|
||||||
|
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
|
||||||
|
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<th:block th:include="include :: footer" />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,118 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh">
|
||||||
|
<head>
|
||||||
|
<th:block th:include="include :: header('功能扩展')" />
|
||||||
|
<th:block th:include="include :: jasny-bootstrap-css" />
|
||||||
|
</head>
|
||||||
|
<body class="gray-bg">
|
||||||
|
<div class="wrapper wrapper-content animated fadeInRight">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>文件上传控件 <small>https://github.com/jasny/bootstrap</small></h5>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">输入组示例</label>
|
||||||
|
|
||||||
|
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
|
||||||
|
<div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
|
||||||
|
<span class="input-group-addon btn btn-white btn-file"><span class="fileinput-new">选择文件</span><span class="fileinput-exists">更改</span><input type="file"></span>
|
||||||
|
<a href="#" class="input-group-addon btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">按钮示例</label>
|
||||||
|
<br/>
|
||||||
|
<div class="fileinput fileinput-new" data-provides="fileinput">
|
||||||
|
<span class="btn btn-white btn-file"><span class="fileinput-new">选择文件</span><span class="fileinput-exists">更改</span><input type="file" name="..."></span>
|
||||||
|
<span class="fileinput-filename"></span>
|
||||||
|
<a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">×</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">图片上传示例</label>
|
||||||
|
<br/>
|
||||||
|
<div class="fileinput fileinput-new" data-provides="fileinput">
|
||||||
|
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
|
||||||
|
<div>
|
||||||
|
<span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span><input type="file"></span>
|
||||||
|
<a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">图片预览示例</label>
|
||||||
|
<br/>
|
||||||
|
<div class="fileinput fileinput-new" data-provides="fileinput">
|
||||||
|
<div class="fileinput-new thumbnail" style="width: 140px; height: 140px;">
|
||||||
|
<img th:src="@{/img/profile.jpg}">
|
||||||
|
</div>
|
||||||
|
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
|
||||||
|
<div>
|
||||||
|
<span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span><input type="file"></span>
|
||||||
|
<a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">相关参数详细信息</label>
|
||||||
|
<div><a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#jasny-bootstrap" target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#jasny-bootstrap</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>固定格式文本 <small>https://github.com/jasny/bootstrap</small></h5>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">手机号码格式</label>
|
||||||
|
<input type="text" class="form-control" data-mask="999-9999-9999" placeholder="请输入手机号码">
|
||||||
|
<span class="help-block">158-8888-88888</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">电话号码格式</label>
|
||||||
|
<input type="text" class="form-control" data-mask="9999-9999999" placeholder="请输入电话号码">
|
||||||
|
<span class="help-block">0730-8888888</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">日期格式</label>
|
||||||
|
<input type="text" class="form-control" data-mask="9999-99-99" placeholder="请输入日期格式">
|
||||||
|
<span class="help-block">yyyy-mm-dd</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">IPV4格式</label>
|
||||||
|
<input type="text" class="form-control" data-mask="999.999.999.999" placeholder="请输入IP地址">
|
||||||
|
<span class="help-block">192.168.100.200</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">税务代码格式</label>
|
||||||
|
<input type="text" class="form-control" data-mask="99-9999999" placeholder="请输入税务代码">
|
||||||
|
<span class="help-block">99-9999999</span>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">相关参数详细信息</label>
|
||||||
|
<div><a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#jasny-bootstrap" target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#jasny-bootstrap</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<th:block th:include="include :: footer" />
|
||||||
|
<th:block th:include="include :: jasny-bootstrap-js" />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,148 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh">
|
||||||
|
<head>
|
||||||
|
<th:block th:include="include :: header('下拉框')" />
|
||||||
|
<th:block th:include="include :: select2-css" />
|
||||||
|
<th:block th:include="include :: bootstrap-select-css" />
|
||||||
|
</head>
|
||||||
|
<body class="gray-bg">
|
||||||
|
<form>
|
||||||
|
<div class="wrapper wrapper-content animated fadeInRight">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>下拉框 <small>https://github.com/select2/select2</small></h5>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">单选</label>
|
||||||
|
<select class="form-control">
|
||||||
|
<option value="">--请选择开发语言--</option>
|
||||||
|
<option value="Java">Java</option>
|
||||||
|
<option value="PHP">PHP</option>
|
||||||
|
<option value=".NET">.NET</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">分组单选</label>
|
||||||
|
<select class="form-control">
|
||||||
|
<optgroup label="--请选择开发语言--">
|
||||||
|
<option value="Java">Java</option>
|
||||||
|
<option value="PHP">PHP</option>
|
||||||
|
<option value=".NET">.NET</option>
|
||||||
|
</optgroup>
|
||||||
|
<optgroup label="--请选择数据库--">
|
||||||
|
<option value="Oracle">Oracle</option>
|
||||||
|
<option value="Mysql">Mysql</option>
|
||||||
|
<option value="Sysbase">Sysbase</option>
|
||||||
|
</optgroup>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">多选</label>
|
||||||
|
<select class="form-control select2-multiple" multiple>
|
||||||
|
<option value="">请选择开发语言</option>
|
||||||
|
<option value="Java">Java</option>
|
||||||
|
<option value="PHP">PHP</option>
|
||||||
|
<option value=".NET">.NET</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">分组多选</label>
|
||||||
|
<select class="form-control select2-multiple" multiple>
|
||||||
|
<optgroup label="--请选择开发语言--">
|
||||||
|
<option value="Java">Java</option>
|
||||||
|
<option value="PHP">PHP</option>
|
||||||
|
<option value=".NET">.NET</option>
|
||||||
|
</optgroup>
|
||||||
|
<optgroup label="--请选择数据库--">
|
||||||
|
<option value="Oracle">Oracle</option>
|
||||||
|
<option value="Mysql">Mysql</option>
|
||||||
|
<option value="Sysbase">Sysbase</option>
|
||||||
|
</optgroup>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">相关参数详细信息</label>
|
||||||
|
<div><a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#select2" target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#select2</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>下拉框 <small>https://github.com/snapappointments/bootstrap-select</small></h5>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">单选</label>
|
||||||
|
<select class="form-control noselect2 selectpicker">
|
||||||
|
<option value="">--请选择开发语言--</option>
|
||||||
|
<option value="Java">Java</option>
|
||||||
|
<option value="PHP">PHP</option>
|
||||||
|
<option value=".NET">.NET</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">分组多选</label>
|
||||||
|
<select class="form-control noselect2 selectpicker">
|
||||||
|
<optgroup label="--请选择开发语言--">
|
||||||
|
<option value="Java">Java</option>
|
||||||
|
<option value="PHP">PHP</option>
|
||||||
|
<option value=".NET">.NET</option>
|
||||||
|
</optgroup>
|
||||||
|
<optgroup label="--请选择数据库--">
|
||||||
|
<option value="Oracle">Oracle</option>
|
||||||
|
<option value="Mysql">Mysql</option>
|
||||||
|
<option value="Sysbase">Sysbase</option>
|
||||||
|
</optgroup>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">多选</label>
|
||||||
|
<select class="form-control noselect2 selectpicker" data-none-selected-text="请选择开发语言" multiple>
|
||||||
|
<option value="Java">Java</option>
|
||||||
|
<option value="PHP">PHP</option>
|
||||||
|
<option value=".NET">.NET</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">分组多选</label>
|
||||||
|
<select class="form-control noselect2 selectpicker" data-none-selected-text="请选择" multiple>
|
||||||
|
<optgroup label="--请选择开发语言--">
|
||||||
|
<option value="Java">Java</option>
|
||||||
|
<option value="PHP">PHP</option>
|
||||||
|
<option value=".NET">.NET</option>
|
||||||
|
</optgroup>
|
||||||
|
<optgroup label="--请选择数据库--">
|
||||||
|
<option value="Oracle">Oracle</option>
|
||||||
|
<option value="Mysql">Mysql</option>
|
||||||
|
<option value="Sysbase">Sysbase</option>
|
||||||
|
</optgroup>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">相关参数详细信息</label>
|
||||||
|
<div><a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-select" target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-select</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<th:block th:include="include :: footer" />
|
||||||
|
<th:block th:include="include :: select2-js" />
|
||||||
|
<th:block th:include="include :: bootstrap-select-js" />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,198 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh">
|
||||||
|
<head>
|
||||||
|
<th:block th:include="include :: header('拖动排序')" />
|
||||||
|
</head>
|
||||||
|
<body class="gray-bg">
|
||||||
|
<div class="wrapper wrapper-content animated fadeInRight">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-content">
|
||||||
|
<h3>任务列表</h3>
|
||||||
|
<p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动任务面板</p>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" placeholder="添加新任务" class="input input-sm form-control">
|
||||||
|
<span class="input-group-btn">
|
||||||
|
<button type="button" class="btn btn-sm btn-white"> <i class="fa fa-plus"></i> 添加</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul class="sortable-list connectList agile-list">
|
||||||
|
<li class="warning-element">
|
||||||
|
加强过程管理，及时统计教育经费使用情况，做到底码清楚，
|
||||||
|
<div class="agile-detail">
|
||||||
|
<a href="#" class="pull-right btn btn-xs btn-white">标签</a>
|
||||||
|
<i class="fa fa-clock-o"></i> 2018.09.01
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="success-element">
|
||||||
|
支持财会人员的继续培训工作。
|
||||||
|
<div class="agile-detail">
|
||||||
|
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||||
|
<i class="fa fa-clock-o"></i> 2018.05.12
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="info-element">
|
||||||
|
协同教导处搞好助学金、减免教科书费的工作。
|
||||||
|
<div class="agile-detail">
|
||||||
|
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||||
|
<i class="fa fa-clock-o"></i> 2018.09.10
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="danger-element">
|
||||||
|
要求会计、出纳人员严格执行财务制度，遵守岗位职责，按时上报各种资料。
|
||||||
|
<div class="agile-detail">
|
||||||
|
<a href="#" class="pull-right btn btn-xs btn-primary">确定</a>
|
||||||
|
<i class="fa fa-clock-o"></i> 2018.06.10
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="warning-element">
|
||||||
|
做好职工公费医疗工作，按时发放门诊费。
|
||||||
|
<div class="agile-detail">
|
||||||
|
<a href="#" class="pull-right btn btn-xs btn-white">标签</a>
|
||||||
|
<i class="fa fa-clock-o"></i> 2018.09.09
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="warning-element">
|
||||||
|
有计划地把课本复习三至五遍。
|
||||||
|
<div class="agile-detail">
|
||||||
|
<a href="#" class="pull-right btn btn-xs btn-primary">确定</a>
|
||||||
|
<i class="fa fa-clock-o"></i> 2018.08.04
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="success-element">
|
||||||
|
看一本高质量的高中语法书
|
||||||
|
<div class="agile-detail">
|
||||||
|
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||||
|
<i class="fa fa-clock-o"></i> 2018.05.12
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="info-element">
|
||||||
|
选择一份较好的英语报纸，通过阅读提高英语学习效果。
|
||||||
|
<div class="agile-detail">
|
||||||
|
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||||
|
<i class="fa fa-clock-o"></i> 2018.09.10
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-content">
|
||||||
|
<h3>进行中</h3>
|
||||||
|
<p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动任务面板</p>
|
||||||
|
<ul class="sortable-list connectList agile-list">
|
||||||
|
<li class="success-element">
|
||||||
|
全面、较深入地掌握我们“产品”的功能、特色和优势并做到应用自如。
|
||||||
|
<div class="agile-detail">
|
||||||
|
<a href="#" class="pull-right btn btn-xs btn-white">标签</a>
|
||||||
|
<i class="fa fa-clock-o"></i> 2018.09.01
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="success-element">
|
||||||
|
根据自己以前所了解的和从其他途径搜索到的信息，录入客户资料150家。
|
||||||
|
<div class="agile-detail">
|
||||||
|
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||||
|
<i class="fa fa-clock-o"></i> 2018.05.12
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="warning-element">
|
||||||
|
锁定有意向客户20家。
|
||||||
|
<div class="agile-detail">
|
||||||
|
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||||
|
<i class="fa fa-clock-o"></i> 2018.09.10
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="warning-element">
|
||||||
|
力争完成销售指标。
|
||||||
|
<div class="agile-detail">
|
||||||
|
<a href="#" class="pull-right btn btn-xs btn-white">标签</a>
|
||||||
|
<i class="fa fa-clock-o"></i> 2018.09.09
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="info-element">
|
||||||
|
在总结和摸索中前进。
|
||||||
|
<div class="agile-detail">
|
||||||
|
<a href="#" class="pull-right btn btn-xs btn-primary">确定</a>
|
||||||
|
<i class="fa fa-clock-o"></i> 2018.08.04
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="success-element">
|
||||||
|
不断学习行业知识、产品知识，为客户带来实用介绍内容
|
||||||
|
<div class="agile-detail">
|
||||||
|
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||||
|
<i class="fa fa-clock-o"></i> 2018.05.12
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="danger-element">
|
||||||
|
先友后单：与客户发展良好友谊，转换销售员角色，处处为客户着想
|
||||||
|
<div class="agile-detail">
|
||||||
|
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||||
|
<i class="fa fa-clock-o"></i> 2018.11.04
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-content">
|
||||||
|
<h3>已完成</h3>
|
||||||
|
<p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动任务面板</p>
|
||||||
|
<ul class="sortable-list connectList agile-list">
|
||||||
|
<li class="info-element">
|
||||||
|
制定工作日程表
|
||||||
|
<div class="agile-detail">
|
||||||
|
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||||
|
<i class="fa fa-clock-o"></i> 2018.09.10
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="warning-element">
|
||||||
|
每天坚持打40个有效电话，挖掘潜在客户
|
||||||
|
<div class="agile-detail">
|
||||||
|
<a href="#" class="pull-right btn btn-xs btn-white">标签</a>
|
||||||
|
<i class="fa fa-clock-o"></i> 2018.09.09
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="warning-element">
|
||||||
|
拜访客户之前要对该客户做全面的了解(客户的潜在需求、职位、权限以及个人性格和爱好)
|
||||||
|
<div class="agile-detail">
|
||||||
|
<a href="#" class="pull-right btn btn-xs btn-white">标签</a>
|
||||||
|
<i class="fa fa-clock-o"></i> 2018.09.09
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="warning-element">
|
||||||
|
提高自己电话营销技巧，灵活专业地与客户进行电话交流
|
||||||
|
<div class="agile-detail">
|
||||||
|
<a href="#" class="pull-right btn btn-xs btn-primary">确定</a>
|
||||||
|
<i class="fa fa-clock-o"></i> 2018.08.04
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="success-element">
|
||||||
|
通过电话销售过程中了解各盛市的设备仪器使用、采购情况及相关重要追踪人
|
||||||
|
<div class="agile-detail">
|
||||||
|
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||||
|
<i class="fa fa-clock-o"></i> 2018.05.12
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<th:block th:include="include :: footer" />
|
||||||
|
<script th:src="@{/js/jquery-ui-1.10.4.min.js}"></script>
|
||||||
|
<script>
|
||||||
|
$(document).ready(function () {
|
||||||
|
$(".sortable-list").sortable({connectWith: ".connectList"}).disableSelection()
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,93 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh">
|
||||||
|
<head>
|
||||||
|
<th:block th:include="include :: header('Summernote富文本编辑器')" />
|
||||||
|
<th:block th:include="include :: summernote-css" />
|
||||||
|
</head>
|
||||||
|
<body class="gray-bg">
|
||||||
|
<div class="wrapper wrapper-content">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>Summernote 富文本编辑器</h5>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content no-padding">
|
||||||
|
<div class="summernote">
|
||||||
|
<h2>若依后台管理系统</h2>
|
||||||
|
<p>ruoyi是一个完全响应式，基于Bootstrap3.3.6最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，她提供了诸多的强大的可以重新组合的UI组件，并集成了最新的jQuery版本(v2.1.1)，当然，也集成了很多功能强大，用途广泛的就jQuery插件，她可以用于所有的Web应用程序，如<b>网站管理后台</b>，<b>网站会员中心</b>，<b>CMS</b>，<b>CRM</b>，<b>OA</b>等等，当然，您也可以对她进行深度定制，以做出更强系统。</p>
|
||||||
|
<p>
|
||||||
|
<b>当前版本：</b>v4.3.1
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span class="label label-warning">免费开源</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-content">
|
||||||
|
<h2>Summernote</h2>
|
||||||
|
<p>
|
||||||
|
Summernote是一个简单的基于Bootstrap的WYSIWYG富文本编辑器
|
||||||
|
</p>
|
||||||
|
<div class="alert alert-warning"> 官方文档请参考：
|
||||||
|
<a href="https://github.com/summernote/summernote">https://github.com/summernote/summernote</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>编辑/保存为html代码示例</h5>
|
||||||
|
<button id="edit" class="btn btn-primary btn-xs m-l-sm" onclick="edit()" type="button">编辑</button>
|
||||||
|
<button id="save" class="btn btn-primary btn-xs" onclick="save()" type="button">保存</button>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content" id="eg">
|
||||||
|
|
||||||
|
<div class="click2edit wrapper">
|
||||||
|
<h3>你好，若依 </h3>
|
||||||
|
<p>H+是一个完全响应式，基于Bootstrap3.3.6最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，她提供了诸多的强大的可以重新组合的UI组件，并集成了最新的jQuery版本(v2.1.1)，当然，也集成了很多功能强大，用途广泛的就jQuery插件，她可以用于所有的Web应用程序，如<b>网站管理后台</b>，<b>网站会员中心</b>，<b>CMS</b>，<b>CRM</b>，<b>OA</b>等等，当然，您也可以对她进行深度定制，以做出更强系统。</p>
|
||||||
|
<p>
|
||||||
|
<b>当前版本：</b>v4.3.1
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span class="label label-warning">开源免费</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<th:block th:include="include :: footer" />
|
||||||
|
<th:block th:include="include :: summernote-js" />
|
||||||
|
<script>
|
||||||
|
$(document).ready(function () {
|
||||||
|
$('.summernote').summernote({
|
||||||
|
lang: 'zh-CN'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
var edit = function () {
|
||||||
|
$("#eg").addClass("no-padding");
|
||||||
|
$('.click2edit').summernote({
|
||||||
|
lang: 'zh-CN',
|
||||||
|
focus: true
|
||||||
|
});
|
||||||
|
};
|
||||||
|
var save = function () {
|
||||||
|
$("#eg").removeClass("no-padding");
|
||||||
|
var aHTML = $('.click2edit').summernote('code');
|
||||||
|
$('.click2edit').summernote('destroy');
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,353 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh">
|
||||||
|
<head>
|
||||||
|
<th:block th:include="include :: header('选项卡 & 面板')" />
|
||||||
|
</head>
|
||||||
|
<body class="gray-bg">
|
||||||
|
<div class="wrapper wrapper-content animated fadeIn">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>基本面板 <small class="m-l-sm">这是一个自定义面板</small></h5>
|
||||||
|
<div class="ibox-tools">
|
||||||
|
<a class="collapse-link">
|
||||||
|
<i class="fa fa-chevron-up"></i>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||||
|
<i class="fa fa-wrench"></i>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu dropdown-user">
|
||||||
|
<li><a href="#">选项1</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">选项2</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a class="close-link">
|
||||||
|
<i class="fa fa-times"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<h2>
|
||||||
|
Bootstrap<br/>
|
||||||
|
</h2>
|
||||||
|
<p>
|
||||||
|
简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="tabs-container">
|
||||||
|
<ul class="nav nav-tabs">
|
||||||
|
<li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true"> 第一个选项卡</a>
|
||||||
|
</li>
|
||||||
|
<li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">第二个选项卡</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="tab-content">
|
||||||
|
<div id="tab-1" class="tab-pane active">
|
||||||
|
<div class="panel-body">
|
||||||
|
<strong>HTML5 文档类型</strong>
|
||||||
|
<p>Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="tab-2" class="tab-pane">
|
||||||
|
<div class="panel-body">
|
||||||
|
<strong>移动设备优先</strong>
|
||||||
|
<p>在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="panel blank-panel">
|
||||||
|
|
||||||
|
<div class="panel-heading">
|
||||||
|
<div class="panel-title m-b-md">
|
||||||
|
<h4>图标选项卡</h4>
|
||||||
|
</div>
|
||||||
|
<div class="panel-options">
|
||||||
|
|
||||||
|
<ul class="nav nav-tabs">
|
||||||
|
<li class="active"><a data-toggle="tab" href="#tab-4"><i class="fa fa-laptop"></i></a>
|
||||||
|
</li>
|
||||||
|
<li class=""><a data-toggle="tab" href="#tab-5"><i class="fa fa-desktop"></i></a>
|
||||||
|
</li>
|
||||||
|
<li class=""><a data-toggle="tab" href="#tab-6"><i class="fa fa-signal"></i></a>
|
||||||
|
</li>
|
||||||
|
<li class=""><a data-toggle="tab" href="#tab-7"><i class="fa fa-bar-chart-o"></i></a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-body">
|
||||||
|
<div class="tab-content">
|
||||||
|
<div id="tab-4" class="tab-pane active">
|
||||||
|
<strong>排版与链接</strong>
|
||||||
|
|
||||||
|
<p>Bootstrap 排版、链接样式设置了基本的全局样式。分别是： 为 body 元素设置 background-color: #fff; 使用 @font-family-base、@font-size-base 和 @line-height-base a变量作为排版的基本参数 为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线 这些样式都能在 scaffolding.less 文件中找到对应的源码。</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="tab-5" class="tab-pane">
|
||||||
|
<strong>Normalize.css</strong>
|
||||||
|
|
||||||
|
<p>为了增强跨浏览器表现的一致性，我们使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。</p>
|
||||||
|
</div>
|
||||||
|
<div id="tab-6" class="tab-pane">
|
||||||
|
<strong>布局容器</strong>
|
||||||
|
|
||||||
|
<p>Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。</p>
|
||||||
|
</div>
|
||||||
|
<div id="tab-7" class="tab-pane">
|
||||||
|
<strong>栅格系统</strong>
|
||||||
|
|
||||||
|
<p>Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row m-b-lg">
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="tabs-container">
|
||||||
|
|
||||||
|
<div class="tabs-left">
|
||||||
|
<ul class="nav nav-tabs">
|
||||||
|
<li class="active"><a data-toggle="tab" href="#tab-8"> 第一个选项卡</a>
|
||||||
|
</li>
|
||||||
|
<li class=""><a data-toggle="tab" href="#tab-9"> 第二个选项卡</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="tab-content ">
|
||||||
|
<div id="tab-8" class="tab-pane active">
|
||||||
|
<div class="panel-body">
|
||||||
|
<strong>排版与链接</strong>
|
||||||
|
|
||||||
|
<p>Bootstrap 排版、链接样式设置了基本的全局样式。分别是： 为 body 元素设置 background-color: #fff; 使用 @font-family-base、@font-size-base 和 @line-height-base a变量作为排版的基本参数 为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线 这些样式都能在 scaffolding.less 文件中找到对应的源码。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="tab-9" class="tab-pane">
|
||||||
|
<div class="panel-body">
|
||||||
|
<strong>栅格系统</strong>
|
||||||
|
|
||||||
|
<p>Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="tabs-container">
|
||||||
|
<div class="tabs-right">
|
||||||
|
<ul class="nav nav-tabs">
|
||||||
|
<li class="active"><a data-toggle="tab" href="#tab-10">第一个选项卡</a>
|
||||||
|
</li>
|
||||||
|
<li class=""><a data-toggle="tab" href="#tab-11"> 第二个选项卡</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="tab-content ">
|
||||||
|
<div id="tab-10" class="tab-pane active">
|
||||||
|
<div class="panel-body">
|
||||||
|
<strong>排版与链接</strong>
|
||||||
|
|
||||||
|
<p>Bootstrap 排版、链接样式设置了基本的全局样式。分别是： 为 body 元素设置 background-color: #fff; 使用 @font-family-base、@font-size-base 和 @line-height-base a变量作为排版的基本参数 为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线 这些样式都能在 scaffolding.less 文件中找到对应的源码。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="tab-11" class="tab-pane">
|
||||||
|
<div class="panel-body">
|
||||||
|
<strong>栅格系统</strong>
|
||||||
|
|
||||||
|
<p>Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>Bootstrap面板 <small>自定义背景</small></h5>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">
|
||||||
|
默认面板
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<p>通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的标签，添加一个预定义样式的标题。 为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="panel panel-primary">
|
||||||
|
<div class="panel-heading">
|
||||||
|
主要
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<p>通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的标签，添加一个预定义样式的标题。 为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="panel panel-success">
|
||||||
|
<div class="panel-heading">
|
||||||
|
成功
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<p>通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的标签，添加一个预定义样式的标题。 为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="panel panel-info">
|
||||||
|
<div class="panel-heading">
|
||||||
|
<i class="fa fa-info-circle"></i> 信息
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<p>通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的标签，添加一个预定义样式的标题。 为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="panel panel-warning">
|
||||||
|
<div class="panel-heading">
|
||||||
|
<i class="fa fa-warning"></i> 警告
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<p>通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的标签，添加一个预定义样式的标题。 为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="panel panel-danger">
|
||||||
|
<div class="panel-heading">
|
||||||
|
危险
|
||||||
|
</div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<p>通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的标签，添加一个预定义样式的标题。 为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。</p>
|
||||||
|
</div>
|
||||||
|
<div class="panel-footer">
|
||||||
|
面板Footer
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>折叠面板</h5>
|
||||||
|
<div class="ibox-tools">
|
||||||
|
<a class="collapse-link">
|
||||||
|
<i class="fa fa-chevron-up"></i>
|
||||||
|
</a>
|
||||||
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||||||
|
<i class="fa fa-wrench"></i>
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu dropdown-user">
|
||||||
|
<li><a href="#">选项1</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="#">选项2</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a class="close-link">
|
||||||
|
<i class="fa fa-times"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<div class="panel-body">
|
||||||
|
<div class="panel-group" id="accordion">
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">
|
||||||
|
<h5 class="panel-title">
|
||||||
|
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">标题 #1</a>
|
||||||
|
</h5>
|
||||||
|
</div>
|
||||||
|
<div id="collapseOne" class="panel-collapse collapse in">
|
||||||
|
<div class="panel-body">
|
||||||
|
Bootstrap相关优质项目推荐 这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">
|
||||||
|
<h4 class="panel-title">
|
||||||
|
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">标题 #2</a>
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
<div id="collapseTwo" class="panel-collapse collapse">
|
||||||
|
<div class="panel-body">
|
||||||
|
Bootstrap相关优质项目推荐 这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="panel panel-default">
|
||||||
|
<div class="panel-heading">
|
||||||
|
<h4 class="panel-title">
|
||||||
|
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">标题 #3</a>
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
<div id="collapseThree" class="panel-collapse collapse">
|
||||||
|
<div class="panel-body">
|
||||||
|
Bootstrap相关优质项目推荐 这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="jumbotron">
|
||||||
|
<h1>超大屏幕</h1>
|
||||||
|
<p>Bootstrap 支持的另一个特性，超大屏幕（Jumbotron）。顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。使用超大屏幕（Jumbotron）的步骤如下：</p>
|
||||||
|
<div class="alert alert-warning">
|
||||||
|
<ol>
|
||||||
|
<li>创建一个带有 class .jumbotron. 的容器</li>
|
||||||
|
<li>除了更大的 <h1>，字体粗细 font-weight 被减为 200px。</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p><a role="button" class="btn btn-primary btn-lg">了解更多</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<th:block th:include="include :: footer" />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,113 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>时间轴</title>
|
||||||
|
<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
|
||||||
|
<link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
|
||||||
|
<link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
|
||||||
|
<link th:href="@{/css/style.css}" rel="stylesheet"/>
|
||||||
|
</head>
|
||||||
|
<body class="gray-bg">
|
||||||
|
<div class="row animated fadeInRight">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="text-center float-e-margins p-md">
|
||||||
|
<span>打开/关闭颜色/背景或方向版本: </span>
|
||||||
|
<a href="#" class="btn btn-xs btn-primary" id="lightVersion">轻型版本 </a>
|
||||||
|
<a href="#" class="btn btn-xs btn-primary" id="darkVersion">黑色版本 </a>
|
||||||
|
</div>
|
||||||
|
<div id="ibox-content">
|
||||||
|
<div id="vertical-timeline" class="vertical-container light-timeline">
|
||||||
|
<div class="vertical-timeline-block">
|
||||||
|
<div class="vertical-timeline-icon navy-bg">
|
||||||
|
<i class="fa fa-briefcase"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="vertical-timeline-content">
|
||||||
|
<h2>会议</h2>
|
||||||
|
<p>上一年的销售业绩发布会。总结产品营销和销售趋势及销售的现状。
|
||||||
|
</p>
|
||||||
|
<a href="#" class="btn btn-sm btn-primary"> 更多信息</a>
|
||||||
|
<span class="vertical-date">
|
||||||
|
今天 <br>
|
||||||
|
<small>2月3日</small>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="vertical-timeline-block">
|
||||||
|
<div class="vertical-timeline-icon blue-bg">
|
||||||
|
<i class="fa fa-file-text"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="vertical-timeline-content">
|
||||||
|
<h2>给张三发送文档</h2>
|
||||||
|
<p>发送上年度《销售业绩报告》</p>
|
||||||
|
<a href="#" class="btn btn-sm btn-success"> 下载文档 </a>
|
||||||
|
<span class="vertical-date">
|
||||||
|
今天 <br>
|
||||||
|
<small>2月3日</small>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="vertical-timeline-block">
|
||||||
|
<div class="vertical-timeline-icon lazur-bg">
|
||||||
|
<i class="fa fa-coffee"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="vertical-timeline-content">
|
||||||
|
<h2>喝咖啡休息</h2>
|
||||||
|
<p>喝咖啡啦，啦啦啦~~</p>
|
||||||
|
<a href="#" class="btn btn-sm btn-info">更多</a>
|
||||||
|
<span class="vertical-date"> 昨天 <br><small>2月2日</small></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="vertical-timeline-block">
|
||||||
|
<div class="vertical-timeline-icon yellow-bg">
|
||||||
|
<i class="fa fa-phone"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="vertical-timeline-content">
|
||||||
|
<h2>给李四打电话</h2>
|
||||||
|
<p>给李四打电话分配本月工作任务</p>
|
||||||
|
<span class="vertical-date">昨天 <br><small>2月2日</small></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="vertical-timeline-block">
|
||||||
|
<div class="vertical-timeline-icon lazur-bg">
|
||||||
|
<i class="fa fa-user-md"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="vertical-timeline-content">
|
||||||
|
<h2>公司年会</h2>
|
||||||
|
<p>发年终奖啦，啦啦啦~~</p>
|
||||||
|
<span class="vertical-date">前天 <br><small>2月1日</small></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<th:block th:include="include :: footer" />
|
||||||
|
<script>
|
||||||
|
$(document).ready(function(){
|
||||||
|
$('#lightVersion').click(function(event) {
|
||||||
|
event.preventDefault()
|
||||||
|
$('#ibox-content').removeClass('ibox-content');
|
||||||
|
$('#vertical-timeline').removeClass('dark-timeline');
|
||||||
|
$('#vertical-timeline').addClass('light-timeline');
|
||||||
|
});
|
||||||
|
$('#darkVersion').click(function(event) {
|
||||||
|
event.preventDefault()
|
||||||
|
$('#ibox-content').addClass('ibox-content');
|
||||||
|
$('#vertical-timeline').removeClass('light-timeline');
|
||||||
|
$('#vertical-timeline').addClass('dark-timeline');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,55 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh">
|
||||||
|
<head>
|
||||||
|
<th:block th:include="include :: header('文件上传')" />
|
||||||
|
<th:block th:include="include :: bootstrap-fileinput-css" />
|
||||||
|
</head>
|
||||||
|
<body class="gray-bg">
|
||||||
|
<div class="wrapper wrapper-content animated fadeInRight">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>文件上传控件 <small>https://github.com/kartik-v/bootstrap-fileinput</small></h5>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">简单示例</label>
|
||||||
|
<div class="file-loading">
|
||||||
|
<input class="file" type="file" multiple data-min-file-count="1" data-theme="fas">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">多文件上传</label>
|
||||||
|
<div class="file-loading">
|
||||||
|
<input id="fileinput-demo-1" type="file" multiple>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="font-noraml">相关参数详细信息</label>
|
||||||
|
<div><a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-fileinput" target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-fileinput</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<th:block th:include="include :: footer" />
|
||||||
|
<th:block th:include="include :: bootstrap-fileinput-js" />
|
||||||
|
<script type="text/javascript">
|
||||||
|
$(document).ready(function () {
|
||||||
|
$("#fileinput-demo-1").fileinput({
|
||||||
|
'theme': 'explorer-fas',
|
||||||
|
'uploadUrl': '#',
|
||||||
|
overwriteInitial: false,
|
||||||
|
initialPreviewAsData: true,
|
||||||
|
initialPreview: [
|
||||||
|
"/img/profile.jpg"
|
||||||
|
]
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,193 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh">
|
||||||
|
<head>
|
||||||
|
<th:block th:include="include :: header('表单校验')" />
|
||||||
|
</head>
|
||||||
|
<body class="gray-bg">
|
||||||
|
<div class="wrapper wrapper-content animated fadeInRight">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>jQuery Validate 简介</h5>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<p>jquery.validate.js 是一款优秀的jQuery表单验证插件。它具有如下特点：</p>
|
||||||
|
<ul>
|
||||||
|
<li>安装简单</li>
|
||||||
|
<li>内置超过20种数据验证方法</li>
|
||||||
|
<li>直列错误提示信息</li>
|
||||||
|
<li>可扩展的数据验证方法</li>
|
||||||
|
<li>使用内置的元数据或插件选项来指定您的验证规则</li>
|
||||||
|
<li>优雅的交互设计</li>
|
||||||
|
</ul>
|
||||||
|
<p>官网：<a href="http://jqueryvalidation.org/" target="_blank">http://jqueryvalidation.org/</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>简单示例</h5>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<form class="form-horizontal m-t" id="commentForm">
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-3 control-label">姓名：</label>
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<input id="cname" name="name" minlength="2" type="text" class="form-control" required>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-3 control-label">E-mail：</label>
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<input id="cemail" type="email" class="form-control" name="email" required>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-3 control-label">网站：</label>
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<input id="curl" type="url" class="form-control" name="url">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-3 control-label">说明：</label>
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<textarea id="ccomment" name="comment" class="form-control" required></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="col-sm-4 col-sm-offset-3">
|
||||||
|
<button class="btn btn-primary" type="submit">提交</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-content">
|
||||||
|
<p class="m-t">更多示例请访问官方示例页面：<a href="http://jqueryvalidation.org/files/demo/" target="_blank">查看</a>
|
||||||
|
</p>
|
||||||
|
<p>中文API可参考：<a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#jquery-validate" target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#jquery-validate</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>完整验证表单</h5>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<form class="form-horizontal m-t" id="signupForm">
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-3 control-label">姓氏：</label>
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<input id="firstname" name="firstname" class="form-control" type="text">
|
||||||
|
<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 这里写点提示的内容</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-3 control-label">名字：</label>
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<input id="lastname" name="lastname" class="form-control" type="text" required>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-3 control-label">用户名：</label>
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<input id="username" name="username" class="form-control" type="text" required>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-3 control-label">密码：</label>
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<input id="password" name="password" class="form-control" type="password">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-3 control-label">确认密码：</label>
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<input id="confirm_password" name="confirm_password" class="form-control" type="password">
|
||||||
|
<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 请再次输入您的密码</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="col-sm-3 control-label">E-mail：</label>
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<input id="email" name="email" class="form-control" type="email">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="col-sm-8 col-sm-offset-3">
|
||||||
|
<button class="btn btn-primary" type="submit">提交</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<th:block th:include="include :: footer" />
|
||||||
|
<script type="text/javascript">
|
||||||
|
$(function(){
|
||||||
|
$("#commentForm").validate();
|
||||||
|
|
||||||
|
var icon = "<i class='fa fa-times-circle'></i> ";
|
||||||
|
$("#signupForm").validate({
|
||||||
|
rules: {
|
||||||
|
firstname: "required",
|
||||||
|
lastname: "required",
|
||||||
|
username: {
|
||||||
|
required: true,
|
||||||
|
minlength: 2
|
||||||
|
},
|
||||||
|
password: {
|
||||||
|
required: true,
|
||||||
|
minlength: 5
|
||||||
|
},
|
||||||
|
confirm_password: {
|
||||||
|
required: true,
|
||||||
|
minlength: 5,
|
||||||
|
equalTo: "#password"
|
||||||
|
},
|
||||||
|
email: {
|
||||||
|
required: true,
|
||||||
|
email: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
messages: {
|
||||||
|
firstname: icon + "请输入你的姓",
|
||||||
|
lastname: icon + "请输入您的名字",
|
||||||
|
username: {
|
||||||
|
required: icon + "请输入您的用户名",
|
||||||
|
minlength: icon + "用户名必须两个字符以上"
|
||||||
|
},
|
||||||
|
password: {
|
||||||
|
required: icon + "请输入您的密码",
|
||||||
|
minlength: icon + "密码必须5个字符以上"
|
||||||
|
},
|
||||||
|
confirm_password: {
|
||||||
|
required: icon + "请再次输入密码",
|
||||||
|
minlength: icon + "密码必须5个字符以上",
|
||||||
|
equalTo: icon + "两次输入的密码不一致"
|
||||||
|
},
|
||||||
|
email: icon + "请输入您的E-mail"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#username").focus(function () {
|
||||||
|
var firstname = $("#firstname").val();
|
||||||
|
var lastname = $("#lastname").val();
|
||||||
|
if (firstname && lastname && !this.value) {
|
||||||
|
this.value = firstname + "." + lastname;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,192 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh">
|
||||||
|
<head>
|
||||||
|
<th:block th:include="include :: header('基本表单')" />
|
||||||
|
<th:block th:include="include :: jquery-steps-css" />
|
||||||
|
</head>
|
||||||
|
<body class="gray-bg">
|
||||||
|
<div class="wrapper wrapper-content animated fadeInRight">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-5">
|
||||||
|
<div class="jumbotron">
|
||||||
|
<h1>表单向导</h1>
|
||||||
|
<p>Smart UI 部件允许您快速创建表单向导接口。</p>
|
||||||
|
<p><a href="https://github.com/rstaib/jquery-steps" target="_blank" class="btn btn-primary btn-lg" role="button">了解 jQuery Steps</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-7">
|
||||||
|
<div class="ibox float-e-margins">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>基础表单向导</h5>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<p>
|
||||||
|
这是一个简单的表单向导示例
|
||||||
|
</p>
|
||||||
|
<div id="wizard">
|
||||||
|
<h1>第一步</h1>
|
||||||
|
<div class="step-content">
|
||||||
|
<div class="text-center m-t-md">
|
||||||
|
<h2>第一步</h2>
|
||||||
|
<p>
|
||||||
|
这是第一步的内容
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1>第二步</h1>
|
||||||
|
<div class="step-content">
|
||||||
|
<div class="text-center m-t-md">
|
||||||
|
<h2>第二步</h2>
|
||||||
|
<p>
|
||||||
|
这是第二步的内容
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1>第三步</h1>
|
||||||
|
<div class="step-content">
|
||||||
|
<div class="text-center m-t-md">
|
||||||
|
<h2>第三步</h2>
|
||||||
|
<p>
|
||||||
|
这是第三步的内容
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<div class="ibox">
|
||||||
|
<div class="ibox-title">
|
||||||
|
<h5>带验证的表单向导</h5>
|
||||||
|
</div>
|
||||||
|
<div class="ibox-content">
|
||||||
|
<h2>
|
||||||
|
带验证的表单向导
|
||||||
|
</h2>
|
||||||
|
<p>
|
||||||
|
下面这个示例展示了如何在表单向导中使用 jQuery Validation 插件
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<form id="form" action="" class="wizard-big">
|
||||||
|
<h1>账户</h1>
|
||||||
|
<fieldset>
|
||||||
|
<h2>账户信息</h2>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-8">
|
||||||
|
<div class="form-group">
|
||||||
|
<label>用户名 *</label>
|
||||||
|
<input id="userName" name="userName" type="text" class="form-control required">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>密码 *</label>
|
||||||
|
<input id="password" name="password" type="text" class="form-control required">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>确认密码 *</label>
|
||||||
|
<input id="confirm" name="confirm" type="text" class="form-control required">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<div class="text-center">
|
||||||
|
<div style="margin-top: 20px">
|
||||||
|
<i class="fa fa-sign-in" style="font-size: 180px;color: #e5e5e5 "></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</fieldset>
|
||||||
|
<h1>个人资料</h1>
|
||||||
|
<fieldset>
|
||||||
|
<h2>个人资料信息</h2>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="form-group">
|
||||||
|
<label>姓名 *</label>
|
||||||
|
<input id="name" name="name" type="text" class="form-control required">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Email *</label>
|
||||||
|
<input id="email" name="email" type="text" class="form-control required email">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>地址 *</label>
|
||||||
|
<input id="address" name="address" type="text" class="form-control">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<h1>警告</h1>
|
||||||
|
<fieldset>
|
||||||
|
<div class="text-center" style="margin-top: 120px">
|
||||||
|
<h2>你是火星人 :-)</h2>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<h1>完成</h1>
|
||||||
|
<fieldset>
|
||||||
|
<h2>条款</h2>
|
||||||
|
<input id="acceptTerms" name="acceptTerms" type="checkbox" class="required">
|
||||||
|
<label for="acceptTerms">我同意注册条款</label>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<th:block th:include="include :: footer" />
|
||||||
|
<th:block th:include="include :: jquery-steps-js" />
|
||||||
|
<script>
|
||||||
|
$(document).ready(function () {
|
||||||
|
$("#wizard").steps();
|
||||||
|
$("#form").steps({
|
||||||
|
bodyTag: "fieldset", onStepChanging: function (event, currentIndex, newIndex) {
|
||||||
|
if (currentIndex > newIndex) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
if (newIndex === 3 && Number($("#age").val()) < 18) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
var form = $(this);
|
||||||
|
if (currentIndex < newIndex) {
|
||||||
|
$(".body:eq(" + newIndex + ") label.error", form).remove();
|
||||||
|
$(".body:eq(" + newIndex + ") .error", form).removeClass("error")
|
||||||
|
}
|
||||||
|
form.validate().settings.ignore = ":disabled,:hidden";
|
||||||
|
return form.valid()
|
||||||
|
}, onStepChanged: function (event, currentIndex, priorIndex) {
|
||||||
|
if (currentIndex === 2 && Number($("#age").val()) >= 18) {
|
||||||
|
$(this).steps("next")
|
||||||
|
}
|
||||||
|
if (currentIndex === 2 && priorIndex === 3) {
|
||||||
|
$(this).steps("previous")
|
||||||
|
}
|
||||||
|
}, onFinishing: function (event, currentIndex) {
|
||||||
|
var form = $(this);
|
||||||
|
form.validate().settings.ignore = ":disabled";
|
||||||
|
return form.valid()
|
||||||
|
}, onFinished: function (event, currentIndex) {
|
||||||
|
var form = $(this);
|
||||||
|
form.submit()
|
||||||
|
}
|
||||||
|
}).validate({
|
||||||
|
errorPlacement: function (error, element) {
|
||||||
|
element.before(error)
|
||||||
|
}, rules: {confirm: {equalTo: "#password"}}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue