创建交互式博客——jquery （1）
来源：互联网 发布：知乎图标变样了 编辑：程序博客网 时间：2024/06/05 08:44
最近特别想创建自己的个人博客来记录生活当中的点滴感悟。虽然有很多创建博客的工具，但总感觉不具有自己的特色，想修改的话比较花时间，想创建自己的个人博客的想法就更加强烈了。Codecademy是一个学习创建网页的好的网站，虽然在上面学过很多东西，但是如果不总结、不整理，后面就全都忘掉了。这里就记录下自己的学习感悟。
在本篇文章中，主要实现的网站功能是：点击第一篇文章，按“n”快捷方式到下一篇文章；按"o"打开文章具体内容。
首先是index.html，包括网页结构和内容，代码如下：
在</body>前面的红色字体中，第一行script加载jquery，第二行script加载app.js (描述jquery)。文章列表的source, title等等呈现在<div class="item row">....</div>中，文本内容呈现在<div class="description">.....</div>中。
<!doctype html><html> <head> <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="articles container"> <div class="article current"> <div class="item row"> <div class="col-xs-3"> <p class="source">FLIGHT</p> </div> <div class="col-xs-6"> <p class="title">Embraer adds third Legacy 500 prototype to flight test campaign</p> </div> <div class="col-xs-3"> <p class="pubdate">Mar 23</p> </div> </div> <div class="description row"> <div class="col-xs-3"> </div> <div class="col-xs-6"> <h1>Embraer adds third Legacy 500 prototype to flight test campaign</h1> <p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p> </div> <div class="col-xs-3"> </div> </div> </div> <div class="article"> <div class="item row"> <div class="col-xs-3"> <p class="source">AW Commercial Aviation</p> </div> <div class="col-xs-6"> <p class="title">CSeries Supplier Scramble</p> </div> <div class="col-xs-3"> <p class="pubdate">Mar 22</p> </div> </div> <div class="description row"> <div class="col-xs-3"> </div> <div class="col-xs-6"> <h1>CSeries Supplier Scramble</h1> <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p> </div> <div class="col-xs-3"> </div> </div> </div> <div class="article"> <div class="item row"> <div class="col-xs-3"> <p class="source">AW business aviation</p> </div> <div class="col-xs-6"> <p class="title">Flying the Gulfstream G650</p> </div> <div class="col-xs-3"> <p class="pubdate">Mar 22</p> </div> </div> <div class="description row"> <div class="col-xs-3"> </div> <div class="col-xs-6"> <h1>Flying the Gulfstream G650</h1> <p>Gulfstream is turning up the heat in the large-cabin business aircraft competition with its new G650 flagship, the largest, fastest, farthest-ranging...</p> </div> <div class="col-xs-3"> </div> </div> </div> <div class="article"> <div class="item row"> <div class="col-xs-3"> <p class="source">FLIGHT</p> </div> <div class="col-xs-6"> <p class="title">New retirements cut RAF VC10 fleet to four</p> </div> <div class="col-xs-3"> <p class="pubdate">Mar 22</p> </div> </div> <div class="description row"> <div class="col-xs-3"> </div> <div class="col-xs-6"> <h1>New retirements cut RAF VC10 fleet to four</h1> <p>The UK Royal Air Force has retired another two of its Vickers VC10 tankers, with the pair's departure reducing its inventory of the Rolls-Royce...</p> </div> <div class="col-xs-3"> </div> </div> </div> <div class="article"> <div class="item row"> <div class="col-xs-3"> <p class="source">FLIGHT</p> </div> <div class="col-xs-6"> <p class="title">Virgin can deliver more value for Delta than for SIA: Bastian</p> </div> <div class="col-xs-3"> <p class="pubdate">Jul 17</p> </div> </div> <div class="description row"> <div class="col-xs-3"> </div> <div class="col-xs-6"> <h1>Virgin can deliver more value for Delta than for SIA: Bastian</h1> <p>Delta Air Lines president Ed Bastian is confident that the carrier can extract far more value from its shareholding in Virgin Atlantic compared with...</p> </div> <div class="col-xs-3"> </div> </div> </div> <div class="article"> <div class="item row"> <div class="col-xs-3"> <p class="source">AW Defense</p> </div> <div class="col-xs-6"> <p class="title">Freedom Experiences Two More Power Outages</p> </div> <div class="col-xs-3"> <p class="pubdate">Mar 22</p> </div> </div> <div class="description row"> <div class="col-xs-3"> </div> <div class="col-xs-6"> <h1>Freedom Experiences Two More Power Outages</h1> <p>The Littoral Combat Ship (LCS-1) USS Freedom’s first overseas deployment to Southeast Asia has been marred by two more power outages...</p> </div> <div class="col-xs-3"> </div> </div> </div> <div class="article"> <div class="item row"> <div class="col-xs-3"> <p class="source">FLIGHT</p> </div> <div class="col-xs-6"> <p class="title">FedEx to acquire up to 30 United 757s</p> </div> <div class="col-xs-3"> <p class="pubdate">Mar 22</p> </div> </div> <div class="description row"> <div class="col-xs-3"> </div> <div class="col-xs-6"> <h1>FedEx to acquire up to 30 United 757s</h1> <p>United Airlines is to sell up to 30 Boeing 757s to freight operator FedEx Express, with deliveries of the twinjets set to start this year.</p> </div> <div class="col-xs-3"> </div> </div> </div> </div> <span style="color:#ff6666;"><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="app.js"></script></span> </body></html>
第一步，我们实现选择某个文章，下拉文章查看文章的具体内容。
var main = function(){ $(".article").click(function(){ $(this).children(".description").show(); }); };$(document).ready(main);click() 被称为click event handler。然后，现在我们仅仅实现了显示文章具体内容，没有收起来文章内容这一步，这里用hide()实现。然后，我们需要在点击下一个文章标题的时候，它会被点亮，这里就addClass(‘current’)实现。最后，我们来填加快捷方式：当按“n”（110）键时移动到下一个文章标题；当按“o”（111）键时看到文章的具体描述。为了实现按键效果，我们采用keypress()这个函数，并定义在整个document类基础上。注意，键盘的指定是根据按键代码（key code）。
var main = function(){ $(".article").click(function() { $('.article').removeClass('.current'); $('.description').hide(); $(this).addClass('current'); $(this).children('.description').show(); }); $(document).keypress(function(event) { if (event.which === 111) { $('.current').children('.description').toggle(); } else if (event.which === 110) { var currentArticle = $('.current'); var nextArticle = currentArticle.next(); currentArticle.removeClass('current'); //删除上篇文章的当前类，也就是停止之前文章的点亮效果 nextArticle.addClass('current'); //为当前文章填加当前类，为当前文章标题填加点亮效果 } }); };$(document).ready(main);body { background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/reader/bg.png'); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}p { margin: 0;}.row { margin: 0;}.articles { margin-top: 30px; margin-bottom: 30px;}.article { color: #222; background: rgba(255,255,255,.9); border-spacing: 2px; border-color: gray; font-family: arial,sans-serif; border-bottom: 1px #e5e5e5 solid;}.current .item { background: rgba(206,220,206,.9);}.item { cursor: pointer; padding-top: 7px; padding-bottom: 7px; }.item .source { margin-left: 20px;}.item .title { font-weight: bold;}.item .pubdate { margin-right: 20px;}.item .pubdate { text-align: right; }.description { display: none; padding-top: 10px; padding-bottom: 10px;}.description h1 { margin-top: 0px; font-size: 23px;} 0 0
- 创建交互式博客——jquery （1）
- 创建交互式博客——jquery （2）
- 创建交互式博客——jquery （3）
- 创建交互式博客——jquery （4）
- Java——创建交互式Web程序
- iOS——iOS8创建交互式通知
- 交互式博客
- 精通Silverlight——第12章 创建交互式应用程序
- JQuery回转图片展示（鼠标交互式）
- 创建 UIControl（交互式 VBA 编程）
- 交互式批量创建user
- Jquery—创建表格
- 使用表单创建交互式网页
- AmMap创建交互式Flash地图
- iOS 8创建交互式通知
- iOS 8创建交互式通知
- iOS 8创建交互式通知
- iOS 8创建交互式通知
- 关于在Eclipse下logcat无法输出log信息的问题
- Android 工具类
- 第四周项目一——三角形类的构造函数（2）
- 【LeetCode】101.Symmetric Tree
- 解决eclipse中的项目内xml文件总是报错！！！
- 创建交互式博客——jquery （1）
- linux apache下虚拟主机配置方法
- unity3d场景搭建常用操作
- share SDK
- Android String占位符功能
- Linux搭建SVN 服务器
- oracle中imp导入数据中文乱码问题
- assign,retain,copy区别深刻解析
- 基于VB中WINSOCK控件的网上象棋系统的实现
