Jquery | Web活メモ帳

Googleのサイト内検索をjQueryでかっこ良くする方法

0

2011/06/22 Google , jquery

PHPやjQueryのチュートリアルを毎日紹介しているTutorialzineというサイトから、Googleのサイト内検索をjQueryでかっこ良くする方法が掲載されていたのでご紹介します。

Google AJAX Search APIを使用して、独自のデザインで検索結果を表示していますよ。
サンプルもあるので、検索対象のURLを自分のサイトにするだけで簡単に設置できるようになっています。

検索フォーム

20110622 01

↑検索フォームはHTML5で作られています。
右下のアイコンで画像検索や動画検索が切り替えられます。かわいいですね。

20110622 02

↑検索結果の様子

デモではGoogleのロゴが表示されていませんが、実際に使用する際にはロゴの掲載は必要かと思います。

詳細&使ってみたい方は下のリンクからどうぞ。

jQueryの基礎からベストプラクティスまで学べる「jQuery Fundamentals」

0

2011/05/24 jquery

20110524-02

jQueryの使い方を基礎から学びたい人向けの「jQuery Fundamentals」が良さそうだったのでご紹介。

JavaScriptの使い方から、セレクターの使い方、プラグインの作り方などが詳細に説明されていますよ。

これから勉強する人からバリバリ使っている人まで、ひと通り読んでおくと良さそうです。

var foo = 'hello';

var sayHello = function() {
    console.log(foo);
};

sayHello();         // logs 'hello'
console.log(foo);   // also logs 'hello'

↑スコープの使い方

$('p').click(function() {
    console.log('click');
});

↑イベントの使い方

(function($){
    $.fn.showLinkLocation = function() {
        return this.filter('a').each(function(){
            $(this).append(
                ' (' + $(this).attr('href') + ')'
            );
        });
    };
}(jQuery));

// Usage example:
$('a').showLinkLocation();

↑プラグインの作り方

内容の変更をGithubで受け付けているので、変更したい人はそちらからコンテンツの追加もできるようになっています。

英語なのでちょっと、、という人でも、ソースコードを読むだけでもためになると思うので
ひとつ上のレベルを目指したい人は読んで置くと良さそうです。

CSSとjQueryでヨーロッパのクリッカブルマップを作ったすごいデモ

0

2011/04/28 css3 , jquery

20110428 02

ヨーロッパの地図をCSSとjQueryでクリッカブルマップにしてしまったすごいデモをご紹介。
Europe, CSS & jQuery clickable map by Winston Wolf

地図にマウスオーバーすると、ポップアップで地名を表示してくれるようになります。クリックすると、地名を選択可能に。

これ、すごいですね。

HTMLは単純な<li>タグで国名を一覧にしているだけなのですが、
以下のような画像を使って、うまくCSSで表現しています。

20110428 03

IE6以外のほとんどのブラウザで表示できるようになっています。
興味のある方は下のリンクからどうぞ。

[JS]#以降のURLによって処理を振り分けるjQueryベースのフレームワーク「Sammy.js」

0

2011/04/27 framework , jquery , MIT license

20110427 01

「Sammy.js」はURLによって処理を振り分ける事ができるJavaScriptの軽量フレームワークです。
#以降のアドレスを利用してURLルーティングを実装されており、
簡潔に記述することを目指したフレームワークとなっています。

RubyのSinatraというフレームワークにインスパイアされたみたいですね。

わずか16KBしかないのですが、外部ファイルの読み込みやリダイレクト処理などがサポートされており、手軽に使う事ができます。

使い方

jQueryを読み込んだ後に、sammy.jsを読み込みます。

<script src="jquery.js" type="text/javascript"></script>
  <script src="sammy.js" type="text/javascript"></script>

URLに対して実行するアクションを設定します。

JavaScript

(function($) {
    //アクションの設定
    var app = $.sammy(function() {
        //TOPにアクセス
        this.get('#/', function() {
          $('#main').text('');
        });
        //TOP以外のアクションを追加していきます。
        this.get('#/test', function() {
          $('#main').text('Hello World');
        });

    });

    $(function() {
        app.run()
    });
})(jQuery);

html