跑給程式追: 2012.01

2012年1月30日星期一

JavaScript Date Time Picker

網址
download
更改datetimepicker_css.js(版本Version: 2.2.2)

var StartYear =2010;         //可以指定起始的年度
var imageFilesPath = "xxx";  //指定圖片路徑

2012年1月19日星期四

定位、間距與內襯

■position:
定位規則有absolute | relative | static(預設值)分別表示絕對位置、相對位置和靜態位置
■top:數值;right:數值;bottom:數值;left:數值;
這是指元素各邊緣與定位點的偏移量，就絕對定位而言定位點是包含元素的區塊；就相對定位而言定位點是元素原本的位置。
參考資料：必學的部落格CSS語法(二)-定位、間距與內襯

解決html5在ie不支援header 的問題

資料：http://www.maya.com.tw/news805.php?id=105&PHPSESSID=8ee94f879a2d04212a48ec66a02f80f5

直接添加到網頁中。

程序代碼

以下為常見邊框：
border-style 屬性指定邊框的樣式 solid實線、dashed虛線、 double雙線、點線
border-width 屬性是用來設定邊框的寬度。可用的值為 thin (薄)、medium (中等)、thick (厚)，或是一個數字。
border-color 屬性是用來設定邊寬的顏色。
border-top-, border-left-, border-bottom-, border-right-
border 若四邊的邊框屬性都一樣，那我們可以用一個 border 屬性來描述，而不必四個邊都描述一次。另外，我們可以在同一行一次宣告邊框樣式、邊框寬度、以及邊框顏色。

CSS width height 屬性

width: 这個属性定義元素内容區的宽度，在内容区外面可以增加内邊距、邊框和外邊距。
height: 這個属性定義元素内容區的高度，在内容区外面可以增加内边距、边框和外边距。
默認值：auto

JavaScript 語法:object.style.width="50px"
行內語法:style="width:20px"
p
  {
  height:100px;
  width:100px;
  }

段落屬性的設定

段落屬性的設定

利用這些設定可以輕易的控制字距、行高、縮排、凸排、水平對齊、垂直對齊等。這些性質對網頁設計的排版非常有用！

功能 : 設定文字行列高度 ( 可設單位屬性 : 點pt、英寸in、公分cm、像素px、百分比% )
語法 :  { LINE-HEIGHT : NORMAL︱( number )︱( length )︱( percentage ) }
範例 :  {LINE-HEIGHT:10pt}

此性質可設定列高，可指定特徵字normal設為預設值，或指定含單位的長度值，或百分比（參照於父元件）均可。如line-height:3px，則設定列高為3px。

FONT

p.ex1
{
font:15px arial,sans-serif;
}

p.ex2
{
font:italic bold 12px/30px Georgia, serif;
}

2012年1月18日星期三

PHP 補零

資料來源：http://blog.hsin.tw/2009/php-pad-a-string/
資料來源：http://boray06.blogspot.com/2011/06/php_27.html

string str_pad ( string $input , int $pad_length [, string $pad_string= " " [, int $pad_type= STR_PAD_RIGHT ]] )
$input : 原字串
$pad_length : 補齊後的位數
$pad_string : 用來補齊的字串
$pad_type : 補齊的方式 有三種，STR_PAD_RIGHT (由右邊補)、STR_PAD_LEFT (由左邊補)、STR_PAD_BOTH (左右兩邊都補)， 預設為STR_PAD_RIGHT

$value = 7;
//將數字由左邊補零至三位數
$value = str_pad($value,3,'0',STR_PAD_LEFT);
echo $value;
// 結果會印出 007;

CSS hack 慎用

為了解決ie6的css 問題，用了css hack。
如果只有少量，倒是無所謂，但又有新的寫法可以選擇了。

  
      

 


 



   1.  除IE外都可识别 
   2. 
   3. 
   4. 
   5. 
   6. 
   7. 
   8. 
   9. 
  10. 
  11.

慎用mysql的enum

原因：我的enum('0','1');
發現怎麼抓都是0
後來，就設為char~"~ 參考網址：http://www.neatstudio.com/show-1498-1.shtml

2012年1月17日星期二

jQuery Scroll to Top Control v1.1

網址：http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm

引用檔：scrolltopcontrol.js
圖片：up.jpg
修改scrolltopcontrol.js的圖片路徑。


setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:15, offsety:15}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

jquery 衝突

因為引用多個jquery的關係，有機會引起jquery的互相衝突。
解決方式：
將其中的jquery 自訂一個捷徑：

var $j=jQuery.noConfilict();
  $j(function(){
     })

