仓蓝

日记本
  BlogJava :: 首页 :: 联系 :: 聚合  :: 管理
  23 Posts :: 0 Stories :: 1 Comments :: 0 Trackbacks

2014年1月10日 #

适合Linux系统使用的常用命令总结
     摘要: 适合Linux系统使用的命令，本文以亚马逊的Amazon Linux 为用例，希望对朋友们有点帮助！切换至root用户    sudo su  安装screen    yum install screen       yum update  安装Apache，MySQL...  阅读全文
posted @ 2014-01-10 10:45 cangshi 阅读(1751) | 评论 (0) | 编辑 收藏

2014年1月8日 #

介绍一组适用于在Wordpress侧栏放置的图片广告轮播（js）代码

希望WP爱好者能够喜欢并尝试一下‘

1.样式表

  1. /*SidebarTabsAd*/  
  2. #cwpad_box{width:100%;text-align:center}   
  3. #cwpad_box ul, #cwpad_box dd, #cwpad_box tt{   
  4.     margin:0px;   
  5.     padding:0px;   
  6.     float:left;   
  7.     list-style: none;   
  8. }   
  9. #cwpad_box{   
  10.     width:313px;/*250px+(n-1)*21px*/  
  11.     height:250px;   
  12.     border-left: 1px solid #740a20;   
  13. }   
  14. #cwpad_box dd{   
  15.     width:21px;   
  16.     height:250px;   
  17.     overflow:hidden;   
  18.     position:relative;   
  19. }   
  20. #cwpad_box dd.hove{   
  21.     width:250px;   
  22.     text-align:rightright;   
  23. }   
  24. #cwpad_box dd tt{   
  25.     width:20px;   
  26.     height:250px;   
  27.     top:0px;   
  28.     left:0px;   
  29.     color:#fff;   
  30.     cursor:pointer;   
  31.     text-align:center;   
  32.     padding:20px 0 0 0;   
  33.     background:#b9000d;   
  34.     position:absolute;   
  35.     border-right:1px solid #740a20;   
  36. }   
  37. #cwpad_box dd tt.hove{   
  38.     background:#620317;   
  39. }  

在上面的样式表中，假设放置的是四个250px*250px的图片广告，所以250+（4-1）*21=313px。

2.javascript代码

  1. <script type="text/javascript">   
  2. function myAddEvent(obj, sEvent, fn){   
  3.     return obj.attachEvent ? obj.attachEvent('on' + sEvent, fn) : obj.addEventListener(sEvent, fn, false);   
  4. }   
  5. function Class(oParent, sClass){   
  6.     var aElem = oParent.getElementsByTagName('*');   
  7.     var aClass = [];   
  8.     var i = 0;   
  9.     for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);   
  10.     return aClass;   
  11. };   
  12. function css(obj, attr, value){   
  13.     if(arguments.length == 2){   
  14.         var style = obj.style,   
  15.             currentStyle = obj.currentStyle;   
  16.         if(typeof attr === 'string')return currentStyle ? currentStyle[attr] : getComputedStyle(obj, false)[attr];   
  17.         for(var propName in attr)propName == 'opacity' ? (style.filter = "alpha(opacity=" + attr[propName] + ")", style.opacity = attr[propName] / 100) : style[propName] = attr[propName];    
  18.     }else if(arguments.length == 3){   
  19.         switch(attr){   
  20.             case "width":   
  21.             case "height":   
  22.             case "paddingTop":   
  23.             case "paddingRight":   
  24.             case "paddingBottom":   
  25.             case "paddingLeft":   
  26.             case "top":   
  27.             case "right":   
  28.             case "bottom":   
  29.             case "left":   
  30.             case "marginTop":   
  31.             case "marginRigth":   
  32.             case "marginBottom":   
  33.             case "marginLeft":   
  34.                 obj.style[attr] = value + "px";   
  35.                 break;   
  36.             case "opacity":   
  37.                 obj.style.filter = "alpha(opacity=" + value + ")";   
  38.                 obj.style.opacity = value / 100;   
  39.                 break;   
  40.             default:   
  41.                 obj.style[attr] = value   
  42.         }   
  43.     }   
  44. };   
  45. function extend(destination, source){   
  46.     for (var propName in source) destination[propName] = source[propName];   
  47.     return destination   
  48. };   
  49. function doMove(obj, json, fnEnd){   
  50.     clearInterval(obj.timer);   
  51.     obj.iSpeed = 0;   
  52.     fnEnd = extend({   
  53.         type: "buffer",   
  54.         callback: function() {}   
  55.     }, fnEnd);   
  56.     obj.timer = setInterval(function(){   
  57.         var iCur = 0,   
  58.             iStop = true;   
  59.         for(var propName in json){   
  60.             iCur = parseFloat(css(obj, propName));   
  61.             propName == 'opacity' && (iCur = Math.round(iCur * 100));   
  62.             switch(fnEnd.type){   
  63.                 case 'buffer':   
  64.                     obj.iSpeed = (json[propName] - iCur) / 5;   
  65.                     obj.iSpeed = obj.iSpeed > 0 ? Math.ceil(obj.iSpeed) : Math.floor(obj.iSpeed);   
  66.                     json[propName] == iCur || (iStop = false, css(obj, propName, iCur + obj.iSpeed));   
  67.                     break;   
  68.                 case 'elasticity':   
  69.                     obj.iSpeed += (json[propName] - iCur) / 5;   
  70.                     obj.iSpeed *= 0.75;   
  71.                     Math.abs(json[propName] - iCur) <= 1 &&  Math.abs(obj.iSpeed) <= 1 ? css(obj, propName, json[propName]) : css(obj, propName, json[propName]) || (iStop = false, css(obj, propName, iCur + obj.iSpeed));   
  72.                     break;   
  73.                 case 'accelerate':   
  74.                     obj.iSpeed = obj.iSpeed + 5;   
  75.                     iCur >= json[propName] ? css(obj, propName, json[propName]) : css(obj, propName, json[propName]) || (iStop = false, css(obj, propName, iCur + obj.iSpeed));   
  76.                 break;   
  77.             }   
  78.         }   
  79.         if(iStop){   
  80.             clearInterval(obj.timer);   
  81.             obj.timer = null;   
  82.             obj.iSpeed = 0;   
  83.             fnEnd.callback();   
  84.         }   
  85.     },30);   
  86. };   
  87.   
  88. window.onload = function(){   
  89.     var oBox = document.getElementById('cwpad_box')   
  90.     var aSpan = document.getElementsByTagName('tt');   
  91.     var aLi = document.getElementsByTagName('dd');   
  92.     var playtime = null;   
  93.     var iNow = 0;   
  94.     for(i=0;i<aSpan.length;i++){   
  95.         aSpan[i].index = i;   
  96.         aSpan[i].onclick = function(){   
  97.             for(var len=aLi.length,i=0;i<len;i++)doMove(aLi[i], {width:21});   
  98.             for(var len=aSpan.length,i=0;i<len;i++)aSpan[i].className = '';   
  99.             this.className = 'hove';   
  100.             doMove(this.parentNode, {width:250});   
  101.             iNow = this.index;   
  102.         };   
  103.     }   
  104.     playtime = setInterval(tab,3500);   
  105.     oBox.onmouseover = function(){   
  106.         clearInterval(playtime);   
  107.     }   
  108.     oBox.onmouseout = function(){   
  109.         playtime = setInterval(tab,3500);   
  110.     }   
  111.     function tab(){   
  112.         iNow == aLi.length-1 ? iNow = 0 : iNow++;   
  113.         aSpan[iNow].onclick();   
  114.     }   
  115. };   
  116.  </script>    

 

