Inside My Mind

2009/11/04

王品

知道王品這間餐廳已經很久了，但一直沒有機緣去嘗試
台塑旗下的餐廳舉凡西提、原燒、夏慕尼，無論是食物本身或者是服務
都留下相當好得印象，這次剛好女友有公司的禮卷，於是達成了我的王品嘗鮮之旅

這張沒什麼特別的用意，在騎車去王品的路上，看到光線不錯忍不住按下了快門。

由於比營業時間提早到達，所以在外面等待的時間來個鬼臉連拍。

這是餐前酒，味道淡淡地但滿好喝的，來高級餐廳果然有fu。

鵝肝醬跟奶油，準備夾麵包用的。

麵包上場。

奶油夾心示範。

好吃。

鮭魚沙拉。

水果沙拉。

海鮮湯。

玉米湯。

麵包蓋還有加蒜醬烤過，好一點的餐廳才會有的巧思。

搭配主餐用的酸梅湯，非常好喝，無限續杯，我喝了4杯。

搭配主餐的蒜片。

高纖蔬菜。

主食來囉，我點的是王品牛排不帶骨帶筋，吃下第一口我就快哭了，口感跟味道都滿分。

親親點的是牛小排，配上玫瑰鹽真的讓人捨不得吞下去。

牛小排特寫。

餐後水果。

蛋糕劃破前。

蛋糕劃破後。

葡萄柚汁。

咖啡。

整理來說這是頓愉快的晚餐，王品的服務品質就不用多提了，用餐的氣氛跟食物的口味都令我十分滿意，下次有機會還會再來的。

2009/10/30

slider

jQuery市面上很多slider，不過大部分不是無窮迴圈，就是到底就停
因應公司美術需求，開發了一套自己的slider，有幾個特點如下

判斷最後位置補差額，很多slider假設1頁可以滾動2個，如果實際滾動內容只有5個的話，那第3頁會變成只有剩下一個物件的情況，此Plugin會自動判斷補位。
可設定頁數導覽。
可選擇垂直或者是水平。

選項


$('#nav').dramaSlider({
    navA: '#left', // 往左或下按鈕（必填）
    navB: '#right', // 往右或上按鈕（必填）
    nav: '#guide', // 頁數導覽
    direction: 'vertical', // 垂直（vertical）或水平（horizontal）（預設水平）
    opacity: 0.3, // 按鈕的透明度（預設0.5，1最大、0最小）
    speed: 500 // 滾動速度（預設500）
});

使用範例

<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title>slider</title><br /><style type="text/css"><br />body {<br />    font-size: 11px;<br />}<br />#nav {<br />    width: 204px;<br />    height: 100px;<br />    overflow: hidden;<br />    position: relative;<br />    border: 1px solid blue;<br />}<br />ul {<br />    position: relative;<br />    list-style: none;<br />    margin: 0;<br />    padding: 0;<br />}<br />li {<br />    float: left;<br />    width: 100px;<br />    height: 100px;<br />    text-align: center;<br />    background: red;<br />    margin: 0 2px 0 0;<br />}<br /></style><br /><script type="text/javascript" src="js/jquery-1.3.2.min.js"></script><br /><script type="text/javascript" src="js/jquery.dramaSlider.js"></script><br /></head><br /><br /><body><br /><div id="nav"><br />    <ul><br />        <li>1</li><br />        <li>2</li><br />        <li>3</li><br />        <li>4</li><br />        <li>5</li><br />    </ul><br /></div><br /><div style="clear: both;"></div><br /><div id="guide"></div><br /><a id="left" href="#">Left</a>&nbsp;&nbsp;<a href="#" id="right">Right</a><br /><script><br />$(function() {<br />	$('#nav').dramaSlider({<br />		navA: '#left',<br />		navB: '#right',<br />		nav: '#guide'<br />	});	   <br />});<br /></script><br /></body><br /></html><br />

原始碼

