Simple happiness » jquery http://xfuxing.com 越简单越幸福 Sun, 01 Jan 2012 16:55:46 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 不用插件打造自己的存档页 http://xfuxing.com/2009/no-plug-ins-to-create-their-own-archive-page.html http://xfuxing.com/2009/no-plug-ins-to-create-their-own-archive-page.html#comments Fri, 28 Aug 2009 14:23:04 +0000 德海 http://xfuxing.com/abc/69 archiveslist首先声明，这篇文章的源代码来自“偶爱偶家”，本人从“不务正业”处取得源文件下载，呵，不过鉴于两处的下载似乎都链接不上，且原文上并没有直接给出源代码，那么我在这就直接贴出来，为喜欢的朋友省些力气吧。不过我在原代码结构上稍做了一些调整，主要为了能够支持折起与打开的功能，整体看比较类似mg12大人的那个wp_easyarchives插件，虽然不支持年份的选择下拉表，但我个人感觉还是很整齐的。

第一步：制作一个函数在functions.php，您可以直接复制如下代码

  1. function archives_list_SHe() {
  2.   global $wpdb,$month;
  3.   $lastpost = $wpdb->get_var("SELECT ID FROM $wpdb->posts WHERE post_date <'" . current_time('mysql') . "' AND post_status='publish' AND post_type='post' AND post_password='' ORDER BY post_date DESC LIMIT 1");
  4.   $output = get_option('SHe_archives_'.$lastpost);
  5.   if(empty($output)){
  6.     $output = '';
  7.     $wpdb->query("DELETE FROM $wpdb->options WHERE option_name LIKE 'SHe_archives_%'");
  8.     $q = "SELECT DISTINCT YEAR(post_date) AS year, MONTH(post_date) AS month, count(ID) as posts FROM $wpdb->posts p WHERE post_date <'" . current_time('mysql') . "' AND post_status='publish' AND post_type='post' AND post_password='' GROUP BY YEAR(post_date), MONTH(post_date) ORDER BY post_date DESC";
  9.     $monthresults = $wpdb->get_results($q);
  10.     if ($monthresults) {
  11.       foreach ($monthresults as $monthresult) {
  12.         $thismonth    = zeroise($monthresult->month, 2);
  13.         $thisyear    = $monthresult->year;
  14.         $q = "SELECT ID, post_date, post_title, comment_count FROM $wpdb->posts p WHERE post_date LIKE '$thisyear-$thismonth-%' AND post_date AND post_status='publish' AND post_type='post' AND post_password='' ORDER BY post_date DESC";
  15.         $postresults = $wpdb->get_results($q);
  16.         if ($postresults) {
  17.           $text = sprintf('%s %d', $month[zeroise($monthresult->month,2)], $monthresult->year);
  18.           $postcount = count($postresults);
  19.           $output .= '<dl><dt><strong>' . $text . '</strong> &nbsp;(' . count($postresults) . '&nbsp;' . __('Posts','freephp') . ')</dt>' . "\n";
  20.           foreach ($postresults as $postresult) {
  21.             if ($postresult->post_date != '0000-00-00 00:00:00') {
  22.               $url = get_permalink($postresult->ID);
  23.               $arc_title    = $postresult->post_title;
  24.               if ($arc_title)
  25.                 $text = wptexturize(strip_tags($arc_title));
  26.               else
  27.                 $text = $postresult->ID;
  28.               $title_text = __('View this post','freephp') . ', &quot;' . wp_specialchars($text, 1) . '&quot;';
  29.               $output .= '<dd><em>' . mysql2date('m/d', $postresult->post_date) . '</em>:&nbsp;' . "<a href='$url' title='$title_text'>$text</a>";
  30.               $output .= '&nbsp;(' . $postresult->comment_count . ')';
  31.               $output .= '</dd>' . "\n";
  32.             }
  33.           }
  34.         }
  35.         $output .= '</dl>' . "\n";
  36.       }
  37.       update_option('SHe_archives_'.$lastpost,$output);
  38.     }else{
  39.         $output = '<div class="errorbox">'. __('Sorry, no posts matched your criteria.','freephp') .'</div>' . "\n";
  40.     }
  41.   }
  42.   echo $output;
  43. }

