我在電腦上有安裝APPSERVE 並且有輸入數筆資料在SERVR 我可以以非同步方式讀取出來但是我想要依照讀取出來的分數高低排列並且掛上去使他表單顯示出來的分數是由高到低我一直寫不出來所以請問各位有何見解程式碼如下: function getXmlDom() { if ( (reqObj.readyState==4) && (reqObj.status==200) ) { var xObj = reqObj.responseXML; processXmlDom( xObj ); // 執行處理 XML DOM 的函式 } } function processXmlDom( xmlDoc ) { var tmp =""; var tbody = document.getElementById("tb").childNodes[1]; var numCol = tbody.childNodes[0].childNodes.length; var numStu = xmlDoc.getElementsByTagName("Student").length; var all1 = new Array(numStu); var all2 = new Array(numStu); for ( i=0; i<=numStu; i++ ) { var sObj = xmlDoc.getElementsByTagName("Student")[i]; tr = document.createElement("tr"); for ( j=0; j { var txt = sObj.childNodes[j].childNodes[0].nodeValue; td = document.createElement("td"); tn = document.createTextNode(txt); if ( j>=2 && txt<60 ) td.setAttribute("style","color:red;"); td.appendChild(tn); tr.appendChild(td); } for( x=0 ; x<=i; x++) { var numChin = xmlDoc.getElementsByTagName("chinese")[x].childNodes[0].nodeValue; var numChin2 = xmlDoc.getElementsByTagName("chinese")[x+1].childNodes[0].nodeValue; var space =""; all1[x] = numChin; all2[x] = numChin2; if(all1[x] { tbody.appendChild(tr); } else { tbody.insertBefore(tr,tbody.firstChild); } } } }

↧

[原創]如何縮減程式碼

June 20, 2012, 10:55 pm

≫ Next: jQuery 1.8 beta1 發佈及重點整理

≪ Previous: 請問如何將以非同步讀取出來的資料依照分數高低排列

小弟有一串碼 $("div.sm1").mouseover(function(){ $("div.sm1").show(); $("div.sm2").hide(); $("div.sm3").hide(); $("div.sm4").hide(); $("div.sm5").hide(); $("div.sm6").hide(); }); $("div.sm2").mouseover(function(){ $("div.sm1").hide(); $("div.sm2").show(); $("div.sm3").hide(); $("div.sm4").hide(); $("div.sm5").hide(); $("div.sm6").hide(); }); ... 有用for迴圈去改寫它,但是會當掉,所以想問在jquery中是否有其他作法??

↧

jQuery 1.8 beta1 發佈及重點整理

June 27, 2012, 3:01 pm

≫ Next: 請問這個網頁特效是如何做出來的

≪ Previous: [原創]如何縮減程式碼

原文:
http://blog.jquery.com/2012/06/22/jquery-1-8-beta-1-see-whats-coming-and-going/

轉載:
http://www.ptt.cc/bbs/Ajax/M.1340769104.A.79B.html

作者: TonyQ

1.MODULARITY 模組化

        因為採用新的 grunt 建制模式，現在你可以只針對 jQuery
        其中幾個需要得模組進行打包，不見得需要引入整個 jQuery 功能集。

        需要的話只要從 github 取出 jQuery project 並透過 grunt command 進行。

        TonyQ註：（不建議真的去作客製版本，容易造成維護上困難。）


      2.VENDOR-PREFIXED CSS PROPERTIES

        對 css 屬性有更好的支援，對於某些目前 css3 有些只能透過瀏覽器
        專屬 prefix 進行設定的 css properties，現在 jQuery 都支援。

        簡單來說就是對那些 -webkit- -moz- 開頭的屬性幫上一點忙。:)


        舉例，在 chrome 上，如果你用了這個指令：
        $("#myscroll").css("marquee-direction", "backwards") 

        實際上將會設定底下這個 css 屬性到 dom 上
        -webkit-marquee-direction: backwards.


        TonyQ 註:補一點從 jQuery code 看來的實作細節，
                 可以找 function vendorPropName( style, name ) {

        他的作法是如果 cssHook 中找不到，他會去判斷加上 prefix 後，
        在 dom.style 中找不找得到，找得到他就會處理。

        所以不是透過查表來處理，這招蠻聰明的。

      3.ANIMATION (EFFECTS)

        過去 animation 的擴充與實做上，需要修改 $.fn.step/$.fn.csshook ，
        導致這些動態效果散落在各處實做上，缺乏全面性的架構，所以面臨難以
        維護的窘境。


        目前在 1.8 已經獲得改善，1.8 以後將有一個更全面的
                一系列 factory method 協助你建制 animation，

        詳細文件請參考：
        https://gist.github.com/54829d408993526fe475

        這部份主要是幫助你「設計」 animation 擴充，
        如果你只是要 "用" animation 的話，這個部份對你沒什麼影響。


        TonyQ 註：這一步蠻漂亮的，希望能藉此出現更多好用的 animation plugin。


      4.SIZZLE CSS SELECTOR ENGINE

        sizzle 又重新更新了，對一些邊緣案例有更多的支援，
        然後在效能上對一些最常用的 selector "選取時"進行更好的支援。

        詳細請參考原文跟這個官方提供的 jsperf 測試案例
        http://jsperf.com/jquery-id-init/4


      5.XSS PROTECTION （重要，有引入新的寫作原則）

        因為預設的情況下，如果你把一個 html 字串放進 $() 裡，
        這個 html 會被轉換為 HTML Dom Element ，
        其中如果有<script> 標籤也會被執行。


        像是 $("<div></div>")


        有時候如果開發者不小心用了來自使用者來的字串，
        像是

        var word = window.prompt("please enter selector");
        $(word).hide();


        這樣可能就會有使用者故意輸入
        <script src="xss-attach.js"></script>
        來進行 XSS 攻擊。


        jQuery 計畫在 1.9 （再下一個版本）進行規格上的改動，
        但在 1.8 則是引入新的 method  $.parseHTML 來先幫大家處理這個問題。


        如果你是習慣用 $("<p></p>") 這類用法的使用者，
        在 1.8 以後請改用 $.parseHTML("<p></p>") 來作這件事情。

        因為 $(html) 官方預告在 1.9 時行為將會改變，
        在 1.9 時將嚴格的認定只有 html 是 "<" 開頭的會被當作 html 處理，

        否則都視為 selector 處理。


      6.SPRING CLEANING （重點）

        註：被標重點的都是那些對向下相容或者開發習慣上有重大改動的東西。


        在 1.9 開始（再之後一個版本），許多不建議使用、不常被使用
        或效率低落的功能將被標記 過時或移除，但也還會提供另一隻 jQuery.compat
        plug in 來支援那些被移除、過時的函式。

        https://github.com/jquery/jquery-compat-1.9/


        其中有幾個比較主要的東西...條列如下：

        ＠ $.browser << 官方從 1.4 開始認為透過 user-agent 去判斷版本不好，
                        應該透過偵測需要的功能是否有支援來開發。($.support)

          這相信很多專案中都有用到，升上 1.9 時要記得加掛 compat。


          TonyQ 不得不註：WTF ......有這麼簡單就好了，很多怪問題不能透過
                          $.support 判斷，強烈建議 jQuery 加入 
                          $.supprot.weird 選項。


        ＠ $.sub << 官方認為這東西沒有想像中的有用，所以也移掉到 compat 去了。

        ＠ 全域 的 ajaxStart 等 ajax event 有修改，
           也就是你用到 $.ajaxSetup 去作設定 ajaxStart 時，行為將和 1.8不同。

           http://api.jquery.com/jQuery.ajaxSetup/


           理由是原本規格開太強，連那些已經被移除的元素，
           都會需要為這些事件作特殊處理，所以出現了效率低落的特殊案例。

           官方從 1.9 開始將只處理那些在 document 底下的元素，
           當他們進行 ajax 行為時才會觸發這些事件。


           詳細參考 http://api.jquery.com/ajaxStart/


           TonyQ 註 :我是覺得這個應該影響不大。


       7.其他修正，這是我從 issue list 上挖一些比較重要的：

           A. $().size() 被標為 deprecated ，請改用 $().length 替代。

              詳情參閱討論串：http://bugs.jquery.com/ticket/10657

           B. $.ajax() 中， async option 將被標為 deprecated ，

              這意味著，官方不希望你透過 $.ajax 去進行"同步"的 request。


     TonyQ註：理由我想跟是不是 ajax 就該非同步不是那麼直接有關係，
              主要理由是當你設定 async:false 時， defered 將無法支援，
              所以使用者使用 defered 要一直去判斷/瞭解 ajax 是同步或非同步。

              在支援上也會有很大的問題，在討論串中最後一個評論解釋得很清楚，
              他們並不認為 sync ajax 是一個不該被使用的使用情境。（我也是）

              因為這有必要講清楚，所以我特別節錄一段過來：

        It does not say there are no valid use cases for sync ajax.
        It does not say you are all bad people for doing sync ajax.
        It does not say there will be no way to do sync ajax
                --only that it won't be via $.ajax.

              詳情參閱討論串：http://bugs.jquery.com/ticket/11013

              （
                一些新夥伴可能不瞭解 async 選項的用意，
                請自行參考文件或 google 網路文章，這裡不多作解釋。
                參考 http://api.jquery.com/jQuery.ajax/ 中 async 章節
         http://jax-work-archive.blogspot.tw/2009/05/ajaxxmlhttprequest.html
		http://www.classyuan.com/?p=247
              ）


           C. $().data("events") 被 deprecated 了，
               官方建議改用 $()._data("events") 。


              events 是用來紀錄被掛上去的 jQuery 事件，屬於內部實作，

              jQuery 基本上不希望使用者去碰他或使用他，
              透過 $()_data 表示這是存取 jQuery 內部實作，使用者應該為他負責。


              這議題想當然爾的也有一堆歷史爭論，
              相關爭論可以看這個很嗆辣的 commit log http://goo.gl/RVrQ7 。

              這裡也說明得很清楚，包含整個討論串都值得一看。
              http://bugs.jquery.com/ticket/10589#comment:6


           D.New method: .addBack (用來代替 .andSelf ，功能完全一模一樣)

             http://bugs.jquery.com/ticket/9800

             因為原始碼有這行
             jQuery.fn.andSelf = jQuery.fn.addBack;

           E.修正bug ".has doesn't work on detached elements"
             http://bugs.jquery.com/ticket/11543


           其他小的就自己看吧，這已經是我篩選過得了

           * DEPRECATE .DATA() EVENTS
             http://bugs.jquery.com/ticket/11718

           * Deprecate .bind("ready") event
             http://bugs.jquery.com/ticket/11719

             簡而言之，他不希望 user 把自己 trigger 的 ready event，
             和瀏覽器發動的 ready event 混在一起。

           * Deprecate "hover" pseudo-event

             理由是
                It is not possible to attach an event with the name "hover"
                and fire it using .trigger("hover").

             http://bugs.jquery.com/ticket/11731


           * Deprecate .load(), .unload(), and .error() methods
             http://bugs.jquery.com/ticket/11733

           * Deprecate .toggle( handler, handler, … ) signature
             http://bugs.jquery.com/ticket/11786



--
        說真的，看完這版 release note ，我心裡的感想很複雜；

        我覺得 jQuery team 應該更注重在使用者需要什麼，
        而不是急著去調整他們的 API 或理念，
        可想見的是 1.9 會是個比較冒險的版本，希望到時不會再重演 1.6 的災情。


        btw 這不是 1.8 release note 嗎，
        怎麼花好多篇幅在講 1.9 他們想幹麼。XD

↧

請問這個網頁特效是如何做出來的

October 11, 2012, 1:59 pm

≫ Next: CSS 最強屬性決定戰！

≪ Previous: jQuery 1.8 beta1 發佈及重點整理

請問一下，有人知道下面網站的特效是如何做出來的嗎??

http://www.lindt.com/swf/eng/products/gifts/swiss-luxury-selection/single-masterpieces/praline/pi4_2093/

拜託請告知一下，感謝

↧

CSS 最強屬性決定戰！

December 20, 2012, 5:40 pm

≫ Next: TypeScript -- 由C#之父 Anders Hejlsberg 主導

≪ Previous: 請問這個網頁特效是如何做出來的

CSS 最強屬性決定戰！

來源：癮科技 http://www.cool3c.com/article/64403
Webamb http://webamb.com/joke/949.html

圖片：

CSS 最強的屬性是什麼呢？一般人可能不知道，CSS 決定了一個網站的視覺以及排版，一個好的網站可以容納多種不同裝置的閱覽，想要讓不同裝置得到良好的閱讀感受，決定就在於 CSS。來自日本的網站 Webamb. 總結出五個最強的 CSS 屬性，並且透過畫家 (@Mina_mm) 將這些屬性擬人化，賦予他們各種性質，來看看排名如何。

第五名：z-index

人物設定

年齡：18

興趣：魔術

能力

操控次元

圖片：

第四名：float

人物設定

年齡：1026

興趣：釣魚

能力

在以指定空間內的物體能左右吹散

圖片：

第三名：overflow(hidden)

人物設定

年齡：20

興趣：滑板

能力

兩手配戴手套下，被包圍範圍內發揮能力

圖片：

第二名：position(absolute)

人物設定

年齡：27(寡婦)

興趣：五人制足球

能力

掌握目光鎖定雷達座標

持有探針可明確指定座標

圖片：

第一名：display(none)

人物設定

年齡：26(寡婦)

興趣：閱讀逛美術館

能力

使用使對手狀態改變的魔法

圖片：

日本的擬人化真的是做到無微不至，說不定過不久就能看到商品化了，詳細的資料可以看引用來源喔

↧

TypeScript -- 由C#之父 Anders Hejlsberg 主導

January 4, 2013, 5:53 pm

≫ Next: [css]CSS SANS 利用 CSS 語法所打造的英純文字型

≪ Previous: CSS 最強屬性決定戰！

TypeScript -- 由C#之父 Anders Hejlsberg 主導

TypeScript，可以協助開發人員寫出更好維護的Script，而且是由C#之父 Anders Hejlsberg 主導這個專案，就算不寫也應該稍微了解一下。

TypeScript是開源專案，而且完全相容於JavaScript語法!!

Eric 的介紹文（中文）

http://blogs.msdn.com/b/ericsk/archive/2012/10/02/quick-look-on-typescript.aspx

微軟釋出了一個新東西－－TypeScript，這個 project 主要的負責人是 Anders Hejlsberg （C#, TurboPascal 之父），它可以幫助 JavaScript developers 更容易撰寫及維護「application-scale」的應用程式，我很快地研究及把玩了一下，發現它與過去很多類似的專案有許多不同之處，而這些不同之處也讓 TypeScript 更具有實用性及競爭力。從這裡可以看一段 Anders Hejlsberg 自己來介紹 TypeScript 的影片：(出處可下載MP4/WMV)

Will 的影片教學（中文）

http://www.youtube.com/watch?v=BicYCnjBYvc

syncfusion公司出的白皮書（英文）

http://www.syncfusion.com/resources/techportal/whitepapers/typescript

TypeScript官網（英文）

http://www.typescriptlang.org/

TypeScript原始碼（英文）

http://typescript.codeplex.com/

↧

[css]CSS SANS 利用 CSS 語法所打造的英純文字型

April 8, 2015, 10:07 am

≫ Next: [css]CSS 哪些屬性會可以被觸發 layout / paint / composite

≪ Previous: TypeScript -- 由C#之父 Anders Hejlsberg 主導

[css]CSS SANS 利用 CSS 語法所打造的英純文字型

類型：
css

很難想像英純文字母也能利用 CSS 來建立，CSS SANS 利用純 CSS 建立包含 A 到 Z 的所有英純文字母（沒有小寫），而且提供開放原始碼免費下載，讓網頁設計師只要透過網頁便可呈現。

【CSS SANS 站台資訊】

站台語言：英、日文

服務性質：免費

站台網址：http://yusugomori.com/projects/css-sans/

想在手機查閱更多css資訊？免費下載【香港矽谷】Android App

在新視窗檢視

原文站台: 關鍵應用

在新視窗檢視

分享到Facebook

↧

[css]CSS 哪些屬性會可以被觸發 layout / paint / composite

April 8, 2015, 10:13 am

≫ Next: [Javascript]推薦15款創建漂亮幻燈片的 jQuery 外掛程式

≪ Previous: [css]CSS SANS 利用 CSS 語法所打造的英純文字型

[css]CSS 哪些屬性會可以被觸發 layout / paint / composite

類型：
css

CSS 哪些屬性是可以被觸發(Trigger)的？

這網頁的圖表全部整理出來了。

CSS Triggers... - A Game of Layout, Paint and Composite

文章可見：Aerotwist - CSS Triggers

想在手機查閱更多css資訊？免費下載【香港矽谷】Android App

在新視窗檢視

原文站台: Tsung Hao

This work, unless otherwise expressly stated, is licensed under a

Creative Commons Attribution-ShareAlike 3.0 Unported License.

在新視窗檢視

分享到Facebook

↧

[Javascript]推薦15款創建漂亮幻燈片的 jQuery 外掛程式

April 8, 2015, 2:31 pm

≫ Next: [css]OmniO Rider 嬰兒車：辣媽們解放雙手就靠它了

≪ Previous: [css]CSS 哪些屬性會可以被觸發 layout / paint / composite

[Javascript]推薦15款創建漂亮幻燈片的 jQuery 外掛程式

類型：
Javascript

對於設計師，開發者，攝影師或任何創造性的個人和企業，他們自己的站台是展示他們的技能和服務的最佳場所。你可能打算設計一個新的個人作品站台，不管你是從頭開始或使用模板，都會需要使用 jQuery 幻燈片外掛程式，以美麗奪目的方式顯示的作品。

　　網路上有很多的 jQuery 幻燈片外掛程式，很難決定哪一個更好。因此，我們編輯了15款目前比較優秀的 jQuery 幻燈片外掛程式，幫助你用一個美麗的和創新的方式展示你的圖片或是影片清單。如果你有熟悉的任何其它幻燈片外掛程式，請與我們的讀者分享您的回饋。

?

1. Skippr

Skippr 是一個超級簡單的?jQuery?幻燈片外掛程式。只是包括你的網頁中引入 jquery.skippr.css 和?jquery.skippr.js 檔案就能使用了。Skippr 能夠自適應窗口寬度，而且瀏覽是獨特的條形瀏覽。

效果演示?? ? ?源碼下載

2. Prezento

Prezento 這款 jQuery 外掛程式可以讓你網頁以新穎的互動方式呈現。另外，Prezento 支援響應式設計，規格項也很靈活，可以根據你需要的效果規格。

效果演示?? ? ?源碼下載

3. Responsiveslides.js

ResponsiveSlides.js 是輕量的 jQuery 幻燈片外掛程式，用於創建響應式的圖片滑動功能。支援大多數的瀏覽器，甚至包括IE6。

效果演示?? ? ?源碼下載

4. Reveal.js

這個訊框架用來幫助你輕鬆地使用 HTML 創建漂亮的演示文稿。 reveal.js 配備廣泛的功能，包括巢狀幻燈片、PDF匯出、演講筆記和 JavaScript API。在現代瀏覽器中效果最好，也提供了降級處理以確保您的演示文稿仍然可以在其它地方觀看。

效果演示?? ? ?源碼下載

5. Vegas 2

Vegas 是用於實作背景圖片滑塊的 jQuery 外掛程式，可以讓你新增美麗的全螢幕背景到您的網頁中。它還能實作各種幻燈片。不同背景，轉場和回呼的幻燈片可以很容易地建立起來。大多數時候，背景會被拉伸以適應大螢幕幕。

效果演示?? ? ?源碼下載

6. Fotoroma

Fotorama?是一個高度靈活的圖片庫 jQuery 外掛程式，支援桌面和行動瀏覽器。它提供了多種選擇，包括縮圖，上一個，下一個按鈕，幻燈片或子彈瀏覽映像瀏覽。

效果演示?? ? ?源碼下載

7. SlidesJS

SlidesJS 是一款老牌的?jQuery?幻燈片外掛程式，經過多年的發展，已經成為一款功能齊全，設計精巧的幻燈片外掛程式。支援迴圈、自動播放功能和淡入淡出轉場效果，並且能夠自動生成分頁，可以幫助開發者製作出優雅的幻燈片效果。

效果演示?? ? ?源碼下載

8. MaxImage

MaxImage 2.0 是一個全螢幕背景的幻燈片外掛程式，它利用 jQuery Cycle 外掛程式和所有它的轉換/選項。使用者都會有一個流暢的體驗，這對於大映像動畫很重要。

效果演示?? ? ?源碼下載

9. Slide Me

Slideme 是一個響應式的滑塊外掛程式，可定製，易於安裝和使用，支援多案例，全螢幕，涼爽的，功能強大的?jQuery 幻燈片外掛程式。

效果演示?? ? ?源碼下載

10. Juicy Slider

Juicy Slider?滑塊是另外一款響應式的幻燈片 jQuery 外掛程式。與其它依靠瀏覽器 CSS3 支援的外掛程式不同，它通過計算映像的相應寬高比和視圖，使用 JavaScript 調整映像大小。這種方法使得它與舊的瀏覽器更相容。

效果演示?? ? ?源碼下載

11. Fullsizable

fullsizable 這款?jQuery 外掛程式充分利用瀏覽器空間來查看影像。還支援現代瀏覽器的原生 HTML5 全螢幕 API。

效果演示?? ? ?源碼下載

12. jQuery Slideshow

jQuery 幻燈片是一個高效能和對開發者友好的幻燈片和內容旋轉木馬外掛程式，支援觸摸手勢，壓縮後只有不到 2KB 大小。

效果演示?? ? ?源碼下載

13. ConveyorBelt

這是一個簡單的，可調節的幻燈片旋轉木馬的 jQuery 外掛程式。大量的可用規格，包括轉場類型、映像適合和幻燈片的速度等。

效果演示?? ? ?源碼下載

14. Camera

Camera 是由 Diapo?開發人員創建的，並包括了各種功能與響應式布局功能。幻燈片支援任何的?HTML 元素（圖片，純文字，影片等）。

15. Destaque

Destaque 是一個簡單的幻燈片外掛程式，內建視差（Parallax）效果。支援 IE+ 瀏覽器，規格靈活。

效果演示?? ? ?源碼下載

?

?

英文鏈結：jQuery Plugins Creating Beautiful Slideshows

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源

本文出處【http://www.cnblogs.com/lhb25/】

想在手機查閱更多Javascript資訊？免費下載【香港矽谷】Android App

在新視窗檢視

原文站台: 夢想天空

歡迎任何形式的轉載，但請務必註明出處。

在新視窗檢視

分享到Facebook

↧

[css]OmniO Rider 嬰兒車：辣媽們解放雙手就靠它了

April 10, 2015, 1:03 pm

≫ Next: [Javascript]A Note on Device Orientation Detection in Javascript

≪ Previous: [Javascript]推薦15款創建漂亮幻燈片的 jQuery 外掛程式

[css]OmniO Rider 嬰兒車：辣媽們解放雙手就靠它了

類型：
css

這是一件並不「智慧」的產品，但它足夠「智慧」。OmniO Rider 是一台能摺疊的嬰兒車——奶爸奶媽們無需一邊伺候孩子一邊伺候車子，一折一背，解放雙手。

OmniO Rider 剛剛獲得「英國年度最佳發明獎」，日前已經登陸 Indiegogo 開始眾籌。腐國人民對嬰兒車的需求也許代表了大多數爸媽的心聲：當你家熊孩子蹣跚學步時，嬰兒車仍是必需品，但會變成額外負擔。

所以，OmniO Rider 能「啪啪啪」摺疊成一個背包，附帶兩個肩帶，不需要嬰兒車時，摺疊、背上後背；需要嬰兒車時，拿下支開，塞進小北鼻。摺疊非常簡單，30 秒即可完成。

摺疊完成的 OmniO Rider 只有有 50 x 40 x 20 cm，不只有能背，還能拖。OmniO Rider 麻雀雖小五臟俱全，除了車體還有六條安全帶、太陽蓬、防雨罩，還有水杯罩、相機包、午餐包……

#gallery-1 {

margin: auto;

}

#gallery-1 .gallery-item {

float: left;

margin-top: 10px;

text-align: center;

width: 25%;

}

