1.アコーディオン
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul {
list-style: none
}
* {
margin: 0;
padding: 0;
}
div {
position: relative;
width: 1200px;
height: 400px;
margin: 50px auto;
border: 1px solid red;
overflow: hidden;
}
div li {
width: 1200px;
height: 400px;
/*float: left;*/
position: absolute;
}
div ul {
width: 1200px;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="../jquery-1.12.4.min.js"></script>
<script>
/*
功能分析：
- 事件： mouseover() mouseout()
- 结构的初始设置
- 设置默认背景图
- 设置初始的left值：以240为间隔
- 移入功能
- 根据当前元素的索引分为前后两组运动
- 由于修改的是left，需要使用animate()
- 第一组
- 当前元素和前面的元素，索引小于等于当前元素索引
- 第二组
- 后续元素，索引大于当前元素索引
- 移出功能
- 设置给大盒子
- 设置每个元素的left还原为240的间隔即可
小结：
- 之前说过设置操作可以进行隐式迭代
- 有时候我们虽然进行设置操作，但是可能不想使用隐式迭代
- 例如要设置的样式值不同时、要设置的运动值不同时
*/
$(function () {
// 实现：
var $box = $('#box');
var $lis = $('li');
// 设置初始样式: 背景图、left
$lis.each(function (i, ele) {
$(ele).css({
backgroundImage: 'url(images/' + (i + 1) + '.jpg)',
left: i * 240
});
});
// 设置移入事件
$lis.mouseover(function () {
// 根据当前元素的索引区分两组元素，并设置运动
var index = $(this).index();
// 遍历所有li，分别设置运动
$lis.each(function (i, ele) {
// 比较i和index的关系
// 记得加stop()哦
if (i <= index) {
$(ele).stop().animate({
left: i * 100
});
} else {
$(ele).stop().animate({
left: i * 100 + 700
});
}
});
});
// 给box设置移出，让所有元素的left还原即可
$box.mouseout(function () {
// 所有元素的left都不一样，需要遍历后设置
$lis.each(function (i, ele) {
$(ele).stop().animate({
left: i * 240
});
});
});
});
</script>
</body>
</html>
2.メッセージボード
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>ToDoList—最简单的待办事项列表</title>
<script src="http://10.2.18.96:8011/assets/js/jquery-3.2.1.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
font-size: 16px;
background: #CDCDCD;
}
header {
height: 50px;
background: #333;
background: rgba(47, 47, 47, 0.98);
}
section {
margin: 0 auto;
}
label {
float: left;
width: 100px;
line-height: 50px;
color: #DDD;
font-size: 24px;
cursor: pointer;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
header input {
float: right;
width: 60%;
height: 24px;
margin-top: 12px;
text-indent: 10px;
border-radius: 5px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
border: none
}
input:focus {
outline-width: 0
}
h2 {
position: relative;
}
span {
position: absolute;
top: 2px;
right: 5px;
display: inline-block;
padding: 0 5px;
height: 20px;
border-radius: 20px;
background: #E6E6FA;
line-height: 22px;
text-align: center;
color: #666;
font-size: 14px;
}
ol,
ul {
padding: 0;
list-style: none;
}
li input {
position: absolute;
top: 2px;
left: 10px;
width: 22px;
height: 22px;
cursor: pointer;
}
p {
margin: 0;
}
li p input {
top: 3px;
left: 40px;
width: 70%;
height: 20px;
line-height: 14px;
text-indent: 5px;
font-size: 14px;
}
li {
height: 32px;
line-height: 32px;
background: #fff;
position: relative;
margin-bottom: 10px;
padding: 0 45px;
border-radius: 3px;
border-left: 5px solid #629A9C;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}
ol li {
cursor: move;
}
ul li {
border-left: 5px solid #999;
opacity: 0.5;
}
li a {
position: absolute;
top: 2px;
right: 5px;
display: inline-block;
width: 14px;
height: 12px;
border-radius: 14px;
border: 6px double #FFF;
background: #CCC;
line-height: 14px;
text-align: center;
color: #FFF;
font-weight: bold;
font-size: 14px;
cursor: pointer;
}
footer {
color: #666;
font-size: 14px;
text-align: center;
}
footer a {
color: #666;
text-decoration: none;
color: #999;
}
@media screen and (max-device-width: 620px) {
section {
width: 96%;
padding: 0 2%;
}
}
@media screen and (min-width: 620px) {
section {
width: 600px;
padding: 0 10px;
}
}
</style>
</head>
<body>
<header>
<section>
<label for="title">ToDoList</label>
<!-- 进行操作的输入框 -->
<input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
</section>
</header>
<section class="container">
<h2>正在进行 <span id="todocount"></span></h2>
<ol id="todolist" class="demo-box">
</ol>
<h2>已经完成 <span id="donecount"></span></h2>
<ul id="donelist">
</ul>
</section>
<footer>
Copyright © 2014 todolist.cn
</footer>
<script>
/*
当案例完成后我们会发现，实际上操作步骤大体如下：
- 1 获取存储的数据
- 2 根据需求修改数据
- 3 设置回本地存储保存
- 4 根据本地存储的数据进行结构创建
功能分析：
- 1 输入框中输入内容，点击了回车
- e.keyCode === 13
- 2 将数据保存到本地存储中
- 根据本地存储中是否具有数据进行对应设置
- 2.1 获取本地存储中的数据
- 2.2 将新数据放入到本地存储保存
- 3 根据本地存储中的数据进行页面结构设置
*/
$(function () {
// 1 获取元素
var $title = $('#title'); // 输入框
var $todolist = $('#todolist'); // 放置没有完成的内容的ol
var $donelist = $('#donelist'); // 放置已完成的内容的ul
var $todocount = $('#todocount');
var $donecount = $('#donecount');
var $container = $('.container');
// 2 设置输入框的输入操作
// - keydown时检测是否点击了回车键
$title.on('keydown', function (e) {
if ($(this).val() === '') {
return;
}
// 3 检测keyCode是否为13
if (e.keyCode !== 13) {
return;
}
// 4 将输入保存到本地存储中
// - 获取本地存储中的数据（最终处理结果为一个数组）
var datas = getDatas();
// - 添加数据
// - 数据的形式：必须有内容content，还需要有完成状态
// - status 状态，值为布尔类型，true表示完成了
datas.push({
content: $(this).val(),
status: false
});
// - 设置本地存储中的数据
setDatas(datas);
// - 操作完毕，将输入框内容清空
$(this).val('');
// - 进行结构创建操作
createHTML();
});
// 5 页面加载时，进行结构创建
createHTML();
// 6 给复选框设置事件（由于可能具有动态创建的元素，需要采用事件委托）
$container.on('click', 'input', function () {
// 数据操作
// - 获取本地存储中的数据
var datas = getDatas();
// - 根据当前元素的data-index, 修改datas中对应元素的status
var index = $(this).data('index');
datas[index].status = $(this).prop('checked');
// - 设置本地存储中的数据
setDatas(datas);
// 结构操作
createHTML();
});
// 7 给删除按钮设置事件（由于可能具有动态创建的元素，需要采用事件委托）
$container.on('click', 'a', function () {
// 数据操作
// - 获取本地存储中的数据
var datas = getDatas();
// - 根据当前元素的data-index, 删除datas中对应元素
var index = $(this).data('index');
datas.splice(index, 1);
// - 设置本地存储中的数据
setDatas(datas);
// 结构操作
createHTML();
});
function getDatas() {
var datas = localStorage.getItem('todoDatas'); // 没有获取到数据时为null
if (datas !== null) {
// 说明存在旧的数据，将JSON格式的数据进行转换
datas = JSON.parse(datas);
} else {
datas = [];
}
return datas;
}
function setDatas(datas) {
// - 将复杂数据转换为JSON后放入
localStorage.setItem('todoDatas', JSON.stringify(datas));
}
function createHTML() {
// - 根据本地存储中的数据进行结构创建（为了确保数据准确和功能可合并，推荐先获取一次然后再操作）
// - 获取本地存储中的数据
var datas = getDatas();
// 创建后发现，旧结构还是存在，应当先清空再设置
$donelist.empty();
$todolist.empty();
// - 根据datas中的数据生成li
// - 需要判断datas中每个对象的status属性，分别放入到ul和ol中
// - $.each()可以对数组和对象进行统一的遍历操作
$.each(datas, function (i, ele) {
// 判断ele.status的值，设置不同的结构
if (ele.status) {
// 已完成的内li放入到ul中
$donelist.prepend(
'<li>\
<input type="checkbox" checked="checked" data-index="' + i + '">\
<p>' + ele.content + '</p>\
<a href="javascript:;" data-index="' + i + '"></a>\
</li>');
} else {
// 未完成的li放入到ol中
$todolist.prepend(
'<li>\
<input type="checkbox" data-index="' + i + '">\
<p>' + ele.content + '</p>\
<a href="javascript:;" data-index="' + i + '"></a>\
</li>');
}
});
// - 设置对应的计数展示
$todocount.text($todolist.children().length);
$donecount.text($donelist.children().length);
}
});
</script>
</body>
</html>