快
速簡單又有變化：
content slider / 互動式文字列表／摘要內文
content slider / 互動式文字列表／摘要內文
這次的模組使用「表
格」來設計，在使用操作上更為簡單。一個更為便利的使用特色在於：可以用來處理互
動文字列表的需求，也可以用來表現互動摘要
／內文式的互動寫作呈現。
使用表格！可以快速、直覺以
數位文本寫作思維
來對文本進行寫件布局。
| 這是標題／摘要（一）
[click] |
| 這是內文。這是內文。 這是內文。這是內文。 這是內文。這是內文。 這是內文。這是內文。 這是內文。這是內文。 |
| 這是標題／摘要（二）
[click] |
這是內文。這是內文。這是內文。這是內文。 這是內文。這是內文。 這是內文。這是內文。 2017出版。本書更深刻地探討數位文本的文本理論。 購買：五南書局 |
jQuery的互動程式組，請放置於<haed></head>之間或<body>之後：
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script>
$(function() {
$('#ta052901').find('>tbody >tr:even >td').click(function() {
$(this).parent().next().children().toggle('slide', {direction: 'left'}, 800);
});
});
</script>
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script>
$(function() {
$('#ta052901').find('>tbody >tr:even >td').click(function() {
$(this).parent().next().children().toggle('slide', {direction: 'left'}, 800);
});
});
</script>
說明：
一、紅色字體為表格內所設的id。
二、藍色字體為滑動的方向，可設 up / down / left / right ，四選一。
三、褐色字體者，為滑動速度，1000是一秒。
一、紅色字體為表格內所設的id。
二、藍色字體為滑動的方向，可設 up / down / left / right ，四選一。
三、褐色字體者，為滑動速度，1000是一秒。
CSS的語法，請放置於<haed></head>之間或<body>之後：
<style>
/* 標題列的TD之CSS，請放置於TD */
.title0529 {
font-family: Verdana, '微軟正黑體';
font-size: 1.4em;
font-weight: bold;
line-height: 2;
text-align: left;
letter-spacing: 0.1em;
padding-left: 5px;
cursor: pointer;
}
/*標題背景色互動*/
.title0529:hover {
background-color: rgba(152, 152, 152, 0.4);
}
/* 內文列的TD之CSS，請放置於TD */
.word0529 {
font-family: Verdana, '新細明體';
font-size: 15px;
font-weight: normal;
line-height: 1.8;
text-align: left;
letter-spacing: 0.1em;
padding-left: 5px;
}
/* 讓內文列消失之CSS，請放置於TABLE */
.tabdispnone >tbody >tr:nth-child(even) >td {
display: none;
}
</style>
<style>
/* 標題列的TD之CSS，請放置於TD */
.title0529 {
font-family: Verdana, '微軟正黑體';
font-size: 1.4em;
font-weight: bold;
line-height: 2;
text-align: left;
letter-spacing: 0.1em;
padding-left: 5px;
cursor: pointer;
}
/*標題背景色互動*/
.title0529:hover {
background-color: rgba(152, 152, 152, 0.4);
}
/* 內文列的TD之CSS，請放置於TD */
.word0529 {
font-family: Verdana, '新細明體';
font-size: 15px;
font-weight: normal;
line-height: 1.8;
text-align: left;
letter-spacing: 0.1em;
padding-left: 5px;
}
/* 讓內文列消失之CSS，請放置於TABLE */
.tabdispnone >tbody >tr:nth-child(even) >td {
display: none;
}
</style>
教學影音：
沒有留言:
張貼留言