#gallery-1 img {

border: 2px solid #cfcfcf;

}

#gallery-1 .gallery-caption {

margin-left: 0;

}

/* see gallery_shortcode() in wp-includes/media.php */

OmniO Rider 的創始人說，發明這台車的初衷來自他自己看孩子的經歷。有時候，小朋友會堅持要下地走路，這時候家長就例外忙碌，要一邊照顧孩子又要一邊盯?車子。OmniO Rider 的好處就在於，孩子可以滿地跑，嬰兒車可以被家長背上後背。

OmniO Rider 不是第一個打嬰兒車主意的初創公司。Origami 也是一款可以摺疊的嬰兒車，不過它由電力驅動，一鍵完成摺疊。另外，Roller Buggy 和 Longboard 這兩款產品將嬰兒車和滑板整合在一起，熱愛運動的爸媽可以帶?孩子以魔鬼的步伐飛行了。我們此前也報導過運動專用的嬰兒車 KidRunner，可以將車拴在腰間，拖拉?來跑步。

不過，把看孩子和運動結合起來這事也許並不能打動所有父母，畢竟滑板什麼的帶有一定風險，出於教育理念的不同，也許只有西方的年輕爸媽們會喜歡這些酷炫的嬰兒車。

?

題圖來自?innovationmakers

