【教學】套用CSS樣式後的input button在iOS上的顯示問題(iPhone/iPad/iPod)

在寫這篇之前,不得不抱怨一下…. iOS真的很搞剛耶~~~真的是會讓開發者多事的一種作業系統~~~ 因為這個問題是我自己遇上的…這篇就當作給自己的一個隨筆記錄囉~~ 最近剛好有一個case~是做一家公司的網站.. 由於業主非常care能不能在電腦、平版、和手機上三方兼容~ 他是沒有要分網頁版和行動版~~反正就是一個網站要搞定一切! 所以我在製作時就必須要在各種不同的裝置上看排版有沒有跑位…..   先來敘述我的問題: 這是一個產品瀏覽的頁面,這頁面因為很長,必須要有書籤的按鈕(button) 有1、2、3、4、5;假如我按了3的按鈕,畫面就會滑動到第3個區塊(以此類推..) 而這個書籤,我是用了jQuery來寫滑動與跳轉~~ <script src="jquery.min.js" language="javascript"></script> <script language="javascript">$(function(){ $(‘#按鈕名稱’).click(function(){ $(‘html,body’).animate({scrollTop:$(‘#div區塊ID名稱’).offset().top}, 速度); }); }); ↑順便分享下我怎麼寫的,不知道我在幹嘛的就略過!因為不是此篇的重點~~(jquery.min.js這檔案網路上抓得到)   然後我的書籤button是用input button套用CSS的樣式製作~ ex: 放在<body></body>之中的input button標籤~ <input name="btn" type=button class="button" id="btn">   因為事先早已設計好了按鈕圖案,所以必須要用CSS更改按鈕樣式! 還有,在這裡提醒一下,圖片是可以直接加連結,但是圖片是不能用來執行JavaScript和提交表單!   所以,我只能在CSS裡設我按鈕的樣式(以下方式是按鈕會直接是image.gif這張圖的樣子): .button { font-size: 0; width: 20px; height: 20px; border: none; margin: 0; padding: 0; background: url(images/image.gif) […]

【教學】BlueStacks for Mac 自行安裝apk(app)的方法

BlueStacks一直標榜著能在mac與PC上玩Android 的APP~ PC上的BlueStacks是真的很好用!安裝apk也是直接點擊方便到爆!!! 可在Mac一直沒找到如何自行安裝apk(app)的方法… 除了用它內建的一些GOOGLE PLAY、Amazon  App Store、1Mobile可從內部下載安裝~~ 自己的apk我卻一直找不到方式該如何安裝~~ PC上的直接點擊安裝就可,但MAC版我怎麼點擊它就不理我,連直接用BlueStacks開也沒用! 拖進BlueStacks for Mac的視窗也沒用~~~   最後…我終於找到了方法~~~ 其實是早就知道的方法….. 就是我以前有講過在mac上把apk安裝近官方模擬器的apkinstaller~~ 原來這個apkinstaller這麼好用= = 我太蠢了~~怎麼一直都沒想到~~(因為都是模擬器啊~~~) http://evacyl52201.pixnet.net/blog/post/29931855 ↑↑↑↑這篇中間也有講到   apkinstaller下載   安裝方式就是開啟BlueStacks for Mac後,然後打開apkinstaller(如圖) 當看到下方出現Device connected:…..後 (如果沒出現就一直按左上Refresh) 按右上Install apk 就可以選擇Mac中的apk檔來安裝了~~~   有沒有~ 超~級~簡~單~~   -Jouko 2013/3/24

【教學】Dreamwever + PhoneGap Android app發佈篇

PhoneGap無疑是個好用的東西~ 至於它是什麼呢?就不多介紹了!! 隨便GOOGLE一下都很多資料~~ 我這篇要講的是如何用Dreamwever + PhoneGap 僅利用網頁的技術把一個Android的APP安裝檔.apk給發佈出來~~ 在開始講之前,先來廢話一下! 我覺得我是個特別怪的人~~ 因為研究所時期有真的用過eclipse + Android SDK + JAVA & XCODE + iOS SDK +objective-c 開發過兩種系統手機APP的實戰經驗~ 都感覺真的不是這麼的好!!! 不過就是做一個手機軟體,為何總是要如此勞師動眾??? 所以有其他的技術可以完成寫APP這件事我都會非常有興趣!! 例如之前的Adobe AIR on FLASH~~ Android的 / iOS的 Adobe不是省油的公司,雖然他們被蘋果黑了好幾次! 但還是致力於研發Adobe系列的工具來開發智慧型手機的app^^ 用Adobe的工具,真讓學設計出身的我真的感到溫暖啊XD 好了 廢話不多說 直接開始正題~ 我這篇是用Dreamwever CS5.5來做示範 SORRY我知道現在已經到CS6惹,但我就是懶得灌啦~~(堪用就好了嘛~~)   以下就是打開Dreamwever後,看圖說故事啦!照著做就對了(我懶得打多餘的字)   (一)安裝Android SDK 1.     2. 點輕鬆安裝來自動幫你安裝Android SDK   3. Android […]

【推薦】-Bump 無線傳輸檔案- iOS/Android v.s. 電腦 or iOS/Android v.s. iOS/Android (iPhone、iPad、iPod、Android)

其實在智慧型行動裝置上互相傳輸檔案頗麻煩的~~ 他們的藍芽裝置都好像設好玩的~~~ 不過近期Line、Whatsapp、微信等通訊軟體多不勝數~ 只要有網路,朋友、親人間傳輸檔案、照片好像也不是什麼大問題! 但是如果是想傳檔案進我的電腦呢?或是想傳檔去沒有裝Line和Whatsapp的iPad呢? 接上線來傳輸在這個數位3C發達的時代真的是下下之策!!   之前一直有用一個好用的APP叫- Bump! 也用一陣子了,相信也很多推薦和分享早就流竄在各大網站上~~~   AppStore和GooglePlay裡直接搜尋就可以免費下載了喔! https://itunes.apple.com/ca/app/bump/id305479724?mt=8 https://play.google.com/store/apps/details?id=com.bumptech.bumpga       行動裝置 V.S. 電腦 有些人應該會想問,電腦中是不是也要安裝甚麼? no~~of course not~~ 你電腦中只需有可以連得上網際網路的瀏覽器就好~~ 因本人習慣用Chrome 所以都用Chrome示範囉! 電腦只需連上此網址: https://bu.mp/   接著到手機或平版中開啟Bump的APP   划到可以選檔案的那一頁,選擇你要傳輸的檔案(假設我想傳兩張圖片)   按下立即碰接 這時就拿起手機輕敲一下鍵盤空白鍵!!(這步驟可能需多試幾次)   如果有連線成功會出現要你連線你的PC的畫面,就按連線!!   如果都成功,你就會看到你在https://bu.mp/ 這網址的畫面改變了! 就看到了我剛剛碰接的兩張圖!   圖可以各別下載,也可以按右上全部下載!!   將將,圖就利用無線傳輸方式到電腦中了~~~真的相當方便~~~   如果你想把電腦中的檔案傳進裝置中~~ 在裝置與電腦連線成功後,也可按右上"Send files to your device“,選擇電腦中的檔案就可以直接傳了!! 手機也會立馬收到!強啊~~   至於裝置與裝置互傳就更簡單了! […]

【測試分享】20130307 新 HTC one 體驗會

這次的HTC新機皇New HTC one在台灣的發表體驗會搞得很大 請來重量級天團五月天代言 HTC執行長周永明、中華電信、台灣大哥大、遠傳三大電信巨頭的高官也來了~~~ 我昨天臨時知道有這個發表會 現場還可以試機~~ 二話不說就衝去信義區的香緹大道(話說我媽還以為我要去看五月天^^") 不多說了直接進入正題~ 新HTC one的介紹和規格它們官網寫得相當清楚↓ http://www.htc.com/tw/smartphones/htc-one/?PS=1&cid=sem177p554#overview 在規格上我就不多介紹了~~~ 所以我這篇最主要是要講它實機給我的感覺和新功能實測的體驗~   新 HTC one 體驗會   我想可能是五月天的威力大吧 除了五月天會出現的舞台前老早就爆滿~就連體驗區也不遑多讓..   體驗區可以看到很多穿著HTC制服的工作人員在詳細解說   銀色版本尊!!(上面是開機畫面之一) 然後現場有黑色跟銀色兩款實機~ 但因為現場燈光所致,導致黑色的機子很不好拍~~ 所以下面3張就借用我朋友的照片^^" 這是我第一次看到黑色的款 沒錯 是他們一直在主打的金屬質感 拿起來冰冰涼涼的 還OK 但黑色款背面已經有不少指紋油亮的痕跡 看來這材質並沒有防指紋   整隻機身全黑~非常薄!!比iPhone還薄!! 不過我排到的黑色款後面黏的防盜兼充電器非常之大,讓我玩得很不爽快……..   後來終於排到一隻銀色版的來試玩~ 這隻背面的防盜器就小很多,玩的也比較爽快!   整體的金屬質感摸起來跟iPhone 5背面的鋁殼很像~(廢話,都鋁殼嘛^^") 背面不是全平的,還是有一點點的弧度~倒是蠻好拿的 不刮手!!   實體拿起來的感覺以我的手來說大小適中 單手野蠻方便操作的   HTC是beats的大股東,我想這大家去google一下就會知道~ 而這次HTC one也主打BoomSound音響;雙前置立體揚聲器 不過因為現場太吵了,我實在也聽不出差異性!!^^" […]