2010年10月18日 星期一

如何獲取當前 select 元素的值

  • 如果 select 元素下的所有 option 元素均沒有指定 selected 屬性,會默認選中第一個。

  • 可以通過 select.selectedIndex 獲取到選中的 option 元素的索引。

  • 可以通過 select.options

  • [select.selectedIndex] 獲取到選中的 option 元素。
  • option 元素 text3,可以通過 option.value 獲得 option 元素的 value 屬性值,即 value3;可以通過 option.text 獲得 option 元素內的文本,即 text3。

  • 如果 option 元素沒有定義 value 屬性,則 IE 中 option.value 無法獲得,但 Safari、Opera、FireFox 依舊可以通過 option.value 獲得,值同於 option.text 。

  • 可以通過 option.attributes.value && option.attributes.value.specified 來判斷 option 元素是否定義了 value 屬性。


  • 故,獲得當前 select 元素值的腳本如下:

    程序代碼 程序代碼
    var getSelectValue = funtion(select) {
        var idx = select.selectedIndex,
            option,
            value;
        if (idx > -1) {
            option = select.options[idx];
            value = option.attributes.value;
            return (value && value.specified) ? option.value : option.text);
       }
        return null;
    }

    原文:需要點這裡...

    文章提供: BAYSTARS DESIGN網頁設計公司

    2010年10月17日 星期日

    50多個強大的jQuery插件應用實例

    jQuery是近段時間裡比較流行的一個JavaScript框架,不斷有使用者開發出新的 jQuery插件。
    下面收集了50個開發者最喜歡使用的jQuery插件。Sliding Panels -滑動門控制
    1) Sliding Panels For jQuery -元素可以展開或關閉,創建出手風琴的滑動效果。
    j373
    (2) jQuery Collapse -這個jQuery插件同樣點擊後滑動展開或關閉DIV層。
    Menu - 菜單
    3) LavaLamp
    lavalamp
    (4) A Navigation Menu- 錨鏈接的無序列表嵌套, 可以添加2級菜單
    j20
    (5) SuckerFish Style
    j21
    Tabs - 選項卡
    6) jQuery UI Tabs / Tabs 3 - 基於 jQuery 的一個Tab選項卡導航
    j22
    (7) TabContainer Theme - 當用戶在選項卡之間進行切換時,產生JQuery風格的淡出動效果。
    1
    Accordion- 手風琴效果
    8 ) jQuery Accordion
    Demo
    2
    (9) Simple JQuery Accordion menu
    3
    SlideShows - 幻燈片
    10) jQZoom-讓你在你的網頁上很簡單的實現圖片的縮放功能。
    4
    (11) Image/Photo Gallery Viewer- 一個圖像/相片的畫廊展示插件。可以讓你對圖片進行分組、並產生像Flash一樣的多種瀏覽特效。
    5
    Transition Effects - 過渡特效
    12) InnerFade - 可以讓網頁中的任何元素產生淡化效果
    6
    (13) Easing Plugin-另外一個簡單的過渡效果插件
    (14) Highlight Fade
    (15) jQuery Cycle Plugin- 擁有多種過渡效果的一個Gallery插件。
    7
    奇幻的jQuery

    16) Riding carousels with jQuery - 這個jQuery插件可以生成一個水平或垂直的列表,並且允許你控制DIV層的滑動顯示。
    Demo :8
    Color Picker -拾色器
    17) Farbtastic -這個 jQuery 插件可以讓你通過Javascript添加一個或多個拾色器widgets到一個頁面中。
    Demo :
    9
    (18) jQuery Color Picker
    LightBox -燈箱效果
    19) jQuery ThickBox - is a webpage user interface dialog widget written in JavaScript.
    Demo :
    10

    (20) SimpleModal Demos - its goal is providing developers with a cross-browser overlay and container that will be populated with content provided to SimpleModal.
    Demo :
    11
    (21) jQuery lightBox Plugin - simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery′s selector.
    Demo :
    12
    iframe
    ( 22) JQuery iFrame Plugin
    13
    Form Validation -表單驗證器
    23) Validation - 有一套完整相當的形式驗證規則。該插件還動態地創建ID和聯繫信息。
    Demo :
    14
    (24) Ajax Form Validation - 在客戶端使用jquery驗證的一種形式,它可以驗證用戶名是否有效等。
    Demo :
    15
    (25) jQuery AlphaNumeric -歡迎對對表單域中的某些字符進行限制
    16
    Form Elements - 表單事件
    17
    (26) jquery.Combobox - 從現在的選擇元素中創建一個個性的HTML組合 Demo is here.
    (27) jQuery Checkbox -樣式化選擇框,從而提高交互能力。
    (28) File Style Plugin for jQuery -File Style插件讓你可以使用圖像做為文件瀏覽按鈕,你還可以樣式化文件名稱區域。
    Star Rating - 星形評級系統
    18
    (29) Simple Star Rating System
    30)Half-Star Rating Plugin
    ToolTips -提示工具
    31) Tooltip Plugin Examples - 一個花俏的提示應用。 可以對提示信息進行自定義位置, 設置陰影效果和添加更多內容等.你可以點擊demo 演示.
    (32) The jQuery Tooltip
    19
    Tables Plugins -表格插件
    33) Zebra Tables Demo -使用jQuery來創建出斑馬線風格的數據表格,鼠標懸浮時能改變背景色。
    Demo :
    20
    (34) Table Sorter Plugin - 把一個標準的HTML表格分解成Thead和Tbody標籤構成的分類表格,不需要刷新。它能夠成功地解析和整理多種類型的數據,包括聯繫資料。
    21
    (35) AutoScroll for jQuery -可以生成網頁表格的熱點自動滾動效果
    22

    (36) Scrollable HTML table plugin- 用來轉換表格為普通的滾動HTML。不需要額外的編碼。
    Demo :
    231
    Draggable Droppables And Selectables 拖拽

    (37) Sortables - 一個簡單強大的拖拽插件。
    24
    (38) Draggables and droppables- 這是一個很好的演示。用來實現拖拽樹形菜單項目的操作
    25
    Style Switcher - 切換風絡

    (39) Switch stylesheets with jQuery允許訪客選擇他們喜歡的網站樣式,使用了Cookie記錄,也就是同一個用戶下次再訪問時,除非他不切換,否則會保留他選擇的樣式。
    Demo演示.
    Rounded Corners 圓角效果

    (40) jQuery Corner Demo
    26
    (41) JQuery Curvy Corners- 這個插件可以讓你生成光滑、無鋸齒的圓角效果。
    27
    Must See jQuery Examples 應該瞭解的一些jQuery應用實例
    42) jQuery Air - 一個非常非常特別的客戶管理界面應用插件,太特別了,太太太特別了。
    Demo :
    28
    (43) HeatColor
    Demo :
    29
    (44) Simple jQuery Examples
    (45) Date Picker -一個靈活個性的jQuery日曆組件。
    Demo :
    30
    (46) ScrollTo -這個jQuery插件可以讓你實現當點擊鏈接時中滾動到頁面中的某一對像
    (47) 3-Column Splitter Layout 一個3欄佈局分配插件。
    31
    (48) Pager jQuery -一個小巧的 jQuery插件,用來增加分頁的頁碼效果
    32
    (49) Select box manipulation
    (50) Cookie Plugin for jQuery
    51) JQuery BlockUI Plugin
    33
    文章提供: BAYSTARS DESIGN網頁設計公司

    2010年10月14日 星期四

    在網頁中嵌入任意字體的解決方案

    字體使用是網頁設計中不可或缺的一部分。經常地,我們希望在網頁中使用某一特定字體,但是該字體並非主流操作系統的內置字體,這樣用戶在瀏覽頁面的時候就有可能看不到真實的設計。美工設計師最常做的辦法是把想要的文字做成圖片,這樣做有幾個明顯缺陷:1. 不可能大範圍的使用該字體;2. 圖片內容相對使用文字不易修改;3. 不利於網站SEO(主流搜索引擎不會將圖片alt內容作為判斷網頁內容相關性的有效因素)。網絡上有一些使用sIFR技術、或javascript/flash hack的方法,但實現起來或繁瑣,或有缺陷。下面要講的是如何只通過CSS的@font-face屬性來實現在網頁中嵌入任意字體。

    第一步

    獲取要使用字體的三種文件格式,確保能在主流瀏覽器中都能正常顯示該字體。

    1、TTF或.OTF,適用於Firefox 3.5、Safari、Opera
    2、EOT,適用於Internet Explorer 4.0+
    3、SVG,適用於Chrome、IPhone

    下面要解決的是如何獲取到某種字體的這三種格式文件。一般地,我們在手頭上(或在設計資源站點已經找到)有該字體的某種格式文件,最常見的是.TTF文件,我們需要通過這種文件格式轉換為其餘兩種文件格式。字體文件格式的轉換可以通過網站FontsQuirrel或onlinefontconverter提供的在線字體轉換服務獲取。這裡推薦第一個站點,它允許我們選擇需要的字符生成字體文件(在服務的最後一個選項),這樣就大大縮減了字體文件的大小,使得本方案更具實用性。

    第二步

    獲取到三種格式的字體文件後,下一步要在樣式表中聲明該字體,並在需要的地方使用該字體。

    字體聲明如下:
    程序代碼 程序代碼
    @font-face {
    font-family: 'fontNameRegular';
    src: url('fontName.eot');
    src: local('fontName Regular'),
                  local('fontName'),
                  url('fontName.woff') format('woff'),
                  url('fontName.ttf') format('truetype'),
                  url('fontName.svg#fontName') format('svg');

    /*其中fontName替換為你的字體名稱*/

    在頁面中需要的地方使用該字體:
    程序代碼 程序代碼
    p { font: 13px fontNameRegular, Arial, sans-serif; }
    h1{font-family: fontNameRegular}

    或者
    程序代碼 程序代碼
    掬水月在手,落花香滿衣
    下面是我通過上面兩步做的示例:
    HTML代碼


    [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]


    上面文中的字體用的是某博客之前發佈的一款鋼筆行書字體,喜歡的可以去下載。

    下載該示例的源代碼:]下載文件 網頁嵌入字體示例

    原文:http://css9.net/css-font-face-solution/
    文章提供: BAYSTARS DESIGN網頁設計公司

    2010年10月12日 星期二

    極簡主義網站設計:寓豐富於簡單

    譯自:Minimalist Web Design: When Less is More
    原作者:Kayla Knight

    作為設計師,我們都知道,一個極簡的設計可以實現漂亮的效果。

    然而,很多設計師在實現上有些麻煩:要麼是沒有時間讓使用如此少的元素製作的頁面看起來漂亮,要麼就是最終的結果只是看起來「不完美」。

    網上有很多關於極簡主義設計的文章,而本文的目的是幫你實現一個漂亮而不空洞的極簡網站設計

    最重要的是,我們將展示一個小的極簡網站設計畫廊,這樣你就可以分析為什麼一些設計可以而其它的則不可以。

    什麼是極簡主義設計

    極簡主義設計已經被描述為最基本的設計,剔除了多餘的元素、色彩、形狀和紋理。

    它的目的是使內容被突出出來並成為焦點。從一個視覺的角度來說,極簡主義設計意味著平靜和將思想帶回本真

    這個設計運動始於瑞士,然後被用於多種媒體:圖形設計、建築、音樂、文學、繪畫以及最近的網頁設計。(拓展閱讀維基百科:極簡主義)

    儘管極簡主義已經有幾十年了,早期的互聯網並沒有能夠展示它。即便除了旋轉的logo、滾動和鮮艷的色彩之外,網站設計依然常常是雜亂和咄咄逼人的。

    我們將在本文中討論極簡網站設計的基本原理。但是即便你選擇不去追求極簡主義的審美,本文也能幫你簡化你的設計,無論你是哪種風格。

    越簡單越豐富

    正如提到的,極簡主義將最重要的內容帶到最前面並為用戶避免分散注意力。如果一個頁面有太多的元素,瀏覽者將迷惑於去看哪裡或誤解每個元素的優先級。一個極簡主義設計將焦點正好放到正確的內容上。

    比如,在一個黑白設計上的任何色斑,都會引起用戶的注意力。色彩本身也將成為焦點。讓我們來看一個具體的例子:



    之前你或許已經見到此類設計:純白背景,一個內容塊和一個圖形元素。

    圖形元素使用色彩、紋理和形狀。很明顯這是頁面中最重要的元素,而且它代表了設計師的品牌和個性。

    因為這個特殊的圖形元素的複雜性,該頁面中的更多內容會讓它不太醒目,顯得不太重要。保持內容到最小,設計師就實現了完美的平衡。

    如何簡化內容

    實現極簡設計或者簡化設計的第一步,不是簡單的去掉大部分圖片,而是要重新考慮內容並將其簡化到無遮蓋的需求。只有那樣才能讓頁面中最重要的元素實現其預期的效果。

    就像你策劃任何其它網站一樣,寫下你需要的內容:logo、介紹、導航等等。去掉其它一切不需要的東東。盡可能的丟掉它們。

    下面是一些你可能不需要的元素。請注意這僅僅是一個指導。你的確切的需求將依賴於你的具體設計。下面的一些元素對你的網站來說可能不是必須的。
    • 社區媒體的圖標或圖形,或者社區媒體部分
    • 宣傳員和補充說明或介紹
    • 「推薦,」 「流行」和「最新」列表(包括Twitter和RSS訂閱列表)
    • 多於3個主要部分的頁面(比如「介紹」 「關於」和「服務」)
    • 次級導航頁面

    這裡的關鍵並非讓網站有較少的功能,而是去掉不是必要的元素(從而強調必須的元素)或將多個部分整合到一個更簡單的佈局(比如,通過合併你的社區媒體鏈接到「關於」或介紹性部分)。

    你也可以分割內容到獨立的頁面,給予內容的每個部分更多關注。


    如何簡化設計

    現在輪到盡可能的簡化設計了。

    簡約設計應該有較少的紋理、色彩、形狀、線條、內容或排版。然而,如果太直白,設計將會空洞。與其丟掉所有東西,不如通過給焦點添加一個重要的特徵來給設計一些感染力。

    選擇焦點可能的樣式,並在你的設計過程中注意一下下面提到的技巧。

    使用一個很棒的線框

    通過理論下面的展示,我們看到一些設計師通過微妙的色彩填充、獨特佈局或有趣的圖形添加一些視覺趣味。然而,或許他們所依賴的最重要的元素,就是一個獨特的線框

    為這樣的網頁創建一個線框需要一些額外的注意事項。通過正確的線框,你可以實現正確的層級和組織以及創建正確的視覺趣味。



    要啟動一個線框,請按照以下步驟:
    • 確定你絕對需要的內容
    • 在一個列表裡面,區分內容的優先級
    • 給予你的列表繪製線框的草圖以實驗最佳的視覺層級

    當作出了線框之後,考慮一下佈置以及視覺上的處理方法。譬如,你的logo使用了一種在其它地方不再重用的顏色,你必須說明原因。

    擴展閱讀:從線框圖到最終設計

    空白

    空白實際上同義與極簡主義。

    無論你的設計多麼有創意,一個缺少大量空白的極簡主義設計不是一個真正的極簡主義設計。這樣,一定要在元素周圍比你平時添加更多的空白。

    空白對平衡即將出現在頁面中的少量元素是必要的。

    平衡、對齊、對比

    雖然大部分的佈局可以通過空白和良好的線框實現,還是要特別注意一下設計的基本原則。與極簡設計相關的三個最重要的因素是平衡、對齊和對比

    要確保您的設計遵循這些原則,但並不需要一個補充的視覺輔助以看起來「完成」了。



    請同時注意其它基本設計原理。回檢它們並實驗不同的選擇來實現最佳的效果。查看 「設計的原理」以獲取更多參考。

    當過度設計成為一個習慣

    過度設計有時會成為一種習慣。無論你多麼艱難的嘗試將一個設計保持簡單,它最終變得凌亂和複雜。要修正這一點,我們必須養成新的習慣。

    試著在每個項目之前回顧上面的技巧並讓它們貫穿整個設計流程。每次集中精力開發一個習慣。比如,努力在將內容放到空白上之前減少和簡化它們。

    如果您發現自己左右為難,「有什麼遺漏了」,可以先試著把東西拿出來,而不是加入一些新的東西。

    極簡主義的每一個方面,需要不同的天賦。你將這些原理實踐的越多,你的設計就將變得越簡單。

    另外,一旦你使用了這裡討論到的技術,看一下最終的產品並查看一下你是否能找到更進一步簡化這個結果的方法。

    你可以專注於在設計過程中你不能確定的區域,而且你也可以向其他設計師詢問以指出你可能遺漏的元素。


    極簡網站設計欣賞

    下面是一個極簡主義網站設計的簡要展示。看一下我們討論的原理是如何實現的。同樣也可以看一下哪個打破了我們的指南,並思考它們為什麼還可行。

    1. James Day Photo



    2. Killswitch Collective



    3. Lonely



    4. DBushell



    5. XPD.no



    6. Toy NY



    7. Joshua Serbus



    8. Ah-Studio



    9. Symour Powell



    10. Icon Werk



    11. Neil Wilson Architects



    12. Non-Format



    13. Zaum



    14. Checkland Kindlysides



    15. Blumenthal



    16. Tink London



    17. Proud Creative



    18. Kimag



    19. Bernat Fortet



    20. All Day




    一些趨勢

    正如你能看到的,極簡主義網站設計也有一些清晰的趨勢。瞭解這些趨勢有助於在多個方面增強我們的設計。

    我們應不僅僅能從其它設計師創造的佈局中獲得靈感,還要能有意識地打破這些趨勢以形成我們自己的創造性的方法。

    接下來讓我們討論一下一些趨勢。

    黑白設計

    最值得注意的趨勢之一就是黑白色彩的廣泛應用。這是很明顯的:除紋理、形狀和內容以外,色彩也是應該被簡化的。但最近它可以做過頭,就顯得有點沉悶。

    看一下上面展示的一些確定色彩的網站,看一下它們是如何從其它極簡網站中被突出出來的。同樣,思考一下即便是在如此強烈的色彩使用下它們是如何能夠保持極簡的。這裡是一個例子:



    有趣的排版

    基於排版網站設計和極簡主義緊密的聯繫到一起。

    當設計師乏於用別的方法激發用戶,他們往往會利用有趣的排版。用排版作為唯一的視覺元素你甚至可以走得更遠。

    這是一個大膽的技術,但本身仍然是一個趨勢。尋找保持獨特的同時讓排版增強設計的方法。



    Flash

    一個驚人數量的極簡主義網站設計是基於Flash的。通過這麼少的視覺刺激,一個設計可以從微妙的動畫獲益而不用被壓倒。

    同時,Flash移除了設計流程中的某些限制。非傳統的線框、排版和其它元素可以比傳統方法更容易的實現。



    結束

    極簡主義網站設計出現多種形式,可是我們常常看到相同的形式重複了。趨勢可以變得咄咄逼人,而我們在理解一個趨勢可行的同時必須與模仿的衝動做鬥爭

    無論如何,極簡主義可以是很漂亮的而且將會在未來幾年內出現,所以學習它的一些技術會不能相信的有益,無論對你的客戶或你自己的項目。

    但是如果你對極簡主義風格不感興趣,這個教程和難懂的原理可以幫你簡化你的設計,總之這是件好事情。
    文章提供: BAYSTARS DESIGN網頁設計公司