鋒利的jQuery第1-20頁有提到。

preg_match 正規表示式比對

int preg_match ( string pattern, string subject [, array matches [, int flags]])
本函式以 pattern 的規則來剖析比對字串 subject。比對結果傳回的值放在陣列參數 matches 之中，matches[0]
內容就是原字串 subject、matches[1] 為第一個合乎規則的字串、matches[2] 就是第二個合乎規則的字串，餘類推。
若省略參數 matches，則只是單純地比對，找到則傳回值為 true。

// the "i" after the pattern delimiter indicates a case-insensitive search
if (preg_match ("/php/i", "PHP is the web scripting language of choice.")) {
    print "A match was found.";
} else {
    print "A match was not found.";
}

認證IP是否正確


function validIP($ip){
    return preg_match("/^([1-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])(\.([0-9]|[1-9][0-9]|1[0-9][0-9]|2[0-4][0-9]|25[0-5])){3}$/", $ip);
}

網站實例：

preg_match("/product[0-9]{4}.html/i",$_SERVER['REQUEST_URI']

參考regular expressions

2012年1月16日星期一

CSS Sprites 減少對伺服器的圖片需求

有效減少對伺服器的請求。
製作網址：
http://spritegen.website-performance.org/
參考寫法：
http://demo.tc/Post/477
下圖上傳三張圖片後(合併成一張大圖,大圖要丟到FTP喔)，系統給你的指示：

在用紅色圈起來的地方，因為看不懂，所以我就只好參考一下別人的寫法囉：
下面是我寫的語法：

　
水族館

Jquery 的show 及hide

ID：check 為checkBox ID: cCArea 為顯示的AREA
利用check Box來顯示或隱藏。
2013.04.08加入有多個check需要使用顯示與隱藏。加入副程式 same_check以減少程式碼。

//副程式
function same_check(m_objc,objc){
   if(m_objc){
     $(objc).show("fast");  
   }else{
     $(objc).hide("fast");
   }
}

//jquery 主要的
    $("#check").click(function(){
      same_check($(this).is(":checked"),"#cCArea");
   })

從多個checkbox中判斷哪一個被選取，和要顯示的區域

案例：只有兩個checkbox ，從中2選一。
if($("#cch2").attr("checked")){
 $("#cck1Area").show("fast");
 $("#cck2Area").hide("fast");
 }

2012年1月12日星期四

檔案操作

列出資料夾裡面的組成：scandir

$dir    = '/tmp';

array scandir(string directory[,int sorting_order]
注：sorting_order 預設為1
$files1 = scandir($dir);
$files2 = scandir($dir, 1);

print_r($files1);
print_r($files2);

列出資料夾裡面的組成：glob
可以使用含有「萬用字元」的字串當做參數，取得檔案列表

格式：glob($pattern);
glob('*.txt');     //只會取得txt附檔名的檔案

檔案之複製、刪除、更名
bool copy ( string $source , string $dest [, resource $context ] )

$file = 'example.txt';
$newfile = 'example.txt.bak';

if (!copy($file, $newfile)) {
    echo "failed to copy $file...\n";
}

copy 的權限錯誤，只要把資料夾的write打開即可解決。錯誤範例： Warning: copy( ) [function.copy]: failed to open stream: Permission denied int unlink ( string filename );
unlink()函式能刪除名稱為 filename 的檔案，成功便傳回 true ，失敗則傳回 false
filesize(filename)：得知檔案的大小。

副檔名取得：

$number   = strpos($filename,".");
$file_body  = substr($filename,0,$number);

新檔名：
$number = strpos($file_name,".");
$sub_file_name = substr($file_name,$number+1);

$sub_number = strpos($file_name_samll,".");
$sub_file_name_small= substr($file_name_samll,$number+1);

$new_file_name = time()."_".$number.".".$sub_file_name;

2012年1月10日星期二

回上一頁 GO BACK

相關詞：返回連結

<input type='button' onclick='javascript:window.history.back()' value='哈哈' />

到某個網址：
EX:

self.location='目標網址';

Q:我使用回到上一頁的javascript:window.history. back() 會出現上一頁網頁已過期的訊息~"~
ans：只要使用過form post 的環境下，回到上一頁會有出現已過期的訊息。
只要用"到某個網址"的方過就可以解決這個問題。

check radio box 美化

DEMO：http://www.hieu.co.uk/Examples/CustomizeHTMLControls/CustomizeHTMLControls.htm
網址：http://www.hieu.co.uk/blog/index.php/2009/07/09/customize-html-control-with-jquery-checkbox-radio/

2012年1月6日星期五

jQuery選擇器

Attribute Filters (屬性過慮器)

[attribute]
用法: $(“div[id]“) ;

[attribute^=value]
用法: $(“input[name^='news']“) ;

2012年1月5日星期四

UI Datepicker

demo:http://jqueryui.com/demos/datepicker/






<script type="text/css">

.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
</script>

2012/09/26 新增

<script src='../script/jquery-1.8.0.min.js'></script>  

   <link rel="stylesheet" href="http://jquery-ui.googlecode.com/svn/tags/latest/themes/base/jquery-ui.css" type="text/css" media="all">  
<script src="../script/jquery.ui.core.js"></script>
<script src="../script/jquery.ui.widget.js"></script>
<script src="../script/jquery.ui.datepicker.js"></script>


<script>
 $(function() {
  $( "#datepicker" ).datepicker();
 });
 </script>

2012/09/26 下午新增
datetimepick2

<script language="javascript" type="text/javascript" charset="utf-8" src="../script/datetimepicker2/datetimepicker_css.js"></script>
 <img src="../script/datetimepicker2/images/cal.gif" style="width:16px;height:16px;cursor:pointer;" border="0" alt="Pick a date" onclick="javascript:NewCssCal('order_pay_date','yyyymmdd','arrow',true,'24')"><small>按圖示即可輸入時間</small><input type="text" id="order_pay_date" name="order_pay_date"  disabled="disabled">

不對稱



function btn_editTime(auto){
 var a=(new Date).getTime(); 
 var own_path="../XXX.php?action=cc&a="+a;
 
 $.get(own_path,{c_auto:auto}, function (data){
  var XXX   =data.00XX;
                var YYY   =data.00YY;
  
  var $dialog = $("#showOneDetail").dialog({
    title: 'Detail',
    autoOpen: false,
    bgiframe: true,
    width: 450,
    height: 420,
    modal: true,
    draggable: true,
    resizable: false,
    overlay:{opacity: 0.7, background: "#FF8899" },   
    buttons: {
     'close': function() {
     $(this).dialog('close');
     }
    }
        
    });
        
    //日期時間
    $("#example16_start").val(XXX);
    $("#example16_start_time").val(YYY);
    
    $dialog.dialog('open');
    // prevent the default action, e.g., following a link
    return false;
   
 },"json")
 }








................
...........
...........

彈跳視窗、關閉視窗

引入檔案：

場景：表格下每列的button

$editBox=

關鍵字：小視窗、跳出。

var newwin = null;
function opwin(news_id){
 newwin=window.open('thron/issue-news.php?id='+news_id,'nw','width=680px,height=580px,resizable=yes,scrollbars=yes,status=0');
  newwin.moveTo(200,10);
 }

  

 test

關鍵字：小視窗關閉後刷主視窗頁面

子視窗：

<SCRIPT LANGUAGE="JavaScript">
function closeMeAndReloadParent() 

{  
 opener.location.reload();  
 window.close();  
}  
<SCRIPT">
<body onunload='closeMeAndReloadParent()'>

EX：點擊連結會使用window.open 另開無邊的視窗;在連結上右鍵又可以開啟分頁。

<a href='xxx.php?id={$data[$i]['msnauto']}' onClick="opwin({$data[$i]['msnauto']});return false;" >

function opwin(news_id){  
  newwin=window.open('xxx.php?id='+news_id,'nw','width=680px,height=680px,resizable=yes,scrollbars=yes,status=0');  
   newwin.moveTo(200,10);  
    }

關閉視窗

javascript:
  function doClose(){this.close();}

tablesorter

網址：http://tablesorter.com/docs/example-pager.html

$(document).ready(function() { 
    $("table") 
    .tablesorter({widthFixed: true, widgets: ['zebra']}) 
    .tablesorterPager({container: $("#pager")}); 
});

20120928新增

打開就有排序的反白：

$("#myTable").tablesorter({sortList: [[0,1]]} )
      .tablesorterPager({container: $("#pager")});

$(document).ready(function() { 
    $("table").tablesorter({ 
        // pass the headers argument and assing a object 
        headers: { 
            // assign the secound column (we start counting zero) 
            1: { 
                // disable it by setting the property sorter to false 
                sorter: false 
            }, 
            // assign the third column (we start counting zero) 
            2: { 
                // disable it by setting the property sorter to false 
                sorter: false 
            } 
        } 
    }); 
});

針對table每頁幾行，進行優化

在紅色的兩個方塊本來是選上面20下面還是依然是10，優化的話，可以讓上面兩個同步。
程式碼 jQuery：

BODY：

2012年1月4日星期三

facebook connect

新增facebook的apps https://developers.facebook.com/apps

參考：

Authentication

Facebook API PHP SDK裡面的資料因版本的更新，我在這邊做備註：引用的檔案為三個：example.php、facebook.php、base_facebook.php。exmplate.php裡面有些函數不能用，就用裡面函數有不支援就用範例即可。

解決智邦在使用facebook API的問題

facebook XXX人說這讚。成為你朋友中第一個說這讚的人。

底下的YOUR_URL 放入您facebook的網址：



               scrolling="no" frameborder="0"<br />        style="border:none; width:450px; height:80px">

2012年1月2日星期一

HTML 5 對於 table的支援度

沒支援的，請用CSS補足
1.border不填寫有html4的border=0的效果
2.css>消除圖片的藍邊框解法 img{border:0px;}

cellpadding:指定儲存格內容和儲存格邊框之間的間距。
cellspacing:指定儲存格之間的間距

css 版面置中


html, body {height: 100%; text-align: center;}
#container {
position: relative;
width:960px; height:100%;
margin:0 auto;/*ff 置中*/ *margin:0;/*ie 置中*/
text-align:left;
}
body > #container {height: auto; min-height: 100%;}
----------------------------------------------------------------------------
#container是最外層的div

CSS 分享 (2) CSS 基本概念與語法

View more presentations from 知世‧安索帕台北 (使用經驗設計中心)

2012年1月1日星期日

北80國小 mm_menu.js

問題：網站上的menu引用 mm_menu.js 發現在IE 8 上有錯誤
解法：把以下的語法註解掉即行。

var lite = FIND("menuLite" + x);
var s = lite.style;
s.pixelHeight = menu.menuHeight +(menu.menuBorder * 2);
s.height = s.pixelHeight + 'px';
s.pixelWidth = menu.menuWidth + (menu.menuBorder * 2);
s.width = s.pixelWidth + 'px';


if( menu.menuBgOpaque ) s.backgroundColor = menu.menuLiteBgColor;
var body = FIND("menuFg" + x);
s = body.style;
s.pixelHeight = menu.menuHeight + menu.menuBorder;
s.height = s.pixelHeight + 'px';
s.pixelWidth = menu.menuWidth + menu.menuBorder;
s.width = s.pixelWidth + 'px';
if( menu.menuBgOpaque ) s.backgroundColor = menu.bgColor;
s = menuLayer.style;
s.pixelWidth  = menu.menuWidth + (menu.menuBorder * 4);
s.width = s.pixelWidth + 'px';
s.pixelHeight  = menu.menuHeight+(menu.menuBorder*4);
s.height = s.pixelHeight + 'px';

HTML5 起始1

進入HTML 5的年代，對於前端開發人員，著實是一大福因，因為HTML 5 致力於解決跨瀏覽器問題，也可以部份取代原來的JavaScript。
借助於HTML5 前端開發人員可以減少開發時間，開發出功能更加強大的人機介面。

HTML5尊守以下三點規則：

相容性：HTML5在老版本的瀏覽器上也可以正常執行
實用性：HTML5內部並沒有特別複雜的功能，它只封裝了那些常用的簡單功能。
非革命性的發展：它只是一種「妥協式」的標準

<!DOCTYPE HTML>
<html>

<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

meta 為utf-8 在 HTML5下可以縮減為：

<meta charset='utf-8'>

html 5 轉換

快速將-doctype-等標籤-轉換成-html5-格式

一定要看 - 30個超優秀的 HTML5 學習資源架構圖：

書單：HTML5：建置與執行

HTML5 驗證器

http://html5.validator.nu

stripslashes 去除多餘的斜線

問題：使用ckeditor新增圖片，在丟出資料庫裡的資料時，發現會有多的斜線。
解法：用stripslashes函數

套上後：

不過ckeditor 與jquery UI之間的問題還是無法解決

Yahoo Login API

可以用下列三種認證/授權方式，

1. OAuth

2. OpenID

3. BBAuth

Using Yahoo! Social SDK for PHP

訂閱：意見 (Atom)

Android

2012年1月30日 星期一

2012年1月19日 星期四

2012年1月18日 星期三

2012年1月17日 星期二

2012年1月16日 星期一

水族館

從多個checkbox中判斷哪一個被選取，和要顯示的區域

2012年1月12日 星期四

2012年1月10日 星期二

2012年1月6日 星期五

2012年1月5日 星期四

2012年1月4日 星期三

2012年1月2日 星期一

2012年1月1日 星期日