3.示例的HTML代码

  1. <div id="cwpad_box">  
  2.     <ul>  
  3.         <dd  class="hove">  
  4.         <tt class="hove">网站设计及培训</tt>  
  5.         <a href="http://suoling.net/" target=_blank title="网站设计及培训"><img src="http://fakeimg.pl/250x250/?text=Hello,A!"></a>  
  6.         </dd>  
  7.         <dd>  
  8.         <tt>网站优化及培训</tt>  
  9.         <a href="http://suoling.net/" target=_blank title="网站优化及培训"><img src="http://fakeimg.pl/250x250/?text=Hello,B!"></a>  
  10.         </dd>  
  11.         <dd>  
  12.         <tt>网站诊断</tt>  
  13.         <a href="http://suoling.net/" target=_blank title="网站诊断"><img src="http://fakeimg.pl/250x250/?text=Hello,C!"></a>  
  14.         </dd>  
  15.         <dd>  
  16.         <tt>电子商务培训</tt>  
  17.         <a href="http://suoling.net/" target=_blank title="电子商务培训"><img src="http://fakeimg.pl/250x250/?text=Hello,D!"></a>  
  18.         </dd>  
  19.     </ul>  
  20. </div>  

使用的是索凌网络前面介绍过的"假图"生成网站fakeimg.pl生成的"假图"。

这组代码的一个显著缺点是：不适合移动设备显示。

posted @ 2014-01-08 11:20 cangshi 阅读(253) | 评论 (0) | 编辑 收藏

2014年1月6日 #

