仓蓝

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

2014年1月6日 #

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

介绍一组适用于在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 阅读(273) | 评论 (0) | 编辑 收藏

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 阅读(279) | 评论 (0) | 编辑 收藏