jQuery Validation Plugin | Form validation with jQuery
This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options. It makes a good choice if you’re building something new from scratch, but also when you’re trying to integrate something into an existing application with lots of existing markup. The plugin comes bundled with a useful set of validation methods, including URL and email validation
jsTreeとは? - jsTree ドキュメント 日本語訳
jsTree は インタラクティブなツリービューを使えるようにするjquery 用プラグインです。 これは完全に無料であり、オープンソースであり、MIT ライセンスで配布されています。 jsTree は拡張、テーマ付け、設定が簡単にでき、HTML と JSON データソースと AJAX の読み込みをサポートしています。 コンテンツボックスもしくはボーダーボックスのいずれかのボックスモデルにおいても、jsTree の機能は正しいAMDモジュールとして読み込むことができ、レスポンシブデザインに対応した携帯用のテーマを内蔵しており、簡単にカスタマイズができます。 jsTreeはjQueryのイベントシステムを使用するため、ツリー上で発生する様々なイベントにコールバックを紐付けることが慣れ親しんだ方法で簡単にできます。 注目すべき機能をほんの一部紹介します: ドラッグ & ドロップをサポート キー
mrubyのRakefileに定義されたタスクの依存関係をjsTreeで表示 - NO_WAIT_FOREVER
このところmrubyが気になっており、ソースを少しずつ読んでいます。 ビルドシステムがどうなっているか調べようとしたところ、なかなか複雑で すんなりとは読み進めることができませんでした。 特にmrbcが絡んだ部分のタスクの依存関係が読み取りにくかったため、 何らかの可視化手段を用いて簡略化できないかと考えました。 そこで、手軽さを求め、依存関係グラフをツリー構造に変換し、 JavaScriptライブラリjsTreeを用いてブラウザで表示してみました。 jsTreeによるツリー表示のサンプル 上のサンプルプログラムは"all"タスクが依存するタスク、それらが依存するタスクという風に再帰的に依存関係を表示しています。 いくつかのノードは別のノードへのリンクになっています。それらの多くはアーカイブファイル(*.a)のタスクです。 複数箇所から参照されるため、木構造で表現すると無駄が多くなります。
jstree
jsTree is jquery plugin, that provides interactive trees. It is absolutely free, open source and distributed under the MIT license. jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources and AJAX loading. jsTree functions properly in either box-model (content-box or border-box), can be loaded as an AMD module, and has a built in mobile theme for responsive des
「jQuery 2.x→jQuery 3.0」「jQuery 1.x→jQuery Compat 3.0」に。jQueryが新名称と新バージョンへ
「jQuery 2.x→jQuery 3.0」「jQuery 1.x→jQuery Compat 3.0」に。jQueryが新名称と新バージョンへ JavaScriptのライブラリとして人気のあるjQueryは現在、モダンブラウザのみサポートすることで、より小さく速く安定したjQuery 2.x系と、古いバージョンのWebブラウザを含む幅広いWebブラウザをサポートするjQuery 1.x系の2つが存在しています。 この2つのバージョン表記を、次のリリースから変更することが、jQueryのブログにポストされた記事「jQuery 3.0: The Next Generations」で発表されました。 バージョンは3.0に統一 現在のjQuery 1.9系とjQuery 2.0系は、前述のようにサポートするブラウザが異なるだけで、APIは基本的に互換性があります。 そこで、次のリリースからこの
近日リリース予定の「jQuery 3.0」は2種類のパッケージで提供
The jQuery Foundationは、JavaScriptライブラリjQueryの最新版として、バージョン1.11.1の後継となる「jQuery Compat 3.0」、バージョン2.1.1の後継となる「jQuery 3.0」をリリースすることを、公式ブログの10月29日（現地時間）付けの投稿で発表した。 jQueryは、WebブラウザのAPI互換性に対応すべく、2013年に互換性を最大限に重視したバージョン1.x系列と、Internet Explorer 8以前の古いブラウザをサポートしないバージョン2.x系列とに分かれている。 ただし、1.x系列と2.x系列では、内部実装こそ異なるものの、APIとしての動作は同じであり、それは「jQuery Compat 3.0」と「jQuery 3.0」でも引き継がれる。 なお、メインパッケージの「jQuery」は、最新バージョンおよび1つ前
5分でわかるVue.jsと、jQueryで頑張ってはいけない理由｜技術ブログ｜北海道札幌市・宮城県仙台市のVR・ゲーム・システム開発 インフィニットループ
5分でわかるVue.jsと、jQueryで頑張ってはいけない理由 先日の「OpenIL vol.2」にて「5分でわかるVue.js」というLTを発表しました。 【スライド有】インフィニットループ公開勉強会「OpenIL vol.2」開催レポート 前編 【スライド有】インフィニットループ公開勉強会「OpenIL vol.2」開催レポート 後編 この記事は、その時のLTの資料を元にブログ化したものです。 jQueryは頑張れば頑張るほど辛くなる jQuery、簡単に動きのあるサイトを作れてとても便利ですよね。 // 何か画面に反映する $(".hoge").html("変更したい内容"); // 変更時に何か処理して変更する $(".foo").on("change", function() { $(".bar").html("変更したい内容"); }); イベントを受け取って、色々と処理をし
初心者でも分かる！な、jQueryの「TOPへ戻るボタン」の作り方
ページをスクロールすると右下に出てくる「TOPへ戻るボタン」の作り方を、jQuery初心者にも分かるよう説明しています。
Yuna's Sandbox
Hello, I am Yuna. I love design and puzzles. I am a full-stack programmer. Being a software developer of web-based systems continues to fascinate me as much as it did ten years ago. I'm looking for a dynamic workplace, smart peers and an innovative product to contribute to. Get in touch Have a question about my projects, or want to suggest a new feature for traceit? Feel free to email me at: yunay
Interactive Photo Desk with jQuery and CSS3 | Codrops
In this little experiment we created an interactive photo desk that provides some “realistic” interaction possibilities for the user. The idea is to have some photos on a surface that […] In this little experiment we created an interactive photo desk that provides some “realistic” interaction possibilities for the user. The idea is to have some photos on a surface that can be dragged and dropped,
JavaScriptライブラリ「Wijmo（ウィジモ）」の便利なウィジェットを試す
はじめに Wijmo（ウィジモ）は、グレープシティがHTML/JavaScript環境に向けて提供しているJavaScriptライブラリです。WijmoはjQueryやjQuery UI、jQuery Mobileをベースに、WebサイトやWebアプリケーションで活用できる高機能で多様なウィジェット（UI部品）を利用者に提供します。 本記事ではWijmoが提供する40種類以上のウィジェットから、すぐに使い始められてWijmoの便利さを体感できるものという観点から以下のウィジェットを紹介します。 Dialogウィジェット（wijdialog）：ダイアログを表示 Calendarウィジェット（wijcalendar）：カレンダーを表示 LineChartウィジェット（wijlinechart）：折れ線グラフを表示 なお、本記事では基本的な機能を抜粋して紹介しています。機能の詳細やプロパティ・メ
ちょっとリッチな日付ピッカー「Rich Datepicker」:phpspot開発日誌
Rich Datepicker ちょっとリッチな日付ピッカー「Rich Datepicker」。 次のように月、年の入力も可能な日付ピッカー実装ができます。 素早く年月を考慮した入力を実施したい場合に使えそうですね 関連エントリ 変わったUIの日付＆時刻ピッカー実装jQueryプラグイン「DateTime Picker」 スクロールが使いやすいカレンダーピッカー実装jQueryプラグイン「continuous-calendar」 色の細かなカスタマイズが可能なスライド式カラーピッカー「jQuery Color Picker Sliders」
jQueryで、順番に実行が出来る .when() から .done() が便利だったのでメモ | ARAKAZE NOTE
JavascriptやjQueryを書いていると、「この処理がちゃんと終わってから、こっちの処理を始めたい！」って場面に結構遭遇するのではないかと思います。特にアニメーションを作っているときによくあるのではないでしょうか。 コールバック関数を設定出来る処理なら簡単なのですが、それがないものも結構あったりします。僕が困ったのは.html()や.ajax()でした。なんかいい解決策は無いかなーとググってみたところ.when().done()という処理の仕方が良さげだったので使ってみたらばっちりでした。 .when()には先に終わらせたい処理を書く ざっくりとした説明の仕方をすると、.when()には先に完了させたい処理をまとめて書いておきます。例えば、“横に移動したら、フェードアウトする”みたいな事をしたい場合、“横に移動したら”の部分を.when()の中には書きます。 （まあ、そんな簡単な動
Rails3の:remote=>trueでファイルをAjax送信する - なにげにブログしてます
:remote => trueってありますよね？ 簡単にリンクやフォームをAjax化できるRailsの機能なんですが． 例えば，こんな風に使います．*1 = link_to "Ajaxなリンク", root_path, :remote => true このリンクをクリックすると，root_pathへのリクエストをAjaxで取得*2し，取得した内容を実行します． ですがこの:remote => trueは，ファイルのアップロードには対応してません． マルチパートなフォームで，:remote => trueをしてもAjaxな送信になってくれないのです． これを解決してくれるGemを見つけたので紹介します． Remotipart:https://github.com/JangoSteve/remotipart 使い方は，READMEと同じですが，まずGemをインストールするためGemfileに記
テキストエリアを自動的にリサイズしてくれる「Autosize」
「Autosize」は、テキストエリアのサイズを入力文字数によって自動的に変更してくれるjQueryプラグインです。標準では、枠を超える文字数を入力するとスクロールバーが表示されますが、かわりに建増ししてくれます。 ダウンロード CDN スクリプト <script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.autosize.js" type="text/javascript"></script> 実装 <textarea id="text1018"></textarea> <script type="text/javascript"> $(document).ready(function(){ $('textarea').autosize({ // append: "\n" // 内部に
input要素に入力パターンを組み込めるjQueryプラグイン・formatter.js
地味に便利そうだったのでメモ。input要素に入力パターンを組み込める、というスクリプトです。jQueryに依存しています。ユーザーの入力の補助によさそう。 input要素に入力パターンを組み込めるスクリプトです。 クレカや電話番号などの数字の入力項目に良さそうですね。 $('#foo').formatter({ 'pattern': '{{9999}}-{{9999}}-{{9999}}-{{9999}}' });上記のように予めパターンを作成しておきます。 <input type="text" class="input" id="foo" maxlength="19" pattern="\d*">あとは指定したセレクタでマークアップすればパターンが適応されます。クレカ等なら、制作側はいちいち4つのinput要素を用意し、レイアウトする手間が省けて、ユーザーも別のinput要素に移動する
[JS]ボタンのクリック時にちょっと音をつけたい時に、イベントにサウンドを割り当てるスクリプト -Ion.Sound
ボタンをクリックした時に軽快な音をつけるなど、ページ上のさまざまなイベントにサウンドを割り当てることができるjQueryのプラグインを紹介します。 Ion.Sound Ion.Soundのデモ Ion.Soundの使い方 Ion.Soundのデモ デモはデスクトップはChrome, Firefox, Opera, Safari, IE9+、スマフォの各ブラウザにも対応しています。 デモではあらかじめダウンロードファイルに含まれている15のサウンドをボタンクリックで楽しむことができます。 デモ（14/15）のキャプチャ Ion.Soundの使い方 Step 1: 外部ファイル </body>の上あたりにjquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jque
toggle( fn1, fn2[, fn3, fn4, ･･･] ) - jQuery API 日本語リファレンス
jQuery API の toggle( fn1, fn2[, fn3, fn4, ･･･] ) は、クリックイベントに複数のイベントハンドラを順番にバインドしたいときに便利なメソッドだ。 要素をクルックする度に、toggle( fn1, fn2[, fn3, fn4, ･･･] ) の引数に指定したイベントハンドラを順番に呼び出すことができる。 「jQuery Version 1.8」で非推奨になった。 「jQuery Version 1.9」で廃止された。 記述方法
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - twitter/typeahead.js: typeahead.js is a fast and fully-featured autocomplete library
http://daily.d3js.info/?p=296