WP后台表格代码示例
  1. if(is_admin())   

  2. {   

  3.     new Cool_Wp_List_Table();   

  4. }   

  5.   

  6. /**  

  7.  * Cool_Wp_List_Table class will create the page to load the table  

  8.  */  

  9. class Cool_Wp_List_Table   

  10. {   

  11.     /**  

  12.      * Constructor will create the menu item  

  13.      */  

  14.     public function __construct()   

  15.     {   

  16.         add_action( 'admin_menu', array($this, 'add_menu_example_list_table_page' ));   

  17.     }   

  18.   

  19.     /**  

  20.      * Menu item will allow us to load the page to display the table  

  21.      */  

  22.     public function add_menu_example_list_table_page()   

  23.     {   

  24.         add_menu_page( 'Coowp示例表格', 'Coowp示例表格', 'manage_options', 'coolwp-list-table.php', array($this, 'list_table_page') );   

  25.     }   

  26.   

  27.     /**  

  28.      * Display the list table page  

  29.      *  

  30.      * @return Void  

  31.      */  

  32.     public function list_table_page()   

  33.     {   

  34.         $exampleListTable = new Example_List_Table();   

  35.         $exampleListTable->prepare_items();   

  36.         ?>   

  37.             <div class="wrap">   

  38.                 <div id="icon-users" class="icon32"></div>   

  39.                 <h2>Coowp示例表格-页面标题</h2>   

  40.                 <?php $exampleListTable->display(); ?>   

  41.             </div>   

  42.         <?php   

  43.     }   

  44. }   

  45.   

  46. // WP_List_Table is not loaded automatically so we need to load it in our application   

  47. if( ! class_exists( 'WP_List_Table' ) ) {   

  48.     require_once( ABSPATH . 'wp-admin/includes/class-wp-list-table.php' );   

  49. }   

  50.   

  51. /**  

  52.  * Create a new table class that will extend the WP_List_Table  

  53.  */  

  54. class Example_List_Table extends WP_List_Table   

  55. {   

  56.     /**  

  57.      * Prepare the items for the table to process  

  58.      *  

  59.      * @return Void  

  60.      */  

  61.     public function prepare_items()   

  62.     {   

  63.         $columns = $this->get_columns();   

  64.         $hidden = $this->get_hidden_columns();   

  65.         $sortable = $this->get_sortable_columns();   

  66.   

  67.         $data = $this->table_data();   

  68.         usort( $data, array( &$this, 'sort_data' ) );   

  69.   

  70.         $perPage = 2;   

  71.         $currentPage = $this->get_pagenum();   

  72.         $totalItems = count($data);   

  73.   

  74.         $this->set_pagination_args( array(   

  75.             'total_items' => $totalItems,   

  76.             'per_page'    => $perPage  

  77.         ) );   

  78.   

  79.         $data = array_slice($data,(($currentPage-1)*$perPage),$perPage);   

  80.   

  81.         $this->_column_headers = array($columns, $hidden, $sortable);   

  82.         $this->items = $data;   

  83.     }   

  84.   

  85.     /**  

  86.      * Override the parent columns method. Defines the columns to use in your listing table  

  87.      *  

  88.      * @return Array  

  89.      */  

  90.     public function get_columns()   

  91.     {   

  92.         $columns = array(   

  93.             'id'          => __('ID'),   

  94.             'title'       => __('Title'),   

  95.             'description' => __('描述'),   

  96.             //__('Description'),怎么被Wordpress翻译为“图像描述”了？   

  97.             'date'        => __('Date'),   

  98.             'price'    => __('价格'),//__('Price'),   

  99.             'rating'      => __('Rating')   

  100.         );   

  101.   

  102.         return $columns;   

  103.     }   

  104.   

  105.     /**  

  106.      * Define which columns are hidden  

  107.      *  

  108.      * @return Array  

  109.      */  

  110.     public function get_hidden_columns()   

  111.     {   

  112.         return array();   

  113.     }   

  114.   

  115.     /**  

  116.      * Define the sortable columns  

  117.      *  

  118.      * @return Array  

  119.      */  

  120.     public function get_sortable_columns()   

  121.     {   

  122.         return array('title' => array('title', false));   

  123.     }   

  124.   

  125.     /**  

  126.      * Get the table data  

  127.      *  

  128.      * @return Array  

  129.      */  

  130.     private function table_data()   

  131.     {   

  132.         $data = array();   

  133.   

  134.         $data[] = array(   

  135.                     'id'          => 1,   

  136.                     'title'       => '某IT设备租赁公司：杨先生',   

  137.                     'description' => '上海，需求描述',   

  138.                     'date'        => '2013.01.01',   

  139.                     'price'       => '---',   

  140.                     'rating'      => '7.3'   

  141.                     );   

  142.   

  143.         $data[] = array(   

  144.                     'id'          => 2,   

  145.                     'title'       => '某婚摄团队：李先生',   

  146.                     'description' => '台湾，台北',   

  147.                     'date'        => '2013.12.15',   

  148.                     'price'       => '---',   

  149.                     'rating'      => '7.2'   

  150.                     );   

  151.   

  152.         $data[] = array(   

  153.                     'id'          => 3,   

  154.                     'title'       => '在校研究生：梁小姐',   

  155.                     'description' => '墨尔本大学：艺术设计',   

  156.                     'date'        => '2013.12.03',   

  157.                     'price'       => '---',   

  158.                     'rating'      => '7.0'   

  159.                     );   

  160.   

  161.         $data[] = array(   

  162.                     'id'          => 4,   

  163.                     'title'       => '某私人航空公司',   

  164.                     'description' => '仅前端交互：何小姐',   

  165.                     'date'        => '2014.01.01',   

  166.                      'price'      => '---',   

  167.                     'rating'      => '7.0'   

  168.                     );   

  169.         return $data;   

  170.     }   

  171.   

  172.     /**  

  173.      * Define what data to show on each column of the table  

  174.      *  

  175.      * @param  Array $item        Data  

  176.      * @param  String $column_name - Current column name  

  177.      *  

  178.      * @return Mixed  

  179.      */  

  180.     public function column_default( $item, $column_name )   

  181.     {   

  182.         switch( $column_name ) {   

  183.             case 'id':   

  184.             case 'title':   

  185.             case 'description':   

  186.             case 'date':   

  187.             case 'price':   

  188.             case 'rating':   

  189.                 return $item[ $column_name ];   

  190.   

  191.             default:   

  192.                 return print_r( $item, true ) ;   

  193.         }   

  194.     }   

  195.   

  196.     /**  

  197.      * Allows you to sort the data by the variables set in the $_GET  

  198.      *  

  199.      * @return Mixed  

  200.      */  

  201.     private function sort_data( $a, $b )   

  202.     {   

  203.         // Set defaults   

  204.         $orderby = 'title';   

  205.         $order = 'asc';   

  206.   

  207.         // If orderby is set, use this as the sort column   

  208.         if(!emptyempty($_GET['orderby']))   

  209.         {   

  210.             $orderby = $_GET['orderby'];   

  211.         }   

  212.   

  213.         // If order is set use this as the order   

  214.         if(!emptyempty($_GET['order']))   

  215.         {   

  216.             $order = $_GET['order'];   

  217.         }   

  218.   

  219.         $result = strcmp( $a[$orderby], $b[$orderby] );   

  220.   

  221.         if($order === 'asc')   

  222.         {   

  223.             return $result;   

  224.         }   

  225.   

  226.         return -$result;   

  227.     }   

  228. }  

ENJOY IT!
posted @ 2014-01-06 11:03 cangshi 阅读(264) | 评论 (0) | 编辑 收藏

