jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化's Archiver

wmh 發表於 2008-5-31 13:01

令人耳目一新的生日選擇介面

[img]http://jsgears.com/_icons/famfamfam/folder.gif[/img] jFormino Birthday (prototype)
[img]http://jsgears.com/_icons/famfamfam/icon_home.gif[/img] [url]http://blog.othree.net/log/2008/05/30/birthday-ui/[/url]
[img]http://jsgears.com/_icons/famfamfam/comment.gif[/img] 優異的介面設計,讓使用者可以透過滑鼠輕鬆輸入出生日期

一般來說,輸入出生日期可能要點選三個下拉選單,或是透過文字框直接輸入完整日期,[url=http://blog.othree.net/]othree[/url] 所設計的輸入介面相當貼心,只需要滑鼠點選四次就可以完成,大家不妨直接由下面的範例試試。

[jsg.example]
<div><input class="birthday"/></div>
<style type="text/css">
body {
font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
font-size: 62.5%;
}
.birthday .year {
width: 3em;
}
.birthday .month {
width: 2em;
}
.birthday .day {
width: 2em;
}
.birthday-picker {
position: absolute;
border: 2px solid #666;
border-width: 8px 2px 2px;
padding: 4px 0 0 4px;
background: #ffe;
display: none;
}
.birthday-picker .head {
font-size: 200%;
font-weight: bold;
margin: 0 4px 4px 0;
border-bottom: 1px solid #666;
color: #666;
}
.birthday-picker ol {
clear: none;
display: block;
list-style: none;
margin: 0;
padding: 0;
}
.birthday-picker ol.month {
width: 460px;
}
.birthday-picker ol.day {
width: 460px;
}
.birthday-picker ol.year li {
font-weight: bold;
float: left;
display: block;
list-style: none;
margin: 0;
padidng: 0;
text-align: center;
}
.birthday-picker ol.year li li,
.birthday-picker ol.month li,
.birthday-picker ol.day li {
float: left;
margin: 0 4px 4px 0;
padidng: 0;
border: 1px solid #999;
color: #000;
text-align: center;
font-weight: bold;
}
.birthday-picker ol.year li li {
float: none;
color: #999;
width: 4em;
height: 2em;
line-height: 2em;
}
.birthday-picker ol.year li.first {
font-size: 120%;
width: 3.3em;
color: #666;
}
.birthday-picker ol.year li:hover ol li {
color: #000;
border-color: #444;
}
.birthday-picker ol.year li:hover ol li:hover,
.birthday-picker ol.month li:hover,
.birthday-picker ol.day li:hover {
color: #fff;
background: #0E7CEB;
border-color: #0E7CEB;
cursor: pointer;
}
.birthday-picker ol.month li {
font-size: 400%;
border: 1px solid #aaa;
width: 2.725em;
height: 2em;
line-height: 2em;
color: #000;
}
.birthday-picker ol.day li {
font-size: 200%;
border: 1px solid #aaa;
width: 2.985em;
height: 2.275em;
line-height: 2.275em;
}
.birthday-picker ol li.one {
clear: left;
}
.birthday-picker ol li.checked, .birthday-picker ol ol li.checked {
color: #ffe;
background: #f66;
}
.birthday-picker ol.day li:hover {
color: #fff;
background: #0E7CEB;
border-color: #0E7CEB;
cursor: pointer;
}
.seperate {
padding: 0 5px;
font-size: 180%;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script>
<script type="text/javascript" src="_lib/others/o3/birthday.js"></script>
[/jsg.example]

由於目前仍是雛型,對於後續發展有興趣的人可自行前往 [url=http://blog.othree.net/]othree 的 blog[/url] 進行追蹤。

calvin52019 發表於 2010-8-6 09:57

有使用過此元件....不過....偶會造成.....DNS ERROR的情況發生耶!!!!

wmh 發表於 2010-8-6 19:23

你直接用他的 js 嗎?
不如把檔案抓下來放自己 server 應該會比較穩定。

small_spoon 發表於 2015-12-12 00:48

手機版可能就不太適合了

頁: [1]

Powered by Discuz! Archiver  © 2001-2009 Comsenz Inc.