利用table+css實作導覽列

預設：

點選List後：

點選Tag後：

HTML

<table class='Task-Plan-Navigator overflow-hidden clean-region-table fullwidth'>
    <tbody>
        <tr>
            <td class='Task-Plan-Navigator-Tag Task-Plan-Navigator-Item'>
                Tag
            </td>
            <td class='Task-Plan-Navigator-Planning Task-Plan-Navigator-Item'>
                List
            </td>
            <td class='Task-Plan-Navigator-Schedule Task-Plan-Navigator-Item Task-Plan-Navigator-Active-Item'>
                Schedule Only
            </td>
        </tr>
    </tbody>
</table>

CSS

.fullwidth /* 100%寬度 */
{
    width: 100%;
}

.clean-region-table, 
.clean-region-table tbody, 
.clean-region-table tbody tr, 
.clean-region-table tbody tr td, 
.clean-region-table thead, 
.clean-region-table thead tr, 
.clean-region-table thead tr td
{
    border: 0;
    padding: 0;
    margin: 0;
}

.overflow-hidden
{
    /* 關閉overflow */
    overflow: hidden !important;
}

.Task-Plan-Navigator
{
    border: 2px #aaaaff;
    height: 120%;
    margin: 5px;
}

.Task-Plan-Navigator-Item
{
    width: 160px;
    display: inline-block;
    text-align: center;
    font-weight: bold;
    font-size: 100%;
    cursor: pointer;
}

.Task-Plan-Navigator-Active-Item
{
    display: inline-block;
    background-image: none !important;
    cursor: default;
    width: auto !important;
}

.Task-Plan-Navigator-Tag
{
    background-color: #ccccFF;
    background-position: left center;
    background-image: url('../../../images/command/16x16/prev.png');
    background-repeat: no-repeat;
    padding-left:20px;
}

.Task-Plan-Navigator-Planning
{
    background-color: #ccFFcc;
    background-position: left center;
    background-image: url('../../../images/command/16x16/prev.png');
    background-repeat: no-repeat;
    padding-left:20px;
}
.Task-Plan-Navigator-Schedule
{
    background-color: #FFcccc;
    background-position: right center;
    background-image: url('../../../images/command/16x16/Next.png');
    background-repeat: no-repeat;
    padding-right:20px;
}

Javascript

$('.Task-Plan-Navigator-Item').click(function () {
    layoutByNavigationItem($(this));
});
function layoutByNavigationItem(currentItem) {
    $('.Task-Plan-Navigator-Item').removeClass('Task-Plan-Navigator-Active-Item');
    currentItem.addClass('Task-Plan-Navigator-Active-Item');
}
// init
layoutByNavigationItem($('.Task-Plan-Navigator-Active-Item'));

說明

利用Table允許其中一個td為一個動態寬度(width:auto;)的優點，預設Task-Plan-Navigator-Item都設計固定寬度，但是Task-Plan-Navigator-Active-Item則設計成補滿其餘寬度，因此只需要更換Active-Item即可達成效果。

jQuery Plugin字型定義

設計jQuery UI Plugin時，在需要使用到外部css檔或style來定義UI style時，建議不要再css/style內直接使用定值的字型大小(如：12px、16px、18px等)，定值會造成使用此元件的網頁，在排版過程中需適時的微調Plugin有提供的css或直接動js內的style設定，才能滿足網頁與元件字型的一致性。如果希望配合網頁設定的字型一起調整，建議font-size採用相對大小的方式來設計(如：large、small、smaller、x-small等)，會有比較好的效果。

例如：

• 原本font-size:12px  改為 font-size:small
• 原本font-size:14px  改為 font-size:smaller
• 原本font-size:16px  改為 font-size:medium

注意事項：使用相對字型(smaller/larger)大小是會受到CSS階層關係影響：

<div style='font-size:smaller'>
    smaller一次的字型
</div>
<div style='font-size:smaller'>
    <div style='font-size:smaller'>
        smaller兩次的字型
    </div>
</div>

CSS定義 - background-Position背景圖位置

CSS版本: CSS1.0 