插圖來自?OmniO Rider

想在手機查閱更多css資訊？免費下載【香港矽谷】Android App

在新視窗檢視

原文站台: 愛范兒

在新視窗檢視

分享到Facebook

↧

[Javascript]A Note on Device Orientation Detection in Javascript

April 10, 2015, 9:53 pm

≫ Next: [css]萬萬沒想到，檯燈可以極簡到這個地步

≪ Previous: [css]OmniO Rider 嬰兒車：辣媽們解放雙手就靠它了

[Javascript]A Note on Device Orientation Detection in Javascript

類型：
Javascript

You want to know device height on orientation change in an webview. Here is my journey:

screen.availHeight

I first started with screen.availHeight, it works on Android. When device orientation changed, the number is updated accordingly. But in iOS, this number is fixed to the height when webview started. So I need to do some detection on the device orientation so that the number is right.

function getDeviceHeight(){

return Math[isLandscape()?"min":"max"](

screen.availHeight, screen.availWidth

);

}

How do you implement isLandscape()?

window.orientation

window.orientation will report the degree the device is orientated. In landscape, it’s either 90 or -90. So I try:

function isLandscape(){

return Math.abs(window.orientation) === 90;

}

It works in iOS, but there is a problem in Android that when you start the webview in landscape, window.orientation is equals to 0. It’s only after you’ve changed the device orientation that the number would get right. So your initial value could be wrong.

