9 ¸ö»ùÓÚJavaScript ºÍ CSS µÄ Web ͼ±í¿ò¼Ü
jQuery, MooTools, Prototype µÈÓÅÐãµÄ
JavaScript ¿ò¼ÜÓµÓи÷ÖÖÇ¿´óµÄ¹¦ÄÜ£¬°üÀ¨»æÖÆ Web ͼ±í£¬Ê¹ÓÃÕâЩ¿ò¼ÜÒÔ¼°ÏàÓ¦²å¼þ£¬ÎÒÃÇ¿ÉÒԷdz£ÇáËɵØʵÏÖÇúÏßͼ£¬Ô²±ýͼ£¬Öù״ͼµÈ
Web ͼ±íµÄ»æÖÆ£¬¶ø²»±ØÏóÒÔÍùÄÇÑùͨ¹ý¸´Ô Flash ¼¼ÊõʵÏÖ¡£±¾ÎĽéÉÜÁË9¸öÓÅÐãµÄ»ùÓÚ JavaScript Óë CSS µÄ Web ͼ±í¿ò¼Ü¡£
jQuery, MooTools, Prototype µÈÓÅÐãµÄ JavaScript ¿ò¼ÜÓµÓи÷ÖÖÇ¿´óµÄ¹¦ÄÜ£¬°üÀ¨»æÖÆ Web
ͼ±í£¬Ê¹ÓÃÕâЩ¿ò¼ÜÒÔ¼°ÏàÓ¦²å¼þ£¬ÎÒÃÇ¿ÉÒԷdz£ÇáËɵØʵÏÖÇúÏßͼ£¬Ô²±ýͼ£¬Öù״ͼµÈ Web ͼ±íµÄ»æÖÆ£¬¶ø²»±ØÏóÒÔÍùÄÇÑùͨ¹ý¸´Ô Flash
¼¼ÊõʵÏÖ¡£±¾ÎĽéÉÜÁË9¸öÓÅÐãµÄ»ùÓÚ JavaScript Óë CSS µÄ Web ͼ±í¿ò¼Ü¡£
1.
Flot
Flot
ÊÇÒ»¸ö´¿´âµÄ jQuery JavaScript
»æͼ¿â£¬¿ÉÒÔÔÚ¿Í»§¶Ë¼´Ê±Éú³ÉͼÐΣ¬Ê¹Ó÷dz£¼òµ¥£¬Ö§³Ö·Å´óËõСÒÔ¼°Êó±ê×·×ٵȽ»»¥¹¦ÄÜ¡£¸Ã²å¼þÖ§³Ö IE6/7/8, Firefox 2.x+,
Safari 3.0+, Opera 9.5+ ÒÔ¼° Konqueror 4.x+¡£Ê¹ÓõÄÊÇ Safari ×îÏÈÒýÈëµÄ Canvas
¶ÔÏó£¬Ä¿Ç°ËùÓÐÖ÷Á÷ä¯ÀÀÆ÷¶¼Ö§³Ö¸Ã¶ÔÏ󣬳ýÁË IE, Òò´ËÔÚ IEÖÐʹÓà JavaScript ½øÐÐÄ£Äâ¡£ÕâÀïÓÐһЩʵÀý
¡£
2. JS Charts
JS Charts
ÊÇÒ»¸öÃâ·ÑµÄ»ùÓÚ JavaScript µÄͼ±íÉú³ÉÆ÷£¬±í¸ñ»æÖƷdz£¼òµ¥£¬¼¸ºõ²»ÐèÒª±àÂ룬Ҳ²»ÐèÒª²å¼þºÍ·þÎñÆ÷Ä£¿é£¬Ê¹ÓÃXML »ò JavaScript Êý×黺´æÊý¾Ý¡£
3. TableToChart
TableToChart
ÊÇÒ»¸ö MooTools ½Å±¾£¬¿ÉÒÔ½« HTML Table ¶ÔÏóÖд洢µÄÊý¾Ý»æÖƳÉͼ±í¡£Äã¿ÉÒÔʹÓà table ±êÇ©Éú³Éͼ±í£¬Öù״ͼ£¬ÇúÏßͼ£¬Ô²±ýͼµÈ¡£
4. PlotKit
PlotKit
ÊÇÒ»¸ö JavaScript »æͼ¿â£¬Ö§³Ö HTML Canvas ±êÇ©£¬Ò²Ö§³Ö SVG¡£
5. Yahoo UI Charts Control
YUI Charts Control
¿ÉÒÔÔÚÍøÒ³ÉϽ«±í¸ñÊý¾Ýת»»ÎªÍ¼±í£¬Ö§³ÖÖù״ͼ£¬ÇúÏßͼÒÔ¼°Ô²±ýͼ¡£Ö§³Ö DataSource ¹¤¾ß£¬¿ÉÉèÖõÄÖᣬÊó±êÅÌÐýÌáʾ£¬Í¼±í×éºÏ£¬ÒÔ¼°Æ¤·ôµÈ¹¦ÄÜ¡£
6. ProtoChart
ProtoChart
ÊÇÒ»¸ö»ùÓÚ Prototype ºÍ Canvas ±êÇ©µÄ¿ªÔ´¿â£¬Õâ¸ö¿âÉîÊÜ Flot
, Flotr, Plotkit µÈÆô·¢£¬Ö§³ÖÇúÏßͼ£¬Öù״ͼ£¬Ô²±ýͼµÈ£¬¿ÉÒÔÔÚͬһ¸öͼ±íÉÏÏÔʾ¶àÌ×Êý¾Ý£¬Ö§³Ö¿É¶¨ÖƵÄͼÀý£¬Íø¸ñ£¬±ß½çÒÔ¼°±³¾°Í¼¡£Ö§³Ö IE6/7, Firefox 2/3 ÒÔ¼° Safari£¬ÉõÖÁÖ§³Ö iPhone.
7. EJSChart
EJSChart
Ö§³ÖÊó±ê×·×Ù£¬Êó±êʼþ£¬°´¼ü×·×ÙÓëʼþ£¬Ëõ·Å£¬¹ö¶¯£¬½»»¥µÈ¹¦ÄÜ£¬½«Óû§ÌåÑéÉÏÉýµ½Ò»¸öи߶ȡ£Ö§³ÖÇúÏßͼ£¬Ãæ»ýͼ£¬Àëɢͼ£¬Ô²±ýͼ£¬Öù״ͼµÈÐÎʽ£¬
Ïà¹ØÎĵµ£º
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ÎÞ±êÌâÎĵµ</ ......
ת×Ô£ºhttp://www.div-css.com/html/XHTML-CSS/hack/1136667.html
Çø±ð²»Í¬ä¯ÀÀÆ÷£¬CSS hackд·¨£º
Çø±ðIE6
ÓëFF
£º
background:orange
;*
background:blue
;
Çø±ðIE6
ÓëIE7
£º
background:green
!important
;background:blue
;
Çø±ðIE7
Ó ......
CSS£¨Cascading Style Sheets£©²ãµþÑùʽ±í¡£
·´«Í³HTMLÒ³ÃæÅÅ°æºÍÏÔʾЧ¹ûÉèÖ÷½ÃæµÄÎÊÌâ¡£
·ÒýÈëCSSºó£ºHtml±ê¼ÇרÃÅÓÃÓÚ¶¨ÒåÍøÒ³µÄÄÚÈÝ£¬¶øÊÇÓÃCSSÀ´ÉèÖÃÆäЧ¹û¡£
CSS·ÖÀࣺ
ÄÚǶÑùʽ£¨Inline Style£©£ºÒÔÊôÐÔÐÎʽֱ½ÓÔÚHTML±ê¼ÇÖиø³ö£¬ÓÃÓÚÉèÖøñê¼ÇËù¶¨ÒåµÄÐÅϢЧ¹û¡£ÀýÈ磺
<body style ......
ÔÎÄ:http://www.52css.com/article.asp?id=1026
´ÓÍøÉÏÊÕ¼¯ÁËIE7,6ÓëFireofxµÄ¼æÈÝÐÔ´¦Àí·½·¨²¢ÕûÀíÁËÒ»ÏÂ.
¶ÔÓÚweb2.0µÄ¹ý¶È,Ç뾡Á¿ÓÃxhtml¸ñʽд´úÂë,¶øÇÒDOCTYPE Ó°Ïì CSS ´¦Àí,×÷ΪW3CµÄ±ê×¼,Ò»¶¨Òª¼Ó DOCTYPEÉùÃ÷.
1.divµÄ´¹Ö±¾ÓÖÐÎÊÌâ
vertical-align:middle;
½«ÐоàÔö¼Óµ ......
ShowModalDialogº¯ÊýµÄ¹¦ÄÜ£º
´ò¿ªÒ»¸ö×Ó´°¿Ú£¬²¢ÇÒ¿ÉÓ븸´°¿ÚÏ໥´«µÝÊý¾Ý£¬ËüÓëwindow.openµÄ×î´óÇø±ð¾ÍÔÚÓÚÓÉShowModalDialog´ò¿ª×Ó´°¿Úºó£¬¸¸´°¿Ú½«²»ÄܲÙ×÷¡£
ʹÓ÷½·¨£º
vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
²ÎÊý˵Ã÷£º
sURL
±ØÑ¡²ÎÊý£¬ÀàÐÍ£º×Ö·û´®¡£ÓÃÀ´Ö¸¶¨¶Ô»°¿òÒªÏ ......