2014年1月2日 #

(转载)jQuery插件Lazyload的使用
如果网页包含大量图片，那么，采用Lazyload来延迟图片的载入以加速网页整体在浏览器中的载入是个不错的方法！

上面这句话并不是翻译来的，只是我想一句话说完。

下面开始吧：

1.在页面头部加载jQuery和这个Lazyload插件，如果已经加载过了jQuery，那就不用再次加载了：

    <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>   
    <script src="jquery.lazyload.js" type="text/javascript"></script>   

是的，我习惯在国内用又拍云的云加速。

对图片的处理：

    <img class="lazy" src="img/grey.gif" data-original="img/true_image.jpg"  width="730" heigh="300">   

上面示例中的grey.gif实际上相当于一个占位符，建议采用1*1px的灰色png或者gif，data-original后面的才是真正的图片链接，class="lazy"是个可以定义的特定class。
Lazyload基本设置

    <script type="text/javascript" charset="utf-8">   
        $(function() {   
            $("img.lazy").lazyload();   
        });   
    </script>  

Lazyload基本设置的在线DEMO:Lazyload DEMO1
对不支持js浏览器的处理

    <img class="lazy" src="img/grey.gif" data-original="img/true_image.jpg"  width="730" heigh="300">   
    <noscript><img src="img/true_image.jpg" width="730" heigh="300"></noscript>  

用CSS隐藏占位符：

    .lazy {   
      display: none;   
    }  

对支持js的浏览器，应该在DOM准备阶段就初始化插件：

    $("img.lazy").show().lazyload();  

当然了，这样处理兼容性更好，不过现在的浏览器大多都是支持js的。
加载敏感度

默认的情况下，图片将会在出现在屏幕上时显示，如果想提载入图片，可以使用 threshold 进行设置，下例的含义是：在图片距离屏幕180px时提前载入：

    $("img.lazy").lazyload({ threshold :180});  

占位图片

可以自定义一个简单的浅色或灰色系的小图片（越小越好，1*1px最佳，格式推荐采用gif）作为占位图片来触发加载动作。
事件触发

可以是jQuery的任何事件（如click、mouseover），还可以使用自己定义的事件。

例如：处于等待状态, 直到浏览者滚动到窗口中图片所在位置，在占位图片被点击之前不加载图片, 可以这样做:

    $("img").lazyload({   
        placeholder : "img/grey.gif",   
        event : "click"  
    });  

 特效的使用

当图片完全加载的时候，默认使用show()方法来显示图片，所以，上面的那个基本设置示例中未写出show(),但是可以照常运行。
 图片淡入（FadeIn）效果

    $("img.lazy").lazyload({    
        effect : "fadeIn"  
    });  

Lazyload图片淡入效果演示
将图片放在特定容器中

先看示例：水平滚动演示页面和垂直滚动的演示页面

CSS部分示例

    #container {   
        height: 600px;   
        overflow: scroll;   
    }  

js部分示例

    $("img.lazy").lazyload({            
         container: $("#container")   
    });  

 图片未按顺序排列的情况

滚动页面的时候，Lazyload会按照在HTML代码中的顺序先后可视范围内的加载图片，在第一张不在可视范围内的图片处停止执行，但是在某些页面布局中，这种聪明的假设可能是不成立的，那么可以用failurelimit来控制加载动作：

    $("img.lazy").lazyload({    
        failure_limit : 10   
    });  

上面的意思是：在找到10张不在可视范围内的图片时停止执行。额，好吧，如果你的页面布局猥琐到10不足以满足的时候，那就再大一些吧。
Lazyload定时延迟图片载入

Lazyload的一个并不完备的功能，并不影响使用，但是实际用途并不大！用途描述：在页面和可见图片载入后一定时间内载入图片。Lazyload定时延迟图片载入示例

    $(function() {             
        $("img:below-the-fold").lazyload({   
            event : "sporty"  
        });   
    });   
    $(window).bind("load", function() {    
        var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")}, 5000);   
    });  

上例中采用的参数或者说定时是5秒。
 加载隐藏的图片

你的页面上可能隐藏了很多不可见的图片用作特殊用途，Lazyload默认是忽略这些图片的，如果不想忽略掉，可以这样：

    $("img.lazy").lazyload({    
        skip_invisible : false   
    });  

 
 Lazyload下载与兼容性

最新的未压缩版 source与压缩版 minified。

你看到这篇文章时可能有更新的版本了，请点击Lazyload了解更多！

兼容于：

OSX平台： Safari 5.1, Safari 6, Chrome 20, Firefox 12

WIN平台：Chrome 20, IE 8 and IE 9 on Windows

iPhone和 iPad上：Safari 5.1
posted @ 2014-01-02 11:16 cangshi 阅读(7693) | 评论 (1) | 编辑 收藏

2013年12月31日 #

可以用在WordPress侧栏的一组图片广告轮播的代码
本文介绍一组适用于在Wordpress侧栏放置的图片广告轮播（js）代码：可自动播放，同时响应访客的点击