window.matchMedia

There is a new API called matchMedia where you can use to test the orientation. The API exists in iOS5/Android 2.3, which I’m qualified to use.

function isLandscape(){

var mql = window.matchMedia("(orientation: landscape)");

return mql.matches;

}

While it seems to work, there is a case in Android that it reports wrong value: when the keyboard is shown in portrait, it reports landscape. You can try to open this example in an Android 4 chrome, simply focus the input would affect the orientation.

window.innerHeight, window.innerWidth

I tried to use the raw window size for detection then:

function isLandscape(){

return window.innerWidth > window.innerHeight;

}

This method works in both platform alright, but you have to aware of the time of retrieval. In my case, I need the device height value right after orientation changed. I tried to simply hook up with window’s resize event:

$(window).on("resize", function(){

var deviceHeight = getDeviceHeight();

//...

});

When orientation changed, the value retrived is correct. But there is a case in Android, when keyboard is shown, it would also trigger the resize event. I don’t want that. So I changed to use orientationchange event:

$(window).on("orientationchange", function(){

var deviceHeight = getDeviceHeight();

//...

});

Hm…. this time the retrieved value is incorrect. Someone noted that orientationchange event is fired before resize event, on some devices value like screen.availHeight may not be correctly updated. You can defer it to next event loop:

