倉藍

日記本

:: 管理

23 Posts :: 0 Stories :: 1 Comments :: 0 Trackbacks

2014年1月6日 #

摘要: 適合Linux系統使用的命令，本文以亞馬遜的Amazon Linux 為用例，希望對朋友們有點幫助！切換至root用戶 sudo su 安裝screen yum install screen yum update 安裝Apache，MySQL... 閱讀全文

posted @ 2014-01-10 10:45 cangshi 閱讀(1763) | 評論 (0) | 編輯收藏

介紹一組適用于在Wordpress側欄放置的圖片廣告輪播（js）代碼

希望WP愛好者能夠喜歡并嘗試一下‘

1.樣式表

/*SidebarTabsAd*/
#cwpad_box{width:100%;text-align:center}
#cwpad_box ul, #cwpad_box dd, #cwpad_box tt{
margin:0px;
padding:0px;
float:left;
list-style: none;
}
#cwpad_box{
width:313px;/*250px+(n-1)*21px*/
height:250px;
border-left: 1px solid #740a20;
}
#cwpad_box dd{
width:21px;
height:250px;
overflow:hidden;
position:relative;
}
#cwpad_box dd.hove{
width:250px;
text-align:rightright;
}
#cwpad_box dd tt{
width:20px;
height:250px;
top:0px;
left:0px;
color:#fff;
cursor:pointer;
text-align:center;
padding:20px 0 0 0;
background:#b9000d;
position:absolute;
border-right:1px solid #740a20;
}
#cwpad_box dd tt.hove{
background:#620317;
}

在上面的樣式表中，假設放置的是四個250px*250px的圖片廣告，所以250+（4-1）*21=313px。

2.javascript代碼

<script type="text/javascript">
function myAddEvent(obj, sEvent, fn){
return obj.attachEvent ? obj.attachEvent('on' + sEvent, fn) : obj.addEventListener(sEvent, fn, false);
}
function Class(oParent, sClass){
var aElem = oParent.getElementsByTagName('*');
var aClass = [];
var i = 0;
for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);
return aClass;
};
function css(obj, attr, value){
if(arguments.length == 2){
var style = obj.style,
currentStyle = obj.currentStyle;
if(typeof attr === 'string')return currentStyle ? currentStyle[attr] : getComputedStyle(obj, false)[attr];
for(var propName in attr)propName == 'opacity' ? (style.filter = "alpha(opacity=" + attr[propName] + ")", style.opacity = attr[propName] / 100) : style[propName] = attr[propName];
}else if(arguments.length == 3){
switch(attr){
case "width":
case "height":
case "paddingTop":
case "paddingRight":
case "paddingBottom":
case "paddingLeft":
case "top":
case "right":
case "bottom":
case "left":
case "marginTop":
case "marginRigth":
case "marginBottom":
case "marginLeft":
obj.style[attr] = value + "px";
break;
case "opacity":
obj.style.filter = "alpha(opacity=" + value + ")";
obj.style.opacity = value / 100;
break;
default:
obj.style[attr] = value
}
}
};
function extend(destination, source){
for (var propName in source) destination[propName] = source[propName];
return destination
};
function doMove(obj, json, fnEnd){
clearInterval(obj.timer);
obj.iSpeed = 0;
fnEnd = extend({
type: "buffer",
callback: function() {}
}, fnEnd);
obj.timer = setInterval(function(){
var iCur = 0,
iStop = true;
for(var propName in json){
iCur = parseFloat(css(obj, propName));
propName == 'opacity' && (iCur = Math.round(iCur * 100));
switch(fnEnd.type){
case 'buffer':
obj.iSpeed = (json[propName] - iCur) / 5;
obj.iSpeed = obj.iSpeed > 0 ? Math.ceil(obj.iSpeed) : Math.floor(obj.iSpeed);
json[propName] == iCur || (iStop = false, css(obj, propName, iCur + obj.iSpeed));
break;
case 'elasticity':
obj.iSpeed += (json[propName] - iCur) / 5;
obj.iSpeed *= 0.75;
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));
break;
case 'accelerate':
obj.iSpeed = obj.iSpeed + 5;
iCur >= json[propName] ? css(obj, propName, json[propName]) : css(obj, propName, json[propName]) || (iStop = false, css(obj, propName, iCur + obj.iSpeed));
break;
}
}
if(iStop){
clearInterval(obj.timer);
obj.timer = null;
obj.iSpeed = 0;
fnEnd.callback();
}
},30);
};
window.onload = function(){
var oBox = document.getElementById('cwpad_box')
var aSpan = document.getElementsByTagName('tt');
var aLi = document.getElementsByTagName('dd');
var playtime = null;
var iNow = 0;
for(i=0;i<aSpan.length;i++){
aSpan[i].index = i;
aSpan[i].onclick = function(){
for(var len=aLi.length,i=0;i<len;i++)doMove(aLi[i], {width:21});
for(var len=aSpan.length,i=0;i<len;i++)aSpan[i].className = '';
this.className = 'hove';
doMove(this.parentNode, {width:250});
iNow = this.index;
};
}
playtime = setInterval(tab,3500);
oBox.onmouseover = function(){
clearInterval(playtime);
}
oBox.onmouseout = function(){
playtime = setInterval(tab,3500);
}
function tab(){
iNow == aLi.length-1 ? iNow = 0 : iNow++;
aSpan[iNow].onclick();
}
};
</script>

