แสดงบทความที่มีป้ายกำกับ HTML แสดงบทความทั้งหมด
แสดงบทความที่มีป้ายกำกับ HTML แสดงบทความทั้งหมด

01 กรกฎาคม 2554

HTML5 : Graph Pie


Your browser does not support the canvas element.


function arcCal(data){ return (Math.PI * 2 * (1 - data)); }

function GraphPie(config)
{
this.canvas = document.getElementById(config.canvasId);
this.context = this.canvas.getContext('2d');
this.context.strokeStyle = "#000000";
this.context.scale(1,0.5);

this.centerYThick = config.thickness;
this.radian = config.radian;

this.centerX = this.canvas.width/2;

this.centerYStart = this.canvas.height + (this.centerYThick/2);
this.centerYEnd = this.centerYStart - this.centerYThick;

this.centerYStep = parseInt(this.centerYThick / 20);
this.Distance = this.radian * 0.06;
}

GraphPie.prototype.getData = function(){
this.arguCount = arguments.length;
this.arcArray = Array(this.arguCount + 1);

this.dataSum = 0;
for(var i = 0;i < this.arguCount;i++){ this.dataSum += arguments[i]; }

this.dataCollect = 0;
for(var i = 0;i <= this.arguCount;i++)
{
this.arcArray[i] = arcCal(this.dataCollect/this.dataSum);
this.dataCollect += arguments[i];
}
}

GraphPie.prototype.getColor = function(){
this.colorArray = Array('#FFFF00','#FF0000','#0000FF','#00FF00','#FF00FF','#00FFFF','silver','orange','gray','black');
if(arguments.length) for(var i = 0;i < arguments.length;i++){ this.colorArray[i] = arguments[i]; }
}

GraphPie.prototype.drawPie = function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height * 2);

for(this.centerY = this.centerYStart;this.centerY >= this.centerYEnd;this.centerY -= this.centerYStep)
{
for(var i = 1;i <= this.arguCount;i++) if(this.arcArray[i - 1] > this.arcArray[i])
{
this.arcCenter = (this.arcArray[i - 1] + this.arcArray[i])/2;
this.centerXi = this.centerX + (this.Distance * Math.cos(this.arcCenter));
this.centerYi = this.centerY + (this.Distance * Math.sin(this.arcCenter));

this.context.fillStyle = this.colorArray[i - 1];

this.context.beginPath();
this.context.arc(this.centerXi,this.centerYi,this.radian,this.arcArray[i - 1],this.arcArray[i],true);
this.context.lineTo(this.centerXi,this.centerYi);
this.context.closePath();
this.context.stroke();
this.context.fill();
}
}
}

window.onload = function(){
var myGraphPie = new GraphPie({
canvasId: 'example',
radian: 200,
thickness: 100
});

myGraphPie.getData(700,500,250,150,100,500);
myGraphPie.getColor();
myGraphPie.drawPie();

myGraphPie = null;
}
1 ความคิดเห็น
ป้ายกำกับ: , , , , ,

12 พฤศจิกายน 2553

การแทรก jQuery ง่ายๆ เพื่อแก้ไข Links ภายใน Blogspot

เราจะใช้เมื่อไม่ต้องการให้ Links ภายใน Blogspot กดแล้วเรียก Webpage ใหม่มาแทนหน้าเดิมที่เราใช้อยู่ในปัจจุบัน แต่ต้องการให้เปิดหน้าใหม่ขึ้นมาแทน โดยแบ่งเป็นกรณีต่างๆ ดังนี้

กรณีต่างๆ Code ที่ใช้ คือ
กรณีที่ 1 - เมื่อต้องการให้ทุกๆ Links เปิดหน้าใหม่ทุกครั้ง<script src='http://code.jquery.com/jquery-1.4.3.min.js' type='text/javascript'/>

<script language='javascript'>
$(document).ready(function () {
$('a').attr({ 'target': '_blank' });
});
</script>
กรณีที่ 2 - เมื่อต้องการให้เฉพาะ Links ที่เปิด Website อื่นๆ ภายนอก เท่านั้นที่ Blogspot เปิดหน้าใหม่<script src='http://code.jquery.com/jquery-1.4.3.min.js' type='text/javascript'/>

<script language='javascript'>
$(document).ready(function () {
$('a').attr({ 'target': '_blank' });
$('a[href *= blogger.com] , a[href *= blogspot.com]').attr({ 'target': '_self' });
});
</script>


โดยเราจะทำการแทรก Code นี้ระหว่าง tag header (หมายถึงระหว่าง <head></head>) ดังนี้

Code เดิม<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
// แทรก Code ลงตรงนี้
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
Code เมื่อแทรก jQuery ลงไปแล้ว<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
// แทรก Code ลงตรงนี้
<script src='http://code.jquery.com/jquery-1.4.3.min.js' type='text/javascript'/>

<script language='javascript'>
$(document).ready(function () {
$('a').attr({ 'target': '_blank' });

$('a[href *= blogger.com] , a[href *= blogspot.com]').attr({
'target': '_self'
});
});
</script>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>


ข้อเสนอแนะ

1. เท่านี้ Links ทั้งหมดใน Blogspot ของคุณก็จะทำงานโดยเปิดหน้า Webpage ใหม่แทน ตามที่คุณต้องการ แต่หากไม่ทำงานตามที่ระบุไว้ก็เป็นไปได้ว่าอาจมีการเรียก Javascript อื่นใน Page ที่อาจทำให้คำสั่งบางอย่างของ jQuery ทำงานผิดพลาดได้ แต่การแก้ไขอาจยุ่งยากขึ้นอีกเล็กน้อยครับ

2. ไม่สามารถทำงานได้ใน Blog ที่ไม่มีการให้เข้าไปแก้ Html หรือ Blog การทำงานบางอย่างของ Javascript

Credit : www.jQuery.com
0 ความคิดเห็น
ป้ายกำกับ: , ,

06 พฤศจิกายน 2553

เทคนิคการกำหนด Class ใน HTML ด้วย CSS

ปรกติเราคงคุ้นเคยกับการกำหนด Class ใดๆ เพียง 1 Class ให้กับ Tag ต่างๆ ที่ต้องการ เช่น

<td class="setRight"> หรือ <tr class="highlight"> หรือ <div class="'special'">

แต่จริงๆ แล้วเราสามารถจะกำหนด Class ใดๆ มากกว่า 1 Class ให้กับ Tag ที่ต้องการได้โดยตรง เช่น

<table class="'setRight highlight special"> หรือ <span class="'special setRight">

โดย ใช้เพียงการเว้นวรรคระหว่างชื่อ Class ก็จะสามารถกำหนดได้อย่างง่ายดาย จึงช่วยให้ลดความยุ่งยากในการเขียน CSS และเพิ่มความรวดเร็วในการเขียน HTML ได้มากขึ้น
0 ความคิดเห็น
ป้ายกำกับ: , ,
สมัครสมาชิก: บทความ (Atom)