<div class="accordion_one"> <div class="accordion_header">アコーディオン、シンプル版 <div class="i_box"><i class="one_i"></i></div> </div> <div class="accordion_inner"> <div class="box_one"> <p class="txt_a_ac">アコーディオンの中身です。</p> </div> </div> </div> $(function(){ //.accordion_oneの中の.accordion_headerがクリックされたら $('.s_01 .accordion_one .accordion_header').click(function(){ //クリックされた.accordion_oneの中の.accordion_head
HTMLソース <input id="ac-check1" class="ac-check" type="checkbox"> <label class="ac-label" for="ac-check1">アコーディオン1</label> <div class="ac-content"> <p>内容が入ります。</p> </div> <input id="ac-check2" class="ac-check" type="checkbox"> <label class="ac-label" for="ac-check2">アコーディオン2</label> <div class="ac-content"> <p>内容が入ります。</p> </div> <input id="ac-check3" class="ac-check" type="checkbox"> <label class="
jQueryを使わずにスライドメニューを実装しようスマートフォンのアプリやモバイルサイズのWebサイトでよく見かけるスライドメニュー。どうも「jQueryがないと実装できない」と思っている人がちょこちょこいるようなので、簡単なJavaScriptで実装できるんだよーというのを記事にしてみます。 このようにボタンをクリックすると横からひゅるっと出てくるメニューを作っていきます。 1. メニューを開いた状態を作成まずは HTML と CSS で「Menu」ボタンをクリックしてメニューが開いている状態を作成します。メニュー部分は position: absolute; で位置を指定しています。また、メニュー項目に white-space: nowrap; を加えることで、スライドさせた時に日本語が変に改行されるのを防ぎます。それ以外は色や線、余白の指定などで、特に変わったことはしていません。 H
// Hi! // // ... } }, after: { argOrder: ['content'], argTypes: { content: 'string | HTMLElement | femtoJS' }, desc: 'If content is a' + ' string, append that HTML' + ' after the end of the elements. If' + ' it\'s a HTMLElement,' + ' append that element after the end of' + ' the elements. If it\'s a' + ' femtoJS object, append' + ' everything in its selection after the' + ' end of the elements.' +
femtoJSはjQueryライクな構文でDOM操作を行うために開発された超軽量JavaScript(ES6)ライブラリです。たった20行、圧縮すると0.4kb程度のライブラリで、以下のように概ねjQueryと同じ書き方で使う事が出来ます。 $("div").css("background-color:green;").html("Hello World").addClass("new"); 同じく$を使うのでjQueryと併用するとコンフリクトを起こす事になります。DOM操作だけでjQueryを使っている場合はこのような代替ライブラリが軽くてパフォーマンスも向上しそうですね。使えるメソッドは16種ほどしかありませんが十分需要はありそうです。ライセンスはMIT。 femtoJS
世の中にはたくさんのスライダープラグインがありますが、今回はレスポンシブ・タッチデバイスに対応、オプション設定も豊富なスライダープラグイン「slick」の使い方を詳しく解説していきます。 slickの機能概要 レスポンシブ対応 ブレークポイントごとに別々の設定が可能 スワイプ・マウスドラッグ可能 無限ループ スライドの追加、削除、フィルタリング、除外など 導入 ファイルのダウンロード まずは公式サイトからファイルをダウンロードします。 slick または、以前紹介した「jsDelivr」というサイトにもCDNでホストされています。 （ちなみに2017年11月時点ではslickが1位です。） jsDelivrの使い方はこちらの記事をチェックしてみてください。
Webに限りませんが、業務システムで常に問題になるのが印刷です。多くの場合、PDFを生成して印刷しますが、それもコードが難解で分かりづらくなってしまいます。 今回はWebシステムにおいて使える印刷ライブラリを紹介します。印刷機能をより便利に、使いやすいものにしてくれることでしょう。 Print.js 表示されているHTMLではなく、全く異なるコンテンツを印刷できます。PDFを印刷したり、画像一つだけを印刷すると言ったこともできます。テキストを追加することも可能です。 Print.js – Javascript library for HTML elements, PDF and image files printing. Gutenberg 印刷をより細かく制御するためのCSSを提供しています。クラスを使って指定することで、文字の大きさや改ページなどを決まった場所で行えるようになります。よ
Webサイトの印刷機能をつくるのに最も手軽なjQueryプラグインjPrintAreaを使ってみたのでメモ。 photo credit: driek via photopin cc サマリー １．指定範囲を簡単に印刷するjQueryプラグインjPrintArea.jsとは ２．使ってみる ３．感想 １．指定範囲を簡単に印刷するjQueryプラグインjPrintArea.jsとは jQuery.jPrintArea.jsは、少しコードを書き足すだけで指定範囲のみを印刷できるというお手軽プラグインです。 Web界隈では何年も前から「簡単で便利」と評されながら、本家サイトからもかなり前から姿を消している貴重なプラグインである模様。手軽さゆえに重宝されていたのか、本家サイトから消えた後も、いくつかのブログにコードが載せてあるのも見かけたが、試してみると動くものがなかなかない。下記はちゃんと動きます
Result 選択したファイルの名前、サイズ、コンテンツタイプをリストにしてアップロード前に表示します。inputにmultiple入れてますので複数選択も可能です。 jQuery $("#foo").on('click', function () { $("#bar").empty(); var fp = $("#hoge"); var lg = fp[0] .files.length; var items = fp[0].files; var fragment = ""; if (lg > 0) { for (var i = 0; i < lg; i++) { var fileName = items[i].name; // ファイル名を取得 var fileSize = items[i].size; // ファイルサイズを取得 var fileType = items[i].type
さてさて、最近JavaScript業界では特にReact, Angular, Vueの３大フレームワークの登場でコーディングの基本構造が根本から変わってしまった感があります。 やはりこれらのフレームワークが人気となったのは、それまでJavaScriptでメインとされてきたｊQueryなかった、「実行ルールを決める」というコーディング形式が開発者に受け入れられたのだと考えています。 ただ、そうはいっても元々jQeuryも素晴らしいフレームワークであることは間違いなく、その結果ウェブ上には数え切れないほどのｊQueryプラグインが存在していることも事実です。そのため、無理に新しいフレームワークを使うよりｊQueryプラグインを利用するほうが開発効率が上がるケースもあったりします。 そこで！ 今回は、私がメインで開発に使っているVueとｊQuery（プラグイン）を連携させる方法を紹介することにし
最近ではTHETAやGoProなどのカメラを使って、360度見渡せる写真を撮影することが簡単になり、Webサイト上にも360度の写真を掲載するコンテンツを見かけるようになりました。 室内の様子やきれいな風景など、ユーザーが自ら画面を操作して360度の世界を見渡せることで、Webサイト上で今までとは違った体験ができ、臨場感のある世界観を表現することができます。 そんな360度写真を複数枚並べたスライドギャラリーをjQueryを使って作成する方法を紹介してみます。 「jQueryで360度写真を使ったスライドギャラリーを作成する方法」サンプルを別枠で表示 360度ビューの部分の動作については、「Pannellum」プラグインを使用させていただいてます。 【プラグイン】Pannellum 画面上の360度ビューアー上をドラッグすることで、写真を360度の方向に回転させることができるほか、マウスホ
jQueryのslideToggleを使った、クリックで開閉するアコーディオンメニュー(開閉パネル)を、8種類実装しました。 クリックしたときに開いたままにしておくものや、マウスオーバー時にスタイルを変える、開いたアコーディオンメニュー以外は自動で閉じる、最初から開いておく、閉じるボタンで閉じる、多階層のアコーディオンメニュー、アンカーリンクをクリックで、スクロール＆該当アコーディオンメニューの開閉などのサンプルです。 ナビゲーションメニュー関連記事cssで要素を上下左右に中央寄せするサンプル スクロールしてもコンテンツの範囲内を固定されて追従するサイドメニューの作り方【jQuery】 スマホでスクロールできちゃう!横からスライドして出てくるドロワーメニューのサンプル【jQuery】 jQueryとcssでハンバーガーメニューの開閉ボタンをアニメーション付きで変化させる cssで作る、横並
要素にclassを加えたり、変更したり、要素を削除したり、::beforeや::afterを加えたり、要素の表示位置を取得したり、変更したり、クリックやホバーのイベントを設定したり、基本的なDOM操作を実行するためだけに開発された超軽量ライブラリを紹介します。 jQueryは使うけど、$関数や上記の挙動しか利用しないという人には、特にぴったりなスクリプトです。 nanoJS nanoJS -GitHub nanoJSの特徴 nanoJSのデモ nanoJSの使い方 nanoJSの特徴 トータル100行、0.6kBの超軽量スクリプト。 jQueryに似た構文が利用でき、オブジェクトの連鎖的もサポート。 それぞれのメソッドは単独で機能するため、削除・追加することも可能。 IE9対応（addClass, removeClass, toggleClassのみ非対応）。 nanoJSのデモ ドキュメ
nanoJS is around 100 lines of code (0.6 Kb compressed) JavaScript library for basic DOM manipulation. It has jQuery like syntax and supports chaining. Because is so small and simple you can add or remove methods directly in the library, meaning is very customizable. All methods are unrelated so removing one will not affect the library in any way (except each method). Use this library as starting p
ページ内のアンカーやページの上部にアニメーションで、スムーズにスクロールさせるCSS、単体のJavaScript、Vue.jsやjQueryのプラグインを紹介します。 現在では、CSSだけでも実装できるようになりました。IEは例のごとく非対応ですが、ポリフィルがあるので利用できます。 イラスト: Girls Design Materials CSSでページをアニメーションでスクロールさせる JavaScript単体でページをアニメーションでスクロールさせる プラグインでページをアニメーションでスクロールさせる CSSでページをアニメーションでスクロールさせる CSSのプロパティ「Scroll-behavior」を使用すると、アニメーションを使用してスムーズにスクロールさせることができます。 Scroll-behaviorのサポートブラウザ scroll-behavior -MDN web
会員登録などの入力フォームでメールアドレスの登録ミスをしないように、メールアドレスの入力欄を入力用、確認用と2つ設けて入力をしてもらうことがあり、この2つの入力欄にメールアドレスを正確に入力してもらうために入力フォーム内でのコピー＆ペーストができないようにする仕様がよくあります。 このUIの良し悪しは別として、そのような入力フォーム内でのコピー＆ペーストの制御について、jQueryを使って簡単に実装する方法を紹介します。 「jQueryで入力フォームのコピー＆ペーストを禁止する」サンプルを別枠で表示 サンプル画面では2つの入力フォームを設けて、一つ目のフォームで入力したものをコピー及びカットする動作を禁止させ、二つ目のフォームでは入力する際のペースト（貼り付け）の動作を禁止しています。 この入力フォーム制御の全体構成についてまずはHTMLから。 ◆HTML <ul> <li>メールアドレス
どうも藤原です。今年のGWは神がかってますね。弊社は5月1日が創立記念日ですので、 4月最終週は (^-^)です。 本日は 画像の Exif 情報を取得する Exif.js をご紹介いたします。 背景 input 要素に画像を添付した時に FileReader を使ってプレビュー表示していたんですが、 スマホで行うと撮影した画像とプレビューしてる画像の回転があってないことありますよね。 原因はExif (wiki)の回転情報です。 PHPで回転を戻して保存したりすることはあったのですが、JSでプレビューしているときも(POST前)正しく表示したいということです。 抜き出すには結構手間な作業必要なのですが、そんな時見つけたのがExif.jsです。 これで簡単に回転を取得できるようになります。 サンプル htmlは以下で、プレビュー自体の実装方法は input の label に対して bac
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く