サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
jQueryのpropメソッドとattrメソッド このエントリーはjQuery Advent Calendar 2013の 4日目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。) jQueryのattrメソッドの仕様がjQuery 1.9から変わったのでpropメソッドと含めて現在の仕様の解説を行ないます。 次のスクリプトではattrメソッドとpropメソッドでチェックボックスの状態を監視して取得しています。 $("input").change(function(){ alert("attr:"+$(this).attr("checked")+"\n"+"prop:"+$(this).prop("checked")) }); この挙動をjQuery 1.10.2とjQuery 1.8.3で比較してみまし
attr使ったら動きが変だった attrじゃないかと思って作ったら、何か変。 attr('checked','')ではなく、removeAttr('checked')を使えばおk どうやらprop使えばいいらしい。 でもpropのが楽に書ける 詳しくはCSSは分かるけどjQueryは苦手……という人が .attr()と .prop()に親しんでくれるといいなーと思って書きました。｜Ginpen.comで。 チェックされているかどうかという判定には .prop()を使う必要があります。HTMLに書いた属性の値を扱いたいときは .attr()を、いかにもJavaScript的な事をする時は .prop() デモ こんな感じで使えばおkだと思う。 <div class="allCheck"> <input type="checkbox" id="allCheck01"><label for="
初心者向けの本とかだと、イベントを jQuery オブジェクトの後に直接指定する、 $('.foo').click(); のような書き方で説明されている場合が多いけど、少し複雑なことをしようとするとそれだと困ることが出てきます。そんなときに便利なのが on() を使ったイベント設定です。 on() ひとつで bind() live() delegate() を表せる jQuery 1.7 で、bind() live() delegate() がすべて on() に統合されたそうです。 つまり on() の書き方によって、3 パターンの使い方ができるということです。 .foo という要素をクリックしたら何かするという例で、イベントの設定と削除の方法をそれぞれ書いてみます。 bind() $('.foo').bind('click', function(){...}); は $('.foo')
ネットショップや情報サイトなど、複雑な階層構造のWebサイトでは、なるべく分かりやすくて見栄えのいいナビゲーションを設置したい、というニーズがあります。今回は、jQueryプラグインのひとつ、「Treeview」を使って、リストをツリー風に格好よく表示する方法を紹介しましょう。ui／li要素をツリー表示する「Treeview」 Treeviewプラグインは、HTMLのul／li要素でマークアップしたリストをツリー風に表示するJavaScriptです。要素をクリックで開閉したり、Windowsのエクスプローラのようなフォルダ／ファイルアイコンを表示したりと、いろいろカスタマイズできるのが特徴です。開発者はJorn Zaefferer氏（Jornの「o」の上に点が2つ付きます）で、MITライセンスで公開されています。 Treeviewプラグインは、以下のページで配布されています。ページの先頭
jQueryやjQueryUI、CSS3を用いた、アコーディオンパネル (Accordion Panel, アコーディオンメニューとも呼ばれる) の作成について、勉強していきます。 アコーディオンパネルはラベルを選択すると、それに合わせてパネルがスライドする仕組みの事を言います。 説明を聞くより、実際に目にした方がすぐに理解できます。 jQueryの導入に関しては、「フローティングメニュー作成の2つの方法」で説明したので、もし導入の方法が分からなければ、そちらを参照してください。 後、注意書きをしておくとHTMLやjavascript、CSSに関する知識をある程度持っていることを前提とさせていただきますので、よろしくお願いします。 知識が無くても何となくは分かるかもしれませんが、理解するのは少し厳しいかもしれませんので、その事はご了承ください。 jQueryのみを用いたアコーディオンパネ
JQUERYでDatepickerで入力補助をするときの手順 今回は同一ページの複数のテキストフィールドにカレンダーを表示できるようにする http://jqueryui.com/themeroller/ の「Gallery」タブからカレンダーのデザインテンプレートを選ぶ。 「Roll Your Own」タブで細かいデザイン設定。 「download」ボタンを押してダウンロードする内容を選択。 今回は[Core]と[Datepicker]のみを選択。 現時点での最高バージョンの1.8.6を選択して「ダウンロード」ボタンを押してダウンロード。 最低限必要なファイルは ■JSファイル ・jquery-ui-1.8.6.custom¥js¥jquery-1.4.2.min.js ・jquery-ui-1.8.6.custom¥js¥jquery-ui-1.8.6.custom.min.js ・¥
日付入力、カレンダー入力をしたいときは jquery.ui.datepicker.js。 では、年月入力ができる機能が欲しいときはどうしましょう。 → jquery.ui.ympicker.js デモ 今回は、jquery.ui.datepicker.jsを 改造して作る例をご紹介します。 元が jquery.ui.datepicker.js なので、オプションなどもほぼそのまま、動きもだいたい似ています。 名づけて jquery.ui.ympicker.js。 以下、調理方法です。 １、材料 jqueryuiのダウンロードページから一式ダウンロードする。 ダウンロードしたzipファイルを解凍し、中身から、開発用の元のソース（development-bundle/ui/jquery.ui.datepicker.js）を使う。 ２、名前を変更する お好みの名前にしていただいてよいですが、ここ
自作のjQueryスクリプトをプラグイン化しよう 自作したjQueryコードは作成した本人なら簡単にパラメーターの調整などを行いカスタマイズできると思いますが、Webに公開して他の人に使用してもらう場合はなかなかむずかしかったりしますよね。 そこでプラグイン化をすることで誰でも簡単に扱えるようにしてみましょう。 投稿日2011年06月13日 更新日2011年06月13日 外部ファイル化 たとえば「#hide-btn」をクリックすると「#view」がフェードアウトして消えるという簡単なスクリプトがあります。 jQuery script $(function() { $('#hide-btn').click(function(){ $('#view').fadeOut(1000); }); }); まずは外部ファイル化しましょう。 jQueryプラグインは「jquery.プラグイン名.js」と
タイトルバーとコンテツ領域を持ったダイアログです。 このダイアログは次のような機能を提供します。 マウスドラッグで移動 ダイアログのサイズを、マウスドラッグで変更 [☓]アイコンをクリックして、ダイアログを閉じる コンテンツ量に応じて、自動的にスクロールバーを表示 下部のボタンバーと、モーダル機能をオプションで設定可能 次のようにして、ダイアログを呼び出します。 <div id="dialog" title="ダイアログのタイトル">ダイアログの内容</div> <script> $( "#dialog" ).dialog( "open" ); </script> すぐにダイアログを表示したくない場合は、下記のようにautoOpen:falseを指定します。 <button id="opener">ダイアログを開く</button> <div id="dialog" title="ダイアロ
フォーム入力で日付を扱うことあると思いますが、数字だけの割にはいろいろと制御が面倒な部分でもあります。 入力フォーマット、年・月・日の制御など、作る側としてはかなり見えない部分の仕事が増えます。 入力するユーザの立場としても、フォームがドーンとあっただけでは入力に迷いますし、こういう局面ではカレンダーなどで曜日や日にち間隔を確認しますよね。 この両者の不便さを解消する方法として、jQueryのプラグインである「jQueryUI」の１機能、「Datepicker」で解消できます。 Datepickerを使用することで、フォームへの日付入力の際、カレンダーを表示して入力補助をするインターフェースを、簡単に実装できます。 jQueryを用意するjQueryUIはjQueryのプラグインであるため、jQuery本体が必要となります。 jQuery本体の準備は以前「「CrossSlide」写真や
Tabs are generally used tobreak content into multiple sections that can be swapped to save space, much like an accordion. Tabs have a particular set of markup that must be used in order for them to work properly: The tabs themselves must be in either an ordered (<ol>) or unordered (<ul>) list Each tab "title" must be inside of a listitem (<li>) and wrapped by an anchor (<a>) with an href attribu
jQuery内部で下記のようなことをしているので、できるでしょうと思いつつ試してみた。 できた。 当たり前か・・・。 var jQuery = window.jQuery = function( selector, context ) {・・・・ ■親画面 <script type="text/javascript"> var mode = 0; ( function($) { $.testFunc = function(val){ alert(val); } })(jQuery); </script> ■子画面 <script type="text/javascript"> $(document).ready(function() { $('#operate').click(function(){ //window.openerで親画面のwindowオブジェクトを取得してメソッドにアクセ
はじめに この記事は、JavaScript Advent Calendar 2011 (Node.js/WebSocketsコース) の 11 日目の記事です。 Node.jsを最初に見たときの印象は、「これで簡単なWebアプリケーションをサクサク作れそう！」というものでした。スレッドではなくイベントループで、リアルタイムなWebアプリケーションの開発を容易するという特徴があるのですが、何よりも、javascriptで簡単にプロトタイプできそうという点が気に入りました。 #もともとGateway屋さんなので、イベントループで、ステートマシン的なプログラムの方が親しみがあったという点もあるかもしれません。 そこで本記事では、Node.js+jQuery Mobile+MongoDBを使ってシンプルなCRUDアプリケーションを作ってみようと思います。作るアプリケーションはMemoアプリで、今回
複数画面で使えるAjax formダイアログのコンポーネントを作る 初期状態Google CalendarのようなWebアプリを想像してください。 1日が1個のセルになっていて、セルをクリックしたらスケジュール登録ダイアログが表示され、 入力して登録ボタンを押すとスケジュールが登録され、セルの中に登録されたスケジュールが表示されます。 イメージ define([ 'schedule-model' ,'schedule-api' ,'schedule-to-selectors' ,'growl' ,'app/schedule-dialog-template' ,'debug' ,'jqueryui/dialog' ],function( ScheduleModel ,ScheduleApi ,scheduleToSelectors ,growl ,scheduleDialogTemplat
SURGAVIP # Link Slot Pragmatic Gacor Malam Ini Modal Kecil Janji Maxwin Sekarang ! Selamat datang di SURGAVIP situs slot terpercaya dari server PG Soft ternama,banyak jenis permainan slot gacor dan mudah menang maxwin disini bersama surgavip. main dengan modal receh pulang dengan uang berlimpah. SURGAVIP dikenal sebagai situs terpercaya dengan koleksi lengkap game dari pg oft, provider yang udah
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
