9月
09
Posted by YuanYuan under
javascript
A little project need this. (non jQuery)
include an js with parameter, ex: all.js?a=1&b=2&v=1
and you can control all.js with parameter with dymanic js, css
ex: if v=1, include v1.js realtime. v=2, include v2.js …
now, you can do anything, that you want to do.
others read.
that’s it!
7月
24
Posted by YuanYuan under
Css
we need Google Calendar style like , how to do that ?
I think
1.table or div
2.css control table style
I made this (some css style form google calendar, and table style form Cusco Sky table styles written by Braulio Soncco http://www.buayacorp.com) for my colleague.
- html{overflow-y:auto}
- body{margin:0;padding:0;font:small/normal Arial, Sans-serif}
-
- div.y2table { border-bottom:2px solid #c3d9ff;background:#c3d9ff; height: 474px; width:950px;}
-
- div.y2table table, div.y2table td {border: 1px solid #D4E0EE;border-collapse: collapse;font-family: "Trebuchet MS", Arial, sans-serif;color: #555555;}
-
- div.y2table table{width:100%; border-top:0}
- div.y2table caption {font-size: 150%;font-weight: bold;margin: 5px;}
- div.y2table td, div.y2table th { padding: 4px; width:150px;}
- div.y2table td.st-dtitle {padding: 0px 2px; background: #E8EEF7;}
- div.y2table td.st-dtitle-today {padding: 0px 2px; background: #bcd}
- div.y2table td.st-dtitle-nonmonth{background-color:#eee;color:#777}
-
- div.y2table thead th {text-align: center;background: #C3D9FF;color: #112ABB;font-weight:normal;}
-
- div.y2table tbody th {font-weight: bold;}
- div.y2table tbody tr { background: #FCFDFE; }
- div.y2table tbody tr.odd { background: #F7F9FC; }
-
- div.y2table table a:link {color: #718ABE;text-decoration: none;}
- div.y2table table a:visited {color: #718ABE;text-decoration: none;}
- div.y2table table a:hover {color: #718ABE;text-decoration: underline !important;}
- div.y2table tfoot th, div.y2table tfoot td {font-size: 85%;background: #E9F0F8;}
-
- div.y2table .st-dtitle{border:1px solid #c3d9ff;border-bottom:1px solid #fff; background-color:#e8eef7;color:#444;padding-right:2px;text-align:right;line-height:16px;overflow:hidden}
- div.y2table .st-dtitle-today{background-color:#bcd}
-
- .rb-n{padding:1px 1px 1px 3px;overflow:hidden;white-space:nowrap;color:white;-webkit-border-radius:3px;-moz-border-radius:3px;cursor:pointer;margin-bottom:1px; background:#4CB052;}
-
- .rb-o{margin:0 1px;border-width:1px 0;border-style:solid;cursor:pointer;}
- .rb-m{padding-left:3px;margin:0 -1px;border-width:0 1px;border-style:solid; /*zoom:1*/}
- .rb-i{overflow:hidden;color:white;white-space:nowrap; width:100%}
-
- .cic{background-repeat:no-repeat;display:inline-block;margin-left:2px;width:9px;height:7px;line-height:7px;background-image:url(combined_v9.gif)}
- .ff2 .cic{display:-moz-inline-box;vertical-align:bottom;position:relative;top:-2px}
- .cic-ques{margin-left:0;margin-right:2px;width:9px;height:9px;line-height:9px;background-position:-56px -50px}
- .cic-prsn{background-position:-28px -50px}
- .cic-noprs{background-position:-46px -50px}
- .cic-tmr{background-position:-28px -57px}
- .cic-rcr{background-position:-37px -50px}
- .cic-spcl{background-position:-37px -57px}
- .cic-priv{background-position:-11px -64px}
-
- .st-bg-table{position:absolute;top:0;left:0;height:100%;width:100%;table-layout:fixed}
- .st-bg{border-left:1px solid #c3d9ff}
- .st-bg-today{background-color:#ffc}
- .bg-exists .st-bg-today{background-color:#eee;border:1px solid #579;opacity:0.8;}
- .st-grid{position:relative;table-layout:fixed;width:100%}
- .st-c{padding:1px 1px 0 2px;vertical-align:top;font-family:Verdana, sans-serif; height:80px;}
- .st-s{padding-bottom:2px;cursor:default;}
- .st-dtitle{border-left:1px solid #c3d9ff;border-top:1px solid #c3d9ff;background-color:#e8eef7;color:#444;padding-right:2px;text-align:right;line-height:16px;overflow:hidden}
- .bg-exists .st-dtitle{opacity:0.8;filter:alpha(opacity=80)}
- .st-dtitle-nonmonth{background-color:#eee;color:#777}
- .st-dtitle-today{background-color:#bcd}
-
- /* IE & all */
- .pbox {font-size: 85%; margin-bottom:1px; color:#fff; cursor:pointer;}
- .pbox .t2 {font-size: 1px; margin: 0px 1px; line-height: 1px; height: 1px}
- .pbox .b2 {font-size: 1px; margin: 0px 1px; line-height: 1px; height: 1px}
- .pbox .sb2 {font-size: 1px; margin: 0px 1px; line-height: 1px; height: 1px}
- .pbox .offset {border-right: 1px solid}
-
- .pbox .b2 {border-right: 1px solid; background-color: #4cb052}
- .pbox .t2 {margin-right: 1px; background-color: #4cb052}
- .pbox .sb2 {display: block; margin-left: 1px}
- .pbox .pbody {background-color: #4cb052}
html tag is
css style .pbox form google calendar css style. It’s so easy to get 1px radius corner without image. and you can easy to set any color.
google css sprites combined_v9.gif, over here
http://www.google.com//googlecalendar/images/combined_v9.gif
this just a CSS google calendar style like. if want to all behavior look like google calendar, you need write some javascript to do this.
take a look google calendar http://www.google.com/calendar/ , clear and simple.