Show toolbar

2011年9月30日 星期五

JavaScript Function Class

標題：以Class型態建立方法
JavaScript (index.html)：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
var codeboxy = new function() {
var a = 5;
return {
init : function() {
var b = 7;
var sum = a + b;
return sum;
},
open : function() {
var num = this.init();
document.write(num);
}
};
};
window.onload = codeboxy.open();
</script>
說明：
以Class類別的型態來建立方法，讓程式更清楚有條理。
Posted by QQBoxy 0 comment
Tag - ,

2011年9月19日 星期一

Google Plus jsonp dump

標題：使用dump顯示Google Plus的個人資料
HTML (index.html)：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-TW" xml:lang="zh-TW">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jsonp dynamic</title>
<script type="text/javascript">
function googleplus(json) {
document.getElementById("gplus").innerHTML = dump(json);
}
function getGplus() {
var removeScript = document.getElementById('jsonScript');
if(removeScript)
removeScript.parentNode.removeChild(removeScript);
var uid = document.getElementById('uid').value;
var key = "Your key"; //Get your Google Plus API KEY
var script = document.createElement('script');
script.type = 'text/javascript';
script.id = 'jsonScript';
script.src = "https://www.googleapis.com/plus/v1/people/"+uid+"?key="+key+"&callback=googleplus";
//script.src = "https://www.googleapis.com/plus/v1/people/"+uid+"/activities/public?key="+key+"&callback=googleplus";
document.getElementsByTagName('head')[0].appendChild(script);
}
function dump(arr,level) {
var dumped_text = "";
if(!level) level = 0;
var level_padding = "";
for(var j=0;j<level+1;j++) level_padding += " ";
if(typeof(arr) == 'object') {
for(var item in arr) {
var value = arr[item];
if(typeof(value) == 'object') {
dumped_text += level_padding + "'" + item + "' ...\n";
dumped_text += dump(value,level+1);
} else {
dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
}
}
} else {
dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
}
return dumped_text;
}
</script>
</head>
<body>
<input type="text" id="uid" value="109023257393424023484" />
<input type="button" onClick="getGplus()" value="Get" />
<pre id="gplus"></pre>
</body>
</html>

範例：


說明：
請先取得Google Plus API Key並填入Your key，
使用dump讓JavaScript也有PHP print_r的功能，並使用jsonp取得Google Plus的個人資料。

參考：
http://www.openjs.com/scripts/others/dump_function_php_print_r.php
Posted by QQBoxy 0 comment
Tag - , ,

2011年9月7日 星期三

CSS Play button

標題：簡易CSS播放功能鍵
HTML (index.html)：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<style>
button {
background-color: white;
width: 30px;
padding: 5px;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
span.play {
border-color: transparent transparent transparent black;
border-style: solid;
border-width: 8px 0 8px 16px;
float: left;
height: 0;
text-indent: -999px;
width: 0;
}
span.pause {
border-color: transparent black;
border-style: solid;
border-width: 0 4px 0;
float: left;
height: 16px;
text-indent: -999px;
width: 8px;
}
span.stop {
border: 8px solid black;
float: left;
height: 0;
text-indent: -999px;
width: 0;
}
</style>
<button title="Play"><span class="play">Play</span></button>
<button title="Pause"><span class="pause">Pause</span></button>
<button title="Stop"><span class="stop">Stop</span></button>
範例：

說明：
純粹使用CSS建立播放功能鍵。

參考：
http://mediamilan.com/create-playback-buttons-with-just-css/
Posted by QQBoxy 0 comment
Tag - ,
訂閱： 文章 (Atom)