Y星人の工作語錄

別理我, 我只是一個愛發勞騷的Y星人

9月
09

Passing JavaScript arguments via the src attribute

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!

Tags:
ADD COMMENTS
9月
04

what I read today: javascript, color, wordpress and fun

Posted by YuanYuan under Css, Fun, X-Tips, javascript

javascript

blogger

Colors

WordPress, web themes

Tags:
ADD COMMENTS
7月
24

[CSS]google Calendar style Like

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.

  1. html{overflow-y:auto}
  2. body{margin:0;padding:0;font:small/normal Arial, Sans-serif}
  3.  
  4. div.y2table { border-bottom:2px solid #c3d9ff;background:#c3d9ff; height: 474px; width:950px;}
  5.  
  6. div.y2table table, div.y2table td {border: 1px solid #D4E0EE;border-collapse: collapse;font-family: "Trebuchet MS", Arial, sans-serif;color: #555555;}
  7.  
  8. div.y2table table{width:100%; border-top:0}
  9. div.y2table caption {font-size: 150%;font-weight: bold;margin: 5px;}
  10. div.y2table td, div.y2table th { padding: 4px; width:150px;}
  11. div.y2table td.st-dtitle {padding: 0px 2px; background: #E8EEF7;}
  12. div.y2table td.st-dtitle-today {padding: 0px 2px; background: #bcd}
  13. div.y2table td.st-dtitle-nonmonth{background-color:#eee;color:#777}
  14.  
  15. div.y2table thead th {text-align: center;background: #C3D9FF;color: #112ABB;font-weight:normal;}
  16.  
  17. div.y2table tbody th {font-weight: bold;}
  18. div.y2table tbody tr { background: #FCFDFE; }
  19. div.y2table tbody tr.odd { background: #F7F9FC; }
  20.  
  21. div.y2table table a:link {color: #718ABE;text-decoration: none;}
  22. div.y2table table a:visited {color: #718ABE;text-decoration: none;}
  23. div.y2table table a:hover {color: #718ABE;text-decoration: underline !important;}
  24. div.y2table tfoot th, div.y2table tfoot td {font-size: 85%;background: #E9F0F8;}
  25.  
  26. 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}
  27. div.y2table .st-dtitle-today{background-color:#bcd}
  28.  
  29. .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;}
  30.  
  31. .rb-o{margin:0 1px;border-width:1px 0;border-style:solid;cursor:pointer;}
  32. .rb-m{padding-left:3px;margin:0 -1px;border-width:0 1px;border-style:solid; /*zoom:1*/}
  33. .rb-i{overflow:hidden;color:white;white-space:nowrap; width:100%}
  34.  
  35. .cic{background-repeat:no-repeat;display:inline-block;margin-left:2px;width:9px;height:7px;line-height:7px;background-image:url(combined_v9.gif)}
  36. .ff2 .cic{display:-moz-inline-box;vertical-align:bottom;position:relative;top:-2px}
  37. .cic-ques{margin-left:0;margin-right:2px;width:9px;height:9px;line-height:9px;background-position:-56px -50px}
  38. .cic-prsn{background-position:-28px -50px}
  39. .cic-noprs{background-position:-46px -50px}
  40. .cic-tmr{background-position:-28px -57px}
  41. .cic-rcr{background-position:-37px -50px}
  42. .cic-spcl{background-position:-37px -57px}
  43. .cic-priv{background-position:-11px -64px}
  44.  
  45. .st-bg-table{position:absolute;top:0;left:0;height:100%;width:100%;table-layout:fixed}
  46. .st-bg{border-left:1px solid #c3d9ff}
  47. .st-bg-today{background-color:#ffc}
  48. .bg-exists .st-bg-today{background-color:#eee;border:1px solid #579;opacity:0.8;}
  49. .st-grid{position:relative;table-layout:fixed;width:100%}
  50. .st-c{padding:1px 1px 0 2px;vertical-align:top;font-family:Verdana, sans-serif; height:80px;}
  51. .st-s{padding-bottom:2px;cursor:default;}
  52. .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}
  53. .bg-exists .st-dtitle{opacity:0.8;filter:alpha(opacity=80)}
  54. .st-dtitle-nonmonth{background-color:#eee;color:#777}
  55. .st-dtitle-today{background-color:#bcd}
  56.  
  57. /* IE & all */
  58. .pbox {font-size: 85%; margin-bottom:1px; color:#fff; cursor:pointer;}
  59. .pbox .t2 {font-size: 1px; margin: 0px 1px; line-height: 1px; height: 1px}
  60. .pbox .b2 {font-size: 1px; margin: 0px 1px; line-height: 1px; height: 1px}
  61. .pbox .sb2 {font-size: 1px; margin: 0px 1px; line-height: 1px; height: 1px}
  62. .pbox .offset {border-right: 1px solid}
  63.  
  64. .pbox .b2 {border-right: 1px solid; background-color: #4cb052}
  65. .pbox .t2 {margin-right: 1px; background-color: #4cb052}
  66. .pbox .sb2 {display: block; margin-left: 1px}
  67. .pbox .pbody {background-color: #4cb052}

html tag is

  1. <div class="y2table">
  2. <table border="0"><caption> <a href="#y=2009&amp;m=6">《《上個月 </a>
  3. <span class="title">2009 年 7 月 行事曆</span>
  4. <a href="#y=2009&amp;m=8"> 下個月》》</a>
  5. </caption>
  6. <thead>
  7. <tr>
  8. <th title="週一">週一</th>
  9. <th title="週二">週二</th>
  10. <th title="週三">週三</th>
  11. <th title="週四">週四</th>
  12. <th title="週五">週五</th>
  13. <th title="週六">週六</th>
  14. <th title="週日">週日</th>
  15. </tr>
  16. </thead>
  17. <tbody>
  18. <tr>
  19. <td class="st-dtitle st-dtitle-nonmonth"><span>29</span></td>
  20. <td class="st-dtitle st-dtitle-nonmonth"><span>30</span></td>
  21. <td class="st-dtitle"><span>7月 1日</span></td>
  22. <td class="st-dtitle"><span>2</span></td>
  23. <td class="st-dtitle"><span>3</span></td>
  24. <td class="st-dtitle"><span>4</span></td>
  25. <td class="st-dtitle"><span>5</span></td>
  26. </tr>
  27. <tr>
  28. <td class="st-c st-s"></td>
  29. <td class="st-c st-s"></td>
  30. <td class="st-c">
  31. <div class="rb-n">ohter browsers<em class="cic cic-tmr"> </em></div></td>
  32. <td class="st-c">
  33. <div class="pbox">
  34. <div class="t2"></div>
  35. <div class="pbody">IE only<em class="cic cic-tmr"> </em></div>
  36. <div class="t2"></div>
  37. </div>
  38. <div class="pbox">
  39. <div class="t2"></div>
  40. <div class="pbody">IE only<em class="cic cic-tmr"> </em></div>
  41. <div class="t2"></div>
  42. </div>
  43. <div class="rb-n">other browsers<em class="cic cic-tmr"> </em></div>
  44. <div class="rb-n">ohter browsers<em class="cic cic-tmr"> </em></div>
  45. <div class="rb-n">ohter browsers<em class="cic cic-tmr"> </em></div></td>
  46. <td class="st-c st-s"></td>
  47. <td class="st-c st-s"></td>
  48. <td class="st-c st-s"></td>
  49. </tr>
  50. <tr>
  51. <td class="st-dtitle"><span>6</span></td>
  52. <td class="st-dtitle"><span>7</span></td>
  53. <td class="st-dtitle"><span>8</span></td>
  54. <td class="st-dtitle"><span>9</span></td>
  55. <td class="st-dtitle"><span>10</span></td>
  56. <td class="st-dtitle"><span>11</span></td>
  57. <td class="st-dtitle"><span>12</span></td>
  58. </tr>
  59. <tr>
  60. <td class="st-c">
  61. <div class="rb-n">ohter browsers<em class="cic cic-tmr"> </em></div>
  62. <div class="rb-n">ohter browsers<em class="cic cic-tmr"> </em></div>
  63. <div class="rb-n">ohter browsers<em class="cic cic-tmr"> </em></div></td>
  64. <td class="st-c">
  65. <div class="rb-n">ohter browsers<em class="cic cic-tmr"> </em></div></td>
  66. <td class="st-c">
  67. <div class="rb-n">ohter browsers<em class="cic cic-tmr"> </em></div></td>
  68. <td class="st-c st-s"></td>
  69. <td class="st-c st-s"></td>
  70. <td class="st-c st-s"></td>
  71. <td class="st-c st-s"></td>
  72. </tr>
  73. <tr>
  74. <td class="st-dtitle"><span>13</span></td>
  75. <td class="st-dtitle"><span>14</span></td>
  76. <td class="st-dtitle"><span>15</span></td>
  77. <td class="st-dtitle"><span>16</span></td>
  78. <td class="st-dtitle"><span>17</span></td>
  79. <td class="st-dtitle"><span>18</span></td>
  80. <td class="st-dtitle"><span>19</span></td>
  81. </tr>
  82. <tr>
  83. <td class="st-c st-s"></td>
  84. <td class="st-c st-s"></td>
  85. <td class="st-c">
  86. <div class="rb-n">ohter browsers<em class="cic cic-tmr"> </em></div>
  87. <div class="rb-n">ohter browsers<em class="cic cic-tmr"> </em></div></td>
  88. <td class="st-c st-s"></td>
  89. <td class="st-c st-s"></td>
  90. <td class="st-c st-s"></td>
  91. <td class="st-c st-s"></td>
  92. </tr>
  93. <tr>
  94. <td class="st-dtitle"><span>20</span></td>
  95. <td class="st-dtitle"><span>21</span></td>
  96. <td class="st-dtitle"><span>22</span></td>
  97. <td class="st-dtitle st-dtitle-today"><span>23</span></td>
  98. <td class="st-dtitle"><span>24</span></td>
  99. <td class="st-dtitle"><span>25</span></td>
  100. <td class="st-dtitle"><span>26</span></td>
  101. </tr>
  102. <tr>
  103. <td class="st-c st-s"></td>
  104. <td class="st-c st-s"></td>
  105. <td class="st-c st-s"></td>
  106. <td class="st-c st-bg-today"></td>
  107. <td class="st-c st-s"></td>
  108. <td class="st-c">
  109. <div class="rb-n">ohter browsers<em class="cic cic-tmr"> </em></div>
  110. <div class="rb-n">ohter browsers<em class="cic cic-tmr"> </em></div>
  111. <div class="pbox">
  112. <div class="t2"></div>
  113. <div class="pbody">IE only<em class="cic cic-tmr"> </em></div>
  114. <div class="t2"></div>
  115. </div></td>
  116. <td class="st-c">
  117. <div class="rb-n">ohter browsers<em class="cic cic-tmr"> </em></div>
  118. <div class="pbox">
  119. <div class="t2"></div>
  120. <div class="pbody">IE only<em class="cic cic-tmr"> </em></div>
  121. <div class="t2"></div>
  122. </div></td>
  123. </tr>
  124. <tr>
  125. <td class="st-dtitle"><span>27</span></td>
  126. <td class="st-dtitle"><span>28</span></td>
  127. <td class="st-dtitle"><span>29</span></td>
  128. <td class="st-dtitle"><span>30</span></td>
  129. <td class="st-dtitle"><span>31</span></td>
  130. <td class="st-dtitle st-dtitle-nonmonth"><span>8月 1日</span></td>
  131. <td class="st-dtitle st-dtitle-nonmonth"><span>2</span></td>
  132. </tr>
  133. <tr>
  134. <td class="st-c st-s"></td>
  135. <td class="st-c st-s"></td>
  136. <td class="st-c st-s"></td>
  137. <td class="st-c">
  138. <div class="rb-n">ohter browsers<em class="cic cic-tmr"> </em></div></td>
  139. <td class="st-c">
  140. <div class="rb-n">ohter browsers<em class="cic cic-tmr"> </em></div>
  141. <div class="pbox">
  142. <div class="t2"></div>
  143. <div class="pbody">IE only<em class="cic cic-tmr"> </em></div>
  144. <div class="t2"></div>
  145. </div></td>
  146. <td class="st-c">
  147. <div class="rb-n">ohter browsers<em class="cic cic-tmr"> </em></div>
  148. <div class="pbox">
  149. <div class="t2"></div>
  150. <div class="pbody">IE only<em class="cic cic-tmr"> </em></div>
  151. <div class="t2"></div>
  152. </div>
  153. <div class="rb-n">ohter browsers<em class="cic cic-tmr"> </em></div></td>
  154. <td class="st-c st-s"></td>
  155. </tr>
  156. </tbody></table>
  157. </div>

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.

Tags:
ADD COMMENTS
5 / 194«<34567>»