jQBinder, ブラウザー側でのHTML templateを可能にするjQuery plug-in
一昨日はMVCの話で妙に盛り上がってしまったが、考えてみるとModel/View/Controller間の分離が不十分という話はサーバー側だけの話ではなく、クライアント側にも言える事。事実、私自身も div.innerHTML = "<span class='red'>" + message + "</span>"; みたいなHTMLが混ざったJavaScriptコードを書く事は良くある。特に、最近はJSONとして取得して来たデータセットをリストとして表示するケースが増えて来たが、そんな時に「サーバー側のようなHTMLテンプレートが使えたらいいな」と思う事は良くある。手っ取り早くとりあえず動くものを作るのにはHTML埋め込み型のJavaScriptで良いのかも知れないが、後々のメンテナンスを考えると少なくともModelとViewぐらいはキチンと切り話しておいた方が良い事は確か。 ということ
Ajax中にページ更新する際の注意点
Ajax中にページ更新する際の注意点 Ajaxで通信中にF5などを押してページをリロードすると通信エラーが帰ってきます。 詳しくは調べていませんが、どうもFirefoxでの挙動のようです。 参考：FirefoxでAjax中にF5押したとき « pocketo.net blog このサイトのようにAjaxのXMLHttpRequestをabort()で中断すれば、この問題は解決できます。 var xhr = $.ajax( {....}) $( document ).bind( 'beforeunload', function() { xhr.abort(); } ); ただ、通信の数が多い場合は、毎回設定するのは少し面倒。 そういう場合は、以下のように設定しておくとjQueryでajaxを使うと自動でabort()を設定してくれます。 $("body").bind("ajaxSend",
第3回 アコーディオンパネルの実装 | gihyo.jp
jQueryを利用してナビゲーションを実装する 第3回・4回はナビゲーションの実装について説明していきます。今回はアコーディオンパネルと呼ばれるナビゲーションに注目して、プラグインを使わずに作成してみましょう。 本連載では、タイトル部分をクリックやホバーなどのトリガーによって、その下の閉じられていた要素(弟要素)をスライドアニメーションなどで開くようなものをアコーディオンパネルとします。 今回の記事で使うメソッドの紹介と簡単な説明 本題に入る前に、まずはアコーディオンパネルを実装するにあたって必要になるメソッドを紹介しておきます。メソッドとは$(セレクタ)で得られたjQueryオブジェクト(要素)に対して、$().method()のように実行する「method()」の部分を指します。以下method()やmethodメソッドなどと表記していますが、同じ意味です。 click() click
＜10/1追記あり＞右クリックを禁止するブログパーツをリリース | エキサイトブログ向上委員会
いつもエキサイトブログをご利用頂き、ありがとうございます。 “右クリック”で画像やイラストを取得することを禁止するブログパーツをご用意しました。 ブログに掲載している写真やイラストが無断で複写・使用される危険を少しでも減らしたい方に おすすめのブログパーツです。 ＜貼り方＞ １．以下にあるブログパーツのスクリプトをコピーする ２．設定＞メニュー管理＞「ブログパーツ管理はこちら」のページから コピーしたスクリプトを貼って登録 ３．設定＞メニュー管理で、ブログパーツを「表示する」にして適用 ＜ブログパーツソース＞ ※10/1 ソースの記述に誤りがありましたので修正しました。動作に変更はありません <script type="text/javascript" src="http://md.exblog.jp/js/rclick.js"></script> <ul> <li>このブログに掲載されて
第1回 jQueryにふれる | gihyo.jp
はじめに ここ数年、JavaScriptライブラリを使ってサイトを製作するという機会がどんどん増えてきました。今まででであれば、JavaScriptのライブラリを使う・使わないに関わらず、その製作の多くはプログラマーの方が行っていたと思います。しかし近年、そのJavaScriptライブラリも種類が増えてきて、プログラミングの知識がなくても簡単に導入できるようなライブラリも出てきました。そのため、それらの使い手はプログラマーからWebデザイナーやマークアップエンジニア側へとシフトしつつしている部分もあります。 そんな数多くあるJavaScriptライブラリの中でも、Webデザイナーなどのプログラミング知識がない人でも比較的導入のしやすいのが『jQuery』です。このjQueryの魅力は、その使いやすさとプラグインの豊富さにあり、プラグインだけでも、すでに使ったことがあるという方も多いと思いま
DOMにピンとこないなら最初は感覚で使えばいいじゃない
先日、いつものチャットメンバーで話をしているときに、DOM Sctiptingの話になったのですが、メンバーで「DOM」がよくわからない人がいたりしました。 でも、実際にDOMなんて用語で覚えようとしても、最初はピンとこなかったりしませんか？ JavaScriptとかjQueryにしろ、覚えておくべき用語なのですが、ピンとこないので、最初は感覚で使ってしまいましょう。 DOM？ドム？ DOMはDocument Object Modelのことで、HTML文書へのアクセスや操作の方法についてを定義したことなのですが、最初は用語で考えてもよくわからないですよね。 DOMって覚えるよりも、「HTML中のドコをどのようにしたいのか！？」なんてことで自分は覚えていたりします。厳密にいうと違う！とか言われるかもしれませんが、最初から厳密に覚えようとしても、覚えにくいので、最初はこれでいいと思っています。
[JS]セレクトメニューの中身を印刷できるようにするスクリプト
select要素で実装したセレクトメニューの中身を印刷や印刷プレビュー時に表示させるスクリプトをCSS-Tricksから紹介します。 <textarea name="code" class="js" cols="60" rows="5"> $(function(){ $("select").each(function(i){ var $el = $(this); var $options = $el.find("option"); $el.after("<div class='print-select'>Options: <ul id=sel"+i+"></ul></div>"); var $curPrintBox = $("#sel"+i); $options.each(function() { $curPrintBox.append("<li>"+$(this).text()+"</l
MovableType 4.2 無料テンプレートセットにLightboxを装備してみた
ホーム ブログ Movable Type MovableType 4.2 無料テンプレートセットにLightboxを装備してみた MovableType 4.2 無料テンプレートセットにLightboxを装備してみた 昨日（7月27日)リリースしたMovableType 4.2 無料テンプレート 2Column 2ndテンプレートセットにLightboxを装備してみました。 昨年位からprototype.jsではなくjQueryで実装することが多くなっています。Lightbox用のプラグインはSlimbox 2を利用。 テンプレートセットとローディング画像などをアップロードするだけでLightBoxが利用できます。 rel="lightbox"が面倒なのでJunnamaさんのLightBoxプラグイン(改良版)を利用すれば手間いらず。 リリースの予定は未定です。
透明度を利用したロールオーバープラグイン「jquery-opacity-rollover.js」を使いやすくしてみた
以前作成した、透明度を利用するだけのロールオーバープラグイン、それを少し使いやすいようにバージョンアップいたしました。 今回は少しカスタマイズしやすいようにしたのと、機能をひとつ追加してみました。 ※追記（09/07/24） 若干修正し、2.1にバージョンアップしました。 （今までのでも問題なく動作します。） ダウンロード プラグインはjQueryと下記プラグインを一緒に使ってください。 opacity-rollover2.1.js 透明度を利用したロールオーバー これは以前と同じ通常の使い方。マウスが画像の上にのると、画像の色が薄くなるロールオーバー。 ■使い方 $('#over1').opOver(); 適応させたいセレクタを指定し、opOver()で適応させる。 ■サンプルプレビュー これだけでも十分使えると思われます。画像を複数用意しなくとも、色の濃い画像を用意するだけで画像が変わ
MOONGIFT: » jQueryでその場で入力チェックを行う「jQuery Inline Form Validation Engine」:オープンソースを毎日紹介
入力された値の検証は最終的にサーバ側で行わなければ意味がない。が、ユーザビリティを考えるとブラウザ上でチェックし、通知できれば便利に違いない。問題はそうしたチェック機能を実装するのが手間だと言うことだ。 jQueryを使ってWebブラウザ上で入力チェック 動的なフォーム生成でも柔軟に対応できるくらいシンプルな入力チェックライブラリがjQuery Inline Form Validation Engineだ。 今回紹介するオープンソース・ソフトウェアはjQuery Inline Form Validation Engine、jQueryプラグインで提供される入力チェックライブラリだ。 jQuery Inline Form Validation Engineの良い点は、入力チェックがブラウザ上で行われ、かつそのエラー内容が入力項目の横にフローティングで表示される所だ。吹き出し風になっており、非
Ajaxの最新情報レポートblog : Recently Ajax
This page is used to test the proper operation of the HTTP server after it has been installed. If you can read this page it means that the HTTP server installed at this site is working properly. The fact that you are seeing this page indicates that the website you just visited is either experiencing problems or is undergoing routine maintenance. If you would like to let the administrators of this
JavaScript（jQuery）で簡単にCookieを使う事が出来るプラグイン | チバのブログ
開閉式メニューやフォントサイズの変更など、jQueryを使って作ったスクリプトの状態をCookieを使って保存できないか...？と思って探してみたら結構見つかってしまいましたので、備忘録も兼ねて書いておきます。 jQuery.cookie.jsプラグイン ｊQueryを使ったスクリプトでCookieを使うには、jquery.cookie.jsというプラグインがとても便利です。 使い方はデモページのソースを見てもらえればわかると思いますが、それだけでは備忘録にならないので簡単な使い方を書いておきます。 jquery.cookie.jsは以下のサイトからダウンロード出来ます。 Plugins | jQuery Plugins 基本的な使い方 jquery.cookie.jsを使ってCookieの読み込んだり書き込んだりする時の基本的な使い方です。 読み込み $.cookie('クッキー名'
Exactly How to Create a Custom jQuery Accordion | Envato Tuts+
Accordions can be very useful for showing lots of different sections of data in a small amount of space. jQuery UI has a built in Accordion function, but according to the jQuery UI Build your Download, the size of the Core jQuery UI and Accordion scripts are 25kb and 16.6kb, respectively. Today, I'll show you how to build a custom accordion that is more "bandwidth efficient". Download the attachme
jQuery マウスオーバー時にサブタグクラウドを表示する | CSS Lecture
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
もうこれで十分。HTML上でテーブルを表示するなら·Sigma Grid MOONGIFT
業務システムを構築する際に、一覧表を表示するという処理は多い。そしてそのデータを並べ替えたり、チェックボックスを入れたりしたいというニーズも多く発生する。場合によってはカラムを並べ替えたり、一括更新したいなんて言われることもある。 ソートも並べ替えもページネーションも全部こみこみ それを一つ一つ実装していては非常に工数がかかってしまう。そこで使いたいのがこのSigma Gridだ。 Sigma Gridはテーブルの表示とソート、データ編集などを可能にする超豪華ライブラリだ。LGPLライセンスの下に公開されているオープンソース・ソフトウェアだ。 Sigma Gridはデータの表示に際してJSONでデータを渡す必要がある。そのため既存のシステムにそのまま組み込むのは難しいかもしれない。だがその変更してもあまりあるメリットを享受できるに違いない。 画像表示とクリックアクションの例 まずカラムごと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://mfantasy.s99.coreserver.jp/kuru2/
jQuery fontsize switcher - スクリプト - 配布物 - AZ store
jQuery Inline Form Labels | Blog | Trevor Davis | Senior Software Engineer @ Dutchie
jQueryのSlidingエフェクト3 [Javascript] All About
jQueryのEffects 基本2 [Javascript] All About![jQueryのEffects 基本2 [Javascript] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/3a713ecab6d4800da05c4504abbf5718b1613b04/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
