为文章标题链接添加正在加载中提示

2011年02月17日21:08:36 70 20,715
摘要

  点击文章标题链接会提示正在加载中…看上去很好玩是不是。具体效果可以点击我博客日志标题链接。下面就教大家把这个特效加到你的主题模板中。
  这个特效同样离不开jQuery。首先打开你所使用主题的header.php模板文件,在</head>标签前添加代码。
  其中”h2 a”是主题文章标题的标签选择器,可根据具体主题模板进行修改,如果改为:“a”,可实现全部链接都添加这一特效。后面的数字2011是这一特效的显示时间……

点击文章标题链接会提示正在加载中...看上去很好玩是不是。具体效果可以点击我博客日志标题链接。下面就教大家把这个特效加到你的主题模板中。

这个特效同样离不开JQuery

首先打开你所使用主题的header.php模板文件,在</head>标签前添加:

  1. 1. <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.3.min.js"></script>

如果你的主题已加载了JQuery,这步就免了。

再把下面这段代码同样加到</head>标签前

  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. $('h2 a').click(function(){
  4. myloadoriginal = this.text;
  5. $(this).text('正在给力加载中 ...');
  6. var myload = this;
  7. setTimeout(function() { $(myload).text(myloadoriginal); }, 2011);
  8. });
  9. });
  10. </script>

其中"h2 a"是主题文章标题的标签选择器,可根据具体主题模板进行修改,如果改为:“a”,可实现全部链接都添加这一特效。后面的数字2011是这一特效的显示时间(毫秒),可酌情修改。

HotNews pro2.4版添加方法

HotNews pro2.4版加载了多个header.php文件,所以直接写到已加载的js文件中更方便一些,直接把下面代码加到custom.js文件的最后面:

  1. //加载中提示
  2. $(document).ready(function(){
  3. $('h3 a,.tab ul li ul a,.cat_post a').click(function(){
  4. myloadoriginal = this.text;
  5. $(this).text('正在给力加载中 ...');
  6. var myload = this;
  7. setTimeout(function() { $(myload).text(myloadoriginal); }, 2011);
  8. });
  9. });

上面的JS代码,有童鞋提出在Opera浏览器下有BUG,那就换成:

  1. //加载中提示
  2. $(document).ready(function(){
  3. $('h3 a,.tab ul li ul a,.cat_post a,.r_comments a').click(function(){
  4. $(this).text('正在给力加载中...');
  5. window.location = $(this).attr('href');
  6. });
  7. });

发现添加特效后,会影响一些多标签浏览器,在新标签中打开链接,当前标签会同时跳转到链接页面。