瀏覽器: 主要瀏覽器都支援 ，但是 記得background-attachment必須為fixed(預設值)才能使用

參數：

• inherit - 繼承parent元件的定義
• x% y% - x%為水平偏移位置(0%=>置左,100%=>置右)，y%為垂直偏移位置(0%=>置頂,100%=>置底)
• xpos ypos - x/y軸偏移位置(ex: 10px 2em,...)
• left/center/right top/center/bottom - 直接指定位置(ex: left center)

範例：

<table width="300px" border="1">
 <tr>
  <td>
   <div style="background-image: url('ie.gif');height: 200px;
       background-repeat: no-repeat; background-position:center center"></div>
  </td>
  <td>
   <div style="background-image: url('ie.gif');height: 200px;
       background-repeat: no-repeat; background-position:top 10%"></div>
  </td>
 </tr>
 <tr>
  <td>
   <div style="background-image: url('ie.gif');height: 200px;
       background-repeat: no-repeat; background-position:right 100%"></div>
  </td>
  <td>
   <div style="background-image: url('ie.gif');height: 200px;
       background-repeat: repeat-x; background-position:0 center"></div>
  </td>
 </tr>
</table>

結果：

Background-Position因為重複的圖片偏移效果不佳，所以較常搭配background-image:no-repeat使用。

CSS定義 - background-repeat重複背景圖

CSS版本: CSS1.0 

瀏覽器: 主要瀏覽器都支援  

參數：

• inherit - 繼承parent元件的定義
• no-repeat - 不進行重複顯示，背景圖只使用一次，其餘空間保持空白
• repeat-x - 水平空間以重複顯示方式填滿，垂直空間則只顯示一次
• repeat-y - 垂直空間以重複顯示方式提滿，水平空間則只顯示一次
• repeat - 預設值，全部空間都重複顯示到填滿為止

範例：

<table width="300px" border="1">
 <tr>
  <td>
   <div style="background-image: url('ie.gif'); height: 200px"></div>
  </td>
  <td>
   <div style="background-image: url('ie.gif'); height: 200px; background-repeat: no-repeat">
   </div>
  </td>
 </tr>
 <tr>
  <td>
   <div style="background-image: url('ie.gif'); height: 200px; background-repeat: repeat-x">
   </div>
  </td>
  <td>
   <div style="background-image: url('ie.gif'); height: 200px; background-repeat: repeat-y">
   </div>
  </td>
 </tr>
</table>

結果：

Background-Repeat是搭配BackgroundImage使用，單獨使用沒有意義。

CSS定義 - list-style-type項目圖示的選擇

允許的參數有：armenian,circle,cjk-ideographic,decimal,decimal-leading-zero,disc,georgian,hebrew,hiragana,hiragana-iroha,inherit,katakana,katakana-iroha,lower-alpha,lower-greek,lower-latin,lower-roman,none,square,upper-alpha,upper-latin,upper-roman,

使用效果如下：

1. Firefox/Chrome/Safari瀏覽器(IE請看下半段，因為測試只有用IE7支援度較低)，顯示結果：

2. IE7顯示結果：

CSS定義 - background-Image設定背景圖

CSS版本: CSS1.0 

瀏覽器: 主要瀏覽器都支援  

參數：

• inherit - 繼承parent元件的背景圖, IE7以前版本不支援
• none - 無任何背景圖
• url('URL') - 採用URL網址所取得的圖片當背景圖

範例：

<div style="background-image: url('ie.gif'); height:30px">
</div>

結果：

Background-Image可搭配Background-Repeat(決定背景圖是否重複顯示)與Background-Position(決定背景圖定位方式)，進行應用，例如：

1. 利用CSS自定項目圖示

CSS應用 - 利用CSS自定項目圖示

.custom-image li
{
    background-image:url(apple.png);
    background-position:left 2px;
    background-repeat:no-repeat;    
    list-style-type:none;
    padding-left:20px;
}

