jQueryを使ったWYSIWYGエディタ·jWYSIWYG MOONGIFT
Webベースでリッチなドキュメントを作成できるソフトウェアと言えば、FCKEditorやWYMeditorなどが一般的だ。これらは非常に便利なソフトウェアではあるが、既に出来上がった感のあるソフトウェアであり、修正しようとも思えないほど多機能だ。逆に多機能すぎて動作が重たいという欠点がある。 jQueryベースのWYSIWYGエディタ 必要なものだけを簡単にピックアップできる、さらに自分なりにカスタマイズすることも考えたい方のためにjwysiwygを紹介しよう。 今回紹介するオープンソース・ソフトウェアはjWYSIWYG、jQueryプラグインとして提供されるWYSIWYGエディタだ。 jWYSIWYGはWYMeditorを模して作られているWYSIWYGエディタだ。jQueryをベースとして作られており、18KBと軽量な作りになっている（圧縮版は7KBだ）。必要な画像やCSSを合わせても
Facebook風のツールチップを実現するJavaScript「tipsy」
twitter facebook hatena google pocket jQueryを使用してFacebookスタイルのツールチップを実現する「tipsy - Facebook-style tooltip plugin for jQuery」です。 ツールチップとは吹き出しのようなもので、リンクや画像などの説明をわかりやすく表示してくれます。 sponsors 使用方法 tipsyからファイルをダウンロードします。 <link rel="stylesheet" type="text/css" href="tipsy.css" /> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.tipsy.js"></script> <sc
jQuery UI の プラグイン定義関数 $.widget を使ってみる - Cyokodog :: Diary
jQuery UI の tabs や accordion といったウィジェット系プラグインでは、専用のプラグイン定義関数 $.widget でプラグイン定義することで、一環性のあるプラグイン API を利用者に提供しています。 今回は、$.widget を使ったプラグインの定義方法について調べてみました。 ui.core.js の入手 $.widget は jQuery UI の ui.core.js というソースファイル内に定義されてます。 公式サイト（http://jqueryui.com/download）よりプラグイン一式をダウンロードし、zip ファイルを解凍すると、以下パスに ui.core.js があるので、これを読み込み $.widget を使用できるようにします。 jquery-ui-1.7.2.custom/development-bundle/ui/ui.core.j
JS習作：Twitter Search的な何か | Blog hamashun.com
サンプルページ 概要 12月2週目のJSです。 ごくごく簡単なTwitter APIを練習してみました。 やりたかった事は以下です。 APIなる物をさわってAjaxなる物をやってみたい Twitterネタで何かやりたい ソースコード jQueryを使用しています。 $(function () { function twitterSearch(searchWord) { $.ajax({ url: 'http://search.twitter.com/search.json', data: { 'q': searchWord, 'rpp': 10, 'lang': 'ja' }, type: 'get', dataType: 'jsonp', success: function(data){ $.each(data.results, function(i, itm) { $('#twitte
JavaScriptでびゅんびゅんスライド！ページ切換法 (1/5)
HTMLだけで作ったシンプルなサイトもいいですが、時にはもっと派手なサイトを作りたい、ということ場合もあるでしょう。これまでもこの連載ではさまざまな“小技”を紹介してきましたが、ページ全体を大きく描き換えるには、以前ならFlashが不可欠でした。ところが最近では、JavaScriptとHTMLの組み合わせでも、かなりの表現できるようになり、実際にそうしたWebサイトも増えてきています。 今回はそんなサイトの1つ、「Baltijos prodiuserių grupė」にページ全体の切り換えテクニックを学びたいと思います。 今回のお手本サイト： 『Baltijos prodiuserių grupė』 リトアニアでイベントの企画・制作を手がける企業のコーポレートサイト。会社概要、業務内容、事例紹介の3つのコンテンツと問い合わせフォームからなるシンプルな構成。フルーツや花など、植物の写真と楽器
あのFlashサイトのUIをjQueryで作る (1/5)
「見た目に美しく、ユーザーに楽しさや心地よさを与えるUIを作りたい」 そう考えたときに参考になるのが、Flashで制作されたWebサイトです。最近では、JavaScriptによるリッチなUIを持つWebサイトも増えてきていますが、長年、さまざまなUIが実験的に生み出されてきたFlashの世界には、まだまだユニークなサイトが多くあります。 たとえば、今回紹介する「ハーズ実験デザイン研究所」のWebサイトは、フルFlashで制作された“楽しい”コーポレートサイトです。同社が手がけてきた過去の作品を、時間の経過とともにゆっくりと切り換えていく様子は、まるで1本の映像作品を見ているよう。メニューのちょっとした動きひとつをとっても、ユーザーを楽しませようという意図が感じられます。 Flashサイトのような美しくて楽しいUIを、JavaScriptでも作れないか――それが今回のテーマです。 今回のお手
[JS]スムーズに切り替わるタブ型コンテンツ -Coda-Slider
Coda-Sliderは、jQueryのプラグインで、タブ型のコンテンツをスムーズに移動させて切り替えるスクリプトです。 Introducing Coda-Slider Coda-Sliderは、slideViewer(スムーズに移動させて画像を切り替えるスクリプト)を元に作成したもの(上記ブログより)で、動き方はほとんど同じで、快適に動作します。 Coda-Slider Demo
jQueryでiCalライクなカレンダーを作るチュートリアル – creamu
jQueryでクールなカレンダーを作りたい。 そんなときにおすすめなのが、『Create astonishing iCal-like calendars with jQuery』。jQueryでiCalライクなカレンダーを作るチュートリアルだ。 このエントリーでは、↑のようなカレンダーの作り方が紹介されている。マウスオーバーするとふわっとポップアップするツールチップテキストつきだ。 ソースファイルもダウンロードできるので見てみてほしい。 デモは以下から。 View the online Demo! jQueryでiCalライクなカレンダーを作るチュートリアル、チェックして参考にしてみてはいかがだろうか。 Create astonishing iCal-like calendars with jQuery 天気がよくて気持ちいいですねー。 先日買った雑誌を読んでいます。「Casa」はまた紙面
pngfix & rollover library sisso.jsを作成しました。 : tech.kayac.com - KAYAC engineers' blog
通販で自転車のスポーク買いました。agoです。 社内から「yuga.jsみたいに呼べば使えて、環境に依存しないpngfixとrolloverライブラリがほしい」とリクエストを受けたので作成してみました。 使い方はファイルをダウンロードし、以下のようにマークアップすれば完了です。 <img src="opacity.png" class="btn" /> <!-- mouseover時にopacity_o.pngを表示 --> <div class="bgpng" style="background-image:url(opacity.png); width:200px; height:200px"></div> <!-- 背景のpngfix（img,input[type="button"]は自動的にpngfixする） --> <div class="bgpng btn" style="ba
Bridge Word
This shop will be powered by Are you the store owner? Log in here
jQuery.opensocial_simple Pluginを作成しました。 - KAYAC Engineers' Blog
昨日OpenSocial Hackathonに参加させていただきました。agoです。 Hackathonは終わってしまいましたが、jQueryからOpenSocialを簡単に扱うためのPluginを作成したので、jQuery.opensocial_simpleとして公開したいと思います。 opensocial、gadgetsのすべての機能を実装したわけではないですが、owner、viewerの情報取得、外部サイトへの接続はかなり簡単に実装できるようになったと思います。 使い方はjQuery読み込み後、jquery.opensocial_simple.jsを読み込み、$.opensocial_simpleからmethodを呼び出すだけ。 MySpaceアプリの場合以下の形で使用できます。 <script type=" text/javascript"http://api.msappspace
jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ
JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){
RedLine Magazine : スペースは嫌、class付けるのも嫌な時用(追記有)
スペースは嫌、class付けるのも嫌な時用(追記有) >>081210：追記 コメント欄にてもっといい書き方教えて頂きました！ タイトル、なんのこっちゃ？って感じなんですが、そういう時があるんです。例えば会社概要なんかをマークアップした時、定義リストとして書く際にdtに社名、所在地、電話番号・・・って入れるじゃないですか。そういう部分の元原稿って「社 名」みたいな感じで２文字の部分に予めスペースが入ってて見た目を整えてあるものが多いんですね。なんちゃって均等割り付けみたいな感じ。 ところがwebの場合、そういうのってhtmlに直接スペース入れられないじゃないですか。アクセシビリティ的にも文書的にも。もちろんデザイナ目線でのその部分の見た目を整えたい気持ちも分かるんですね。なのでCSSのletter-spacingで左右揃ってなくてもとりあえずなんとなく全部間隔あけとくか、チマチマと例外部分
jQueryのプラグイン100選 -2008年総集編 | コリス
seekAttention 注目箇所だけハイライトのアニメーションで強調。 スクロール・ドラッグなど操作関連のjQueryのプラグイン
jQueryのみでLightboxっぽいものを実現する方法 - F.Ko-Jiの「一秒後は未来」
梅酒.inのトップページにある「梅酒がウリな飲食店」というコーナーにある画像をクリックすると、Lightboxっぽく情報を表示するようにしています。 ↑ こんな感じ。 Lightbox効果を実現するライブラリは検索すれば色々と見つかると思いますが、ここではライブラリはjQueryのみとして、どのようにLightboxを実現したかを説明します。 処理のおおまかな流れは以下の通りです。 select要素を隠す (IE対策) ページ全体に半透明の黒いレイヤーを表示する 表示領域の中央に目的のコンテンツを表示する 1. select要素を隠す IE6ではselect要素にz-indexが定義されていないため、レイヤーのz-indexをどれだけ大きくしても、IE6ではselect要素がレイヤーの下に隠れることはありません。そのため、ページ上にあるselect要素を隠す必要があります。 jQueryで
jQueryとphpでAjaxな郵便番号入力補助を作ろうと思う - blog::konk303
リクエストがあったので。ちょっとどうするか整理してみる。 http://zip.ricollab.jp/を使おうと思う。 httpsでは投げさせてくれないみたいなので、proxyする踏み台も必要。複数サービスで必要なので、共有で使える場所に置かないと。 一応「こんなのやります」はシステム側（インフラ側）に伝えてあるけど、もう一回確認取ってからスタートする。 要件は 郵便番号を入力して「住所を入力」を押すと、住所が補完される 郵便番号入力時に、補完候補を自動表示 「一覧から探す」で、住所一覧から選択できる。絞り込み検索可能に。 ぐらいかな。まずは1をさくっとリリースして、後は追加機能で後追いにしちゃおっと。 システム側 jsライブラリはjQueryで（なぜなら好きだから）。 共有で使えそうなサーバで、https受け付けてるサーバはphpで動いてるので、踏み台はphpで。 指定サービス以外のド
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Site Under Maintenance
fallinstar.org
CSS, JavaScript, jQuery, WordPressなどのよく使うコードをまとめたスニペット集
Site Under Maintenance
