2009年2月23日星期一

Agile Carousel: JQuery Carousel Plugin试用体会

项目页:http://code.google.com/p/agile-carousel/
JQuery版本:JQuery 1.2.x
部分效果需要jquery ui

2009-02-23_014350 2009-02-23_014242

使用例子:

加载脚本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script src="slide_behavior_min.js"></script>
<script type="text/javascript">
        
 $('#slide_holder').agile_carousel();

</script>
HTML代码
<div id="slide_holder"></div>

如果想使用更多效果,看carousel.html文件的例子

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.2/jquery-ui.min.js"></script>
<script src="carousel_behavior_min.js"></script>

<script type="text/javascript">
 
 $('#slide_holder').agile_carousel({
 first_last_buttons: "yes",
    hover_next_prev_buttons: "yes",
    next_prev_buttons: "yes",
    pause_button: "yes",
    slide_buttons: "yes",
 slide_captions: "JQuery Carousel Plugin|Agile Slide Types|JQuery UI Effects Available|Agile Settings|Carousel That's Built to Order", 
    slide_directory: "slides",
  slide_links: "http://code.google.com/p/agile-carousel/downloads/list,http://code.google.com/p/agile-carousel/downloads/list,http://code.google.com/p/agile-carousel/downloads/list,http://code.google.com/p/agile-carousel/downloads/list,http://code.google.com/p/agile-carousel/downloads/list",
    slide_number_display: "yes",
    timer_length: "7000",
 transition_duration: 1000,
 transition_easing: "easeOutBack", 
    transition_type: "carousel",
 water_mark: "yes"
  });

</script> 

slide_captions是图片说明文字用“|”分割,slide_directory是设定图片的目录,slide_links是图片的链接URL用“,”分割

HTML代码
<div id="slide_holder"><img class="loading" src="images/ajax_loader.gif" alt=""></div>

详细说请访问http://code.google.com/p/agile-carousel/

感觉用它做广告不错,如果想使用全部效果还需要加载jquery ui,并且需要php环境,该插件中有个make_slides.php文件,用来读取图片目录中的图片。由于是遍历图片目录,所以不适合在图片目录放过多的图片。

2009年2月22日星期日

苏格兰艺术家用上万根火柴拼出动物脸

北极熊脸 猴子脸

据英国媒体报道,苏格兰艺术家David Mach日前用上万根火柴棒拼出了多个栩栩如生的动物脸,每个塑像售价在2万至3.5万英磅之间。

据悉,David Mach是英国80年代最具代表性的雕塑家之一,早期以其戏剧性大型装置雕塑著名(其实他既不雕也不塑,以现成物装置成形) 。

David Mach对日常生活里的消费物体别有一番钟情,过去的雕塑作品都以系列图书、杂志、轮胎、地毯、塑料布、家电、电视、汽车、陶瓷器的动物、家具及火柴等等建构成形,总是将微不足道的素材建构成非凡想象的艺术品。90年代起继续在这敏锐感性的火柴、铁衣架、彩绘名信卡片及相片等素材探讨,经常出其不遇的建构他非同凡响的雕像与影像绘画。

2009年2月21日星期六

建立节点类型node-type模板

在默认安装的drupal后,安装程序会创建2个内容类型:page和story。所有的节点内容输出都是通过node.tpl.php完成,无论是在摘要(teaser)页还是内容页(page)。

如果需要我们可以每个内容类型或单个内容类型建立节点(node)模板,例如:
node-story.tpl.php

推荐方法是:复制主题模板目录中的node.tpl.php另保存为:node-story.tpl.php
注意:node.tpl.php必须在你的主题目录中,不要将node.tpl.php重命名为node-story.tpl.php

如果你还有其他内容类型需要定制,规则是:node-[node-$type].tpl.php
什么是node-$type?你可以URL到admin/content/types 查看。
加入你启用了forum和book模块,可以建立:node-forum.tpl.php 、node-book.tpl.php

建立node-[node-$type].tpl.php不是必须的,根据需要定制,如果大同小异就没有必要了。

另外在drupal 6.x中,当建立了新的模板文件需要注册,方法是在"管理--> 站点设置-->性能" URL:admin/settings/performance 点击"清除缓存数据"按钮

  • 本文的介绍内容你可以访问:http://drupal.org/node/17565
  • 关于Node.tpl.php可以参考drupal.org的文章http://drupal.org/node/11816

建立node-1.tpl.php这样的模板

