Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
638 lines (277 sloc) 16 KB
<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>apa</title>
<meta name="author" content="阿帕">
<meta name="description" content=" &#8220;Becaues life&#8217;s too short waste time re-typing passwords&#8221; 生命短暫,別浪費時間重新輸入你的密碼 ">
<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="http://blog.rx836.tw/">
<link href="/favicon.png" rel="icon">
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<script src="/javascripts/modernizr-2.0.js"></script>
<script src="/javascripts/ender.js"></script>
<script src="/javascripts/octopress.js" type="text/javascript"></script>
<link href="/atom.xml" rel="alternate" title="apa" type="application/atom+xml">
<!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<meta property="fb:admins" content="100000102681259"/>
<meta property="fb:app_id" content="416172151763823" />
<meta property="og:title" content="apa" />
<meta property="og:description" content=" &#8220;Becaues life&#8217;s too short waste time re-typing passwords&#8221; 生命短暫,別浪費時間重新輸入你的密碼 " />
<meta property="og:url" content="http://blog.rx836.tw/" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-31245620-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body >
<header role="banner"><hgroup>
<h1><a href="/">apa</a></h1>
<h2>Stay Hungry, Stay Foolish</h2>
</hgroup>
</header>
<nav role="navigation"><ul class="subscription" data-subscription="rss">
<li><a href="/atom.xml" rel="subscribe-rss" title="subscribe via RSS">RSS</a></li>
</ul>
<form action="http://google.com/search" method="get">
<fieldset role="search">
<input type="hidden" name="q" value="site:blog.rx836.tw" />
<input class="search" type="text" name="q" results="0" placeholder="Search"/>
</fieldset>
</form>
<ul class="main-navigation">
<li><a href="/">Blog</a></li>
<li><a href="/blog/archives">Archives</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
<div id="main">
<div id="content">
<div class="blog-index">
<article>
<header>
<h1 class="entry-title"><a href="/blog/hide-show-passwords/">[jQ-Plugin] 如何減少User密碼輸入錯誤?</a></h1>
<p class="meta">
<time datetime="2013-06-13T18:35:00+08:00" pubdate data-updated="true">Jun 13<span>th</span>, 2013</time>
| <a href="/blog/hide-show-passwords/#disqus_thread">Comments</a>
</p>
</header>
<div class="entry-content"><p><img src="http://farm8.staticflickr.com/7394/9032388794_c9ce2d4e25_o.jpg" /></p>
<p>&#8220;Becaues life&#8217;s too short waste time re-typing passwords&#8221;</p>
<p>生命短暫,別浪費時間重新輸入你的密碼</p>
</div>
<footer>
<a rel="full-article" href="/blog/hide-show-passwords/">more&#8230;</a>
</footer>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/css3-transform/">[CSS3] 利用transform替網頁做小巧思</a></h1>
<p class="meta">
<time datetime="2013-06-11T17:37:00+08:00" pubdate data-updated="true">Jun 11<span>th</span>, 2013</time>
| <a href="/blog/css3-transform/#disqus_thread">Comments</a>
</p>
</header>
<div class="entry-content"><p><img src="http://farm4.staticflickr.com/3748/9013398826_44a5b35f7e_o.jpg" /></p>
<p>最近看到一個<a href="http://www.jiawin.com/demos/530/index.html" target="_blank">網站</a>,很酷的將許多CSS3給呈現出來,讓我開始思考怎麼運用在實做的網站上面</p>
</div>
<footer>
<a rel="full-article" href="/blog/css3-transform/">more&#8230;</a>
</footer>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/jquery-plugin-for-pinterest/">[jQ-Plugin] 自製 Pinterest 分享圖片 Plugin</a></h1>
<p class="meta">
<time datetime="2013-05-16T12:13:00+08:00" pubdate data-updated="true">May 16<span>th</span>, 2013</time>
| <a href="/blog/jquery-plugin-for-pinterest/#disqus_thread">Comments</a>
</p>
</header>
<div class="entry-content"><p><img src="https://si0.twimg.com/profile_images/2725838700/32f4e2dce13c0b983003eaa10efea6a5.png" /></p>
<p>大部分的網站要與社群做結合,多以FB、G+、Twitter、或是微博等為主,但這幾天看到一篇文章,是連結 <a href="http://pinterest.com/" target="_blank">Pinterest</a> 來做為分享圖片的對象,在此特別紀錄</p>
</div>
<footer>
<a rel="full-article" href="/blog/jquery-plugin-for-pinterest/">more&#8230;</a>
</footer>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a></h1>
<p class="meta">
<time datetime="2013-02-28T20:53:00+08:00" pubdate data-updated="true">Feb 28<span>th</span>, 2013</time>
| <a href="/blog/jquery-sprite/#disqus_thread">Comments</a>
</p>
</header>
<div class="entry-content"><p><img src="https://lh5.googleusercontent.com/-NrgYmV2EGjs/US9R96MMebI/AAAAAAAACSw/nQUtJ_0HHqc/s372/css-sprite.gif" /></p>
<p>為了讓網站對Server的請求次數減少,有些人會運用到 <strong>CSS Sprite</strong> 的技巧,將所有的小圖合併成一張大圖,再利用 <strong>background-position</strong> 來進行定位,但事先的圖片合併規劃,為了算那些位置,不免覺得稍嫌麻煩,但其實有快速合併成大圖的方法,之前曾經寫過一篇<a href="http://blog.rx836.tw/blog/introduce-compass/" target="_blank">[CSS] 用了就無法回頭的Compass</a>,有興趣的人可以參考</p>
</div>
<footer>
<a rel="full-article" href="/blog/jquery-sprite/">more&#8230;</a>
</footer>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/jquery-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a></h1>
<p class="meta">
<time datetime="2013-01-29T11:46:00+08:00" pubdate data-updated="true">Jan 29<span>th</span>, 2013</time>
| <a href="/blog/jquery-star-box/#disqus_thread">Comments</a>
</p>
</header>
<div class="entry-content"><p><img src="https://lh4.googleusercontent.com/-p5vCtEt386M/UQdsNizReKI/AAAAAAAACQs/tylpU5zwd60/s188/2013-01-29_114734.jpg" /></p>
<p>評分功能常出現在一些商品陳列網站,像這種透過選幾顆星星來做評價,在許多網站都看的到,例如 <a href="http://tw.movie.yahoo.com/" target="_blank">YAHOO! 奇摩電影</a> 就有類似的功能,而這篇就是來介紹如何用 jQuery plugin- jStarbox 來實現這項應用</p>
</div>
<footer>
<a rel="full-article" href="/blog/jquery-star-box/">more&#8230;</a>
</footer>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/alert-confirm-prompt/">[jQ-Plugin] 用jQuery打造alert、confirm和prompt Dialogs</a></h1>
<p class="meta">
<time datetime="2013-01-24T11:21:00+08:00" pubdate data-updated="true">Jan 24<span>th</span>, 2013</time>
| <a href="/blog/alert-confirm-prompt/#disqus_thread">Comments</a>
</p>
</header>
<div class="entry-content"><p><img src="https://lh3.googleusercontent.com/-Zmc0Ts3xud4/UQDnKqQMtiI/AAAAAAAACPg/x2E0ljNmpOM/s387/2013-01-24_115500.jpg" /></p>
<p>知名的網路趨勢觀察 Inside 有一篇文章 <a href="http://www.inside.com.tw/2013/01/23/app-dialog-button-design-should-yes-be-right-or-left" target="_blank">App 的 「確定」按鈕應該放在左邊還是右邊?</a>,裡面寫到關於使用者設計,iOS與 Android 的不同,我對這方面不是研究者,所以就不針對文章內容做討論,但同樣的事情回到 Web 部分,如果能將我們常看到的 alert 視窗做客製化,引導 User 做點擊,或許可以減少使用者誤按的情形發生</p>
</div>
<footer>
<a rel="full-article" href="/blog/alert-confirm-prompt/">more&#8230;</a>
</footer>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/jquery-drop-down-lists/">[jQ-Plugin] 用jQuery客製化下拉選單</a></h1>
<p class="meta">
<time datetime="2013-01-23T17:16:00+08:00" pubdate data-updated="true">Jan 23<span>rd</span>, 2013</time>
| <a href="/blog/jquery-drop-down-lists/#disqus_thread">Comments</a>
</p>
</header>
<div class="entry-content"><p>下拉式選單(DropDownList)在表單填寫裡面,是很常用到的網頁元素,但原生的下拉式選單看久了,難免會覺得太過單調,有時為了配合整體網站的設計,會有客製化的需求,而這篇文章主要是介紹如何用 jQuery plugin 客製化下拉選單</p>
</div>
<footer>
<a rel="full-article" href="/blog/jquery-drop-down-lists/">more&#8230;</a>
</footer>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a></h1>
<p class="meta">
<time datetime="2013-01-21T12:28:00+08:00" pubdate data-updated="true">Jan 21<span>st</span>, 2013</time>
| <a href="/blog/responsive-tables/#disqus_thread">Comments</a>
</p>
</header>
<div class="entry-content"><p>因為移動設備的成長,RWD(Responsive web design)這個應用已經在許多網頁上都看的到,除了做一個專屬於 mobile 的網站設計以外,也可以讓一個網站來符合許多螢幕解析度大小,而這兩個方法的優與劣,如何選擇,就看專案當下的情況來做決定</p>
</div>
<footer>
<a rel="full-article" href="/blog/responsive-tables/">more&#8230;</a>
</footer>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/jquery-slice-images-into-tiles/">[jQ-Plugin] 做出磁磚效果變化的圖片轉換</a></h1>
<p class="meta">
<time datetime="2013-01-18T16:36:00+08:00" pubdate data-updated="true">Jan 18<span>th</span>, 2013</time>
| <a href="/blog/jquery-slice-images-into-tiles/#disqus_thread">Comments</a>
</p>
</header>
<div class="entry-content"><p><img src="https://lh4.googleusercontent.com/-WH3Ni1ou3Ww/UPkk71vSTvI/AAAAAAAACMk/hcFofq9eTuU/s641/2013-01-18_164425.jpg" /></p>
<p>不知道大家有沒有看過這種切成一塊一塊的轉換圖片,類似磁磚拼貼的效果,最近看到一篇講解教學的文章,自己消化了一下,來分享並且紀錄下來</p>
</div>
<footer>
<a rel="full-article" href="/blog/jquery-slice-images-into-tiles/">more&#8230;</a>
</footer>
</article>
<article>
<header>
<h1 class="entry-title"><a href="/blog/css-oocss/">[CSS] 認識OOCSS</a></h1>
<p class="meta">
<time datetime="2013-01-16T16:15:00+08:00" pubdate data-updated="true">Jan 16<span>th</span>, 2013</time>
| <a href="/blog/css-oocss/#disqus_thread">Comments</a>
</p>
</header>
<div class="entry-content"><p>最近在一些國外文章常看到『OOCSS』,另外也在 <a href="http://www.webconf.tw/" target="_blank">WebConf Taiwan 2013</a> 聽到許多講者分享中提到,所以藉此花了一些時間來認識一下OOCSS,並且紀錄在這裡供大家參考參考</p>
</div>
<footer>
<a rel="full-article" href="/blog/css-oocss/">more&#8230;</a>
</footer>
</article>
<div class="pagination">
<a class="prev" href="/blog/page/2/">&larr; Older</a>
<a href="/blog/archives">Blog Archives</a>
</div>
</div>
<aside class="sidebar">
<section>
<h1>Categories</h1>
<ul id="category-list"><li><a href='/blog/categories/css'>CSS (16)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (20)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
<a href="/blog/hide-show-passwords/">[jQ-Plugin] 如何減少User密碼輸入錯誤?</a>
</li>
<li class="post">
<a href="/blog/css3-transform/">[CSS3] 利用transform替網頁做小巧思</a>
</li>
<li class="post">
<a href="/blog/jquery-plugin-for-pinterest/">[jQ-Plugin] 自製 Pinterest 分享圖片 plugin </a>
</li>
<li class="post">
<a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
</li>
<li class="post">
<a href="/blog/jquery-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a>
</li>
</ul>
</section>
</aside>
</div>
</div>
<footer role="contentinfo"><p>
Copyright &copy; 2013 - 阿帕 -
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>
</footer>
<script type="text/javascript">
var disqus_shortname = 'rx836';
var disqus_script = 'count.js';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/' + disqus_script;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=416172151763823";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript">
(function(){
var twitterWidgets = document.createElement('script');
twitterWidgets.type = 'text/javascript';
twitterWidgets.async = true;
twitterWidgets.src = 'http://platform.twitter.com/widgets.js';
document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
})();
</script>
</body>
</html>