$(window).on("orientationchange", function(){

setTimeout(function(){

var deviceHeight = getDeviceHeight();

//....

}, 100);

});

The value is now correct. But this method is actually not reliable as it may vary from device to device. I’ve tested on my targeting devices and came up with the 100 value. So the whole thing:

function getDeviceHeight(){

return Math[isLandscape()?"min":"max"](

screen.availHeight, screen.availWidth

);

}

function isLandscape(){

return window.innerWidth > window.innerHeight;

}

$(window).on("orientationchange", function(){

setTimeout(function(){

var deviceHeight = getDeviceHeight();

//....

}, 100);

});

The method is not perfect but the result is fine for now. So let’s temporarily close the case and leave a big chunk of comment.

在新視窗檢視

想在手機查閱更多Javascript資訊？免費下載【香港矽谷】Android App

在新視窗檢視

原文站台: Jacky See

在新視窗檢視

分享到Facebook

↧

[css]萬萬沒想到，檯燈可以極簡到這個地步

April 18, 2015, 9:03 pm

≫ Next: [css]除了 P8 售價，華為在上海還發表了啥？

≪ Previous: [Javascript]A Note on Device Orientation Detection in Javascript

[css]萬萬沒想到，檯燈可以極簡到這個地步

類型：
css

一盞檯燈能極簡到什麼地步？Brick Lamp 的答案是：讓檯燈像磚頭一樣「沉默」。

