playts

2009年6月3日星期三

2009年3月3日星期二

没有备案就关站信产部备案检查开始了

昨天我维护的一个网站被空间服务商关掉，原因是没有备案号。在迅速发展的互联网今天，个人、公司企业网站不计其数，信产部执行备案措施来杜绝、清理那些垃圾网站，想法是好的，不过在执行上有点不太合情合理。备案时需要填写网站负责人的姓名、身份证号之类的信息，但是当你用你的个人信息备案过一个站点，以后想再备案另一个站点，问题就来了，昨天关掉的这个站点就是这样的情况造成。我的备案信息很早就提交了，只是无法通过备案提准。

2009年2月23日星期一

Agile Carousel: JQuery Carousel Plugin试用体会

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

使用例子：

加载脚本

<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，效果如下：

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)同等#000080，0.5是opacity的值

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">

订阅：博文 (Atom)

playts

2009年6月3日星期三

最近怎么了？

2009年3月3日星期二

没有备案就关站信产部备案检查开始了

2009年2月23日星期一

Agile Carousel: JQuery Carousel Plugin试用体会

使用例子：

加载脚本

HTML代码

HTML代码

2009年2月22日星期日

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

2009年2月21日星期六

建立节点类型node-type模板

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

drupal 6.x

Drupal 4.7.x 和 Drupal 5.x

2009年2月20日星期五

提取Google Project边栏的风格

示例代码：

分离CSS和HTML

CSS代码--

HTML代码--

2009年2月18日星期三

drupal6.x分页风格仿digg

CSS代码：

2009年2月17日星期二

RGBa 浏览器支持

使用例子：

使用RGB:

使用RGBA:

2009年2月13日星期五

jQuery Marquee

关注者