第二步：添加如下JS（我这个使用了jQuery库，如果您不喜欢使用此库的话，那么这部份控制折起与打开的JS代码您可以在网上搜索相应的不需jQuery库的。）

  1. $(document).ready(function() {
  2.   $("#archlist dt").each(function(){
  3.     var dt = $(this);
  4.     var objList =new Array();
  5.     var tmpDD = dt.next();
  6.     while(tmpDD.attr("tagName")!=null && tmpDD.attr("tagName")!="DT")
  7.     {
  8.       objList.push(tmpDD);
  9.       tmpDD = tmpDD.next();
  10.     }
  11.     dt.toggle(     
  12.       function(){
  13.         $(objList).each(function(){
  14.           $(this).show();                                  
  15.         }); 
  16.       },             
  17.       function(){
  18.         $(objList).each(function(){
  19.           $(this).hide();                                  
  20.         }); 
  21.       }
  22.     );
  23.   });
  24. });

第三步：制作archives.php模板页

  1. <?php
  2. /*
  3. Template Name: Archives
  4. */
  5. ?>
  6. <?php get_header(); ?>
  7.   <div id="content">
  8.     <h2 class="posttitle"><?php _e('Archives:', 'freephp'); ?></h2>
  9.       <ul id="archlist">
  10.         <?php archives_list_SHe(); ?>
  11.       </ul>
  12.   </div>
  13. <?php get_sidebar(); ?>
  14. <?php get_footer(); ?>

OK，大功告成，去建立一个自己的存档页面吧。当然，您或许还需要通过CSS去修饰一下这个页面，呵，不过那我就帮不上什么忙了，怕是越帮越忙。

Simple happiness

您可能感兴趣的文章

]]> http://xfuxing.com/2009/no-plug-ins-to-create-their-own-archive-page.html/feed 4 jquery动感菜单（导航）代码 http://xfuxing.com/2009/jquery-dynamic-menu-navigation-code.html http://xfuxing.com/2009/jquery-dynamic-menu-navigation-code.html#comments Thu, 23 Jul 2009 02:41:04 +0000 德海 http://xfuxing.com/abc/55 其实菜单（或说导航条？）有很多种，不是非要jquery不可，但有时这种菜单确实做得漂亮，虽然我下面这个菜单很简单，也是网上多个例子中的一个，但对我很实用，机制无非是用一张大图做背景，然后通过jquery来步进的移动这张背景图，造成动感。代码中的背景图没有附上，如果您喜欢，可以自己搞一张。大小嘛，199px X 100px。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Menu</title>

<style type="text/css">
ul {list-style:none;margin:0;padding:0;}
li {float:left;width:100px;margin:0;padding:0;text-align:center;}
li a {display:block;padding:5px 10px;height:100%;color:#FFF;text-decoration:none;border-right:1px solid #FFF;}
li a {background:url(bg2.jpg) repeat 0 0;}
li a:hover, li a:focus, li a:active {background-position:-150px 0;}
#menu a {background:url(bg.jpg) repeat -20px 35px;}

</style>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<script type="text/javascript">

$(function(){
$('#menu a')
.css( {backgroundPosition: "-20px 35px"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "-20px 35px"})
}})
})
});
$(function($) {
$.extend($.fx.step,{
backgroundPosition: function(fx) {
if (fx.state === 0 && typeof fx.end == 'string') {
var start = $.curCSS(fx.elem,'backgroundPosition');
start = toArray(start);
fx.start = [start[0],start[2]];
var end = toArray(fx.end);
fx.end = [end[0],end[2]];
fx.unit = [end[1],end[3]];
}
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];

function toArray(strg){
strg = strg.replace(/left|top/g,'0px');
strg = strg.replace(/right|bottom/g,'100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}
}
});
});
</script>

</head>
<body>
<div>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>

Simple happiness

您可能感兴趣的文章

]]> http://xfuxing.com/2009/jquery-dynamic-menu-navigation-code.html/feed 0 jquery滑动回顶部代码 http://xfuxing.com/2009/jquery-sliding-back-to-the-top-of-the-code.html http://xfuxing.com/2009/jquery-sliding-back-to-the-top-of-the-code.html#comments Wed, 22 Jul 2009 02:27:02 +0000 德海 http://xfuxing.com/abc/54 有时候因为网页太长，看到底部的时候再回到最上面的确是让人费劲的事情，拉动滚动条或用鼠标动作，太繁复了。在底部添加一个“返回顶部”的功能确实是不错，方法很多了，可以设锚点，可以用JS，不过这里要说的还是用jquery。代码也是很简单的，就不做说明了。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cn" lang="cn">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Top</title>

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
$('.gotop').click(function(){
$('html, body').animate({scrollTop: 0},300);
});
});
-->
</script>
<style type="text/css">