在使用drupal建站时,可能会遇到单独定制某个节点模板的需要,(例如想建立node-1.tpl.php这样的模板)在drupal.org找到了相关的解决办法。

需要复制或合并代码到你的主题模板的template.php

drupal 6.x

<?php
function phptemplate_preprocess_node(&$vars) {
    $vars['template_files'][] = 'node-' . $vars['nid'];
    return $vars;
}
?>

Drupal 4.7.x 和 Drupal 5.x

<?php
function _phptemplate_variables($hook, $vars = array()) {
  switch ($hook) {
    case 'node':
      $vars['template_files'] = array('node-'. $vars['nid']);
      break;
  }
  return $vars;
}
?>

然后复制node.tpl.php另存为:node-[nodeID].tpl.php (例如:node-1.tpl.php)根据自己的需要修改。 原文链接:Separate node template for a specific node

2009年2月20日星期五

提取Google Project边栏的风格

效果可以看http://code.google.com/p/google-code-prettify/

原理是 利用3层的box边框大小

  • 行内容一
  • 行内容二
  • 行内容三

示例代码:

 <div style="background: #e5ecf9; margin-bottom: 0.6em;">
 <div style="border-left: 4px solid #fff; border-right: 4px solid #fff; font-size: 0; margin: 0; padding: 0; height: 1px;"></div>
 <div style="border-left: 2px solid #fff; border-right: 2px solid #fff; font-size: 0; margin: 0; padding: 0; height: 1px;"></div>
 <div style="border-left: 1px solid #fff; border-right: 1px solid #fff; font-size: 0; margin: 0; padding: 0; height: 1px;"></div>
 <div style="margin: 0; padding: 0 13px 0 13px;">
 <ul>
 <li>行内容一</li>
 <li>行内容二</li>
 <li>行内容三</li>
 </ul>
 </div>
 <div style="border-left: 1px solid #fff; border-right: 1px solid #fff; font-size: 0; margin: 0; padding: 0; height: 1px;"></div>
 <div style="border-left: 2px solid #fff; border-right: 2px solid #fff; font-size: 0; margin: 0; padding: 0; height: 1px;"></div>
 <div style="border-left: 4px solid #fff; border-right: 4px solid #fff; font-size: 0; margin: 0; padding: 0; height: 1px;"></div>
 </div>

分离CSS和HTML

CSS代码--
.pmeta_bubble_bg {
 background: #e5ecf9;
 margin-bottom: 0.6em;
 width: 300px;
}
.box-inner {
  margin: 0;
  padding: 0 13px 0 13px;
}

.round1 {
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}

.round2 {
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
}

.round4 {
  border-left: 4px solid #fff;
  border-right: 4px solid #fff;
}

.round1,
.round2,
.round4 {
  font-size: 0;
  margin: 0;
  padding: 0;
  height: 1px;
}
HTML代码--
 <div class="pmeta_bubble_bg">
 <div class="round4"></div>
 <div class="round2"></div>
 <div class="round1"></div>
 <div class="box-inner">
 <ul>
 <li></li>
 <li></li>
 <li></li>
 </ul>
 </div>
 <div class="round1"></div>
 <div class="round2"></div>
 <div class="round4"></div>
 </div>

2009年2月18日星期三

drupal6.x分页风格仿digg

闲来无事修改drupal6.x分页风格仿digg,效果如下:

drupal_6x_pager_digg_skin_001
drupal_6x_pager_digg_skin_002
drupal_6x_pager_digg_skin_003

CSS代码:

/* 注意:保证以下代码不被默认的代码覆盖
 如果有冲突自行修改
----------------------------------------------- */

/* container
 在低分辨率下(如:800x600)使用默认garland主题时
 防止分页超出页面宽度换行,你可以根据情况注释掉
----------------------------------------------- */
#container{
 width: 980px;
}

/* pager
----------------------------------------------- */
div.item-list ul.pager{
 padding: 0px;
 margin: 1em 0;
 clear: left;
 text-align: center;
 font: 12px/1.4em Arial, Helvetica, sans-serif;
}

div.item-list ul.pager li{
 background-image:none;
 display:inline;
 margin: 0px;
 padding: 0px;
 list-style: none;
 border: none;
}

div.item-list ul.pager a.active,
div.item-list ul li.pager-current,
div.item-list ul li.pager-ellipsis{
 background: #fff;
 text-decoration: none;
 border: 1px solid #9AAFE5;
 color:#105CB6;
 display: block;
 float: left;
 padding: .2em .5em;
 margin-right: 1px;
 cursor:pointer;
}

