html时间选择器时光轴,jQuery简易时光轴实现方法示例
本文实例讲述了jQuery简易时光轴实现方法。分享给大家供大家参考,具体如下:
timeLine
body{
margin: 0;
padding: 0;
background: #e8ffe8;
}
#head, #content, #footer{
width: 1000px;
margin: 0 auto;
}
#head{
text-align: center;
height: 100px;
line-height: 100px;
}
#footer{
clear: both;
text-align: center;
height: 30px;
line-height: 30px;
}
/*-----大标题-----*/
.bigElement{
clear: both;
position: relative;
}
.bigTitle{
font-size: 16px;
font-weight: bold;
height: 70px;
line-height: 70px;
background: #e8ffe8;
color: #635d5a;
}
.bigAction, .bigInfo{
float: left;
}
.bigAction{
border-right: 3px solid #635d5a;
text-align: right;
width: 220px;
}
.bigButtonSeeMore{
float: right;
width: 70px;
height: 70px;
text-align: center;
}
.bigButtonSeeMore > a{
text-decoration: none;
display: block;
color: #635d5a;
outline: none;
blr: expression(this.onFocus=this.blur());
}
.bigButtonSeeMore > a:hover{
color: #8cdbff;
}
.bigContent{
clear: both;
}
/*-----大标题end-----*/
/*-----小标题-----*/
.smallElement{
clear: both;
position: relative;
height: auto;
font-size: 16px;
background: #e8ffe8;
color: #635d5a;
}
.smallTitle{
text-align: right;
width: 220px;
}
.smallTitle, .smallContent{
float: left;
}
.smallContent{
border-left: 3px solid #635d5a;
}
.smallInfo{
margin-top: 20px;
text-indent: 40px;
}
/*-----小标题end-----*/
/*-----三角形-----*/
.bigTitleTrifonIconR{
border-color: #e8ffe8 #e8ffe8 #e8ffe8 #635d5a;
border-style: solid;
border-width: 7px;
width: 0;
height: 0;
font-size: 0;
position: absolute;
top: 28px;
left: 223px;
}
.smallTitleTrifonIconL{
border-color: #e8ffe8 #635d5a #e8ffe8 #e8ffe8;
border-style: solid;
border-width: 6px;
width: 0;
height: 0;
font-size: 0;
position: absolute;
top: 23px;
left: 208px;
}
/*模板*/
.hide{
display: none;
}
/*查看更多*/
.showMore{
clear: both;
text-align: center;
height: 70px;
line-height: 70px;
}
.showMore:hover{
cursor: pointer;
background: #FFEFDB;
color: #8cdbff;
}
订单小助手:
{smallTime}
{smallAction}
var index = 0;
$(function(){
hqOrderNodeCreate();//总部下单
})
//总部下单
function hqOrderNodeCreate(){
var bigTitleData = {
bigAction: '总部下单',
bigInfo: ''
};
createBigTitle(bigTitleData, index);
}
//基地生产
function baseOrderNodeCreate(){
var bigTitleData = {
bigAction: '基地生产',
bigInfo: ''
};
createBigTitle(bigTitleData, index);
}
//仓库库存
function stockNodeCreate(){
var bigTitleData = {
bigAction: '仓库库存',
bigInfo: ''
};
createBigTitle(bigTitleData, index);
}
//发货
function delNodeCreate(){
var bigTitleData = {
bigAction: '发货',
bigInfo: ''
};
createBigTitle(bigTitleData, index);
}
//结算
function setNodeCreate(){
var bigTitleData = {
bigAction: '结算',
bigInfo: ''
};
createBigTitle(bigTitleData, index);
}
//生成大标题,一次生成一个
function createBigTitle(bigTitleData, index){
//生成大标题
$('.timeLine').append($('#bigTitleTpl').html()
.replace('{bigAction}', bigTitleData.bigAction)
.replace('{bigInfo}', bigTitleData.bigInfo)
);
//生成大标题下对应的内容
var bigContentData = [{
smallTime: '2010.10.11',
smallAction: '录单 ' + index,
smallInfo: '操作时间: 10:30:55'
},{
smallTime: '2010.10.15',
smallAction: '审核 ' + index,
smallInfo: '操作时间: 10:10:55'
},{
smallTime: '2010.10.15',
smallAction: '分发 ' + index,
smallInfo: '操作时间: 10:10:55'
}];
var bigContentTplStr = $('#bigContentTpl').html();
var str = '';
for(var i=0; i< bigContentData.length; i++){
str += bigContentTplStr.replace('{smallTime}', bigContentData[i].smallTime)
.replace('{smallAction}', bigContentData[i].smallAction)
.replace('{smallInfo}', bigContentData[i].smallInfo);
}
$('.bigContent:eq(' + index + ')').html(str).hide().slideDown(500);
}
//查看更多, 每次点击生成一个新的节点
$('.showMore').on('click', function(){
if($(this).text() === '查看更多'){
if(index === 0){
index++;
baseOrderNodeCreate();//基地生产
}
else if(index === 1){
index++;
stockNodeCreate();//仓库库存
}
else if(index === 2){
index++;
delNodeCreate();//发货
}
else if(index === 3){
index++;
setNodeCreate();//结算
$(this).text(' →_→ 没有记录了');
}
}
})
// + - 按钮 收缩效果
$(document).on('click', '.bigButtonSeeMore', function(){
var clickObj = $(this);
var bigContentObj = clickObj.parent().next().next();
if(clickObj.text() === '+'){
bigContentObj.slideDown(500, function(){
clickObj.html('-');//切换图标
});
}
else if(clickObj.text() === '-'){
bigContentObj.slideUp(500, function(){
clickObj.html('+');
});
}
})
希望本文所述对大家jQuery程序设计有所帮助。
html时间选择器时光轴,jQuery简易时光轴实现方法示例相关推荐
- 微信小程序-日期时间选择器
我在官方表单组件的基础上改出了几种比较常用的日期(时间)选择器,为了更清晰,我没给任何样式,wxss可根据个人喜好添加. 一.picker-view (嵌入页面的滚动选择器) 注意:其中只可放置组件, ...
- datetimepicker 默认时间_Django项目中如何使用日期时间选择器DateTimePicker
如果你的模型中含有datetime类型的字段,表单中需要用户输入日期和时间,那么你如何保证不同用户输入的时间都遵循一定的格式(DD/MM/YYYY 或者YYYY-MM-DD)是个必须要考虑的问题.一个 ...
- php中日期选择代码,实现JS日期时间选择器
这次给大家带来实现JS日期时间选择器,实现JS日期时间选择器的注意事项有哪些,下面就是实战案例,一起来看一下. flatpickr 是一个轻量级.注重精益.由 UX 驱动和可扩展的 JavaScrip ...
- flatpickr功能强大的日期时间选择器插件
flatpickr日期时间选择器支持移动手机,提供多种内置的主题效果,并且提供对中文的支持.它的特点还有: 使用SVG作为界面的图标. 兼容jQuery. 支持对各种日期格式的解析. 轻量级,高性能, ...
- html4 form日期,bootstrap4日期时间选择器插件
这是一款bootstrap4日期时间选择器插件.该bootstrap4日期时间选择器插件提供大量配置参数,可以基于bootstrap4制作出简单实用的日期选择器效果.它的特点还有: 支持语言国际化和t ...
- 【08】jQuery:01-jQuery介绍、jQuery基本使用、jQuery选择器、jQuery样式操作、jQuery效果、jQuery入口函数、jQuery对象
文章目录 day01 - jQuery 1.1. jQuery 介绍 1.1.1 JavaScript 库 1.1.2 jQuery的概念 1.1.3 jQuery的优点 1.2. jQuery 的基 ...
- 使用layui做数据表格使用下拉菜单并实现删除功能和时间选择器
一.再layui官网上查看数据表格的使用方式 查看代码实例不使用 toolbar工具栏,分页功能之类的就不在创建渲染实例的声明 二.根据你要完成表格设计稿完成数据表格中使用下拉菜单和时间选择器 以图 ...
- 时间选择器(timepicker)
可以使用Slider拖动选择,也可以使用timespinner改变时间,或者手工填写. 自动判断位置 效果: 源码: <!DOCTYPE html> <html xmlns=&quo ...
- layui时间选择器选择周和季度
layui时间选择器选择周和季度 最近一个后台管理页面数据查询时间间隔要有:日,周,月,季度,年:UI组件我们用的layui,官方dome只有日月年(直接去ctrl+c ctrl+v就好了,在这就不多 ...
最新文章
- catia怎么创建约束快捷键_答疑 | CATIA结构树无法显示怎么办?
- 它,是一部全网最全的JDK发展历史轨迹图...
- 解决Linux环境下Tomcat启动卡住问题
- web前端技巧-ES6新特性与重点知识汇总(一)
- golang 防知乎 中文验证码 源码
- spring容器bean的作用域 spring容器是否是单例的一些问题
- 为C++程序添加文件保存加载功能
- 安卓案例:联选系部与专业
- ICPC China Nanchang National Invitational -- D. Match Stick Game(dp)
- chrome浏览器关闭百度热搜——AdBlock插件
- 信道估计matlab代码
- 总裁演说思维语言沟通学习心得有哪些
- 最全面贴片电阻知识,封装、尺寸、最大承受功率及选型统统包括-电子技术方案|电路图讲解
- python面试题 网络编程和并发(34道题)
- scipy.statis统计学的常用Python包
- 幸福婚姻和睦家庭秘籍---包容与感恩
- 段码液晶屏学习应用笔谈
- PHP学习文档——基础篇
- python 卡片概念学习
- IOS 应用内打开三方地图app直接导航(高德坐标)