1.样式表

  1. /*SidebarTabsAd*/  
  2. #cwpad_box{width:100%;text-align:center}   
  3. #cwpad_box ul, #cwpad_box dd, #cwpad_box tt{   
  4.     margin:0px;   
  5.     padding:0px;   
  6.     float:left;   
  7.     list-style: none;   
  8. }   
  9. #cwpad_box{   
  10.     width:313px;/*250px+(n-1)*21px*/  
  11.     height:250px;   
  12.     border-left: 1px solid #740a20;   
  13. }   
  14. #cwpad_box dd{   
  15.     width:21px;   
  16.     height:250px;   
  17.     overflow:hidden;   
  18.     position:relative;   
  19. }   
  20. #cwpad_box dd.hove{   
  21.     width:250px;   
  22.     text-align:rightright;   
  23. }   
  24. #cwpad_box dd tt{   
  25.     width:20px;   
  26.     height:250px;   
  27.     top:0px;   
  28.     left:0px;   
  29.     color:#fff;   
  30.     cursor:pointer;   
  31.     text-align:center;   
  32.     padding:20px 0 0 0;   
  33.     background:#b9000d;   
  34.     position:absolute;   
  35.     border-right:1px solid #740a20;   
  36. }   
  37. #cwpad_box dd tt.hove{   
  38.     background:#620317;   
  39. }  

在上面的样式表中，假设放置的是四个250px*250px的图片广告，所以250+（4-1）*21=313px。

2.javascript代码

  1. <script type="text/javascript">   
  2. function myAddEvent(obj, sEvent, fn){   
  3.     return obj.attachEvent ? obj.attachEvent('on' + sEvent, fn) : obj.addEventListener(sEvent, fn, false);   
  4. }   
  5. function Class(oParent, sClass){   
  6.     var aElem = oParent.getElementsByTagName('*');   
  7.     var aClass = [];   
  8.     var i = 0;   
  9.     for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);   
  10.     return aClass;   
  11. };   
  12. function css(obj, attr, value){   
  13.     if(arguments.length == 2){   
  14.         var style = obj.style,   
  15.             currentStyle = obj.currentStyle;   
  16.         if(typeof attr === 'string')return currentStyle ? currentStyle[attr] : getComputedStyle(obj, false)[attr];   
  17.         for(var propName in attr)propName == 'opacity' ? (style.filter = "alpha(opacity=" + attr[propName] + ")", style.opacity = attr[propName] / 100) : style[propName] = attr[propName];    
  18.     }else if(arguments.length == 3){   
  19.         switch(attr){   
  20.             case "width":   
  21.             case "height":   
  22.             case "paddingTop":   
  23.             case "paddingRight":   
  24.             case "paddingBottom":   
  25.             case "paddingLeft":   
  26.             case "top":   
  27.             case "right":   
  28.             case "bottom":   
  29.             case "left":   
  30.             case "marginTop":   
  31.             case "marginRigth":   
  32.             case "marginBottom":   
  33.             case "marginLeft":   
  34.                 obj.style[attr] = value + "px";   
  35.                 break;   
  36.             case "opacity":   
  37.                 obj.style.filter = "alpha(opacity=" + value + ")";   
  38.                 obj.style.opacity = value / 100;   
  39.                 break;   
  40.             default:   
  41.                 obj.style[attr] = value   
  42.         }   
  43.     }   
  44. };   
  45. function extend(destination, source){   
  46.     for (var propName in source) destination[propName] = source[propName];   
  47.     return destination   
  48. };   
  49. function doMove(obj, json, fnEnd){   
  50.     clearInterval(obj.timer);   
  51.     obj.iSpeed = 0;   
  52.     fnEnd = extend({   
  53.         type: "buffer",   
  54.         callback: function() {}   
  55.     }, fnEnd);   
  56.     obj.timer = setInterval(function(){   
  57.         var iCur = 0,   
  58.             iStop = true;   
  59.         for(var propName in json){   
  60.             iCur = parseFloat(css(obj, propName));   
  61.             propName == 'opacity' && (iCur = Math.round(iCur * 100));   
  62.             switch(fnEnd.type){   
  63.                 case 'buffer':   
  64.                     obj.iSpeed = (json[propName] - iCur) / 5;   
  65.                     obj.iSpeed = obj.iSpeed > 0 ? Math.ceil(obj.iSpeed) : Math.floor(obj.iSpeed);   
  66.                     json[propName] == iCur || (iStop = false, css(obj, propName, iCur + obj.iSpeed));   
  67.                     break;   
  68.                 case 'elasticity':   
  69.                     obj.iSpeed += (json[propName] - iCur) / 5;   
  70.                     obj.iSpeed *= 0.75;   
  71.                     Math.abs(json[propName] - iCur) <= 1 &&  Math.abs(obj.iSpeed) <= 1 ? css(obj, propName, json[propName]) : css(obj, propName, json[propName]) || (iStop = false, css(obj, propName, iCur + obj.iSpeed));   
  72.                     break;   
  73.                 case 'accelerate':   
  74.                     obj.iSpeed = obj.iSpeed + 5;   
  75.                     iCur >= json[propName] ? css(obj, propName, json[propName]) : css(obj, propName, json[propName]) || (iStop = false, css(obj, propName, iCur + obj.iSpeed));   
  76.                 break;   
  77.             }   
  78.         }   
  79.         if(iStop){   
  80.             clearInterval(obj.timer);   
  81.             obj.timer = null;   
  82.             obj.iSpeed = 0;   
  83.             fnEnd.callback();   
  84.         }   
  85.     },30);   
  86. };   
  87.   
  88. window.onload = function(){   
  89.     var oBox = document.getElementById('cwpad_box')   
  90.     var aSpan = document.getElementsByTagName('tt');   
  91.     var aLi = document.getElementsByTagName('dd');   
  92.     var playtime = null;   
  93.     var iNow = 0;   
  94.     for(i=0;i<aSpan.length;i++){   
  95.         aSpan[i].index = i;   
  96.         aSpan[i].onclick = function(){   
  97.             for(var len=aLi.length,i=0;i<len;i++)doMove(aLi[i], {width:21});   
  98.             for(var len=aSpan.length,i=0;i<len;i++)aSpan[i].className = '';   
  99.             this.className = 'hove';   
  100.             doMove(this.parentNode, {width:250});   
  101.             iNow = this.index;   
  102.         };   
  103.     }   
  104.     playtime = setInterval(tab,3500);   
  105.     oBox.onmouseover = function(){   
  106.         clearInterval(playtime);   
  107.     }   
  108.     oBox.onmouseout = function(){   
  109.         playtime = setInterval(tab,3500);   
  110.     }   
  111.     function tab(){   
  112.         iNow == aLi.length-1 ? iNow = 0 : iNow++;   
  113.         aSpan[iNow].onclick();   
  114.     }   
  115. };   
  116.  </script>    

 