<div>利用CSS自定項目圖示</div>
<ul class='custom-image'>
    <li>利用CSS的background-image:url(圖片網址)的方式以背景圖方式顯示</li>
    <li>利用CSS的background-position:left 2px，以水平置左方、
        垂直由上往下偏移2px的方式顯示， 以保證多行時，圖示位置仍正常顯示</li>
    <li>利用CSS的background-repeat:no-repeat，
        保持背景圖片只顯示一次(預設會重複顯示填滿整個背景)</li>
    <li>利用CSS的list-style-type:none，關閉原本li的圖示</li>
    <li>利用CSS的padding-left:20px;，在項目左邊擠出圖片所需的寬度，
        避免被文字蓋到，擠出的寬度建議為圖片寬度+4，讓文字與圖片保持適當空白</li>
</ul>

CSS Button產生器

rediscovering-the-button-element - 設計內含有圖示的CSS BUTTON

http://particletree.com/features/rediscovering-the-button-element/

裡面有提到input&button預設圖案的差異，safari用<button>會比較醜，firefox用哪種都一樣醜。

Beautiful CSS Button

http://woork.blogspot.com/2008/06/beautiful-css-buttons-with-icon-set.html

Update: Styling the Button Element with CSS Sliding Dors

http://www.filamentgroup.com/lab/update_styling_the_button_element_with_css_sliding_doors_now_with_image_spr/

Dyanamic Drive CSS Button

http://www.dynamicdrive.com/style/csslibrary/item/bold_css_buttons/

Pure CSS Button

http://www.halmatferello.com/journal/pure-css-buttons/

CSS3 Button產生器

http://css3button.net/

22種CSS Button範例

http://speckyboy.com/2009/05/27/22-css-button-styling-tutorials-and-techniques/

CSS Button

http://www.binarymoon.co.uk/2010/06/css-button-redux/

網頁圖庫分享 - 蠻多實用的圖庫網站

Icon Finder  可搜尋，有套包：http://www.iconfinder.com/

DryIcons 套包：http://dryicons.com/

Royalty Free Icons & Clipart Stock Images 套包：http://icons.mysitemyway.com/

Iconarchive 有分類：http://www.iconarchive.com/

Free Icon Web 有分類有套包：http://www.freeiconsweb.com/

Icones Pro 可搜尋：http://icones.pro/

Iconizer 可搜尋：http://iconizer.net/

Ajax圖片產生器：http://ajaxload.info/

Ajax現成圖片挑選：http://mentalized.net/activity-indicators/

鬼問題探討 - 混合寬度的Table Layout

如果要開發一個Table裡面包含固定寬度、百分比寬度、自動寬度時，如下圖所示：

變更瀏覽器寬度：項目、作者寬度不變、標題與內容依據增加寬度進行調整：

HTML:

<table class="table1" border="1">
    <tr>
        <td class="column1">
            項目
        </td>
        <td class="column2">
            標題
        </td>
        <td class="column3">
            內容
        </td>
        <td class="column4">
            作者
        </td>
    </tr>
</table>

CSS:

<style>
    .table1 {
        width: 100%;
        table-layout: fixed;
    }
    .column1 {
        width: 60px;
        text-align: center;
        background-color: #ffcccc;
    }
    .column2 {
        width: 15%;
        overflow: hidden;
        white-space: nowrap;
        background-color: #ccffcc;
    }
    .column3 {
        width: auto;
        overflow: hidden;
        white-space: nowrap;
        background-color: #ccccff;
    }
    .column4 {
        width: 120px;
        text-align: center;
        background-color: #cccccc;
    }
</style>

鬼問題探討 - IE元件width 100%超出body

很不幸的，這是IE6/7/8的bug，原因是IE6/7/8的width：100%並沒有把scroll的寬度計算進去.

如果要避免這個問題造成顯示上的困擾，這邊提出幾個參考方案，但是我覺得都不算是很好的解法：

1. 固定顯示y軸的scroll且不允許x軸的scroll顯示，並且margin-right：20px避免使用到scroll右側的空間.
2. width：100%改由計算方式取得body寬度之後在-20px，但是用此方法會造成browser resize時候需重新計算的負擔.

原本使用<div style='width：100%'>內容</div>的情況很正常：

