tag:blogger.com,1999:blog-59465307047421309702024-03-06T16:20:07.273+08:00Jax 的工作紀錄除了在整理學習上的經驗,同時也能幫助其他需要的人Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.comBlogger17125tag:blogger.com,1999:blog-5946530704742130970.post-16494669802506525802015-03-06T15:33:00.001+08:002015-03-13T14:40:27.869+08:00[Java] Jsoup 筆記<pre class="java" name="code">import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;
public class TestJsoup {
public static void main(String[] args) throws Exception {
String url = "http://epg.dishstar.net/calendar.php?s=DISC&d=1";
// Document doc = Jsoup.parse(new URL(url), 5000);
Document doc = Jsoup.connect(url)
.userAgent("Mozilla/5.0")
.timeout(5000).get();
Elements trs = doc.select("table tr");
for (Element tr : trs) {
String time = tr.select("td:eq(0)").text();
String title = tr.select("td:eq(1)").text();
System.out.println(time + " <=> " + title);
}
}
}
</pre>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-57148724996672835022014-05-08T02:58:00.000+08:002014-05-08T02:58:09.841+08:00[AngularJS] 製作 jQuery UI Sortable directiveHtml<br />
<pre class="xml" name="code"><div jq-sortable="selectedList">
<div ng-repeat="item in selectedList">
<img ng-src="{{item.src}}" />
</div>
</div>
</pre><br />
<br />
JavaScript<br />
<pre class="js" name="code">app.directive('jqSortable', ['$parse', function($parse) {
return function(scope, element, attrs) {
/*解析並取得表達式*/
var expr = $parse(attrs['jqSortable']);
var $oldChildren;
element.sortable({
opacity: 0.7,
scroll: false,
tolerance: "pointer",
start: function() {
/*紀錄移動前的 children 順序*/
$oldChildren = element.children('[ng-repeat]');
},
update: function(){
var newList = [];
var oldList = expr(scope);
var $children = element.children('[ng-repeat]');
/*產生新順序的陣列*/
$oldChildren.each(function(i){
var index = $children.index(this);
if(index == -1){ return; }
newList[index] = oldList[i];
});
/*將新順序的陣列寫回 scope 變數*/
expr.assign(scope, newList);
/*通知 scope 有異動發生*/
scope.$digest();
}
});
/*在 destroy 時解除 Sortable*/
scope.$on('$destroy', function(){
element.sortable('destroy');
});
};
}]);
</pre>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-82000849991912917322014-05-08T02:56:00.000+08:002014-05-08T02:58:56.043+08:00[AngularJS] 製作 Mouse Drag Event directiveHtml<br />
<pre class="xml" name="code"><div ng-style="{'top': itemTop, 'left': itemLeft}"
my-mousedrag="itemTop = itemTop - $deltaY; itemLeft = itemLeft - $deltaX"
></div>
</pre><br />
JavaScript<br />
<pre class="js" name="code">app.directive('myMousedrag', function() {
return function(scope, element, attrs) {
var prevEvent;
element.mousedown(function(event){
prevEvent = event;
}).mouseup(function(event){
prevEvent = null;
}).mousemove(function(event){
if(!prevEvent){ return; }
/*將 element 拖移事件傳遞到 scope 上*/
scope.$eval(attrs['myMousedrag'], {
$event: event,
$deltaX: event.clientX - prevEvent.clientX,
$deltaY: event.clientY - prevEvent.clientY
});
/*通知 scope 有異動發生*/
scope.$digest();
prevEvent = event;
});
/*在 destroy 時清除事件註冊*/
scope.$on('$destroy', function(){
element.off('mousedown mouseup mousemove');
});
};
});
</pre>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-14100384141966647202014-05-08T02:54:00.000+08:002014-05-08T02:54:14.702+08:00[AngularJS] 製作 jQuery MouseWheel directive相依套件:<a href="https://github.com/brandonaaron/jquery-mousewheel" target="_blank">jquery-mousewheel</a><br />
<br />
Html<br />
<pre class="xml" name="code"><div jq-mousewheel="changeSize($event, $delta, $deltaX, $deltaY)"></div>
</pre><br />
JavaScript<br />
<pre class="js" name="code">app.directive('jqMousewheel', function(){
return function(scope, element, attrs) {
/*將 element 滾輪事件傳遞到 scope 上*/
element.on('mousewheel', function (event) {
scope.$eval(attrs['jqMousewheel'], {
$event: event,
$delta: event.delta,
$deltaX: event.deltaX,
$deltaY: event.deltaY
});
/*通知 scope 有異動發生*/
scope.$digest();
});
/*在 destroy 時清除事件註冊*/
scope.$on('$destroy', function(){
element.off('mousewheel');
});
};
});
</pre>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-26510350574789047362014-05-08T02:52:00.000+08:002014-05-08T03:00:03.540+08:00[AngularJS] 製作 jQuery scrollTop scrollLeft directiveHtml<br />
<pre class="xml" name="code"><div jq-scroll-top="viewerScrollTop"
jq-scroll-left="viewerScrollLeft"
></div>
</pre><br />
JavaScript<br />
<pre class="js" name="code">app.directive('jqScrollTop', ['$parse', function($parse){
return function(scope, element, attrs) {
/*解析並取得表達式*/
var expr = $parse(attrs['jqScrollTop']);
/*監聽變數異動,並更新到 element 上*/
scope.$watch(attrs['jqScrollTop'], function(value) {
element.scrollTop(value);
});
/*當 element 捲動時更新到變數上*/
element.on('scroll', function() {
expr.assign(scope, element.scrollTop());
});
/*在 destroy 時清除事件註冊*/
scope.$on('$destroy', function(){
element.off('scroll');
});
};
}]);
app.directive('jqScrollLeft', ['$parse', function($parse){
return function(scope, element, attrs) {
/*解析並取得表達式*/
var expr = $parse(attrs['jqScrollLeft']);
/*監聽變數異動,並更新到 element 上*/
scope.$watch(attrs['jqScrollLeft'], function(value) {
element.scrollLeft(value);
});
/*當 element 捲動時更新到變數上*/
element.on('scroll', function() {
expr.assign(scope, element.scrollLeft());
});
/*在 destroy 時清除事件註冊*/
scope.$on('$destroy', function(){
element.off('scroll');
});
};
}]);
</pre>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-86395351776148073842013-05-29T23:38:00.000+08:002014-10-08T13:36:58.850+08:00[轉載] (X)HTML Strict 下的嵌套规则轉載自:<a target="_blank" href="http://www.junchenwu.com/2007/01/allowed_nesting_of_elements_in_html_4_strict_and_xhtml_10_strict.html">(X)HTML Strict 下的嵌套规则</a><br />
<br />
下面是一份在 HTML 4 Strict 和 XHTML 1.0 Strict 下必须遵守的标签嵌套规则,比如你不能在 <code><a></code> 里面再嵌入一个 <code><a></code> 这样的约定。<br />
<br />
<strong>说明:</strong><br />
<ul><li>为了方便读者阅读,本文中的标签使用了大写(根据 XHTML 的规则,元素名必须小写,比如 <code><html></code> 而不应是 <code><HTML></code>)</li>
<li>小写的单词表明一组或一系列 HTML 标签</li>
<li>每一项条目(标签)后都跟随一组标签列表,如果没有这个列表,那么表明该条目(标签)内部不允许包含任何标签。这意味着该条目内部只能包含纯文本内容(#PCDATA,见下文)。如果注明 (empty),这意味着该条目内部不允许包含任何形式的内容。对于 flow,inline,block,OBJECT 和 BODY,其内部允许包含的内容在文中会单独给出。</li>
<li><a target="_blank" href="http://www.webreference.com/dlab/books/html/3-5.html#3-5-2-2">#PCDATA</a> 的意思是“parsed character data”,即纯文本内容(不包括任何 HTML 标签,但是转义内容可以存在,比如 <code>&auml;</code> 和 <code>&#228;</code>)</li>
<li>CDATA 的意思是“character data”,这意味着不包括转义内容的纯文本内容,详细内容可以参考<a target="_blank" href="http://www.flightlab.com/~joe/sgml/cdata.html">CDATA Confusion</a></li>
<li>excluding ... 意即不得直接或者间接的包含所列的元素</li>
</ul><br />
<img style="border:none;" src="http://1.bp.blogspot.com/-uPhvGX4saPM/UaYufGoMQtI/AAAAAAAANHg/kzwJRil0l9w/d/allowednesting.png" /><br />
<br />
注1. 以上内容基于 [HTML 4.01 Specification] 的 <a target="_blank" href="http://www.w3.org/TR/1999/REC-html401-19991224/sgml/dtd.html">Strict DTD</a>。<a target="_blank" href="http://www.junchenwu.com">JunChen</a> 翻译自 <a target="_blank" href="http://www.cs.tut.fi/~jkorpela/html/strict.html">Allowed nesting of elements in HTML 4 Strict (and XHTML 1.0 Strict)</a><br />
<br />
注2. 对于 <a target="_blank" href="http://www.w3.org/TR/xhtml1/">XHTML 1.0</a>,基本上一致,不同点如下:<br />
<ul><li>对于 <code><script></code> 和 <code><style></code> 的内容,在 HTML 4 里是 <code>CDATA</code> 而在 XHTML 里是 <code>#PCDATA</code></li>
<li>在 XHTML 中,<code><table></code> 标签后可以紧跟一个 <code><tr></code>,而在 HTML 4.01 里,不允许这样,不过 <code><tbody></code> 标签又是可以省略的。意思就是说,如果代码中的 <code><table></code> 后紧跟 <code><tr></code>,对于 HTML 4.01,会隐性的生成一个 <code><tbody></code> 标签,而在 XHTML 里面就没有。这会影响到样式表使用 <code>tbody</code> 作为选择器。</li>
</ul>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-33568104778083619532013-05-29T21:23:00.001+08:002014-02-05T20:21:13.950+08:00[轉載] Default style sheet for HTML 4轉載自:<a target="_blank" href="http://www.w3.org/TR/CSS21/sample.html">W3C Appendix D. Default style sheet for HTML 4</a><br />
<br />
This appendix is informative, not normative.<br />
<br />
This style sheet describes the typical formatting of all HTML 4 ([HTML4]) elements based on extensive research into current UA practice. Developers are encouraged to use it as a default style sheet in their implementations.<br />
<br />
The full presentation of some HTML elements cannot be expressed in CSS 2.1, including replaced elements ("img", "object"), scripting elements ("script", "applet"), form control elements, and frame elements.<br />
<br />
For other elements, the legacy presentation can be described in CSS but the solution removes the element. For example, the FONT element can be replaced by attaching CSS declarations to other elements (e.g., DIV). Likewise, legacy presentation of presentational attributes (e.g., the "border" attribute on TABLE) can be described in CSS, but the markup in the source document must be changed. <br />
<br />
<pre class="css" name="code">html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { display: block; unicode-bidi: embed; }
li { display: list-item; }
head { display: none; }
table { display: table; }
tr { display: table-row; }
thead { display: table-header-group; }
tbody { display: table-row-group; }
tfoot { display: table-footer-group; }
col { display: table-column; }
colgroup { display: table-column-group; }
td, th { display: table-cell; }
caption { display: table-caption; }
th { font-weight: bolder; text-align: center; }
caption { text-align: center; }
body { margin: 8px; }
h1 { font-size: 2em; margin: .67em 0; }
h2 { font-size: 1.5em; margin: .75em 0; }
h3 { font-size: 1.17em; margin: .83em 0; }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0; }
h5 { font-size: .83em; margin: 1.5em 0; }
h6 { font-size: .75em; margin: 1.67em 0; }
h1, h2, h3, h4,
h5, h6, b,
strong { font-weight: bolder; }
blockquote { margin-left: 40px; margin-right: 40px; }
i, cite, em,
var, address { font-style: italic; }
pre, tt, code,
kbd, samp { font-family: monospace; }
pre { white-space: pre; }
button, textarea,
input, select { display: inline-block; }
big { font-size: 1.17em; }
small, sub, sup { font-size: .83em; }
sub { vertical-align: sub; }
sup { vertical-align: super; }
table { border-spacing: 2px; }
thead, tbody,
tfoot { vertical-align: middle; }
td, th, tr { vertical-align: inherit; }
s, strike, del { text-decoration: line-through; }
hr { border: 1px inset; }
ol, ul, dir,
menu, dd { margin-left: 40px; }
ol { list-style-type: decimal; }
ol ul, ul ol,
ul ul, ol ol { margin-top: 0; margin-bottom: 0; }
u, ins { text-decoration: underline; }
br:before { content: "\A"; white-space: pre-line; }
center { text-align: center; }
:link, :visited { text-decoration: underline; }
:focus { outline: thin dotted invert; }
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override; }
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override; }
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed; }
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed; }
@media print {
h1 { page-break-before: always; }
h1, h2, h3,
h4, h5, h6 { page-break-after: avoid; }
ul, ol, dl { page-break-before: avoid; }
}
</pre>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-36639650058254651692012-06-04T01:29:00.000+08:002013-06-10T22:36:08.628+08:00[轉載] 自適應網頁設計轉載自:<a target="_blank" href="http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html">自适应网页设计(Responsive Web Design)</a> <a target="_blank" href="http://www.ruanyifeng.com/">阮一峰</a><br />
<br />
随着 3G 的普及,越来越多的人使用手机上网。<br />
<br />
移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?<br />
<br />
<a href="https://lh5.googleusercontent.com/-BaYt_zlv9p0/T8uOr2QueOI/AAAAAAAALUA/-OjZ66K3vpg/s1600-h/1335922013593.jpg"><img src="https://lh5.googleusercontent.com/-BaYt_zlv9p0/T8uOr2QueOI/AAAAAAAALUA/-OjZ66K3vpg/s512/1335922013593.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5749846233219758306" /></a><br />
<br />
手机的屏幕比较小,宽度通常在 600 像素以下,PC 的屏幕宽度,一般都在 1000 像素以上(目前主流宽度是1366×768),有的还达到了 2000 像素。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。<br />
<br />
很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个 mobile 版本,或者 iPhone / iPad 版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个 portal(入口),会大大增加架构设计的复杂度。<br />
<br />
于是,很早就有人设想,能不能"一次设计,普遍适用",让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)?<br />
<br />
<a href="https://lh5.googleusercontent.com/-uIH_p4AhHN4/T8uOrZZsOmI/AAAAAAAALT4/2EqPm_6-2j4/s1600-h/1335922013149.jpg"><img src="https://lh5.googleusercontent.com/-uIH_p4AhHN4/T8uOrZZsOmI/AAAAAAAALT4/2EqPm_6-2j4/s512/1335922013149.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5749846225472731746" /></a><br />
<br />
<br />
<strong>一、"自适应网页设计"的概念</strong><br />
<br />
2010 年,Ethan Marcotte 提出了"<a target="_blank" href="http://www.alistapart.com/articles/responsive-web-design/">自适应网页设计</a>"(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。<br />
<br />
他制作了一个<a target="_blank" href="http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html">范例</a>,里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于 1300 像素,则 6 张图片并排在一行。<br />
<br />
<a href="https://lh4.googleusercontent.com/-XAH8R976OOI/T8uOse7P1SI/AAAAAAAALUM/ExEs_IE2RAc/s1600-h/1335922013819.jpg"><img src="https://lh4.googleusercontent.com/-XAH8R976OOI/T8uOse7P1SI/AAAAAAAALUM/ExEs_IE2RAc/s512/1335922013819.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5749846244135523618" /></a><br />
<br />
如果屏幕宽度在 600 像素到 1300 像素之间,则 6 张图片分成两行。<br />
<br />
<a href="https://lh5.googleusercontent.com/-iSqeGMtM0UY/T8uOrpu3KeI/AAAAAAAALT8/RcqQgtaeoLc/s1600-h/1335922013300.jpg"><img src="https://lh5.googleusercontent.com/-iSqeGMtM0UY/T8uOrpu3KeI/AAAAAAAALT8/RcqQgtaeoLc/s512/1335922013300.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5749846229856496098" /></a><br />
<br />
如果屏幕宽度在 400 像素到 600 像素之间,则导航栏移到网页头部。<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWZkypXxwuGsMhVb1Wh3khRsYcCK48r1uMLiYGUNpKKqluIgJfZx17-pZXbx77I2p3deRiC3kAd42j51kIBYFdWUKrNb4sn8vTfSPVZW1YGbY5MTNnQ5f391lpbG3-J4g_zc53M4tFCmk3/s1600-h/1335922013682.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWZkypXxwuGsMhVb1Wh3khRsYcCK48r1uMLiYGUNpKKqluIgJfZx17-pZXbx77I2p3deRiC3kAd42j51kIBYFdWUKrNb4sn8vTfSPVZW1YGbY5MTNnQ5f391lpbG3-J4g_zc53M4tFCmk3/s1600/1335922013682.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5749846236187791842" /></a><br />
<br />
如果屏幕宽度在 400 像素以下,则 6 张图片分成三行。<br />
<br />
<a href="https://lh6.googleusercontent.com/-HtZ9oy6v99Y/T8uOsogAY-I/AAAAAAAALUU/xQS_hQHczMg/s1600-h/1335922013951.jpg"><img src="https://lh6.googleusercontent.com/-HtZ9oy6v99Y/T8uOsogAY-I/AAAAAAAALUU/xQS_hQHczMg/s1600/1335922013951.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5749846246705619938" /></a><br />
<br />
<a target="_blank" href="http://mediaqueri.es/">mediaqueri.es</a> 上面有更多这样的例子。<br />
<br />
这里还有一个<a target="_blank" href="http://www.benjaminkeen.com/misc/bricss/">测试小工具</a>,可以在一张网页上,同时显示不同分辨率屏幕的测试效果,我推荐安装。<br />
<br />
<br />
<strong>二、允许网页宽度自动调整</strong><br />
<br />
"自适应网页设计"到底是怎么做到的?其实并不难。<br />
<br />
首先,在网页代码的头部,加入一行 <a target="_blank" href="https://developer.mozilla.org/en/mobile/viewport_meta_tag">viewport元标签</a>。<br />
<br />
<pre class="xml" name="code"><meta name="viewport" content="width=device-width, initial-scale=1" />
</pre><br />
<a target="_blank" href="https://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html">viewport</a> 是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为 1.0,即网页初始大小占屏幕面积的 100%。<br />
<br />
所有主流浏览器都支持这个设置,包括 IE9。对于那些老式浏览器(主要是 IE6、7、8),需要使用 <a target="_blank" href="http://code.google.com/p/css3-mediaqueries-js/">css3-mediaqueries.js</a>。<br />
<br />
<pre class="xml" name="code"><!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</pre><br />
<br />
<strong>三、不使用绝对宽度</strong><br />
<br />
由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。<br />
<br />
具体说,CSS代码不能指定像素宽度:<br />
<br />
<pre class="css" name="code">width: xxx px;
</pre><br />
只能指定百分比宽度:<br />
<br />
<pre class="css" name="code">width: xx%;
</pre><br />
或者<br />
<br />
<pre class="css" name="code">width: auto;
</pre><br />
<br />
<strong>四、相对大小的字体</strong><br />
<br />
字体也不能使用绝对大小(px),而只能使用相对大小(em)。<br />
<br />
<pre class="css" name="code">body {
font: normal 100% Helvetica, Arial, sans-serif;
}
</pre><br />
上面的代码指定,字体大小是页面默认大小的 100%,即 16 像素。<br />
<br />
<pre class="css" name="code">h1 {
font-size: 1.5em;
}
</pre><br />
然后,h1 的大小是默认大小的 1.5 倍,即 24 像素(24/16=1.5)。<br />
<br />
<pre class="css" name="code">small {
font-size: 0.875em;
}
</pre><br />
small 元素的大小是默认大小的 0.875 倍,即 14 像素(14/16=0.875)。<br />
<br />
<br />
<strong>五、流动布局(fluid grid)</strong><br />
<br />
"<a target="_blank" href="http://www.alistapart.com/articles/fluidgrids/">流动布局</a>"的含义是,各个区块的位置都是浮动的,不是固定不变的。<br />
<br />
<pre class="css" name="code">.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}
</pre><br />
<a target="_blank" href="http://designshack.net/articles/css/everything-you-never-knew-about-css-floats/">float</a> 的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向 overflow(溢出),避免了水平滚动条的出现。<br />
<br />
另外,绝对定位(position: absolute)的使用,也要非常小心。<br />
<br />
<br />
<strong>六、选择加载CSS</strong><br />
<br />
"自适应网页设计"的核心,就是 CSS3 引入的 <a target="_blank" href="http://www.w3.org/TR/CSS21/media.html">Media Query</a> 模块。<br />
<br />
它的意思就是,自动探测屏幕宽度,然后加载相应的 CSS 文件。<br />
<br />
<pre class="xml" name="code"><link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />
</pre><br />
上面的代码意思是,如果屏幕宽度小于 400 像素(max-device-width: 400px),就加载 tinyScreen.css 文件。<br />
<br />
<pre class="xml" name="code"><link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />
</pre><br />
如果屏幕宽度在 400 像素到 600 像素之间,则加载 smallScreen.css 文件。<br />
<br />
除了用 html 标签加载 CSS 文件,还可以在现有 CSS 文件中加载。<br />
<br />
<pre class="css" name="code">@import url("tinyScreen.css") screen and (max-device-width: 400px);
</pre><br />
<br />
<strong>七、CSS 的 @media 规则</strong><br />
<br />
同一个 CSS 文件中,也可以根据不同的屏幕分辨率,选择应用不同的 CSS 规则。<br />
<br />
<pre class="css" name="code">@media screen and (max-device-width: 400px) {
.column {
float: none;
width: auto;
}
#sidebar {
display: none;
}
}
</pre><br />
上面的代码意思是,如果屏幕宽度小于 400 像素,则 column 块取消浮动(float:none)、宽度自动调节(width:auto),sidebar 块不显示(display:none)。<br />
<br />
<br />
<strong>八、图片的自适应(fluid image)</strong><br />
<br />
除了布局和文本,"自适应网页设计"还必须实现图片的<a target="_blank" href="http://unstoppablerobotninja.com/entry/fluid-images">自动缩放</a>。<br />
<br />
这只要一行 CSS 代码:<br />
<br />
<pre class="css" name="code">img { max-width: 100%; }
</pre><br />
这行代码对于大多数嵌入网页的视频也有效,所以可以写成:<br />
<br />
<pre class="css" name="code">img, object { max-width: 100%; }
</pre><br />
老版本的 IE 不支持 max-width,所以只好写成:<br />
<br />
<pre class="css" name="code">img { width: 100%; }
</pre><br />
此外,windows 平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用 IE 的专有命令:<br />
<br />
<pre class="css" name="code">img { -ms-interpolation-mode: bicubic; }
</pre><br />
或者,Ethan Marcotte 的 <a target="_blank" href="http://unstoppablerobotninja.com/demos/resize/imgSizer.js">imgSizer.js</a>。<br />
<br />
<pre class="js" name="code">addLoadEvent(function() {
var imgs = document.getElementById("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});
</pre><br />
不过,有条件的话,最好还是根据不同大小的屏幕,加载不同分辨率的图片。有很多方法可以做到这一条,服务器端和客户端都可以实现。<br />
<br />
(完)Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-62265743769623970082011-07-20T18:51:00.008+08:002013-06-29T17:31:48.851+08:00HTML 標籤一覽之前在做員工教育時整理的 HTML 標籤一覽,順便分享出來。<br />
<br />
檔案連結:<a href="https://dl.dropboxusercontent.com/u/16784943/code-demo/html-tag.html" target="_blank">HTML 標籤一覽</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-60747558635606579772011-07-20T18:50:00.008+08:002011-07-20T19:01:37.964+08:00HTML meta 彙整<pre class="xml:nogutter:nocontrols" name="code"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--網頁文件的編碼格式-->
<meta http-equiv="Content-Language" content="zh-TW" />
<!--網頁內容的語言-->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="X-UA-Compatible" content="IE=9, IE=8, chrome=1" />
<!--指定 IE 頁面呈現所使用的渲染引擎-->
<meta http-equiv="X-Frame-Options" content="deny" />
<!--限制頁面中Frame的使用方式-->
<!-- sameorigin – 只允許來自同一個網域的頁面嵌入-->
<!-- deny – 防止任何頁面的嵌入-->
<meta http-equiv="Date" content="Wed, 16 Feb 2011 22:34:13 GMT" />
<!--網頁內容的建立日期-->
<meta http-equiv="Last-Modified" content="Mon, 03 Jan 2011 17:45:57 GMT" />
<!--網頁內容的修改日期-->
<meta http-equiv="Location" content="URL=http://www.w3schools.com" />
<!--宣告此網頁的絕對制式資源位址-->
<meta http-equiv="Set-Cookie" content="w3scookie=myContent;expires=Fri, 30 Dec 2011 12:00:00 GMT; path=http://www.w3schools.com" />
<!--設定cookie,如果網頁過期,存盤的cookie將被刪除,需要注意的也是必須使用GMT時間格式-->
<meta http-equiv="Windows-Target" content="_top" />
<!--強制頁面在目前的視窗中以獨立頁面顯示,可以防止網頁被別人當作一個frame頁嵌入-->
<meta http-equiv="Refresh" content="300" />
<meta http-equiv="Refresh" content="10;URL=http://www.w3schools.com" />
<!--定時讓網頁在指定的時間內重新整理,或是跳轉到指定頁面-->
<meta http-equiv="Expires" content="Mon,12 May 2001 00:20:00 GMT" />
<!--設定網頁內容暫存的到期時間-->
<meta http-equiv="Pragma" content="no-cache" />
<!--禁止瀏覽器從近端機的緩存中調閱頁面內容(僅 IE 適用)-->
<meta http-equiv="cache-control" content="no-cache" />
<!--瀏覽器的緩存控制-->
<!-- public - 可放在公用的緩存區-->
<!-- private - 只能放在私人的緩存區-->
<!-- no-cache - 不許存放在緩存區-->
<!-- no-store - 可以暫時存放緩存區,但是不許長存-->
<meta name="KeyWords" lang="EN" content="key1,key2,key3" />
<meta name="KeyWords" lang="zh-TW" content="關鍵字1,關鍵字2,關鍵字3" />
<!--網頁內容的關鍵字-->
<meta name="Abstract" content="內容摘要" />
<!--網頁內容的摘要-->
<meta name="Description" content="內容描述" />
<!--網頁內容的描述-->
<meta name="Generator" content="Aptana 2" />
<!--製作網頁的工具名稱-->
<meta name="Author" content="作者名稱" />
<!--網頁製作者的名稱-->
<meta name="Reply-To" content="abc@mail.com" />
<!--聯繫人的 Email-->
<meta name="Website" content="http://www.website.com/" />
<!--網頁製作者的網站-->
<meta name="owner" content="http://www.website.com/" />
<!--定義所有者的網頁或網站-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!--viewport的作用是告訴瀏覽器,目前裝置有多寬(或多高),以便在縮放時有個基準-->
<!-- width - viewport的寬度(Number或 device-width)-->
<!-- height - viewport的高度(Number或 device-height)-->
<!-- initial-scale - 初始的縮放比例(0.25~5)-->
<!-- minimum-scale - 允許用戶縮放到的最小比例(0.25~5)-->
<!-- maximum-scale - 允許用戶縮放到的最大比例(0.25~5)-->
<!-- user-scalable - 用戶是否可以手動縮放(1/0或yes/no)-->
<meta name="Robots" content="noodp,noydir" />
<!--搜尋引擎檢索設定-->
<!-- all - 內容將被檢索,且頁面上的連結可以被查詢-->
<!-- none - 內容將不被檢索,且頁面上的連結不可以被查詢-->
<!-- index - 內容將被檢索-->
<!-- follow - 頁面上的連結可以被查詢-->
<!-- noindex - 內容將不被檢索,但頁面上的連結可以被查詢-->
<!-- nofollow - 內容將不被檢索,頁面上的連結可以被查詢-->
<meta name="Googlebot" content="nofollow" />
<!--針對 Google bot 的robots-->
<meta name="baiduspider" content="nofollow" />
<!--針對百度 bot 的robots-->
<meta name="classification" content="Computer" />
<!--告知搜索引擎網站(頁)應被列到哪個目錄下-->
<meta name="copyright" content="2011© W3Schools.com" />
<meta name="doc-rights" content="2011© W3Schools.com" />
<!--網頁的版權聲明-->
<meta name="Distribution" content="Taiwan" />
<!--描述網站(頁)的發佈地-->
<!-- web - 為全面互聯網-->
<!-- intranet - 只為內部網路-->
<!-- global - 全球性網頁-->
<!-- local - 本地端網頁-->
<!-- Intern use - 測試網頁-->
<meta name="doc-class" content="Completed" />
<!--指定文件的完成狀態-->
<!-- Completed - 已完成-->
<!-- Draft - 草稿-->
<!-- Living Document - 動態文件-->
<!-- Published - 發佈-->
<meta name="DownloadOptions" content="noopen" />
<!--控制下載對話匡上的按鈕顯示-->
<!-- noopen - 隱藏[開啟]的按鈕-->
<!-- nosave - 隱藏[儲存]的按鈕-->
<meta name="name" content="My document" />
<!--指定文件名稱-->
<meta name="rating" content="" />
<!--網頁內容分級-->
<!-- 14 years - 14歲以上-->
<!-- general - 普通-->
<!-- mature - 成年人-->
<!-- restricted - 限制-->
<!-- safe for kids - 孩童-->
<meta name="resource-type" content="document" />
<!--告知這個網頁的形式是文件-->
<meta name="revisit-after" content="7 days">
<!--搜尋引擎檢索器多久之後來造訪一次-->
<meta name="其他" content="" />
<!--你可以定義自己 meta 名稱與描述-->
<!--[針對 IE 的設定]-->
<meta name="MSSmartTagsPreventParsing" content="yes"/>
<!--防止微軟頁面編輯軟體在頁面上自動添加標籤-->
<meta http-equiv="imagetoolbar" content="no"/>
<!--關閉IE的圖片管理工具列-->
<meta http-equiv="MSThemeCompatible" content="no" />
<!--關閉XP的藍色立體按鈕系統顯示樣式-->
<meta http-equiv="Pics-label" content="">
<!--網頁等級升等職稱,在IE的internet選項中有一項內容設定,可以防止瀏覽一些受限制的網站,而網站的限制層級就是通過meta內容來設定的-->
<meta http-equiv="Page-Enter" content="revealTrans(duration=10,transtion=50)">
<meta http-equiv="Page-Exit" content="revealTrans(duration=20,transtion=6)">
<!--設定IE進入和離開頁面時的特殊效果-->
</pre>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-43121937510927594232011-07-11T14:49:00.001+08:002015-02-02T14:27:15.755+08:00[轉載] 屬性(Attribute)與特性(Property)之前看到<a target="_blank" href="http://blog.darkthread.net/post-2011-05-13-jquery-1-6-1.aspx">jQuery 1.6.1上場救援,不用改寫attr()囉</a>這篇文章時,讓我很疑惑 Attribute 與 Property 到底是有什麼不同,在字典上查出來的結果都是<strong>屬性</strong>,爬了一些文章後找到一篇不錯的解釋文。<br />
<br />
<hr />轉載自:<a target="_blank" href="http://caterpillar.onlyfun.net/Gossip/JavaScript/AttributeProperty.html">屬性與特性</a><br />
<br />
在進入瀏覽器作為客戶端之後,屬性(Attribute)與特性(Property)這兩個名詞就不斷交相出現,到目前還沒正式解釋它們的意義。<br />
<br />
其實在正式進入瀏覽器作為客戶端前,對於JavaScript物件本身帶有的名稱,這邊的文件都用<strong>特性</strong>這個名詞,代表以某個JavaScript物件作為名稱空間的名稱。例如:<br />
<pre class="js:nogutter:nocontrols" name="code">var obj = {
x : 10,
y : 20
};
</pre><br />
以上文件都稱,物件obj擁有特性x與y,特性x的值為10,特性y的值為20。<br />
<br />
HTML本身可以擁有屬性。例如:<br />
<pre class="xml:nogutter:nocontrols" name="code"><input name="user" value="guest">
</pre><br />
文件中會稱,<input>標籤擁有<strong>屬性</strong>name與value,屬性值各為user與guest。<br />
<br />
<strong>瀏覽器會剖析HTML,為每個標籤建立對應的DOM物件,完成剖析後,對於HTML的<span style="color:red;">所有屬性</span>(無論標籤上是否有撰寫),<span style="color: red;">DOM物件上會建立對應的特性</span>,通常屬性名稱是什麼,特性名稱也會是什麼,如果標籤上有設定某個屬性,則屬性值為何,特性值也就為何,<span style="color: red;">如果標籤上沒有設置屬性,則DOM物件上的特性會有預設值</span>。</strong><br />
<br />
例如上例中,<input>對應的DOM元素上,name特性與value特性值分別是user與guest。你可以如下分別取得(假設是頁面中第一個<input>標籤):<br />
<pre class="js:nogutter:nocontrols" name="code">var input = document.getElementsByName('user')[0];
var name = input.name;
var value = input.value;
</pre><br />
像這時,DOM元素上的name、value特性,也可以稱之為name與value屬性。也就是說,屬性這個詞,可用來表示HTML中的屬性,也可用來表示DOM中相對應的特性。對於HTML中沒有設定的標籤屬性,DOM上也會有對應的特性(屬性),不過都是預設值,例如,上面的<input>標籤並沒有設置type屬性,但DOM物件上對應的特性(屬性),其值為"text"。<br />
<br />
不過,<strong>HTML的屬性名稱未必與DOM物件的特性(屬性)名稱相對應</strong>。例如class就是一個例子,因為class在JavaScript中是關鍵字,在DOM上要取得HTML的class屬性對應名稱必須使用<strong>className</strong>,<label>的for屬性,因為for是關鍵字,而必須使用<strong>htmlFor</strong>特性來取得。例如:<br />
<pre class="xml:nogutter:nocontrols" name="code"><img id="logo" src="images/caterpillar.jpg" class="logo" title="Caterpillar's Logo"/>
</pre><br />
<br />
若要以JavaScript取得HTML的class屬性值,則必須:<br />
<pre class="js:nogutter:nocontrols" name="code">var className = document.getElementById('logo').className;
</pre><br />
<strong>透過JavaScript特性存取方式取得HTML屬性的對應值,也未必是HTML屬性中真正設定的值。例如,透過JavaScript取得<img>的src,結果是絕對URL,即使屬性中設定的是相對URL。</strong><br />
<br />
<strong>瀏覽器在剖析完HTML後,對於HTML中有設置的屬性,其實會在DOM物件上建立attributes特性。</strong>你可以如下顯示attributes的元素值,每個元素的型態是<strong>Attr</strong>:<br />
<pre class="js:nogutter:nocontrols" name="code">var attributes = document.getElementById('logo').attributes;
for(var i = 0; i < attributes.length; i++) {
var attrName = attributes[i].nodeName;
var attrValue = attributes[i].nodeValue;
...
}
</pre><br />
以物件結構來表示的話:<br />
<pre class="js:nogutter:nocontrols" name="code">{
attributes : {
'0' : {nodeName : 'id', nodeValue : 'logo', ...},
'1' : {nodeName : 'src', nodeValue : 'images/src', ...},
'2' : {nodeName : 'class', nodeValue : 'logo', ...},
'3' : {nodeName : 'title', nodeValue : 'Caterpillar\’s logo', ...},
length : 4
...
},
id : 'logo',
src : 'http://caterpillar.onlyfun.net/images/caterpillar.jpg',
className : 'logo',
title : 'Caterpillar\'s logo',
…
}
</pre><br />
attributes上的特性值,是HTML上真正設定的屬性與值。<strong>在文件剖析完畢後,DOM物件上的屬性(特性)與attributes上的特性是對應的。</strong><br />
<br />
注意,上面是以物件結構來示意,並不是指真正的型態就是上面所表示的。attributes的型態會是 <a target="_blank" href="http://www.w3schools.com/dom/dom_namednodemap.asp">NamedNodeMap</a> ,而每個索引元素的型態會是 <a target="_blank" href="http://www.w3schools.com/dom/dom_attribute.asp">Attr</a>(如果你手邊有個JavaScript Debugger的話,可以很方便地觀察這些東西)。<br />
<br />
你可以使用DOM物件的getAttribute()來取得<strong>attributes中的屬性</strong>,使用setAttribute()設定<strong>attributes</strong>中的屬性(同時亦會改變DOM對應的特性),使用removeAttribute()來移除<strong>attributes</strong>屬性。<br />
<br />
<strong>移除屬性是指移除attributes上對應的特性值,而非移除DOM物件上對應的特性(屬性)值,DOM物件上對應的特性(屬性)值在使用removeAttribute()後,只是回到預設值,而不是直接將特性移除,<span style="color: red;">沒有任何操作可以將DOM上對應屬性的特性移除。</span>如果HTML上沒有設置該屬性,則使用getAttribute()指定該屬性會取得null,但並不表示DOM上沒有對應屬性的特性,而是該特性值會是預設值。使用setAttribute()可以在attributes中設定屬性,相對應的DOM特性值也會改變。</strong><br />
<br />
例如,以下的程式,只會將attributes的中src對應的特性移除,不會移除DOM上src特性(屬性),DOM上src只是回到''的預設值。<br />
<pre class="js:nogutter:nocontrols" name="code">var img = document.getElementById('logo');
img.removeAttribute('src');
// img.src 的值是 '',不是undefined
// img.attributes['src'] 是 undefined
</pre><br />
如果你直接改變DOM上的特性(屬性),attributes中對應的屬性並不會有變化。例如:<br />
<pre class="xml:nogutter:nocontrols" name="code"><input id="user" value="guest">
</pre><br />
使用以上的程式:<br />
<pre class="js:nogutter:nocontrols" name="code">document.getElementById('user').value = 'Justin';
var user1 = document.getElementById('user').value; // 值是'Justin'
var user2 = document.getElementById('user').getAttribute('value'); // 值是'guest'
</pre><br />
如果你要同時改變attribues上的屬性與DOM上的特性(屬性),則要使用setAttribute()。例如:<br />
<pre class="js:nogutter:nocontrols" name="code">document.getElementById('user').setAttribute('value', 'Justin');
var user1 = document.getElementById('user').value; // 值'Justin'
var user2 = document.getElementById('user').getAttribute('value'); // 值'Justin'
</pre><br />
<br />
其他參考資訊:<br />
<a target="_blank" href="http://www.cnblogs.com/winner/archive/2008/12/11/1353314.html">property和attribute的区别</a><br />
<a target="_blank" href="http://blog.xuite.net/vexed/tech/45260002">JavaScript property 、 DOM property 、 HTML attribute</a><br />
<a target="_blank" href="http://meebox.blogspot.com/2007/01/attributeproperty.html">翻譯名詞:attribute、property</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-69546174472796183242009-12-22T09:12:00.003+08:002013-06-11T22:11:28.518+08:00HTML 與 CSS 觀念上的區別<strong><a target="_blank" href="http://zh.wikipedia.org/zh-tw/HTML">HTML</a></strong>:在定義網頁的 <em>結構</em> 跟 <em>語意</em><br />
<ul><li><code>h1</code>:第一標題<br />
</li>
<li><code>h2</code>:第二標題<br />
</li>
<li><code>p</code>:段落<br />
</li>
<li><code>li</code>:清單條目<br />
</li>
<li><code>em</code>:強調<br />
</li>
<li><code>strong</code>:更強調<br />
</li>
<li><code>blockquote</code>:引言<br />
</li>
</ul><br />
<strong><a target="_blank" href="http://zh.wikipedia.org/zh-tw/CSS">CSS</a></strong>:在定義網頁的呈現 <em>樣式</em><br />
<ul><li><code>color</code>:文字顏色<br />
</li>
<li><code>text</code>:文字<br />
</li>
<li><code>font</code>:字體<br />
</li>
<li><code>margin</code>:邊界距離<br />
</li>
<li><code>padding</code>:內緣距離<br />
</li>
<li><code>background</code>:背景底色<br />
</li>
</ul>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-64578714668888091462009-12-18T16:50:00.008+08:002011-05-06T18:13:43.456+08:00[HTML] 規劃延生屬性之前在玩 Firefox 的外掛時,在 <a href="https://developer.mozilla.org/zh_tw/XUL">XUL</a> 的定義中學到其他屬性設定,當中有些定義還蠻常用到的<br />如:empty, emptytext, max, min...等<br /><br />這裡我只是要說明一個簡化開發的 solution,並沒有完整的應用規劃,為了瞭解這個 solution 可以先看看一個簡單的<a target="_blank" href="http://sites.google.com/site/weskerjax/code-demo/html_extension.zip">範例 html_extension.zip</a>。<br /><br />其實最近看到 <a href="http://dev.w3.org/html5/spec/Overview.html">HTML5</a> 已經將很多常見的介面應用加入定義中,但還是可以將系統架構中常用的功能做成延伸屬性,在 <a href="http://dev.w3.org/html5/spec/Overview.html">HTML5</a> 普及之前這是一個很好的 solution。<br /><br /><br />在之前的專案中,我做了一下的規劃:<br /><dl><dt>element [延伸屬性]{所有元素共用}<br /></dt><dd>removeDelay="sec" {設定幾秒鐘後自動[移除]此元素}<br />pulsate="sec" {設定幾秒鐘後自動結束元素[閃爍]}<br /><br /></dd><dt>input,textarea [延伸屬性]<br /></dt><dd>emptyText="為空預設提示" {設定當輸入匡為空時的文字提示}<br /><br /></dd><dt>form > tr [延伸樣式]<br /></dt><dd>class="NotNull" {檢查區塊內的元素是否有選項值}<br /><br /></dd><dt>form > input [延伸屬性]<br /></dt><dd>format="" {表單送出前的格式檢查,但不會檢查是否為空} <br /><ul><li>'tel':電話</li><li>'mobile':行動電話</li><li>'email':電子信箱</li><li>'url':網路連結<br /></li></ul></dd><dd>jtype="" {資料輸入時的輔助}<br />(基本格式輸入)<br /><ul><li>'uint':無符號整數</li><li>'int':整數</li><li>'float':浮點數</li><li>'id':帳號格式</li><li>'alnum':保留字母和数字及底線<br /></li></ul><br />(輔助日期輸入)<br /><ul><li>'date':選擇日期</li><li>'start_date':選擇起始日期</li><li>'end_date':選擇結束日期<br /></li></ul> <br />(輔助時間輸入)<br /><ul><li>'time':選擇時間</li><li>'start_time':選擇起始時間</li><li>'end_time':選擇結束時間<br /></li></ul></dd></dl><br /> <br />在下面的 HTML 中可以看到程式碼都便得很簡單<br /><pre class="xml" name="code"><br /><!--動態效果--><br /><div pulsate="4">4秒閃爍</div><br /><div removeDelay="10">10秒後消失</div><br /><div pulsate="5" removeDelay="8">5秒閃爍&8秒後消失</div><br /><br /><br /><!--表單--><br /><form class="FormWidget" method="post" action=""><br /><table class="FormList" border="0"><br /> <caption>輸入限制</caption><br /><br /> <tr class="NotNull"><br /> <th><label for="data_1">無符號整數 :</label></th><br /> <td><input type="text" jtype="uint" value="" class="Int" id="data_1" name="data_1"/></td><br /> </tr><br /><br /> <tr class="NotNull"><br /> <th><label for="data_2">整數 :</label></th><br /> <td><input type="text" jtype="int" value="" class="Int" id="data_2" name="data_2"/></td><br /> </tr><br /><br /> <tr class="NotNull"><br /> <th><label for="data_3">浮點數 :</label></th><br /> <td><input type="text" jtype="float" value="" class="Int" id="data_3" name="data_3"/></td><br /> </tr><br /> <br /> <tr><br /> <th><label for="data_4">帳號格式 :</label></th><br /> <td><input type="text" jtype="id" value="" class="Text" id="data_4" name="data_4" emptyText="請輸入帳號"/></td><br /> </tr><br /><br /> <tr class="NotNull"><br /> <th><label for="data_5">英數及底線 :</label></th><br /> <td><input type="text" jtype="" value="" class="Text" id="data_5" name="data_5"/></td><br /> </tr><br /></table><br /><br /><br /><table class="FormList" border="0"><br /> <caption>時間 & 日期</caption><br /><br /> <tr><br /> <th><label for="data_6">日期 :</label></th><br /> <td><input type="text" jtype="date" value="" id="data_6" name="data_6"/></td><br /> </tr><br /><br /> <tr><br /> <th><label>日期區間 :</label></th><br /> <td><br /> <div class="OptionBar"><br /> <label>起始<input type="text" jtype="start_date" value="" class="Text" name="start_date"/></label><br /> -<br /> <label>結束<input type="text" jtype="end_date" value="" class="Text" name="end_date"/></label><br /> </div><br /> </td><br /> </tr><br /> <br /> <tr><br /> <th><label for="data_7">時間 :</label></th><br /> <td><input type="text" jtype="time" value="" id="data_7" name="data_7"/></td><br /> </tr><br /> <br /> <tr><br /> <th><label>時間區間 :</label></th><br /> <td><br /> <div class="OptionBar"><br /> <label>起始<input type="text" jtype="start_time" value="" name="start_time"/></label><br /> -<br /> <label>結束<input type="text" jtype="end_time" value="sdsfsdf" name="end_time"/></label><br /> </div><br /> </td><br /> </tr><br /></table><br /><br /><br /><table class="FormList" border="0"><br /> <caption>格式檢查</caption><br /><br /> <tr><br /> <th><label for="data_8">電話格式 :</label></th><br /> <td><input type="text" format="tel" value="" class="Text" id="data_8" name="data_8"/></td><br /> </tr><br /> <br /> <tr class="NotNull"><br /> <th><label for="data_9">行動電話格式 :</label></th><br /> <td><input type="text" format="mobile" value="0912345678" class="Text" id="data_9" name="data_9"/></td><br /> </tr><br /> <br /> <tr class="NotNull"><br /> <th><label for="data_10">E-mail 格式 :</label></th><br /> <td><input type="text" format="email" value="" class="Text" id="data_10" name="data_10"/></td><br /> </tr><br /> <br /> <tr><br /> <th><label for="data_11">連結格式 :</label></th><br /> <td><input type="text" format="url" value="" class="Text" id="data_11" name="data_11"/></td><br /> </tr><br /></table><br /><br /><div class="Buttons"><br /> <input type="submit" class="Button" value="儲存"/><br /></div><br /></form><br /></pre>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-43731950219784708392009-04-29T21:34:00.008+08:002011-05-06T18:13:43.458+08:00Web 文件類型壓縮及註解清除器大部分的 Web 文件壓縮,都是將不要的<span style="color: rgb(255, 0, 0); font-weight: bold;">空白文字或不必要的註解清除</span>,以換取檔案的大小。<br /><br />之前找尋不到合適的工具,索性就自己寫一個工具,這次將之前的<a href="/2008/06/html-smartyjavascriptcss-php.html">HTML & Smarty、JavaScript、CSS 及 PHP 註解清除器</a>做一個整合,並且做一些使用上的教學。<br /><br />修改特點:<br /><ul><li>整合之前的文件類型至一個工具上</li><li>只針對 <span style="color: rgb(255, 0, 0); font-weight: bold;">html , htm , css , js 及 php 副檔名</span>的文件做處理</li><li>增加參數選擇</li></ul><br /><h4>web_clear 參數說明</h4>web_clear [-hvc] (filename)<br />[-h | -?] : 顯示參數說明<br />[-v] : 顯示被執行的檔案列表<br />[-c] : 單純只清除註解<br />(filename) : 檔案路徑或目錄路徑<br /><br /><br /><h4>Windows 下的操作</h4><img src="http://1.bp.blogspot.com/_b8lN_UbLoEc/SfgrteQhD5I/AAAAAAAAEME/Ciw18fvXfu0/20090429-181052.jpg" alt="" id="BLOGGER_PHOTO_ID_5330058219209428882" border="0" /><br />可以透過拖移文件或資料夾的方式執行此工具。<br /><br />也可以透過命令列或批次檔去執行<br /><pre class="sh" name="code"><br />@ECHO off<br /><br />web_clear.exe -v "Z:\Web" Z:\WebServer\1.html Z:\WebServer\1.css <br /><br />PAUSE <br /></pre><br /><br /><h4>Linux 下的操作</h4>透過命令列或 Shell 去執行<br /><pre class="sh" name="code"><br />#!/bin/bash<br /><br />PATH=/bin:/sbin:/usr/bin:/usr/sbin:/usr/local/bin:/usr/local/sbin:~/bin<br />export PATH<br /><br />./web_clear -v /home/test/index.php<br /><br /># 也可以配合 find 去執行<br />#./web_clear -v `find /home/test -name '*.css' -or -name '*.js'`<br /><br />exit 0<br /></pre><br /><br /><h4>檔案下載:</h4><a target="_blank" href="http://sites.google.com/site/weskerjax/code-demo/web_clear.tar.gz">web_clear.tar.gz</a><br /><br /><pre class="sh:nocontrols" name="code"><br />web_clear<br />|-- linux<br />| |-- source<br />| | |-- web_clear.c<br />| | `-- web_clear.l<br />| |<br />| |-- clear_file.sh<br />| `-- web_clear<br />|<br />`-- windows<br /> |-- source<br /> | |-- web_clear.c<br /> | `-- web_clear.l<br /> |<br /> |-- clear_file.bat<br /> `-- web_clear.exe<br /><br />4 directories, 8 files<br /></pre>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com10tag:blogger.com,1999:blog-5946530704742130970.post-41202575324884935712009-04-08T22:05:00.009+08:002023-02-26T14:24:35.317+08:00HTML 中 Flash 遮蓋問題的解決方法flash 在頁面中會顯示在最上層<br />
想要用其他元素覆蓋在上面時<br />
必須做以一下參數設定<br />
但不管有沒有元素覆蓋<br />
最好還是加入這個參數<br />
避免意料之外的版面問題<br />
<pre class="xml" name="code"><object ... >
<param name="wmode" value="transparent"/>
<!-- ... -->
<embed wmode="transparent" ... />
</object>
</pre><br />
<br />
wmode 的參數值:<br />
<ul><li>Window</li>
<li>Opaque</li>
<li>Transparent</li>
</ul><br />
<br />
參考來源:<br />
<a target="_blank" href="http://www.boka.cn/bbs/viewthread.php?tid=13017">【求助】关于下拉菜单被FLASH遮盖,怎样解决</a><br />
<a target="_blank" href="http://atedev.wordpress.com/2007/09/20/wmode-%E4%B8%89%E9%81%B8%E4%B8%80/">wmode 三選一</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-14461173614300036952008-08-15T17:18:00.007+08:002009-04-10T21:33:47.273+08:00CSS 與 HTML 規劃心得檢討由於所開發的系統愈來愈大,免不了開始出現一些排版上的問題,對於目前的狀況做了一些整理:<br /><dl><dt style="color: rgb(255, 0, 0);">每加入一個新功能就建立一個新樣式,造成過多獨立應用的樣式。</dt><dd style="color: rgb(51, 102, 255);">再新功能規劃時,可多考慮使用舊有的樣式。</dd><dt style="color: rgb(255, 0, 0);">HTML 在的設計上過於精簡缺乏彈性及流通性。</dt><dd style="color: rgb(51, 102, 255);">在結構上的規劃時多考慮多變應用以增加日後應用上的彈性。</dd><dt style="color: rgb(255, 0, 0);">類似的樣式過多沒有統一的規劃。</dt><dd style="color: rgb(51, 102, 255);">再設計多預想未來的應用,增加樣式重複利用的可能性。</dd><dt style="color: rgb(255, 0, 0);">過度使用已 Tag 為主的選擇器,造成過度的樣式覆寫。</dt><dd style="color: rgb(51, 102, 255);">在較複雜的樣式區塊中,先做分割規劃出許多小區塊,簡化樣式選擇器的深度。</dd><dt style="color: rgb(255, 0, 0);">ID 與 Class 命名沒有規範清楚,造成樣式與功能上的混淆。</dt><dt style="color: rgb(255, 0, 0);">排版與樣式沒有分離,造成管理不易。</dt><dt style="color: rgb(255, 0, 0);">對於排版的寬度定義不明確,造成異常 overflow 跑版。</dt></dl><br />主要的問題還是出在一致性的樣式共用與命名規則的問題上,在開發的過程中沒有謹慎規劃,對於未來可能的應用也許要考慮進去,避免重複定義相似的樣式。Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-67966992951415630662008-06-01T19:34:00.011+08:002011-05-06T18:13:43.469+08:00HTML & Smarty、JavaScript、CSS 及 PHP 註解清除器之前為了上線前去除不要的註解及多餘的空白符號,一直在找合適的工具,可是找到大部分都是 windows 的軟體,想找 Linux 的卻沒找到,於是就自己用 Lex 寫了一些,幾本上我分成四個語言的清除器,設計上是直接覆寫原始的檔案,所以在應用前請先自行複製備份,由於清除器沒有做語法驗證,再撰寫時需要特別嚴謹 ( PS: 程式碼中常被忽略的結束符號 <span style="color: rgb(255, 0, 0);">";"</span> )。<br /><br />清除規則:<ul><li>HTML & Smarty</li><ul><li>清除 < 及 > 前後的空白及換行(\n)符號</li><li>清除 HTML 註解 (<!-- 註解 -->)</li><li>清除 Smarty 註解 ({* 註解 *})</li><li>清除 JavaScript 單行及多行註解 (/* 註解 */ , //註解)</li><li>清除 JavaScript 多餘的空白及換行(\n)符號</li><li>完整保留單引號及雙引號內的字串</li></ul><li>JavaScript</li><ul><li>清除多餘的空白及換行(\n)符號</li><li>清除單行及多行註解 (/* 註解 */ , //註解)</li><li>完整保留單引號及雙引號內的字串</li></ul><li>CSS</li><ul><li>清除多餘的空白及換行(\n)符號</li><li>清除多行註解 (/* 註解 */)</li><li>完整保留單引號及雙引號內的字串</li></ul><li>PHP</li><ul><li>清除行首及行尾的空白符號</li><li>清除無用的空白行</li><li>清除單行及多行註解 (/* 註解 */ , //註解)</li><li>完整保留單引號及雙引號內的字串</li></ul></ul><br />這已經經過很多次的測試跟修改了,目前還沒有出現特別的狀況,有需要的人可以用用看,在 linux 上必許要安裝 flex 及 gcc 才可以編譯,當然 windows 也有的flex 及 gcc 的編譯器。<br /><br /><a target="_blank" href="http://sites.google.com/site/weskerjax/code-demo/lex_clear.rar">檔案連結</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0