選択子を絞りこむ為に多段連動するドロップダウンリストのJavascript。 → サンプル ポイントは… optgroupでグルーピングしておくこと。 使い方 ライブラリ（ConnectedSelect.js）の読み込み <script type="text/javascript" src="ConnectedSelect.js"></script>連動するselectにidを付ける。 親にあたるoptionのvalueと 子にあたるoptgroupのlabelを対応させておく。 <select id="SEL1"> <option value="XXX">XXX</option> <option value="YYY">YYY</option> </select> <select id="SEL2"> <optgroup label="XXX"> <option value="x1">x
jqueryでhtmlを書き換える方法はいろいろとあります。 テキストを書き換える方法 $("セレクター").text("書き換え"); 例えば、フリーランスをデザイナーに書き換える <p class="text">フリーランス</p> jqueryのタグは $("p.text").text("デザイナー"); すると <p class="text">デザイナー</p> になります。 htmlタグごと書き換える方法 $("セレクター").html("書き換え"); 例えば、pタグのフリーランスをh3タグのデザイナーに変更します。 <p class="text">フリーランス</p> jqueryのタグは $("p.text").html("<h3>デザイナー</h3>"); すると <h3>デザイナー</h3> にかわります。 htmlの追加 指定した要素内部の先頭に追加する方法 $("セ
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近友人と『中学生円山』を観に行きました。 女性にはおそらく理解できないであろう「男子中学生あるある（主に下ネタ）」が盛り込まれていて、いい意味でヒドイ内容でした。もう一回観たい（´ω`） さて、今回は「HTMLとCSSはわかるけどjQueryってなにそれ、おいしいの」という方向けに、今日から使える簡単かつ便利な3つのメソッド「slideToggle／fadeToggle／toggleClass」をご紹介します。 こいつらを知っとくと下記のようなメリットがあります。。 アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」とか実装できる 超シンプルな記述なので、今日から使える いやーこれは便利ですね。 というわけで、早速解説していきます。 【こちらもおすすめ】 超簡単jQ
ステップ形式の入力フォームをjQueryで擬似的に実装するプラグインをつくりました。 → multi-step-form.js 動作サンプル マルチステップのみのデフォルト指定 エラーチェックを有効化 ajaxZip3も使ってみるサンプル こんな感じで動きます。 開発の経緯 会員登録とかフィードバックとかで入力フォームがどうしても長くなる時ってありますよね？ 長くてユーザーが入力する気がなくなってしまいそう…。でも絶対必要な項目だし。 そんな時には入力フォームをステップで分けて段階的に入力させれば、面倒な気持ちがちょっと和らぐかもしれません。でも、現行のPHPやCGIとかを触るのは結構たいへんなので、ここは簡易的にJavaScriptでやっちゃおう。ということです。 主な仕様 特定のIDの子要素から自動的に段階的に表示 自動生成のプログレスバーによるステップ数、進捗の表示 入力内容のチェッ
[対象: 中〜上級] 僕のブログではてブ数がいちばん多いのはウェブページを高速化するTIPSを解説した記事です（まだ読んでない人はぜひ読んでください！）。 その記事では高速化全般を扱っていましたが、今日の記事ではJavaScriptに的を絞って表示速度をスピードアップできる施策を6つ紹介します。 もともとはSearch Engine PeopleブログのOptimizing JavaScript for Better Web Performanceで説明されていたものです。 記事作者のJoydeep Deb（ジョイディープ・デブ）氏に僕のブログでの転載許可をもらえました (Thanks, Joydeep!)。 逐一の翻訳ではなく、書かれている内容をもとに僕の言葉で解説していきます。 1. HTTPリクエスト削減のためにJavaScriptファイルを1つに統合する ウェブページの表示を高速化
人気記事ランキング div要素にして画像もテキストもリンクもまとめてスライドさせる「jQuery Slider2」 105.2k件のビュー 高機能過ぎるjQueryスライドショー「Camera slideshow」 74.9k件のビュー ページをめくり効果が美しい。雑誌や本のようにページをめくれるjQueryプラグイン「turn.js」 72.4k件のビュー シンプルなサムネイル画像つきスライダーjQueryプラグイン「AD Gallery」 68.2k件のビュー ルーレット風なものが作れるjQueryプラグイン「Roulette.js 」 43.1k件のビュー クリックすると横からメニューが現れるjQueryプラグイン『Sidr』 40.5k件のビュー レスポンシブでふわっと表示されるドロップダウンメニューを実装する「Responsive Multi-Level Menu」 38.9k件
以前、この「bxSlider」プラグインについて説明をさせて頂いたのですが、 最近バージョンアップされ、機能もパワーアップされてました。 サイト自体もリニューアルされ、今風になっていました。 それに伴い、今回新しく記事にすることにしました。 以前の記事は以下になります。 コンテンツスライダー、カルーセルスライダーにもなるjQueryプラグイン「bxSlider」 今回のバージョンアップした点は以下になります。 ・レスポンシブに対応 ・スワイプが可能（スマートフォン） ・cssが付いているので、cssの設定が楽になった ・コントロールの画像等も付いている ・カルーセルの設定も変更に(プラグインで設定する) 今回もDEMOを作成しましたが、 レスポンシブになった箇所以外は、あまり以前のと変わってはいません。 DEMO それでは簡単にではありますが、使い方です。 bxSlider
webサイトのメインビジュアルやバナーの箇所で使われる便利なプラグインを紹介します。 プラグインのダウンロードはこちらから jQuery content slider carousel image slideshow | bxSlider こちらのいいところはカルーセルスライダーになったり、コンテンツスライダーになったり、どちらでも使用できる所です。 まずはDEMOをご覧下さい DEMO 基本的な使い方としては、 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type='text/javascript' src='js/jquery.bxSlider.js'></script> を読み込み、head部
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
Let’s say you have a bunch of images you want to display, and the goal is to get them edge-to-edge on the browser window with no gaps. Just because you think that would be cool. They are of all different sizes. You don’t care if they are resized, but they should maintain their aspect ratio. Like this: Nice and seamless Ideally we keep it pretty chill on the markup, like: <section id="photos"> <img
選択しているのが2つかどうか Validettaは、以下の項目がチェックできます。 データが空かどうか。 電子メールのチェック。 数字のチェック。 クレジットカード番号のチェック。 フィールド内の文字数のチェック。 チェックボックスやセレクトボックスの選択数のチェック。 2つのフィールドが同じかどうか。 正規表現を使ったフィールドのチェック。 Validettaの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="validetta/validetta.css" rel="stylesheet" type="text/css" media="screen" > <script type="text/javascript" src="http://code.jquery.com/jquery-late
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