div.item-list ul li.pager-ellipsis{
 border: none;
 color:#333;
}

div.item-list ul.pager li .active:hover {
 border: 1px solid #2E6AB1;
}

div.item-list ul.pager li.pager-current{
 border: 1px solid #2E6AB1;
 font-weight: bold;
 background: #2E6AB1;
 color: #fff;
 margin-right: 1px;
}

2009年2月17日星期二

RGBa 浏览器支持

原文:RGBa Browser Support

使用例子:

div {background: rgba(200, 54, 54, 0.5);}

关于颜色请参考:http://www.w3.org/TR/2003/CR-css3-color-20030514/#rgba-color

使用RGB:

<div style="background: rgb(0, 0, 128); height: 100px; width: 100px;"></div>


使用RGBA:

<div style="height: 333px; width: 500px;position: relative;">
<img src="http://farm4.static.flickr.com/3223/3290904238_cd8e54d044.jpg" width="500" height="333" />
<div style="position: absolute; height: 313px; top: 10px; left: 10px; width: 480px; background: rgb(51, 102, 0); background: rgba(51, 102, 0, 0.5);">RGBa 浏览器支持</div>
</div>

RGBa 浏览器支持

rgba(0, 0, 128, 0.5)是指颜色为rgb(0, 0, 128)同等#0000800.5opacity的值

IE可以使用:filter:alpha(opacity=50);
firefox使用:opacity: 0.5;
看:CSS Transparency Settings for All Browsers

Browser, Version, Platform Outcome Fallback
Firefox 3.0.5 (OS X) Works --
Firefox 3.0.5 (Windows XP, Vista) Works --
Firefox 2.0.0.18 (PC) Doesn't Work Solid Color
Safari 4 (Developer Preview, OS X) Works --
Safari 3.2.1 (OS X, Windows XP) Works --
Mobile Safari (iPhone) Works --
Opera 9.6.1 Doesn't Work Solid Color
Opera 10 Beta (Linux & Windows) Works --
IE 4.01 Doesn't Work No Color
IE 5.5 (PC via IETester) Doesn't Work No Color
IE 6 (PC via IETester) Doesn't Work Solid Color
IE 7 Doesn't Work Solid Color
IE 8 beta 2 Doesn't Work Solid Color
Google Chrome 0.4.154.33 (Windows XP) Works --
Google Chrome 1.0.154.46 (Windows XP) Works --
Netscape 4.8 (PC) Doesn't Work No Color
Navigator 9.0.0.5 Linus Doesn't Work Solid Color
SeaMonkey 1.1.14 Doesn't Work No Color
SeaMonkey 2.0 Works --
Sunrise 1.7.5 Works --
Stainless 0.2.5 Works --
Flock 1.2.7 Doesn't Work Solid Color
Flock 2.0.2 Works --
BlackBerry Storm Browser Works --
Camino 1.6.6 Doesn't Work Solid Color
Camino 2.0b1 Works --
Iceape 1.1.14 (Linux) Doesn't Work Solid Color
Kazehakase 0.5.2 (Linux) Doesn't Work Solid Color
Avant 11.7 (Windows XP) Doesn't Work Solid Color

2009年2月13日星期五

jQuery Marquee

跑马灯效果,项目:http://plugins.jquery.com/project/marquee
演示页:http://remysharp.com/demo/marquee.html

jQuery版本1.2.x

    <script src="jquery-1.2.6.js" type="text/javascript"></script> 
    <script src="../downloads/jquery.marquee.js" type="text/javascript"></script> 
 
    <script type="text/javascript"> 
    <!--
    $(function () {
        // basic version is: $('div.demo marquee').marquee() - but we're doing some sexy extras
        
        $('div.demo marquee').marquee('pointer').mouseover(function () {
            $(this).trigger('stop');
        }).mouseout(function () {
            $(this).trigger('start');
        }).mousemove(function (event) {
            if ($(this).data('drag') == true) {
                this.scrollLeft = $(this).data('scrollX')   ($(this).data('x') - event.clientX);
            }
        }).mousedown(function (event) {
            $(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
        }).mouseup(function () {
            $(this).data('drag', false);
        });
    });
    //--> 
    </script> 
<marquee behavior="scroll" scrollamount="1" direction="left" width="350">

<marquee scrollamount="2" behavior="alternate" direction="right" width="350">

<marquee loop="3" behavior="slide" direction="right" width="350">

<marquee behavior="scroll" direction="down" scrollamount="2" height="100" width="350">