檯燈在家居生活里扮演?重要角色，它低調但重要。不少設計師通過改造，讓檯燈變得更加優雅，比如由烏克蘭設計師 Fyodor Lazariev 設計的 Triad 檯燈，它是一部以槓桿為設計原理的平衡檯燈，製造一氣呵成，全身無縫結合。你無法在它身上找到任何的彈簧、螺絲或鉸鏈，而且它也足夠靈活。

而 Brick Lamp 更加簡潔。看到這名字就能猜到 Brick Lamp 是一個磚頭狀的檯燈。Brick Lamp 通體沒有開關、沒有遮光罩、沒有電線。這塊三圍 19 cm x 13.5 cm x 4.2 cm 的磚頭有三款材質：木頭、水泥和金屬。

Brick Lamp 的一面是燈光源，3 瓦特的 LED 燈泡，依靠 4000 毫安時的鋰電池供電，發出的白色光柔和細膩，能續航 5 個小時。Brick Lamp 在一角設計了一個充電介面，用 USB 就能充電。

極簡主義不只有體現在外觀上，Brick Lamp 在互動上同樣簡單到令人髮指。Brick Lamp 沒有任何形態的開關按鍵，開啟它，只需要讓 LED 燈的一面露出，使檯燈站立或平躺，燈就會自動開啟。反之，將 Brick Lamp 反扣，燈光自動熄滅。