3.示例的HTML代码

  1. <div id="cwpad_box">  
  2.     <ul>  
  3.         <dd  class="hove">  
  4.         <tt class="hove">网站设计及培训</tt>  
  5.         <a href="http://suoling.net/" target=_blank title="网站设计及培训"><img src="http://fakeimg.pl/250x250/?text=Hello,A!"></a>  
  6.         </dd>  
  7.         <dd>  
  8.         <tt>网站优化及培训</tt>  
  9.         <a href="http://suoling.net/" target=_blank title="网站优化及培训"><img src="http://fakeimg.pl/250x250/?text=Hello,B!"></a>  
  10.         </dd>  
  11.         <dd>  
  12.         <tt>网站诊断</tt>  
  13.         <a href="http://suoling.net/" target=_blank title="网站诊断"><img src="http://fakeimg.pl/250x250/?text=Hello,C!"></a>  
  14.         </dd>  
  15.         <dd>  
  16.         <tt>电子商务培训</tt>  
  17.         <a href="http://suoling.net/" target=_blank title="电子商务培训"><img src="http://fakeimg.pl/250x250/?text=Hello,D!"></a>  
  18.         </dd>  
  19.     </ul>  
  20. </div>  

使用的是索凌网络前面介绍过的"假图"生成网站fakeimg.pl生成的"假图"。

这组代码的一个显著缺点是：不适合移动设备显示。

posted @ 2013-12-31 11:30 cangshi 阅读(283) | 评论 (0) | 编辑 收藏

2013年12月5日 #

WordPress查询文章作者的文章数及WordPress用户角色/权限
本文详细介绍了如何查询Wordpress某一篇文章作者的文章以及其权限，附带介绍了Wordpress的用户权限系统，指出了网上到处复制的某些文章存在的问题。

一、查询Wordpress某篇文章作者的全部文章或部分最新文章

1.获取当前文章作者的ID

  1. get_post($id)->post_author  

这才是获取Wordpress当前文章作者ID的正确方式，网上到处乱传的那篇名叫“WordPress 通过文章ID获取文章标题、内容等信息”的文章里的说法是错误的，虽然是错误的，但是却被广泛的Ctrl+C然后Ctrl+V，以讹传讹，不可思议啊。