3.示例的HTML代碼

<div id="cwpad_box">
<ul>
<dd class="hove">
<tt class="hove">網站設計及培訓</tt>
<a ></a>
</dd>
</ul>
</div>

使用的是索凌網絡前面介紹過的"假圖"生成網站fakeimg.pl生成的"假圖"。

這組代碼的一個顯著缺點是：不適合移動設備顯示。

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

WP后臺表格代碼示例

if(is_admin())

{

new Cool_Wp_List_Table();

}

* Cool_Wp_List_Table class will create the page to load the table

class Cool_Wp_List_Table

{

* Constructor will create the menu item

public function __construct()

{

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

}

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

public function add_menu_example_list_table_page()

{

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

}

* Display the list table page

* @return Void

public function list_table_page()

{

$exampleListTable = new Example_List_Table();

$exampleListTable->prepare_items();

<div class="wrap">

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

<h2>Coowp示例表格-頁面標題</h2>

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

</div>

<?php

}

}

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

if( ! class_exists( 'WP_List_Table' ) ) {

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

}

* Create a new table class that will extend the WP_List_Table

class Example_List_Table extends WP_List_Table

{

* Prepare the items for the table to process

* @return Void

public function prepare_items()

{

$columns = $this->get_columns();

$hidden = $this->get_hidden_columns();

$sortable = $this->get_sortable_columns();

$data = $this->table_data();

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

$perPage = 2;

$currentPage = $this->get_pagenum();

$totalItems = count($data);

$this->set_pagination_args( array(

'total_items' => $totalItems,

'per_page' => $perPage

) );

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

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

$this->items = $data;

}

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

* @return Array

public function get_columns()

{

$columns = array(

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

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

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

//__('Description'),怎么被Wordpress翻譯為“圖像描述”了？

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

'price' => __('價格'),//__('Price'),

'rating' => __('Rating')

);

return $columns;

}

* Define which columns are hidden

* @return Array

public function get_hidden_columns()

{

return array();

}

* Define the sortable columns

* @return Array

public function get_sortable_columns()

{

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

}

* Get the table data

* @return Array

private function table_data()

{

$data = array();

$data[] = array(

'id' => 1,

'title' => '某IT設備租賃公司：楊先生',

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

'date' => '2013.01.01',

'price' => '---',

'rating' => '7.3'

);

$data[] = array(

'id' => 2,

'title' => '某婚攝團隊：李先生',

'description' => '臺灣，臺北',

'date' => '2013.12.15',

'price' => '---',

'rating' => '7.2'

);

$data[] = array(

'id' => 3,

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

'description' => '墨爾本大學：藝術設計',

'date' => '2013.12.03',

'price' => '---',

'rating' => '7.0'

);

$data[] = array(

'id' => 4,

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

'description' => '僅前端交互：何小姐',

'date' => '2014.01.01',

'price' => '---',

'rating' => '7.0'

);

return $data;

}

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

* @param Array $item Data

* @param String $column_name - Current column name

* @return Mixed

public function column_default( $item, $column_name )

{

switch( $column_name ) {

case 'id':

case 'title':

case 'description':

case 'date':

case 'price':

case 'rating':

return $item[ $column_name ];

default:

return print_r( $item, true ) ;

}

}

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

* @return Mixed

private function sort_data( $a, $b )

{

// Set defaults

$orderby = 'title';

$order = 'asc';

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

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

{

$orderby = $_GET['orderby'];

}

// If order is set use this as the order

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

{

$order = $_GET['order'];

}

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

if($order === 'asc')

{

return $result;

}

return -$result;

}

}

ENJOY IT!

posted @ 2014-01-06 11:03 cangshi 閱讀(274) | 評論 (0) | 編輯收藏

倉藍

常用鏈接

留言簿(1)

我參與的團隊

隨筆分類

隨筆檔案

LINK

搜索

最新評論

閱讀排行榜

評論排行榜