jQuery(183)

183follower
harada さんのアバター 7,018views

フォームにテキストを入力してリアルタイムに表示を絞り込む

オープンソースAMIのように、フォームにテキストを入力してリアルタイムに表示を絞り込む方法です。 サンプルはこちら。 事前準備 jQueryを読み込んでおきます。 <script type="text/javascript" s... 2014年10月3日
nbeppu さんのアバター 619views

Java の Comet でサーバープッシュを行う(2)

Java の Comet でサーバープッシュを行う(1)のつづき。 次に、プッシュの方法については、Java 側では以下のように MessageSender にメッセージを受け渡します。 ServletContext ser... 2014年10月2日
@iwasaki さんのアバター 888views

jQuery JSONViewを使ってJSONを見やすくする

JSONを画面上にそのまま表示しても、見づらいですよね。 http://tokyometroapp.herokuapp.com/api/TrainInformation そこでこのJSONを取ってきて多少見栄えを良くしてみます。 今回... 2014年9月19日
goto_jp さんのアバター 8,004views

「bxSlider」で画像が一度に出てしまう際の対処

前回レスポンシブ対応のスライダーを生成する「bxSlider」を紹介しましたが、スマホなど回線や描画が遅い環境で開くと、JavaScriptでスライダー化される前にリストの画像が一気にボボンと出てしまい見た目に悪かったので、CSSレベルで対... 2014年9月19日
goto_jp さんのアバター 1,803views

レスポンシブ&スワイプ操作に対応したスライダーjQueryプラグイン「bxSlider」

PCでは無限スライダー表示、スマホではスワイプ操作に対応したスライダーになってくれる「bxSlider」は、非常に簡単にサイトへ加えられます。 ファイルの読み込み <script src="//ajax.googleapis.... 2014年9月19日
goto_jp さんのアバター 1,936views

jQuery:アコーディオンメニュー改訂版

See the Pen jquery accordion menu by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. jQueryでアコーディオンメニューを作る 以前作った上記アコーディオ... 2014年9月5日
harada さんのアバター 202views

jQueryを利用して特定のIDで括られた要素を非表示にする

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript"> ... 2014年8月11日
Yukimi Sato さんのアバター 863views

jQueryを使わずにタブ切り替えをjsで実装のタブCSS

jQueryを使わずにタブ切り替えをjsで実装する のタブ部分のcss指定になります。 selected付与時はタブがハイライトになるようにしてあります。 #tab{ padding: 0 10px; border-b... 2014年7月28日
Yukimi Sato さんのアバター 365views

検索ボックスにフォーカスしたら括っているDIVの枠線の色を変える

<div class="search"> <form> <input type="text" class="searchText" value=&qu... 2014年6月25日
goto_jp さんのアバター 17,168views

jQuery:スクロールするレイヤー内で指定位置までスクロールさせる

サンプルはこちら。 See the Pen nBidH by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. ページを開いた時点で「Caption 4」を表示するようにしており、上にあるリンク... 2014年6月18日
goto_jp さんのアバター 545views

jQuery:イージング(Easing)でアニメーション表現を高める

サンプルはこちら。 See the Pen nvlBb by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. ボタンを押すことでそれぞれのイージングタイプに応じた動作を上のバーに反映させます。... 2014年6月17日
goto_jp さんのアバター 1,502views

jQuery:格納・展開できるメニュー

サンプルはこちら。 See the Pen oqkLj by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. メニュー下の「narrow」をクリックすることでメニューの格納・展開ができます。 ... 2014年6月12日
goto_jp さんのアバター 6,892views

jQuery:一定の位置までスクロールしたらメニューをfixedさせる

サンプルはこちら。 See the Pen xqhkg by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 左のメニューが画面上部に来た時点でposition:fixedになり、画面内に常に... 2014年6月11日
Yukimi Sato さんのアバター 612views

jqueryの「.slideToggle」を使ってクリックで表示/非表示を行う

$('#btn').on('click', function () { $("#openArea").slideToggle(); }); <a id="bt... 2014年6月11日
goto_jp さんのアバター 914views

jQueryUI:「input type=number」を擬似的に作る

サンプルはこちら。 See the Pen Eurik by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 数値入力欄の右の上下ボタンより一定の数値を増減させられます。 HTML5からの「... 2014年6月9日
goto_jp さんのアバター 962views

jQueryUI:階層メニューUIをつくる

サンプルはこちら See the Pen xdJEr by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. リストから階層メニューを簡単に作れます。 JavaScript $(functi... 2014年6月6日
goto_jp さんのアバター 1,104views

jQueryUI:ラジオボタンをボタンセットにする

サンプルはこちら See the Pen lBpku by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. HTML <div class="group"> ... 2014年6月6日
goto_jp さんのアバター 773views

jQueryUI:ツールチップを表示させる

サンプルはこちら。 See the Pen vuaif by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. カーソルを置いた際にツールチップを表示させます。注釈や説明の表示に役立ちます。 ... 2014年6月5日
goto_jp さんのアバター 888views

jQueryUI:入力欄にオートコンプリート(入力補助)機能をつける

サンプルはこちら。 See the Pen fkoxL by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. a~bで始まるいくつかの単語を候補に入れています。jQueryUIでこのようなオー... 2014年6月5日
goto_jp さんのアバター 549views

jQueryUI:アコーディオンUIの生成

サンプルはこちら。 See the Pen fGysD by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. jQueryUIでアコーディオンUIを簡単に作ることができます。jQueryUIの... 2014年6月4日