隨用隨開的設計非常實用，比如在起夜的時候，你不必抓瞎一樣的摸索檯燈開關了，抓起 Brick Lamp，燈光即時送來。在家裡，檯燈永遠是默默無聞的固定在桌子的一角，而 Brick Lamp 擺脫了線纜，可以任意擺放，隨處使用。

說到應用場景，板兒磚屬性的 Brick Lamp 還能隨手防身，姑娘們走夜路不再怕黑也不再怕流氓。再說的遠一點，Brick Lamp 也成功打破了燈飾和建材的壁壘，比如你用水泥版 Brick Lamp 砌一面牆壁，這塊光之牆的每一塊磚頭就都會散發迷人色彩，耀眼奪目。美不美？

#gallery-1 {

margin: auto;

}

#gallery-1 .gallery-item {

float: left;

margin-top: 10px;

text-align: center;

width: 33%;

}

#gallery-1 img {

border: 2px solid #cfcfcf;

}

#gallery-1 .gallery-caption {

margin-left: 0;

}

/* see gallery_shortcode() in wp-includes/media.php */

Brick Lamp 目前是個眾籌專案，已經登入 Kickstarter。極簡的設計往往並不便宜，Brick Lamp 也是，目前它的定價是 99 美元。

題圖、插圖來自?Kickstarter

想在手機查閱更多css資訊？免費下載【香港矽谷】Android App

在新視窗檢視

原文站台: 愛范兒

在新視窗檢視

分享到Facebook

↧

[css]除了 P8 售價，華為在上海還發表了啥？

April 26, 2015, 12:13 am

≫ Next: [css]40 寸小米電視 2 評測：內容在完善，價格仍瘋狂

≪ Previous: [css]萬萬沒想到，檯燈可以極簡到這個地步

[css]除了 P8 售價，華為在上海還發表了啥？

類型：
css

今天下午，華為在上海東方藝術中心進行了華為 P8 的中國區發表會，儘管期待和驚喜已經在倫敦發表會得到滿足，現場的熱情絲毫不減。

從簽到處突圍而出，拾級而上到入場平台，恍然以為走進了一場時裝發表會。看上去來自歐洲的俊男美女在門口站?，主動追隨者拍照者的鏡頭方向，入口的旁邊，流光溢彩地寫?「似水流年」四個字。

#gallery-1 {

margin: auto;

}

#gallery-1 .gallery-item {

float: left;

margin-top: 10px;

text-align: center;

width: 33%;

}

#gallery-1 img {

border: 2px solid #cfcfcf;

}

#gallery-1 .gallery-caption {

margin-left: 0;

}

/* see gallery_shortcode() in wp-includes/media.php */

鳳凰衛視名嘴胡一虎為發表會拉開了序幕，闡述了他對發表會主題「似水流年」的解讀。華為賦予這四個字的含義，從商業上說華為宣傳口號和銷售思路的一種演變。

P6 美是一種態度

P7 君子如蘭

P8 似水流年

從最開始提最寬泛的的美，到定義君子之美，再到文藝范的「似水流年」，華為的口號並不特別的標新立異，雖缺乏驚喜，但這種接地氣的做法也為品牌贏得了一眾粉絲。同時，口號演變的邏輯也體現了華為對產品定位的逐步提高，以及對自身產品自信的提升。在發表會中 CEO 余承東多次用 iPhone6/iPhone6 Plus S6 與 P8 相比，而從未提到過小米，華為對高階手機市場的野心可見一斑。

由於是二次發表，粉絲們對早已通過網路熟知的功能介紹已無太大驚喜，幸好華為還特地留了一點小驚喜在中國地區首發。第一是一款手機——P8 青春版。

青春版裝有一塊 5 吋的 720P 螢幕幕，搭載 Kirin 620 處理器和 2G RAM。為了吸引年輕消費者，華為在這款手機的照相功能上做了不少文章。主鏡頭1300萬像素，並擁有 F2.0 大光圈及28mm 廣角，加上暗光拍照的軟體增強和「魅我」美化功能，青春版的拍照體驗和成像都值得期待。

有色，還得有聲。音質方面，青春版與 P8 一脈相承，採用了智慧功放芯片（Smart PA）以及一體化音腔設計，能帶來更好的音樂外放效果，而這點是同層級手機普遍的弱勢。

關於華為這個手機品牌有個有趣的現象，年輕人往往對華為不太了解，而青壯年人群和中年人群對華為評價卻極高。不知華為是否也為了迎擊這個或有的弱勢，這次發表的產品和功能都更加趨向年輕化。

另一個在中國地區首發的是「天際通」服務，為出國差旅者提供的全球 WLAN 和 4G 資料套餐解決方案。天際通第一個功能是為華為使用者在全球 120 多個國家提供免費 WiFi 熱點，發表會中沒有詳細介紹，估計類似與小米與邁外迪合作的熱點服務。第二個功能是廉價的 3G/4G 資料套餐，視具體國家資費有差異，大體是「運營商百分之一的價格」。目前資料套餐方面與 18 個國家的運營商達成了合作，也將逐步覆蓋到全球多數國家。

CEO 余承東在發表會中多次不避俗地用「極致」形容 P8 的工藝之美和技術的領先，也多次用中式英語調侃友商，舞颱風格用「接地氣」來形容再適合不過。對於市場上友商在嘗試的 2K/4K 等超高解析度手機，他認真地評論道：「這是一種超出實用價值的功能」，並表示華為不會為手機加入這類功能。