.gotop {
margin: 0;
padding: 0 20px;
height: 31px;
line-height: 31px;
border: 1px solid #999;
overflow: hidden;
position: relative;
background: #e0e0e0;
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
outline: none;
cursor: hand;
}
#kk {
height:1000px;
}

</style>

</head>
<body>
<div>
<ul>
<li>TOP!</li>
</ul>
</div>
<div id="kk"></div>
<div>
<ul>
<li class="gotop">go to top!</li>
</ul>
</div>
</body>
</html>

Simple happiness

您可能感兴趣的文章

]]> http://xfuxing.com/2009/jquery-sliding-back-to-the-top-of-the-code.html/feed 0 jquery隔行变色代码 http://xfuxing.com/2009/jquery-interlacing-color-code.html http://xfuxing.com/2009/jquery-interlacing-color-code.html#comments Tue, 21 Jul 2009 02:17:25 +0000 德海 http://xfuxing.com/abc/53 昨天记下个jquery的选项卡代码，今天继续记。
很多时候我们在评论或li列表里会用到隔行变色以及经过变色这样的功能，这个功能说来比较花哨，但又不失其实用效果，可以有效的缓解视疲劳，以及让观者不至看串行。废话少说，代码在下。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cn" lang="cn">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Discolor</title>

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
$("#list li:even").addClass("li_bg1");
$("#list li:odd").addClass("li_bg2");
$("#list li").hover(function(){
$(this).addClass("hover");
},
function(){
$(this).removeClass("hover");
});
});
-->
</script>
<style type="text/css">
#list .li_bg1 {
background:#FFF;
}
#list .li_bg2 {
background:#F0F;
}
#list li.hover {
background:#0F0;
}
</style>
</head>
<body>
<div>
<ul id="list">
<li>Content of the One!</li>
<li>Content of the Two!</li>
<li>Content of the Three!</li>
<li>Content of the Four!</li>
<li>Content of the Five!</li>
<li>Content of the Six!</li>
<li>Content of the Seven!</li>
<li>Content of the Eight!</li>
</ul>
</div>
</body>
</html>

代码很简单，不用做什么说明了。

Simple happiness

您可能感兴趣的文章

]]> http://xfuxing.com/2009/jquery-interlacing-color-code.html/feed 0 jquery选项卡代码 http://xfuxing.com/2009/jquery-option-card-code.html http://xfuxing.com/2009/jquery-option-card-code.html#comments Sun, 19 Jul 2009 02:54:05 +0000 德海 http://xfuxing.com/abc/52 一直想写个漂亮实用的主题，可无奈自己技术不够，甚至可以说是门外汉，虽然前几日依着K2和iNove以及大量的插件差点改出一个主题来，但最终还是放弃了。对于技术，咱这个门外汉还是奉行“拿来主义”吧，一点一点充实之后再厚积薄发。

第一个充实的——选项卡。

如今选项卡这种方式可是很热门的，在网上一搜一大片，本着小博有可能会依赖于lightbox2的图片效果，于是搜起了jquery这个JS框架下的相关代码，在查看了N个后，进行整合，于是，下面的代码热气腾腾的出炉了，虽说这样的代码网上比比皆是，但我还是记录下来，如果您凑巧也喜欢，那尽管拿去好了。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cn" lang="cn">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Tabs</title>

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
//When page loads
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

var $div_li = $("ul.tabs li");
$div_li.click(function(){
$(this).addClass("active").siblings().removeClass("active");
var index = $div_li.index(this); //Click access to the current elements in all the <li> elements in the index.
$("div.tab_container > div").eq(index).show().siblings().hide();
}).hover(function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
});
});
-->
</script>
<style type="text/css">
<!-- menu start -->
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0 20px;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
overflow: hidden;
position: relative;
background: #e0e0e0;
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
outline: none;
cursor: hand;
}
ul.tabs li.hover {
background: #ccc;
}
ul.tabs li.active {
background: #fff;
border-bottom: 1px solid #999;
}
<!-- menu end -->
<!-- content start -->
.tab_container {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
<!-- content end -->
</style>
</head>
<body>
<div class="menu">
<ul class="tabs">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>

<div class="tab_container">
<div class="tab_content">
Content of the One!
</div>
<div class="tab_content">
Content of the Two!
</div>
<div class="tab_content">
Content of the Three!
</div>
</div>
</body>
</html>

代码很简单，不做太多说明了，留着备用。
哦，顺便庆祝一下PICASA终于正常了，我儿的照片又能显示了。

Simple happiness

您可能感兴趣的文章

]]> http://xfuxing.com/2009/jquery-option-card-code.html/feed 0