另外get_post($id)->可以获取与文章有关的许多信息，转述如下：

  1. post_author：(整数）文章作者的编号    
  2. post_data：(字符）文章发表的日期和时间（YYYY-MM-DD HH-MM-SS)    
  3. post_data_gmt：（字符）文章发表的格林尼治标准时间（GMT） （YYYY-MM-DD HH-MM-SS)    
  4. post_content：（字符）文章内容    
  5. post_title：（字符）文章标题    
  6. post_category：（整数）文章类别的编号。注意：该值在WordPress 2.1之后的版本总为0。定义文章的类别时可使用 get_the_category()函数。    
  7. post_excerpt：（字符）文章摘要    
  8. post_status：(字符）文章状态（publish|pending|draft|private|static|object|attachment|inherit|future）    
  9. comment_status：（字符）评论状态（open|closed|registered_only）    
  10. ping_status：（字符）pingback/trackback状态（open|closed）    
  11. post_password：(字符）文章密码    
  12. post_name：(字符）文章的URL嵌套    
  13. to_ping：(字符）要引用的URL链接    
  14. pinged：（字符）引用过的链接    
  15. post_modified：(字符）文章最后修改时间（YYYY-MM-DD HH-MM-SS)    
  16. post_modified_gmt：(字符）文章最后修改GMT时间（YYYY-MM-DD HH-MM-SS)    
  17. post_parent：(整数）父级文章编号（供附件等）    
  18. guid：（字符）文章的一个链接。注意：不能将GUID作为永久链接（虽然在2.5之前的版本中它的确被当作永久链接），也不能将它作为文章的可用链接。GUID是一种独有的标识符，只是目前恰巧成为文章的一个链接。    
  19. post_type：（字符）（日志 | 页面 | 附件）    
  20. post_mime_type：(字符）Mime类型（供附件等）    
  21. comment_count：（整数）评论总数  

 

2.Wordpress查询文章作者的全部文章/部分文章的主要函数及输出

  1. <?php   
  2. global $wpdb;   
  3. //$current_user->ID的话，查询的就是当前登录的用户，所以是不对的;   
  4. $author_id = get_post($id)->post_author;   
  5. $sql =  "SELECT * FROM $wpdb->posts WHERE post_status IN ('publish','static') AND post_author = '$author_id' AND post_type ='post'LIMIT 5" ; //查询作者文章数量   
  6. $posts= $wpdb->get_results($sql);   
  7.     foreach ($posts as $post) {   
  8.   
  9. echo'<li><a href="';the_permalink();echo '" rel="twipsy" title="';the_title();echo '">'. mb_strimwidth(get_the_title(), 0, 20,"...").'</a></li>';   
  10. }   
  11. ?>  

只在无序列表ul里输出一个列表，格式是截断的标题加上链接，查询了仅仅5篇，多了的话，没什么用，这里仅仅是测试。

二、Wordpress用户角色与权限

WordPress用户角色或者Wordpress用户权限说是从Wordpress2.0开始，逐渐的完善起来的，默认分以下几种的：

  1. Super Admin超级管理员-针对Wordpress多站点环境，一般人很少接触，所以很少有人提及；   
  2. Administrator管理员 -拥有特定的某一个站点的所有管理权限；   
  3. Editor编辑 -发表文章、编辑文章、并能编辑其他人的文章等等；   
  4. Author作者-能够发布和编辑自己的文章；   
  5. Contributor贡献者或者叫投稿者 -能够撰写和编辑自己的文章、但不能发布；   
  6. Subscriber订阅者 -能够查看评论/添加评论/查看文章，等等。  

 

当新用户在你的Wordpress站点上注册了的时候（假设已经开启注册），他的默认角色可以在Wordpress后台-->设置-->常规页面设置。

下面的用户角色以及对应的权限能力等级对照表翻译自Wordpress官方网站，所在页面：

http://codex.wordpress.org/Roles_and_Capabilities#Capabilities

 

角色超级管理员管理员（单个站点）编辑作者贡献者（投稿者）订阅者
manage_network是




manage_sites是




manage_network_users是




manage_network_plugins是




manage_network_themes是




manage_network_options是




unfiltered_html是




角色超级管理员管理员（单个站点）编辑作者贡献者（投稿者）订阅者
activate_plugins是是



create_users是仅单个站点



delete_plugins是是



delete_themes是仅单个站点



delete_users是是



edit_files是是



edit_plugins是仅单个站点



edit_theme_options是是



edit_themes是仅单个站点



edit_users是仅单个站点



export是是



import是是



角色超级管理员管理员（单个站点）编辑作者贡献者（投稿者）订阅者
install_plugins是仅单个站点



install_themes是仅单个站点



list_users是是



manage_options是是



promote_users是是



remove_users是是



switch_themes是是



update_core是仅单个站点



update_plugins是仅单个站点



update_themes是仅单个站点



edit_dashboard是是



角色超级管理员管理员（单个站点）编辑作者贡献者（投稿者）订阅者
moderate_comments是是是


manage_categories是是是


manage_links是是是


edit_others_posts是是是


edit_pages是是是


edit_others_pages是是是


edit_published_pages是是是


publish_pages是是是


delete_pages是是是


delete_others_pages是是是


delete_published_pages是是是


delete_others_posts是是是


delete_private_posts是是是


edit_private_posts是是是


阅读_private_posts是是是


delete_private_pages是是是


edit_private_pages是是是


阅读_private_pages是是是


角色超级管理员管理员（单个站点）编辑作者贡献者（投稿者）订阅者
edit_published_posts是是是是

upload_files是是是是

create_product是是是是

publish_posts是是是是

delete_published_posts是是是是

edit_posts是是是是是
delete_posts是是是是是
阅读是是是是是是
角色超级管理员管理员（单个站点）编辑作者贡献者（投稿者）订阅者

 

1.查询Wordpress文章作者的角色

在本文的开头，我们已经知道如何获取Wordpress某一篇文章的作者ID了，现在就来获取其角色：

  1. $user_id=get_post($id)->post_author;   
  2. if(user_can($user_id,'install_plugins')){echo'管理员';}   
  3. elseif(user_can($user_id,'edit_others_posts')){echo'管理编辑';}elseif(user_can($user_id,'publish_posts')){echo'作者';}elseif(user_can($user_id,'delete_posts')){echo'贡献者';}elseif(user_can($user_id,'read')){echo'订阅者';}   

管理员和编辑都能publish_posts，但是这里的判断有先后顺序，所以不用担心这个问题，这个判断是不错的！

WordPress某篇文章的作者是否有某权限的推荐函数：

  1. if ( author_can( $post, $capability ) ) {      
  2. // 如果文章 $post 的作者拥有 $capability 时执行的动作      
  3. }    

这个相对简单一些，可以直接去判断，所以我再某个项目中最终使用了这个函数。参数中的$post可以是文章自身，也可以是文章ID，使用起来很方便！

  1. if(author_can($post->ID,'install_plugins'))   
  2. {echo'<span class="label label-warning role">管理员</span>';}elseif(author_can($post->ID,'edit_others_posts')){echo'管理编辑';}elseif(author_can($post->ID,'publish_posts')){echo'作者';}elseif(author_can($post->ID,'delete_posts')){echo'投稿者';}elseif(author_can($post->ID,'read')){echo'订阅者';}  

2.Wordpress当前登录者的权限/权限等级

这个函数是经常被使用的，使用的是权限等级，Wordpress官方已经声明：从Wordpress3.0，已经废弃了对这个权限等级制度的支持，所以，网上到处乱飞的复制文章，谨慎对待吧！

  1. <?php if(current_user_can('level_10')){ echo '管理员';}elseif(current_user_can('level_7')){ echo '管理编辑';}elseif(current_user_can('level_4')){ echo '作者';}elseif(current_user_can('level_4')){ echo '贡献者';}elseif(current_user_can('level_0')){ echo '订阅者';}   
  2.     ?>  

 

posted @ 2013-12-05 10:49 cangshi 阅读(2399) | 评论 (0) | 编辑 收藏

2013年11月20日 #

最近还在为一件事情烦恼结果终于告一段落平时
平时思想工作考虑问题倒是蛮周全的，我现在最大的难处就是经济条件太差了，想做点什么事情总是缩手缩脚的，就好像是被束缚一样。不过我感觉像现在这样其实也蛮好和合适的。最无奈的事情是我接了别人的烂摊子导致我没有为老大做出什么特殊的贡献吧，既然现在要从头开始了，那么一定要好好的规划好一切，先把开头做好一点，后面才会有下文要不然可以的话我的路线就到头了。真正算起来的黄金时间确实就是那么一点点，如果说再不好好利用，那真的是对不起这个行业的理解力了。有时候可以就是这样，百分之二十的时间确实可以产生百分之八十的效率这就看你会不会时间管理工作。把一些细节发挥到极致每天就可以非常的轻松的。我只不过是还没有达到那个境界或者说没有机会好好展示自己价值的平台吧，有时候真的觉得英雄会不会是没有用武之地了呢。不用担心多一点耐心多点积累，事情总是会出现转机的，继续保持稳定的正常的工作面能力图文混排就行了。老白最后肯定是会看好你的，因为现在心急已经没有立足之地了。
posted @ 2013-11-20 11:32 cangshi 阅读(178) | 评论 (0) | 编辑 收藏

2013年10月18日 #

公司总裁实际需要的成本核算要求太高难度
一转眼，国庆一放假又有几天的融合期间，所以一下子半个月很快就过去了我竟然一篇目信息都没有发表，这着实是有点让人难以置信的现象特别是想要讨好老白的情况汇报下。这种现象是不能容忍的。本来对策我是想过要多对一模式又不能太多，关键词太多，又分配不公，操作不好又被放到人为操作的可能性了，我目前的善哉只能是权宜之计，好让我争取一点点时间，希望这一个月里能够有点睛之笔吧无论如何我都已经是我的大局了。一个链接也能够发接力赛作用，老大对我有点不相信能力只是感叹能够证明我的时间监察部实在是太短了，跟一年两年才更新换代的老白，三个月算什么呢？根本就是九牛一毛吧很不经意的一点信息说不定就事论事。没有什么是绝对真理和公平竞争的，当前情况下做不起的事情实在是太多了，不管生效与否，先做了再说嘛毕竟这是最自然的方式了验收后再做流行度其实倒是还可以的，没有利用一下就被否定了，结果是很不甘心情愿。
posted @ 2013-10-18 17:07 cangshi 阅读(170) | 评论 (0) | 编辑 收藏

2013年9月27日 #

转载一篇今天正好遇到的动态转化为静态问题方法
其实之前早就存在这样一个问题，只是没有时间去考虑是否会影响到整个网站结构的内部优化。忙里偷闲之中我无意找到了解决方案在网上找到的，程序是PHP的，在这里转载分享一下，也希望在以后能够利用方便一点。

首先设置.htaccess文件，将动态调用的参数转换为静态的HTML的URL地址，例如将在post目录下的文件，转发到根目录的wp- post.php文件中，加入的语句类似：RewriteRule ^post/([a-z0-9\-]+\.html)$ wp-post.php?$1$2

然后修改wp-post.php文件，在文件的开头加入以下PHP代码：

以下为引用的内容：

ob_start();

$qstring = isset($_SERVER["QUERY_STRING"]) ? $_SERVER["QUERY_STRING"] : "";

define("HTML_FILE", $_SERVER['DOCUMENT_ROOT']."/post/".$qstring);

if (file_exists(HTML_FILE))

{

$lcft = filemtime(HTML_FILE);

if (($lcft + 3600) > time()) //判断上次生成HTML文件是否超过1小时，若没有才直接输出文件内容

{

echo(file_get_contents(HTML_FILE));

exit(0);

}

}

之后是现有的PHP的代码，然后在当前代码的最后面加上如下的PHP代码：

以下为引用的内容：

define("HTMLMETA","");

$buffer = ob_get_flush();

$fp = fopen(HTML_FILE, "w");

if ($fp)

{

fwrite($fp, $buffer.HTMLMETA);

fclose($fp);

}

好了，然后查看你的静态HTML页面，如果页面尾部出现了注释行，说明已经成功的创建了静态HTML文件。

这个方法的一个应用就是我先前写的那个“WordPress年度博客统计插件”，这个统计插件由于查询十多次数据库，很多人访问的时候会有很大性能问题，使用我介绍的这种动态生成HTML技术后，一天就查询一次，生成一次统计排行，完美解决了查询数据库的性能问题。

posted @ 2013-09-27 11:14 cangshi 阅读(167) | 评论 (0) | 编辑 收藏

2013年9月26日 #

我得改变面貌的主要思维能力是纠正平均和公正主义
也不知道为什么，在我的心理上对待事情我老是想要做公平主义和平均主义，为此我也付出了不小的代价我在想为什么不改变一下方向呢。就是像先人邓小平一样先富一部分人，然后先富带动后富。也许我应该就是明白这个道理，世界上没有绝对的公平和平均，那些都是直拨虚拟的东西，每个个人的实际情况都是不一样。每个人的境遇和背景也不一样，绝对不能放到同样一个水平面上相提并论有些规则虽然说起来不那么好听但是却是千古不变的真理，天下也没有绝对公平和平均。这样的想法纯熟是简单的个人意愿而已并且已经落后很多年了，有这样的想法也只能说明没有创新纪录意识形态纠正以后才会慢慢发现这个世界不是只有白与黑，而绝大区域都是灰色地带。如果说还不能习惯这样的潜规则那么以后要慢慢适应性了，不去适应环境的人迟早是要被这个社会所淘汰掉的。你想做什么样的人中，你想成为什么样的人呢？
posted @ 2013-09-26 11:01 cangshi 阅读(132) | 评论 (0) | 编辑 收藏