以javascript:window.showModalDialog開啟該視窗時，width100%會超過螢幕而出現scroll：

修正後開啟該視窗的情況：

我是透過javascript在前端page判斷是否showModalDialog來決定是否修正，修正語法如下：

if (window.dialogArguments != null) {

    if ($.browser.msie == true) {
        $('body').css('overflow-y', 'auto');
        $('body').css('overflow-x', 'hidden');
        $('.working-content,.loading-content').css('margin-right', '20px');
    }
}

以window.showModalDialog語法開啟視窗時，記得要把window傳過去，以方便判斷目前是Dialog狀態：

return window.showModalDialog(url, window, parm);

CSS的特殊關鍵字!important(強制規則)

預設狀態下，CSS採用順序為：

style定義 > class定義 > default定義

如果在class內的特定項目後面加上!important時，則採用順序會變成

class內具備(!important)項目 > style定義 > class定義 > default定義

Example:

<style type='text/css'>
    .red{
        color:red !important;
    }
    .blue{
        color:blue;
    }
</style>
<div style='color:green'>顯示綠色(預設結果)</div>
<div style='color:green'>顯示紅色(!important造成結果)</div>

CSS定義 - opacity透明度

版本: CSS3.0
瀏覽器: 

• :IE8以前不支援, IE9才支援,之前請使用filter:alpha(opacity=50);
• :支援
• :0.8以前不支援,請使用-moz-opacity:0.5;
• :支援
• :支援

Example:

瀏覽器綜合使用寫法

.transparent50{
    opacity:50;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
}

CSS定義 - white-space: 空白與換行處理

版本: CSS1.0
瀏覽器: 

• :IE7不支援:inherit, IE8需定義!DOCTYPE才支援,IE9直接支援. 
• :支援
• :支援
• :支援
• :支援

Example:

測試內容

this is  a      book.this is  a      book.this is  a      book.this is  a      book.this is  a      book.this is  a      book.
this is  a      book.this is  a      book.this is  a      book.this is  a      book.this is  a      book.
this is  a      book.this is  a      book.this is  a      book.this is  a      book.
this is  a      book.this is  a      book.this is  a      book.
this is  a      book.this is  a      book.
this is  a      book.

white-space:normal

預設顯示模式:多個空白會自動合併1個空白,超過欄位寬度部分自動判斷換行.

this is a book.this is a book.this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book. this is a book.this is a book. this is a book.

white-space:nowrap

強制不換行,在同一行內顯示所有內容,不使用overflow:auto時,文字將超過畫面外.  

this is a book.this is a book.this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book. this is a book.this is a book. this is a book.

white-space:pre

保留原始顯示內容,換行以\n的方式,效果等同<pre>標籤

this is a book.this is a book.this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book. this is a book.this is a book. this is a book.

white-space:pre-line

多空白會自動合併成功白,超過欄位寬度部分或\n符號會自動換行,與預設值差別在於看得懂\n符號.

this is a book.this is a book.this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book. this is a book.this is a book. this is a book.

white-space:pre-wrap

不合併連續的空白,超過欄位寬度的部分會自動換行,蠻適合顯示程式碼的時候使用.

this is a book.this is a book.this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book. this is a book.this is a book. this is a book.

white-space:inherit

繼承上一層元素的設定方式,此例上一層沒有定義時,等於default(normal),因為IE7/IE8的支援度問題,建議還是直接指定.

this is a book.this is a book.this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book.this is a book. this is a book.this is a book.this is a book. this is a book.this is a book. this is a book.

CSS list-style-type效果

允許的參數有：armenian,circle,cjk-ideographic,decimal,decimal-leading-zero,disc,georgian,hebrew,hiragana,hiragana-iroha,inherit,katakana,katakana-iroha,lower-alpha,lower-greek,lower-latin,lower-roman,none,square,upper-alpha,upper-latin,upper-roman,

使用效果如下：

1. Firefox/Chrome/Safari瀏覽器(IE請看下半段，因為測試只有用IE7支援度較低)，顯示結果：

2. IE7顯示結果：