倉(cāng)藍(lán)

          日記本

            BlogJava :: 首頁(yè) :: 聯(lián)系 :: 聚合  :: 管理
            23 Posts :: 0 Stories :: 1 Comments :: 0 Trackbacks

          2013年10月18日 #

               摘要: 適合Linux系統(tǒng)使用的命令,本文以亞馬遜的Amazon Linux 為用例,希望對(duì)朋友們有點(diǎn)幫助!切換至root用戶    sudo su  安裝screen    yum install screen       yum update  安裝Apache,MySQL...  閱讀全文
          posted @ 2014-01-10 10:45 cangshi 閱讀(1761) | 評(píng)論 (0)編輯 收藏

          希望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. }  

          在上面的樣式表中,假設(shè)放置的是四個(gè)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">網(wǎng)站設(shè)計(jì)及培訓(xùn)</tt>  
          5.         <a ></a>  
          6.         </dd>  
          7.     </ul>  
          8. </div>  

          使用的是索凌網(wǎng)絡(luò)前面介紹過(guò)的"假圖"生成網(wǎng)站fakeimg.pl生成的"假圖"。

          這組代碼的一個(gè)顯著缺點(diǎn)是:不適合移動(dòng)設(shè)備顯示。

          posted @ 2014-01-08 11:20 cangshi 閱讀(263) | 評(píng)論 (0)編輯 收藏

          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示例表格-頁(yè)面標(biāo)題</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'    => __('價(jià)格'),//__('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設(shè)備租賃公司:楊先生',   

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

          138.                     'date'        => '2013.01.01',   

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

          140.                     'rating'      => '7.3'   

          141.                     );   

          142.   

          143.         $data[] = array(   

          144.                     'id'          => 2,   

          145.                     'title'       => '某婚攝團(tuán)隊(duì):李先生',   

          146.                     'description' => '臺(tái)灣,臺(tái)北',   

          147.                     'date'        => '2013.12.15',   

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

          149.                     'rating'      => '7.2'   

          150.                     );   

          151.   

          152.         $data[] = array(   

          153.                     'id'          => 3,   

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

          155.                     'description' => '墨爾本大學(xué):藝術(shù)設(shè)計(jì)',   

          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 閱讀(272) | 評(píng)論 (0)編輯 收藏

          如果網(wǎng)頁(yè)包含大量圖片,那么,采用Lazyload來(lái)延遲圖片的載入以加速網(wǎng)頁(yè)整體在瀏覽器中的載入是個(gè)不錯(cuò)的方法!

          上面這句話并不是翻譯來(lái)的,只是我想一句話說(shuō)完。

          下面開始吧:

          1.在頁(yè)面頭部加載jQuery和這個(gè)Lazyload插件,如果已經(jīng)加載過(guò)了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>   

          是的,我習(xí)慣在國(guó)內(nèi)用又拍云的云加速。

          對(duì)圖片的處理:

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

          上面示例中的grey.gif實(shí)際上相當(dāng)于一個(gè)占位符,建議采用1*1px的灰色png或者gif,data-original后面的才是真正的圖片鏈接,class="lazy"是個(gè)可以定義的特定class。
          Lazyload基本設(shè)置

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

          Lazyload基本設(shè)置的在線DEMO:Lazyload DEMO1
          對(duì)不支持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;   
              }  

          對(duì)支持js的瀏覽器,應(yīng)該在DOM準(zhǔn)備階段就初始化插件:

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

          當(dāng)然了,這樣處理兼容性更好,不過(guò)現(xiàn)在的瀏覽器大多都是支持js的。
          加載敏感度

          默認(rèn)的情況下,圖片將會(huì)在出現(xiàn)在屏幕上時(shí)顯示,如果想提載入圖片,可以使用 threshold 進(jìn)行設(shè)置,下例的含義是:在圖片距離屏幕180px時(shí)提前載入:

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

          占位圖片

          可以自定義一個(gè)簡(jiǎn)單的淺色或灰色系的小圖片(越小越好,1*1px最佳,格式推薦采用gif)作為占位圖片來(lái)觸發(fā)加載動(dòng)作。
          事件觸發(fā)

          可以是jQuery的任何事件(如click、mouseover),還可以使用自己定義的事件。

          例如:處于等待狀態(tài), 直到瀏覽者滾動(dòng)到窗口中圖片所在位置,在占位圖片被點(diǎn)擊之前不加載圖片, 可以這樣做:

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

           特效的使用

          當(dāng)圖片完全加載的時(shí)候,默認(rèn)使用show()方法來(lái)顯示圖片,所以,上面的那個(gè)基本設(shè)置示例中未寫出show(),但是可以照常運(yùn)行。
           圖片淡入(FadeIn)效果

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

          Lazyload圖片淡入效果演示
          將圖片放在特定容器中

          先看示例:水平滾動(dòng)演示頁(yè)面和垂直滾動(dòng)的演示頁(yè)面

          CSS部分示例

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

          js部分示例

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

           圖片未按順序排列的情況

          滾動(dòng)頁(yè)面的時(shí)候,Lazyload會(huì)按照在HTML代碼中的順序先后可視范圍內(nèi)的加載圖片,在第一張不在可視范圍內(nèi)的圖片處停止執(zhí)行,但是在某些頁(yè)面布局中,這種聰明的假設(shè)可能是不成立的,那么可以用failurelimit來(lái)控制加載動(dòng)作:

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

          上面的意思是:在找到10張不在可視范圍內(nèi)的圖片時(shí)停止執(zhí)行。額,好吧,如果你的頁(yè)面布局猥瑣到10不足以滿足的時(shí)候,那就再大一些吧。
          Lazyload定時(shí)延遲圖片載入

          Lazyload的一個(gè)并不完備的功能,并不影響使用,但是實(shí)際用途并不大!用途描述:在頁(yè)面和可見圖片載入后一定時(shí)間內(nèi)載入圖片。Lazyload定時(shí)延遲圖片載入示例

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

          上例中采用的參數(shù)或者說(shuō)定時(shí)是5秒。
           加載隱藏的圖片

          你的頁(yè)面上可能隱藏了很多不可見的圖片用作特殊用途,Lazyload默認(rèn)是忽略這些圖片的,如果不想忽略掉,可以這樣:

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

           
           Lazyload下載與兼容性

          最新的未壓縮版 source與壓縮版 minified。

          你看到這篇文章時(shí)可能有更新的版本了,請(qǐng)點(diǎn)擊Lazyload了解更多!

          兼容于:

          OSX平臺(tái): Safari 5.1, Safari 6, Chrome 20, Firefox 12

          WIN平臺(tái):Chrome 20, IE 8 and IE 9 on Windows

          iPhone和 iPad上:Safari 5.1
          posted @ 2014-01-02 11:16 cangshi 閱讀(7702) | 評(píng)論 (1)編輯 收藏

          本文介紹一組適用于在Wordpress側(cè)欄放置的圖片廣告輪播(js)代碼:可自動(dòng)播放,同時(shí)響應(yīng)訪客的點(diǎn)擊

          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. }  

          在上面的樣式表中,假設(shè)放置的是四個(gè)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">網(wǎng)站設(shè)計(jì)及培訓(xùn)</tt>  
          5.         <a ></a>  
          6.         </dd>  
          7.     </ul>  
          8. </div>  

          使用的是索凌網(wǎng)絡(luò)前面介紹過(guò)的"假圖"生成網(wǎng)站fakeimg.pl生成的"假圖"。

          這組代碼的一個(gè)顯著缺點(diǎn)是:不適合移動(dòng)設(shè)備顯示。

          posted @ 2013-12-31 11:30 cangshi 閱讀(293) | 評(píng)論 (0)編輯 收藏

          本文詳細(xì)介紹了如何查詢Wordpress某一篇文章作者的文章以及其權(quán)限,附帶介紹了Wordpress的用戶權(quán)限系統(tǒng),指出了網(wǎng)上到處復(fù)制的某些文章存在的問題。

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

          1.獲取當(dāng)前文章作者的ID

          1. get_post($id)->post_author  

          這才是獲取Wordpress當(dāng)前文章作者ID的正確方式,網(wǎng)上到處亂傳的那篇名叫“WordPress 通過(guò)文章ID獲取文章標(biāo)題、內(nèi)容等信息”的文章里的說(shuō)法是錯(cuò)誤的,雖然是錯(cuò)誤的,但是卻被廣泛的Ctrl+C然后Ctrl+V,以訛傳訛,不可思議啊。

          另外get_post($id)->可以獲取與文章有關(guān)的許多信息,轉(zhuǎn)述如下:

          1. post_author:(整數(shù))文章作者的編號(hào)    
          2. post_data:(字符)文章發(fā)表的日期和時(shí)間(YYYY-MM-DD HH-MM-SS)    
          3. post_data_gmt:(字符)文章發(fā)表的格林尼治標(biāo)準(zhǔn)時(shí)間(GMT) (YYYY-MM-DD HH-MM-SS)    
          4. post_content:(字符)文章內(nèi)容    
          5. post_title:(字符)文章標(biāo)題    
          6. post_category:(整數(shù))文章類別的編號(hào)。注意:該值在WordPress 2.1之后的版本總為0。定義文章的類別時(shí)可使用 get_the_category()函數(shù)。    
          7. post_excerpt:(字符)文章摘要    
          8. post_status:(字符)文章狀態(tài)(publish|pending|draft|private|static|object|attachment|inherit|future)    
          9. comment_status:(字符)評(píng)論狀態(tài)(open|closed|registered_only)    
          10. ping_status:(字符)pingback/trackback狀態(tài)(open|closed)    
          11. post_password:(字符)文章密碼    
          12. post_name:(字符)文章的URL嵌套    
          13. to_ping:(字符)要引用的URL鏈接    
          14. pinged:(字符)引用過(guò)的鏈接    
          15. post_modified:(字符)文章最后修改時(shí)間(YYYY-MM-DD HH-MM-SS)    
          16. post_modified_gmt:(字符)文章最后修改GMT時(shí)間(YYYY-MM-DD HH-MM-SS)    
          17. post_parent:(整數(shù))父級(jí)文章編號(hào)(供附件等)    
          18. guid:(字符)文章的一個(gè)鏈接。注意:不能將GUID作為永久鏈接(雖然在2.5之前的版本中它的確被當(dāng)作永久鏈接),也不能將它作為文章的可用鏈接。GUID是一種獨(dú)有的標(biāo)識(shí)符,只是目前恰巧成為文章的一個(gè)鏈接。    
          19. post_type:(字符)(日志 | 頁(yè)面 | 附件)    
          20. post_mime_type:(字符)Mime類型(供附件等)    
          21. comment_count:(整數(shù))評(píng)論總數(shù)  

           

          2.Wordpress查詢文章作者的全部文章/部分文章的主要函數(shù)及輸出

          1. <?php   
          2. global $wpdb;   
          3. //$current_user->ID的話,查詢的就是當(dāng)前登錄的用戶,所以是不對(duì)的;   
          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" ; //查詢作者文章數(shù)量   
          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. ?>  

          只在無(wú)序列表ul里輸出一個(gè)列表,格式是截?cái)嗟臉?biāo)題加上鏈接,查詢了僅僅5篇,多了的話,沒什么用,這里僅僅是測(cè)試。

          二、Wordpress用戶角色與權(quán)限

          WordPress用戶角色或者Wordpress用戶權(quán)限說(shuō)是從Wordpress2.0開始,逐漸的完善起來(lái)的,默認(rèn)分以下幾種的:

          1. Super Admin超級(jí)管理員-針對(duì)Wordpress多站點(diǎn)環(huán)境,一般人很少接觸,所以很少有人提及;   
          2. Administrator管理員 -擁有特定的某一個(gè)站點(diǎn)的所有管理權(quán)限;   
          3. Editor編輯 -發(fā)表文章、編輯文章、并能編輯其他人的文章等等;   
          4. Author作者-能夠發(fā)布和編輯自己的文章;   
          5. Contributor貢獻(xiàn)者或者叫投稿者 -能夠撰寫和編輯自己的文章、但不能發(fā)布;   
          6. Subscriber訂閱者 -能夠查看評(píng)論/添加評(píng)論/查看文章,等等。  

           

          當(dāng)新用戶在你的Wordpress站點(diǎn)上注冊(cè)了的時(shí)候(假設(shè)已經(jīng)開啟注冊(cè)),他的默認(rèn)角色可以在Wordpress后臺(tái)-->設(shè)置-->常規(guī)頁(yè)面設(shè)置。

          下面的用戶角色以及對(duì)應(yīng)的權(quán)限能力等級(jí)對(duì)照表翻譯自Wordpress官方網(wǎng)站,所在頁(yè)面:

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

           

          角色超級(jí)管理員管理員(單個(gè)站點(diǎn))編輯作者貢獻(xiàn)者(投稿者)訂閱者
          manage_network




          manage_sites




          manage_network_users




          manage_network_plugins




          manage_network_themes




          manage_network_options




          unfiltered_html




          角色超級(jí)管理員管理員(單個(gè)站點(diǎn))編輯作者貢獻(xiàn)者(投稿者)訂閱者
          activate_plugins



          create_users僅單個(gè)站點(diǎn)



          delete_plugins



          delete_themes僅單個(gè)站點(diǎn)



          delete_users



          edit_files



          edit_plugins僅單個(gè)站點(diǎn)



          edit_theme_options



          edit_themes僅單個(gè)站點(diǎn)



          edit_users僅單個(gè)站點(diǎn)



          export



          import



          角色超級(jí)管理員管理員(單個(gè)站點(diǎn))編輯作者貢獻(xiàn)者(投稿者)訂閱者
          install_plugins僅單個(gè)站點(diǎn)



          install_themes僅單個(gè)站點(diǎn)



          list_users



          manage_options



          promote_users



          remove_users



          switch_themes



          update_core僅單個(gè)站點(diǎn)



          update_plugins僅單個(gè)站點(diǎn)



          update_themes僅單個(gè)站點(diǎn)



          edit_dashboard



          角色超級(jí)管理員管理員(單個(gè)站點(diǎn))編輯作者貢獻(xiàn)者(投稿者)訂閱者
          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


          角色超級(jí)管理員管理員(單個(gè)站點(diǎn))編輯作者貢獻(xiàn)者(投稿者)訂閱者
          edit_published_posts

          upload_files

          create_product

          publish_posts

          delete_published_posts

          edit_posts
          delete_posts
          閱讀
          角色超級(jí)管理員管理員(單個(gè)站點(diǎn))編輯作者貢獻(xiàn)者(投稿者)訂閱者

           

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

          在本文的開頭,我們已經(jīng)知道如何獲取Wordpress某一篇文章的作者ID了,現(xiàn)在就來(lái)獲取其角色:

          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'貢獻(xiàn)者';}elseif(user_can($user_id,'read')){echo'訂閱者';}   

          管理員和編輯都能publish_posts,但是這里的判斷有先后順序,所以不用擔(dān)心這個(gè)問題,這個(gè)判斷是不錯(cuò)的!

          WordPress某篇文章的作者是否有某權(quán)限的推薦函數(shù)

          1. if ( author_can( $post, $capability ) ) {      
          2. // 如果文章 $post 的作者擁有 $capability 時(shí)執(zhí)行的動(dòng)作      
          3. }    

          這個(gè)相對(duì)簡(jiǎn)單一些,可以直接去判斷,所以我再某個(gè)項(xiàng)目中最終使用了這個(gè)函數(shù)。參數(shù)中的$post可以是文章自身,也可以是文章ID,使用起來(lái)很方便!

          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當(dāng)前登錄者的權(quán)限/權(quán)限等級(jí)

          這個(gè)函數(shù)是經(jīng)常被使用的,使用的是權(quán)限等級(jí),Wordpress官方已經(jīng)聲明:從Wordpress3.0,已經(jīng)廢棄了對(duì)這個(gè)權(quán)限等級(jí)制度的支持,所以,網(wǎng)上到處亂飛的復(fù)制文章,謹(jǐn)慎對(duì)待吧!

          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 '貢獻(xiàn)者';}elseif(current_user_can('level_0')){ echo '訂閱者';}   
          2.     ?>  

           

          posted @ 2013-12-05 10:49 cangshi 閱讀(2433) | 評(píng)論 (0)編輯 收藏

          平時(shí)思想工作考慮問題倒是蠻周全的,我現(xiàn)在最大的難處就是經(jīng)濟(jì)條件太差了,想做點(diǎn)什么事情總是縮手縮腳的,就好像是被束縛一樣。不過(guò)我感覺像現(xiàn)在這樣其實(shí)也蠻好和合適的。最無(wú)奈的事情是我接了別人的爛攤子導(dǎo)致我沒有為老大做出什么特殊的貢獻(xiàn)吧,既然現(xiàn)在要從頭開始了,那么一定要好好的規(guī)劃好一切,先把開頭做好一點(diǎn),后面才會(huì)有下文要不然可以的話我的路線就到頭了。真正算起來(lái)的黃金時(shí)間確實(shí)就是那么一點(diǎn)點(diǎn),如果說(shuō)再不好好利用,那真的是對(duì)不起這個(gè)行業(yè)的理解力了。有時(shí)候可以就是這樣,百分之二十的時(shí)間確實(shí)可以產(chǎn)生百分之八十的效率這就看你會(huì)不會(huì)時(shí)間管理工作。把一些細(xì)節(jié)發(fā)揮到極致每天就可以非常的輕松的。我只不過(guò)是還沒有達(dá)到那個(gè)境界或者說(shuō)沒有機(jī)會(huì)好好展示自己價(jià)值的平臺(tái)吧,有時(shí)候真的覺得英雄會(huì)不會(huì)是沒有用武之地了呢。不用擔(dān)心多一點(diǎn)耐心多點(diǎn)積累,事情總是會(huì)出現(xiàn)轉(zhuǎn)機(jī)的,繼續(xù)保持穩(wěn)定的正常的工作面能力圖文混排就行了。老白最后肯定是會(huì)看好你的,因?yàn)楝F(xiàn)在心急已經(jīng)沒有立足之地了。
          posted @ 2013-11-20 11:32 cangshi 閱讀(184) | 評(píng)論 (0)編輯 收藏

          一轉(zhuǎn)眼,國(guó)慶一放假又有幾天的融合期間,所以一下子半個(gè)月很快就過(guò)去了我竟然一篇目信息都沒有發(fā)表,這著實(shí)是有點(diǎn)讓人難以置信的現(xiàn)象特別是想要討好老白的情況匯報(bào)下。這種現(xiàn)象是不能容忍的。本來(lái)對(duì)策我是想過(guò)要多對(duì)一模式又不能太多,關(guān)鍵詞太多,又分配不公,操作不好又被放到人為操作的可能性了,我目前的善哉只能是權(quán)宜之計(jì),好讓我爭(zhēng)取一點(diǎn)點(diǎn)時(shí)間,希望這一個(gè)月里能夠有點(diǎn)睛之筆吧無(wú)論如何我都已經(jīng)是我的大局了。一個(gè)鏈接也能夠發(fā)接力賽作用,老大對(duì)我有點(diǎn)不相信能力只是感嘆能夠證明我的時(shí)間監(jiān)察部實(shí)在是太短了,跟一年兩年才更新?lián)Q代的老白,三個(gè)月算什么呢?根本就是九牛一毛吧很不經(jīng)意的一點(diǎn)信息說(shuō)不定就事論事。沒有什么是絕對(duì)真理和公平競(jìng)爭(zhēng)的,當(dāng)前情況下做不起的事情實(shí)在是太多了,不管生效與否,先做了再說(shuō)嘛畢竟這是最自然的方式了驗(yàn)收后再做流行度其實(shí)倒是還可以的,沒有利用一下就被否定了,結(jié)果是很不甘心情愿。
          posted @ 2013-10-18 17:07 cangshi 閱讀(173) | 評(píng)論 (0)編輯 收藏

          主站蜘蛛池模板: 长丰县| 苏尼特左旗| 晋州市| 南雄市| 沁源县| 台山市| 巩留县| 涿鹿县| 汨罗市| 新余市| 阳高县| 盐亭县| 苏尼特左旗| 满城县| 札达县| 高陵县| 金门县| 疏附县| 新泰市| 广宗县| 汶上县| 洱源县| 宝坻区| 灯塔市| 定安县| 宜君县| 宣武区| 宝清县| 襄樊市| 陆川县| 盐池县| 拉萨市| 庆城县| 和硕县| 葵青区| 望城县| 宣城市| 锡林浩特市| 武川县| 社会| 普宁市|