weinxin
我的微信
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
Begin主题购买

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:70   其中:访客  50   博主  16   引用   4

    • kael 7

      第一个抢沙发~~哈哈,终于等到了~受用!

      • 看得见风的人 6

        为什么我把代码加到JS文件里后,chrome里的网页显示没有变化,而在360浏览器的却已经发生变化了~~-。-
        还有你评论栏右上方的插入图片怎么添加的~

          • 知更鸟 Admin

            @看得见风的人 从不用chrome不清楚
            那个图片按钮,还未添加成功

              • Alphas 1

                @知更鸟 我也用得Chrome 代码有效,但是出现了新标签中打开链接,当前标签会同时跳转到链接页面的问题
                请问如何解决啊

              • 看得见风的人 6

                @看得见风的人 目前chrome里也显示出变化了,咋还有延迟显示-。-

              • 看得见风的人 6

                还有个问题,如果我启用WP No Category Base这个插件,其他地方的Category都不会显示了,但是栏目前的小图标的地址里却还有Category。

                • remai8 1

                  我现在也换成你这个主题了,但是不能评论和留言,是什么原因?请鸟哥指教!!
                  这是我的网址:http://www.remai8.info/

                    • 知更鸟 Admin

                      @remai8 大概是因为你的Win主机有功能限制
                      玩WP最好不要用比较垃圾的Win主机

                    • 看得见风的人 6

                      还有一个问题,启用wp-share-list插件后,在插件后台是否需要选择启用“引入插件的jquery1.4.2库”

                      • 看得见风的人 6

                        继续还有一个问题,你的“有人回复时邮件通知我”这种,回复评论后通过邮件通知怎样实现的。可能我问题比较多,望得到解答~~

                        • 知更鸟 Admin

                          贴图测试

                          • 活火山 0

                            该主题,对SEO友好吗,请问下下, SEO很重要哟,不知道有没有考虑到!

                            • 看得见风的人 6

                              能把你目前网页的背景图共享一下不?或者有更多的适合这主题的背景共享下~~呵呵

                              • 憨豆先生 6

                                什么时有空写个教程教下我们这个功能~不错!很强大!

                                • 小众传媒 5

                                  很炫的样式,早早就见有很多站在弄,回头尝试一番。。。

                                  • 碎语人生 5

                                    [img]http://www.jszby.com/wp-content/uploads/2010/04/logo002.jpg[/img]

                                    • C.J.Y 3

                                      Opear下失效哦。。。加载完后不会转到链接页

                                        • 知更鸟 Admin

                                          @C.J.Y 说明Opear很变态,迟早会彻底消失
                                          一会查下原因

                                        • JaCall 4

                                          这个功能不错!加上了!

                                          • 晨光博客 5

                                            确实很喜欢这个功能,放假也弄下,很好看!

                                            • ★Extreme★ 4

                                              jQuery这东西真够强大的!!!又学习了!!!!

                                              • 凡夫俗子 3

                                                鸟哥,发现个稍显不和谐的地方。按你说的这个方法会导致点击最新文章、热门文章、随机文章等栏目时,也出现“正在给力加载中…”,但这里出现这个好像没什么意义啊
                                                [img]http://www.ade-bug.com/ade-bug-picture/ade-bug.jpg[/img]

                                                • 凡夫俗子 3

                                                  给这三个标签和标签加了个class=”nogeili”,然后把
                                                  $(this).text(‘正在给力加载中…’);
                                                  前加了排除判断:
                                                  if($(this).attr(“class”).indexOf(“nogeili”)){
                                                  $(this).text(‘正在给力加载中…’);
                                                  }

                                                    • 知更鸟 Admin

                                                      @凡夫俗子 技术很不错啊
                                                      其实不用那么麻烦,换个标签选择器就行了,已更新

                                                        • 凡夫俗子 3

                                                          @知更鸟 汗颜了,对JQ不了解,怎么没想到这个。。鸟哥你是做前端开发的吧?牛人啊!

                                                            • 凡夫俗子 3

                                                              @凡夫俗子 还有,上面我的代码是错的,哈哈。
                                                              应该是:
                                                              if($(this).attr(“class”).indexOf(“nogeili”)==-1){
                                                              $(this).text(‘正在给力加载中…’);
                                                              }
                                                              不过也用不上了。

                                                                • 知更鸟 Admin

                                                                  @凡夫俗子 我试一下,貌似有点麻烦,不过多个选择也不错

                                                                • 知更鸟 Admin

                                                                  @凡夫俗子 只是一个蹩脚的电脑维修工

                                                            • 约定 3

                                                              鸟哥,为什么你的在谷歌浏览器下有效果,但我的却没有

                                                              • 碎语人生 5

                                                                貌似没有太大用处,暂时不弄这个了。

                                                                • wotry 4

                                                                  挺好玩的, 但加了后没有看到效果,无论是在谷歌浏览器还是 ie中。直接把你网站的JS文件复制下来上传上去也没用。是不是没有加载啊?

                                                                  • daydreamer 1

                                                                    我居然也成功了……

                                                                      • oldtree 0

                                                                        @daydreamer 2.4的背景图片为什么不能显示???

                                                                      • Bakhtiyar 3

                                                                        鸟哥,我用的2.4. custom.js 改了以后,firefox没有显示这个效果,其它浏览器都可以。你的博客在firefox里显示的也很正常。指导一下,谢谢。

                                                                          • 知更鸟 Admin

                                                                            @Bakhtiyar 虽然我不认识你站点的文字,不过看上去显示很正常

                                                                              • Bakhtiyar 3

                                                                                @知更鸟 鸟哥,你真的看了我的站点,让我太高兴了!!HotNews pro 2.4 我翻译成维吾尔语了,下面还有你站点链接,嘿嘿。。。太感谢你了。

                                                                            • 沫夏 1

                                                                              感谢,效果很好的说~

                                                                              • 两公斤奇趣网 2

                                                                                用上了,帅得不行,鸟大太柴了。。。

                                                                                • Smartree智慧树 2

                                                                                  这个体验很好、减除访问者对“等待加载”的盲目感知

                                                                                  • xwey 1

                                                                                    这个不错,本地修改后确实可用!

                                                                                    • 水果篮子 2

                                                                                      目前有 60 条留言 其中:访客:42 条, 博主:15 条 引用: 3

                                                                                      鸟哥这个是修改哪里才会变成你这样啊?

                                                                                      • 蓝莓绿茶 4

                                                                                        这个功能好,学习啦~

                                                                                        • 午灬夏 0

                                                                                          嘿嘿,偷学到一招,用上啦!

                                                                                          • 媛诺诺 4

                                                                                            我想请教下,怎么在网页最下面出现类似公告栏的东西

                                                                                              • 知更鸟 Admin

                                                                                                @媛诺诺 我这里的并不是什么公告,只是日志的另一种表现形式而已
                                                                                                貌似已有类似的插件,百毒搜索“WP工具条”

                                                                                              • oceanmen 2

                                                                                                弄好了!~感觉很不错

                                                                                                • 怎么利用网络赚钱 1

                                                                                                  博主的博客,真的好漂亮

                                                                                                  • Alphas 1

                                                                                                    发现添加特效后,会影响一些多标签浏览器,在新标签中打开链接,当前标签会同时跳转到链接页面。
                                                                                                    我用的chrome就出现这种情况 请问如何解决或者取消这个功能.我用的是你的最新2.7版

                                                                                                  • 来自外部的引用: 4

                                                                                                    • 几个美化WordPress的方法 | 其实不简单
                                                                                                    • 几个美化WordPress的方法 | 依米虾
                                                                                                    • 为博客添加了“正在加载中”的提示 » 晓潘随谈
                                                                                                    • 为文章标题链接添加正在加载中提示 | VPC.cc