幅を変化させることが出来るjQueryメニュー「Self-resizing Navigation Menu」
Self-resizing Navigation Menu with jQuery
ボタン一つで幅を帰れるメニューバー
→→→デモページ
.codropsmenu1{
padding:3px;
height:30px;
background-color:#282828;
}
.codropsmenu1 ul{
list-style:none;
margin:0px;
padding:0px;
}
.codropsmenu1 ul li{
display:inline;
position:relative;
}
.codropsmenu1 ul li a{
float:left;
height:28px;
line-height:30px;
text-align:center;
text-decoration:none;
display:block;
background-color:#282828;
font-size:12px;
color:#DDDFDF;
text-shadow: 0 1px 0 #000000;
border-right:1px solid #000;
border-left:1px solid #404040;
border-top:1px solid #282828;
border-bottom:1px solid #282828;
outline:none;
cursor:pointer;
overflow:hidden;
}
.codropsmenu1 ul li a.last{
border-right:1px solid #282828;
}
.codropsmenu1 ul li a.first{
border-left:1px solid #282828;
}
.codropsmenu1 ul li a:hover,
.codropsmenu1 ul li a.selected{
background-color:#404040;
border-top:1px solid #111;
border-bottom:1px solid #111;
color:#fff;
}
$(function() {
changeWidth(500);function changeWidth(menuWidth){
var menuItems = $('#menu li').size();
var itemWidth = (menuWidth/menuItems)-2;$('#menu').css({'width': menuWidth +'px'});
$('#menu a').css({'width': itemWidth +'px'});
}
});
再生＆停止ボタンのエフェクト「Pause and Play Effect」
Here窶冱 an effect based on the one used in fml to stop and pause an event. The idea is that when we click on the play/pause button or press the space button, an image (play or pause) appears and fades out. This effect is done using jQuery, which we use to animate the image enlarging and fading out.
再生ボタンや停止ボタンを押すと画面にドーン！！とアニメーションが表示されるクールなjquery plugin
デモはこちら
http://www.tympanus.net/PausePlay/
設定もすごくシンプルです
http://tympanus.net/codrops/2010/01/07/pause-and-play-effect-with-jquery/
処理の成否をかっこいいアクションで知らせてくれるjqueryのプラグイン
This is an example of the jFeedback integration.
You can easily configure jFeedback to be either on top or at the bottom of the page.
The minimal approach lies in the usage of simple icons to let the user know about success or failure (Let the user decide if he wants to read the error / success message)
Dismissing the jFeedback notification can be done by either clicking on it, or clicking on the bar that displays the message.
ボタンを押すと画面上にチェックマークやびっくりマークを表示させるプラグインです。
サイトをちょっとリッチにしたい時に使えそう。
一覧の中から画像が飛び出すajax 「Ajax Scroll」
AjaxScroll is an lightweight jQuery plugins . Provided the ajax scollpane to replace the Next/Previous buttons, behaviour similar as MSN Image Search (Live.com Search).
http://blog.yctin.com/archives/jquery-plugins-ajaxscroll/
デモはこんな感じ
http://project.yctin.com/ajaxscroll/demo/demo.integrate.fullsize.html
すごいかっこいいですねｗ
ボタン一つで５２ヶ国語に翻訳するwordpressのplugin「Google AJAX Translation」
Google AJAX Translation
Add Google AJAX Translation to your blog. This plugin allows your readers to translate your blog posts, pages, or comments into 52 languages.
This plugin is an efficient, simple, and original way to add translation to your blog. A “Translate” button can be added to the bottom or at the top of posts, pages, and/or comments. When the button is clicked a popup window opens showing a list of available languages
googleの翻訳機能はいまいち精度がよくないと言われていますが…
これだけたくさんの言語に翻訳できるものは少ないですよね。
しかも、案外軽かったです。