總而言之，本次發表會的三款手機的新功能並不太驚艷，但娛樂性和實用性都很突出。從加強訊號，提高網速，延長續航等基本功能的最佳化可以看出，「實用」就是今年華為的終極設計語言。

售價方面，P8 16G 版為 2888元, 32G 版為 3588元,P8 青春版為 1588元，P8 max 的價格暫時沒有公布。

?

?

最新最 hit 的藝術設計圖片，盡在PicGap

在新視窗檢視

原文站台: 愛范兒

在新視窗檢視

分享到Facebook

↧

[css]40 寸小米電視 2 評測：內容在完善，價格仍瘋狂

April 26, 2015, 12:15 am

≫ Next: [css]華為榮耀 4C 真機照曝光，近似「無邊訊框」設計

≪ Previous: [css]除了 P8 售價，華為在上海還發表了啥？

[css]40 寸小米電視 2 評測：內容在完善，價格仍瘋狂

類型：
css

去年 5 月，小米推出了 49 寸小米電視 2。今年 3 月，小米又接力發表了 40 寸和 55 寸小米電視 2，40 寸定價低至 1999 元。就沖這價格，40 寸小米的競爭力已經得到體現。

從一代 47 寸的粗糙做工，到二代 49 寸的工藝提升和內容初步成型，再到今年的二代 40 寸、55 寸，小米在豐富電視尺寸這件事上，一直是卯足了勁兒。而在賴以起家的內容版塊上，小米經過兩年多的充實，也有了一定的進步。

因為同屬二代產品，所以 40 寸與去年的 49 寸在工藝上差別不大，下面我們就一道來看看 40 寸小米電視 2 的改變和提升。

硬體及做工

產品引數

40 寸小米規格夏普十代線 SDP X-Gen 超晶螢幕，解析率 1080p，搭載 MStar 6A908 四核 1.45GHz 處理器，5000:1 靜態對比，GPU 規格 Mali-450 MP4 4+2 核處理器，1.5GB 記憶體，8GB 存儲空間，支援藍牙 4.0。

介面共 10 個，VGA、AV、USB 2.0/3.0、DTMB、乙太網(路)、音訊介面各一，HDMI 介面 3 個，支援雙頻 WiFi，H.265 10bit 影片硬解碼，杜比及 DTS 音訊解碼功能。

相比 49 寸，40 寸二代小米電視減掉了 3D、802.11ac WiFi、MicroSD 拓展等功能，這也讓其在液晶螢幕成本之外，在通用部品方面也有所節省。

外觀設計

相比 49 寸，40 寸小米電視在硬體上主要區別在於：

邊訊框：採用黑色塑膠邊訊框，取代鋁合金邊訊框；

底座：造型更低矮，材質也由光滑金屬變成磨砂銀。

#gallery-1 {

margin: auto;

}

#gallery-1 .gallery-item {

float: left;

margin-top: 10px;

text-align: center;

width: 33%;

}

#gallery-1 img {

border: 2px solid #cfcfcf;

}

#gallery-1 .gallery-caption {

margin-left: 0;

}

/* see gallery_shortcode() in wp-includes/media.php */

遙控器

由於小米電視機身除開關鍵，沒有任何功能按鈕，所以必須得有遙控器才行。遙控器延續經典的 11 鍵設計，在電視操控上還算流暢。

所以，同代產品不同尺寸之間，做工差異並不大，而且小米做電視重心也從來不在硬體上，我們還是多看看開機體驗效果。

內容服務

開機體驗

電視機身只有一個開關鍵，位於底部正中央。首次開機時間 25 秒，等待時間略長，我有點不耐煩。

主界面

首頁延續了小米電視 MIUI TV 界面經典造型，分為電視、線上影視、遊戲中心、應用商店四塊。

首頁繼續向右滑動，是應用程式專區，安裝的所有應用都在此處分三行依次排列。其實這種設計我是比較反感的，因為分類不夠明晰，眼力不好找個應用還得花好些時間。

電視版塊五種訊號樣式，包括類比訊號、HDMI x 3，AV、VGA、DTMB。如今普遍使用的高解析機頂盒，多為連線 HDMI 介面。因條件所限，另這塊功能主要靠外接裝置，便不過多研究。

電視的最佳化設計明顯，為方便使用者操控，設計了快捷選單。我們就從快捷選單的「設定」和「個人空間」兩個選項說起。

設定

三種進入方法：

主界針對右滑動，點選「小米電視選單」；

主界面點選上方向鍵，快捷進入設定和個人空間選單；

點選選單鍵，左側彈出快捷選單。

#gallery-2 {

margin: auto;

}

#gallery-2 .gallery-item {

float: left;

margin-top: 10px;

text-align: center;

width: 33%;

}

#gallery-2 img {

border: 2px solid #cfcfcf;

}

#gallery-2 .gallery-caption {

margin-left: 0;

}

/* see gallery_shortcode() in wp-includes/media.php */

想在手機查閱更多css資訊？免費下載【香港矽谷】Android App

在新視窗檢視

原文站台: 愛范兒

在新視窗檢視

分享到Facebook

↧