<br />/*<br />* Drama Slider<br />* 編輯日期: 2009-10-30<br />* 作者: David<br />* Email: chan15tw@gmail.com<br />*/<br />(function() {<br />    $.fn.dramaSlider = function($opts) {<br />        var $defaults = {<br />            navA: '',<br />            navB: '',<br />            direction: 'horizontal',<br />            speed: 500,<br />            opacity: 0.5,<br />            nav: ''<br />        },<br />           $set = $.fn.extend($defaults, $opts),<br />           $page = 1; // 起始頁數<br />        if ($set.navLeft == '' || $set.navRight == '') {<br />            alert('請設定按鈕');<br />            return false;<br />        }<br />        return this.each(function() {<br />            var $li = ($set.direction == 'horizontal') ? $(this).find('li:first').outerWidth(true) : $(this).find('li:first').outerHeight(true), // 單一li寬度<br />                $ul = $(this).find('ul:first'), // 移動區塊<br />                $liAmount = $(this).find('li').size(), // li數量<br />                $liPerPage = ($set.direction == 'horizontal') ? Math.round($(this).outerWidth() / $li) : Math.round($(this).outerHeight() / $li), // 每頁數量<br />                $totalPage = Math.ceil($liAmount / $liPerPage), // 總頁數<br />                $liLeft = $liAmount % $liPerPage == 0 ? $liLeft = $liPerPage : $liAmount % $liPerPage, // 遞補數量<br />                $btnA = $($set.navA).css('opacity', $set.opacity), // 往左或下按鈕<br />                $btnB = $($set.navB); // 往右或上按鈕<br />            guide();<br />            switch ($set.direction) {<br />                case 'horizontal':<br />                    $(this).find('ul').width(9999);<br />                    break;<br />                case 'vertical':<br />                    $(this).find('ul').height(9999);<br />                    break;<br />            }<br />            <br />            // 往右或上按鈕<br />            $btnB.click(function() {<br />                if ($liAmount > $liPerPage) {<br />                    if ($page != $totalPage) {<br />                        if (($page + 1) == $totalPage) {<br />                            if ($page == 1) $btnA.fadeTo('normal', 1);<br />                            switch ($set.direction) {<br />                                case 'horizontal':<br />                                    $ul.animate({left: '+=' + ($li * $liLeft * -1)}, $set.speed);<br />                                    $(this).fadeTo('normal', $set.opacity);<br />                                    $page++;<br />                                    break;<br />                                case 'vertical':<br />                                    $ul.animate({top: '+=' + ($li * $liLeft * -1)}, $set.speed);<br />                                    $(this).fadeTo('normal', $set.opacity);<br />                                    $page++;<br />                                    break;<br />                            }<br />                            guide();<br />                        } else {<br />                            if ($page == 1) $btnA.fadeTo('normal', 1);<br />                            switch ($set.direction) {<br />                                case 'horizontal':<br />                                    $ul.animate({left: '+=' + ($li * $liPerPage * -1)}, $set.speed);<br />                                    $page++;<br />                                    break;<br />                                case 'vertical':<br />                                    $ul.animate({top: '+=' + ($li * $liPerPage * -1)}, $set.speed);<br />                                    $page++;<br />                                    break;<br />                            }<br />                            guide();<br />                        }<br />                    }<br />                }<br />                return false;<br />            });<br />            <br />            // 往左或下按鈕<br />            $btnA.click(function() {<br />                if ($page != 1) {<br />                    if ($page == $totalPage) {<br />                        if ($page == $totalPage) $btnB.fadeTo('normal', 1);<br />                        if ($page - 1 == 1) $(this).fadeTo('normal', $set.opacity);<br />                        switch ($set.direction) {<br />                                case 'horizontal':<br />                                    $ul.animate({left: '+=' + ($li * $liLeft)}, $set.speed);<br />                                    $page--;<br />                                    break;<br />                                case 'vertical':<br />                                    $ul.animate({top: '+=' + ($li * $liLeft)}, $set.speed);<br />                                    $page--;<br />                                    break;<br />                        }<br />                        guide();<br />                    } else {<br />                        if ($page == $totalPage) $btnB.fadeTo('normal', 1);<br />                        if ($page - 1 == 1) $(this).fadeTo('normal', $set.opacity);<br />                        switch ($set.direction) {<br />                                case 'horizontal':<br />                                    $ul.animate({left: '+=' + ($li * $liPerPage)}, $set.speed);<br />                                    $page--;<br />                                    break;<br />                                case 'vertical':<br />                                    $ul.animate({top: '+=' + ($li * $liPerPage)}, $set.speed);<br />                                    $page--;<br />                                    break;<br />                        }<br />                        guide();<br />                    }<br />                }<br />                return false;<br />            });<br />            <br />            // page navigator<br />            function guide() {<br />                if ($set.nav != '') {<br />                    $($set.nav).html($page + '/' + $totalPage);<br />                }<br />            }<br />        });<br />    }<br />})(jQuery);<br />

範例網站：http://www.drama.com.tw/jquery/slider.html
下載位置：http://www.drama.com.tw/jquery/js/jquery.dramaSlider.js

2009/10/26

觸控螢幕之我見

最近因為Windows 7的問世，炒起了一波觸控式螢幕的熱潮
報導紛紛看好Windows 7會將這塊產業帶起來
其實我有不太一樣的看法

觸控式螢幕成本高，截至目前為止（2009/10/26），台灣企業僅有15%有意願在3年內將系統更換為Windows 7，在我認為企業用戶對觸控有需求的比例應該會比一般民眾高，觸控式面板的螢幕是相當昂貴的，我想鮮少有人會為了體驗去更換。
觸控式操作並非新鮮事，便利商店的ATM都是這種方式在操作，一般新商品推出時，很多人可能為了嘗鮮會引發買氣，像蛋塔效應之類的，但我不覺得觸控式操作有這麼大的誘因。
最常被拿來demo觸控式操作的，大概就是show照片吧，不然就是利用Google Earth來放大縮小，我還沒看過更新鮮的，試問各位的日常操作習慣，有常常在放大縮小圖片嗎？滾輪隨便滾都比兩隻手指動來動去快吧，再者，在大螢幕作那些動作，手腕能夠撐多久？觸控式的操作在本質上根本無法久作，噱頭大於實質意義。
再來是小弟個人習慣問題，我覺得在螢幕上點來點去就算了，滑來滑去刮來刮去是相當不舒服的。

價格、噱頭、新鮮感、本質上都沒有真正的甜蜜點，不知道媒體為何這麼High。

2009/10/21

點選文字欄位後本身文字消失

今天寫了一個plugin，我知道網路上好像有類似的可以download
不過由於自己開發的掌控性比較高，所以就花了一點點時間撰寫

功能介紹：
其實作用很簡單，預設一個text文字內容，onfocus的時候消失，onblur的時候出現
要判斷的只有user是否已經改變內容了。

使用方式：


<input type="text" id="test" //>
<script>
	$('#test').chanClickClear('測試');
</script>

Plugin Code

<br />(function() {<br />    $.fn.chanClickClear = function($txt) {<br />        return this.each(function() {<br />            if ($txt != '') {<br />                $(this)<br />                    .val($txt)<br />                    .focus(function() {<br />                        if ($(this).val() == $txt) $(this).val('');<br />                    })<br />                    .blur(function() {<br />                        if ($(this).val() == '') $(this).val($txt);<br />                    });<br />            }<br />        });<br />    }<br />})(jQuery);<br />

2009/10/15

jQuery Validation加入身份證驗證的功能

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

這個插件相當相當的強大，我新增了一個Method來判斷台灣身份證。


$(function() {
 $.validator.addMethod("twId", function(value, element) {
     var regExpID = /^[a-z](1|2)\d{8}$/i, // 身份證正規式
         re = new RegExp(regExpID);
     return this.optional(element) || re.test(value);
}, "請輸入正確的身份證格式");

 $('form').validate({
     rules: {
         id: {
             required: true,
             rangelength: [10, 10],
             twId: true // 引用身份證認證
         }
     }
 });
});