仓蓝

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

1.样式表

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

2.javascript代码

 

3.示例的HTML代码

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

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

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!

如果网页包含大量图片，那么，采用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

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