凄い！jQueryでリボンメニューを実現する·jQuery Ribbon MOONGIFT
MS Office 2007から採用されたリボンメニュー。今は（といっても2年前からあるが）まだ違和感があるかも知れないが、徐々にリボンメニューを採用したソフトウェアも増えており、慣れると使いやすさは向上していることに気づくはずだ。 jQueryで実現するリボンメニュー！ そんなリボンメニューをブラウザで使える、そんなライブラリがjQuery Ribbonだ。 今回紹介するオープンソース・ソフトウェアはjQuery Ribbon、jQueryでリボンメニューインタフェースを提供するソフトウェアだ。 jQuery RibbonはjQueryを使ってあのリボンメニュー風インタフェースを実現する。凄いのは全てのインタフェースがリスト（ulタグ）だけで実現されていることだろう。そのためJavaScriptがオフであっても機能はするはずだ。 メニュー リボンインタフェースはもちろん、左上にはツリーメ
IE6ブラウザでアクセスするとWarningを出してくれる「ie6-upgrade-warning」:phpspot開発日誌
IE6ブラウザでアクセスするとWarningを出してくれる「ie6-upgrade-warning」 2009年04月14日- ie6-upgrade-warning - Google Code IE6ブラウザでアクセスするとWarningを出してくれる「ie6-upgrade-warning」 IE6でアクセスすると次のように警告が出るみたいです。 各アイコンからはブラウザ配布サイトへのリンクが貼られています。 インストールは以下のように、1行。IE6限定で呼び出すようにするだけみたいです。 <!--[if lte IE 6]><script src="js/ie6/warning.js"></script><script>window.onload=function(){e("js/ie6/")}</script><![endif]--> スクリプト自体は7.9kbで、IE6のみ読込み
Twitterのメッセージをページに載せられるJavaScript「Twitter.js」:phpspot開発日誌
Add Twitter to your blog (step-by-step) Twitterのメッセージをページに載せられるJavaScript「Twitter.js」。 Twitter.jsを使えばJavaScriptオンリーでTwitterのメッセージが載せられるみたい。 実装方法は以下の2ステップで簡単 (1) HTMLコンテナの定義 表示させたい位置に以下のHTMLコードを記述 <div id="tweet"> <p>Please wait while my tweets load <img src="/images/indicator.gif" /></p> <p><a href="http://twitter.com/rem">If you can't wait - check out what I've been twittering</a></p> </div> (2)
オブジェクト指向っぽい話が分かるかもしれないJavaScript講座 その1 | Takazudo Clipping*
自分はスーパーJavaScripterでこんなすげーのが5行で書けちゃう。やばいだろ！とかいうのでは全然無いですが、オブジェクト指向っぽい話が最近分かってきたつもりで、それでやっときゃ問題無いってことを思い始めているので、なんかそんな話を書いていきます。 こんな短く書くテクニックがあるぜ！ var hoge = hage ? huga : hoga; とか書けちゃうんだぜ！とかより、長くていいから分かりやすく拡張しやすいようにするにはどうするのかとか、そういう話ができればなーと思います。内容的には全くもって新しくも何とも無いですが。jQuery使ってやる前提です。 まんじゅう製造スクリプト 今日はまんじゅうを5個作ります。なんと、まんじゅうは、クリックすると隠れます。 まんじゅうサンプル var Manju = function(){ this.elem; this.hidden = fa
[JS]ページを多言語に翻訳するスクリプト＆ブックマークレット -Sunday Morning
Google AJAX Language APIを利用して、ページ内のテキストを30以上の言語に自動翻訳するスクリプト&ブックマークレット「Sunday Morning」を紹介します。 Sunday Morning jQuery + Google Translation デモでは、ダブルクリックでナビゲーションを表示してインラインのテキストを翻訳するものと、単語単位で翻訳するものがあり、サイトのテキストもダブルクリックすると翻訳されます。 ブックマークレットは、下記ページにて作成することができます。 SundayMorning Bookmarklet Generator Sunday MorningはjQueryのプラグインのため、実装にはjquery.jsが必要です。
JavaScriptでconcatはもう使うべきではないのかもしれない (Kanasansoft Web Lab.)
当エントリーは多くの誤りを含んでいます。参考にされる場合は最後の追記部分まで含めて読まれるようにお願いします。 それなりに慣れているはずのプロのプログラマでも、このような勘違いや大失態をすることがあるという教訓として残すために、エントリーの削除や修正はせずに追記のみに留めておきます。 JavaScriptで、配列に要素を追加するメソッドに、push、unshift、splice、concatがある。このうち、配列の後方に要素を追加するのは、(要素を好きな場所に追加可能なspliceを除くと)pushとconcatの二つである。この二つのメソッドは破壊的/非破壊的の違いがあれ、似たような挙動を示す。
PHP - 以外の言語でPHPのsortを実装してみる。 : 404 Blog Not Found
2009年02月27日17:00 カテゴリLightweight Languages PHP - 以外の言語でPHPのsortを実装してみる。 案外笑い事じゃないかも。特にJavaScript! PHPのsort関数は相当おかしい - hnwの日記 なんと、同じ要素を持つ配列をソートした結果が異なっています。こちらはまだいい具合にわざとらしいけど.... Perl [Run via CodePad] #!/usr/local/bin/perl use strict; use warnings; eval { # try Scalar::Util::looks_like_number() require Scalar::Util; Scalar::Util->import('looks_like_number'); }; if ($@) { # use regexp if not avail
Pure JavaScript Template Engine - mixi engineer blog
はじめましてhirokiです。こんにちは。新卒で弊社に入って一年が経過しようとしているので、そろそろエンジニアブロガーの仲間入りをしてみようかと思っています。 今回はJavaScriptのお話です。ハードボイルドなバックエンド側技術のご紹介が多い当ブログですが、スイーツ（笑）なフロントエンド技術もおもしろいんだよ！ということをアピってやろうという魂胆です＞＜。 HTML.Template(JavaScript) 弊社では、サーバサイドによるHTMLの出力テンプレートエンジンにCPANモジュールであるHTML::Template::Proを使用しています。今回はそのJavaScript実装をオープンソースとして開発しましたので、紹介をさせていただきます。 HTML::Templateは貧弱で、冗長で、洗練されていないシンタックスでお馴染みのテンプレートエンジンですが、高速で必要以上のロジック
コンテンツを滑らかにスライドさせるjQueryプラグイン:phpspot開発日誌
jQuery plugin - Easy Image or Content Slider | Css Globe This is my first jQuery plugin. I wrote several jQuery scripts but never made a real plugin just because I was I afraid of it's complexity. コンテンツを滑らかにスライドさせるjQueryプラグイン。 各種デモが以下で閲覧できます。 Default non-styled image slider Non-styled vertical image slider Non-styled vertical content slider マークアップが次のようにシンプルに記述できる点も導入の敷居が低くていいかんじです。 <div id="slider
jQueryをナイスにナビゲーションに活用したサイト集:phpspot開発日誌
8 Sites with Excellent jQuery Navigation | Build Internet! jQueryをナイスにナビゲーションに活用したサイト集。 jQueryを巧みに活用して、JavaScript で本当に出来ているの？と思ってしまうほどのサイト集です。jQueryをうまく使う際の参考にできそう。 Carrot Creative 一見、普通のHTMLサイトですが、ヘッダーのメニューをクリックすると・・・ 色々なところが凝っていて参考になる上、動きが楽しい。 Aviary 角丸ドロップダウンメニューがカッコいい。アニメーションなどの仕掛けも。 WP Coder 一部画面遷移を同一画面内ポップアップ表示 Matt Dempsey 内容がスライドのようにダイナミックに切り替わる Bright Creative 画面内をクールにスライドさせるＵＩ 全部見る フルスクラ
ブログにtwitterのつぶやきを表示する·twitterer anywhere MOONGIFT
ブログを書いた際には、それを読んだ人がどのようなコメントをするか気になるものだ。それを知る道具は幾つかある。例えばソーシャルブックマーク、ブログ検索などだ。そして最近多いのがtwitterにコメントをポストするケースだ。 twitterのコメントをブログに表示 ブログ検索でtwitterも調べられると良いのだが現状はそのようなことはない。そこでブログ記事につけられたつぶやきを知ることができるのがtwitterer anywhereだ。 今回紹介するオープンソース・ソフトウェアはtwitterer anywhere、twitterのつぶやき表示ソフトウェアだ。こちらはMOONGIFT謹製のソフトウェアになる。 twitterer anywhereは増井氏によるhatena bookmark anywhereをtwitter向けに改造したマッシュアップだ。twitterの検索には日本向けはtw
amachang の 「一行で IE の JavaScript を高速化する方法」を掘り下げてみた - latest log
2009-11-12 ナビ子記法について追記しました 本文 今日は、amachangさんの記事 http://d.hatena.ne.jp/amachang/20071010/1192012056 を 1mm だけ掘り下げ、IE 以外のブラウザでも document へのアクセスを速くする方法がないか、色々試してみます。 # 記事自体はずいぶん前に書き上げてたけど、公開するの忘れてたんだな。 C系を追加しました。C系は「ネストしたスコープからグローバル変数にアクセスするとどうなるか?」がテーマです。 試したこと 以下は様々な方法で document へのアクセス速度を計測します。 A系では、非日常的な方法で測定し、B系では実際の用法に近い形で測定します。C系では何重にもネストしたスコープから、グローバル変数にアクセスするとどうなるかを測定します。 A系 A0 は、素の document に
JavaScriptでSLを走らせる「SL.JS」を作りました | Creazy!
開発に関わっていて、UNIX（Linux）を触った事のある人は「SLコマンド」をご存知の方が多いのではないでしょうか？ lsを間違えてslと打つとこんなのが煙を吹きながら走る sl(1) コマンドを作りました． via: 豊田正史とslコマンド (Masashi Toyoda and SL command) ファイル一覧を出力する「ls」をtypoして「sl」と打ってしまうと、文字通りSLが画面を走り抜けるというすばらしくくだらない仕組みなのだ。いわゆる、ジョークコマンドの一つとしてとても有名で、多くの開発者の気持ちを和らげた（腰を砕いた）ことでしょう。 さて、そんなくだらないジョークコマンドを懐かしんでいると、JavaScriptでSLを動かしてみたくなってしまったので作ってみました。 ・SL.JS ブックマークレット方式にしてあるので、上のSL.JSリンクをブックマークして下さい。 ど
Prototype.js、YUI等コアライブラリを選択できかつ、多機能LightBox「Shadowbox.js」:phpspot開発日誌
Prototype.js、YUI等コアライブラリを選択できかつ、多機能LightBox「Shadowbox.js」 2008年01月29日- Shadowbox.initShadowbox.js Media Viewer Shadowbox is a cross-browser, cross-platform, cleanly-coded and fully-documented media viewer application written entirely in JavaScript. Prototype.js、YUI等コアライブラリを選択できかつ、多機能LightBox「Shadowbox.js」。 YUI, Ext, Prototype.js, jQuery, Mootools, Dojo などをコアライブラリとして使用できます。 LightBox は prototype.js
JavaScript製のフォームバリデータライブラリいろいろ:phpspot開発日誌
CSSgallery.info Javascript form validators When we use forms, we need somehow to validate the data user input. JavaScript製のフォームバリデータライブラリがいろいろ紹介されています。 Realtime validation using Ajax ( フォームの入力値をリアルタイムにバリデーション「Realtime validation」 ) LiveValidation ( JavaScriptでリアルタイム値チェックを簡単に行える「LiveValidation」 ) JSValidate ( prototype.jsベースのリアルタイムバリデートJSライブラリ「JSValidate」 ) validator.js - Client-side form validatin
jQueryよりも便利？mooToolsの便利プラグイン集:phpspot開発日誌
Best Ever 65 mooTools Plugins and Demos, is it Better than jQuery? : Speckyboy - Web Design, Web Development and Graphic Design Resources jQueryよりも便利？mooToolsの便利プラグイン集。 mooToolsにも多数の便利プラグインが存在しますね。 SmoothScroll スクロールをスムーズにする MultipleSelect 複数選択ウィジェット Typewriter Effect タイプライタ風のエフェクトがつけられる MooColumns レイアウト用ライブラリ News ticker with horizontal scrolling 水平ティッカー MooScroll 独自スクロールバー Show/hide a nice Login
JavaScriptのベンチマークテスト機能を簡単に組み込める「JSLitmus」:phpspot開発日誌
JSLitmus JSLitmus is a lightweight tool for creating ad-hoc JavaScript benchmark tests.JavaScriptのベンチマークテスト機能を簡単に組み込める「JSLitmus」 ページ内のJavaScriptのパフォーマンスを、ページ内に表示される次のようなウィジェット内でテストできます。 Google Chart API を使ったパフォーマンスのグラフの出力も出来るみたい。 scriptとしては次のように書いてテストウィジェットを表示するようです。 <script src="JSLitmus.js"></script> <script> JSLitmus.test('Empty function test', function() { /* ここに計測したい処理を記述 */ }); </script> ↓↓↓
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]タブと連動するNext/Previousボタンを設置するスクリプト
[JS]ナビゲーションにツールチップをスライド表示させるスクリプト
[JS]わずか「12文字」でIEを判別するスクリプト | コリス