Loading, please wait...
Showing posts with label jquery. Show all posts
Showing posts with label jquery. Show all posts

Friday, May 8, 2009

用jquery设置Blogger外部链接的样式和打开方式

張貼者： GreatGhoul 於 Friday, May 08, 2009
blogger中链接默认都是在本窗口打开,但如果想要外部链接能醒目一点并且在新窗口打开,就得借助jquery的力量了.这个功能需要选择器的组合使用,以开始怎么都搞不定,后来看了Rails/jQuery magic: marking external links with a CSS class后才知道":not"选择器可以连续使用.
目标效果:
思路:
其实关键在于jquery选择器的设置,如果只转换文章正文中的链接,需要应用一下规则:
  • 只设置文章正文的链接
  • 忽略"javascript:"的链接
  • 忽略以http://yourname.blogspot.com开头的链接
  • 所有外部链接在新窗口打开
  • 图片链接不显示外部链接图标
  • 链接淡蓝色显示
首先,通过以上规则,获得所有外部链接的jquery包装集,然后对含有图片和不含图片的链接应用不同的样式即可.

代码:
jQuery代码:
$(document).ready(function() {
 $(".post-body a:not([href^='javascript:'])" +
   ":not([href^='http://greatghoul.blogspot.com'])").each(function() {
  var link = $(this);
  if (link.is(":has(img)"))
   link.attr("target", "_blank");
  else
   link.addClass("external").attr("target", "_blank");
 });
});

css代码:
a.external {
  padding-right: 12px;
  background-image: url(http://lh3.ggpht.com/_rL8ku7jXhnw/SfR3c_mnKYI/AAAAAAAAFdA/7ZZeKEUAoes/s800/external_white.gif);
  background-position: center right;
  background-repeat: no-repeat;
  background-color: #E0ECFF;
}

测试效果:
 Blogger页面加载等待效果
测试
博客用上了新皮肤,Google样式的
jquery学习：仿discuz论坛回帖添加表情效果

转载声明: 出自: Ghoul To World!作者: GreatGhoul

標籤： , , , , 0 意見

Sunday, April 26, 2009

Blogger页面加载等待效果

張貼者： GreatGhoul 於 Sunday, April 26, 2009
今天新做了一个黑白简约风格的模板，用上了圆角。因为今天早上看了篇关于圆角的文章mozilla 和webkit的 CSS圆角.
因为打算扩充功能时使用jquery,所以顺便做了个加载等待效果。算是对页面加载转换效果的改进吧。
不过这个效果在ie6下似乎就挂了。正在努力改进中。

css代码:
/* loading */
#gloading {
  -webkit-border-radius: 5px 5px; 
  -moz-border-radius: 5px 5px;
  position:fixed;
  text-align: center;
  display: none; 
  top:50%;
  left:50%;
  margin:-100px 0 0 -100px;
  width:auto;
  height:auto;
  border:2px solid black;
  background-color: white;
  padding:1px;
  color:white;
}
#gloading div {
  -webkit-border-radius: 5px 5px; 
  -moz-border-radius: 5px 5px;
  font-size: 20px; 
  text-align: center;
  font-weight: bolder;
  width:auto;
  height:100%;
  padding:8px 20px;
  background-color: black;
}
js代码:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
<script type="text/javascript" language="JavaScript">
$(document).ready(function() {
 window.onbeforeunload = function() {
  var colors = ['#E7E7E7', '#D0D0D0', '#AFAFAF', 
   '#989898','#797979', '#5F5F5F', '#404040', 
   '#262626', '#0F0F0F'];
  var index = 0;
  $("#gloading").fadeIn("slow");
  setInterval(function() {
   if (index == colors.length) {
    index = 0;
    colors.reverse();
   }
   $("#gloading div").css("color", colors[index++]); 
  }, 80);
 } 
});
</script>
html代码:
<div id="gloading"><div>Loading, please wait...</div></div>

转载声明: 出自: Ghoul To World!作者: GreatGhoul

標籤： , , 0 意見

Wednesday, April 8, 2009

jquery学习：仿discuz论坛回帖添加表情效果

張貼者： GreatGhoul 於 Wednesday, April 08, 2009
最近一直在学习jquery ,感觉它真的很强大.
无聊,做了一个仿discuz论坛回帖添加表情效果.兼容ff,ie,chrome
以下是代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Comment Smilies</title>

<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".smile").hover(
 function() {
  $(this).css("cursor", "pointer");
 },
 function() {
  $(this).css("cursor", "default");
 }
);
$(".smile").click(function() {
 // Build the smile code.
 var smile = "[:" + $(this).attr("alt") + ":]";

 var comment = $("#comment")[0];

 // Insert the smile code into the current position.
 if ($.browser.msie) {
  comment.focus();
  document.selection.createRange().text = smile;
 } else {
  // Get the pointer and current value.
 
  var start = comment.selectionStart;
  var end = comment.selectionEnd;
  var value = comment.value;
 
  // Insert the smile code.
  comment.value
   = value.substring(0, start)
   + smile
   + value.substring(end);
 
  // Restore the pointer location.
  comment.selectionStart = start + smile.length;
  comment.selectionEnd = start + smile.length;
 }
});
});
</script>

</head>

<body>
<textarea id="comment" cols="60" rows="6"></textarea>
<img src="images/sweat.gif" alt="sweat" title="笑脸" class="smile" />
</body>
</html>
原来Firefox不支持cursor:hand样式,害得我调试了半天,还以为是hover的问题呢!

转载声明: 出自: Ghoul To World!作者: GreatGhoul

標籤： , 1 意見

Sunday, March 15, 2009

开始学习jQuery: 表格隔行换色和悬停高亮效果

張貼者： GreatGhoul 於 Sunday, March 15, 2009
正式开始学习jQuery(非常了不起的东西).
从最基础的东西开始学习.

在网页中,当遇到数据表格中,经常需要一些隔行换色和鼠标移过时行高亮的效果.
下面是一个简单实现.

<html>
<head>
<title>Demo</title>
<script type="text/JavaScript" src="jquery.js"></script>
<style type='text/css'>
tr.highlight {background-color: #EFEDDE;}
tr.odd  {background-color: #EEEEEE;}
tr.even {background-color: #DDDDDD;}
</style>
<script language='javascript' type='text/javascript'>
$("document").ready(function() {
    $("tr").each(function(i) {
        var className = ["odd", "even"][i % 2];
        $(this).addClass(className);
        $(this).hover(
            function() {
                $(this).removeClass(className);
                $(this).addClass("highlight");
            },
            function() {
                $(this).removeClass("hightlight");
                $(this).addClass(className);
            }
        )
    });
});
</script>
</head>
<body>
<table>
<tr><td>Nick Name</td><td>GreatGhoul</td></tr>
<tr><td>Phone</td><td>13028473721</td></tr>
<tr><td>Email</td><td>greatghoul@gmail.com</td></tr>
<tr><td>QQ</td><td>348189477</td></tr>
<tr><td>Blog</td><td>http://greatghoul.blogspot.com</td></tr>
</body>
</html>

如果只需要隔行换色效果,可使用以下代码.

$("tr:even").addClass("even");
$("tr:odd").addClass("odd");

已经喜欢上jQuery了.

转载声明: 出自: Ghoul To World!作者: GreatGhoul

標籤： 0 意見
Subscribe to: Posts (Atom)