一昔前だとスクロールバーのデザインモックを見ただけで吐きそうになっていましたが、 今では便利なプラグインとCSS3といった技術を用いて比較的容易に実装できるようになりました。 本記事では、超軽量スクリプト Perfect Scrollbarを用いたデザイン性に富んだスクロールバーの実装方法を紹介したいと思います。 Perfect Scrollbarについて Perfect Scrollbarについては、3年くらい前にcoliss様のサイトで紹介されていますので そちらをご参照ください。 http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-perfect-scrollbar.html ダウンロードはこちら perfect-scrollbar 実装方法 準備するもの jQuery Perfec
$(function() { $('input[type=file]').after('<span></span>'); // アップロードするファイルを選択 $('input[type=file]').change(function() { var file = $(this).prop('files')[0]; // 画像以外は処理を停止 if (! file.type.match('image.*')) { // クリア $(this).val(''); $('span').html(''); return; } // 画像表示 var reader = new FileReader(); reader. { var img_src = $('<img>').attr('src', reader.result); $('span').html(i
……あら、いらっしゃい。 若いお客さんなんて珍しいわねえ。昔は、この街一番の人気店でね、若いお客さんもたくさんいたんだけどさ。最近はめっきり減っちゃってね。 何飲む？ ……水割り？ わかったわ。 じゃあさ、ちょっとだけ、あたしの昔話に付き合ってもらってもいいかしら。 What is jQuery? この店――『jQuery』がオープンしたのって、2006年なんだけどさ。その頃の、この街の様子って覚えてる？ ……知らないか。あなた、まだ若いもんね。その頃って、そりゃあヒドイもんだったのよ。 その頃、シェア率トップだったブラウザって、もちろんInternet Explorerだったんだけど。当時はバージョン7が登場したばかりで、あの悪名高きIE6もまだまだ主流だったの。 他のブラウザは、Safariがバージョン3がMacとWindowsに公開されていた頃で、Firefoxはまだバージョン2.0
$.jstree 関数や変数に関連するjstreeの全てを保持しています。実際のクラスやインスタンスに対して作成、接続、操作といった処理を行うメソッドが含まれています。
jQuery逆引きリファレンス 要素の高さ／幅を設定／取得するには？（height／width／innerHeight／innerWidth／outerHeight／outerWidth）
いつか使いたいと思ったので書いておく。 オシャレなデザインと、かっこいいアニメーションが魅力的なメニューが簡単に実装できる。下記リンクよりDemoページに飛ぶことが出来るので、一度試してみていただきたい。 RESPONSIVE MULTI-LEVEL MENU 使い方 まずはソースをダウンロード。DemoのHTMLも一緒にダウンロードできるので、簡単に実装可能。一応以下に個人的に一番イケてる！と思ったDemo 2の実装方法を書いておく。 HTML headタグ内では以下の5つのソースを読み込む。 <link rel="stylesheet" type="text/css" href="css/default.css"> <link rel="stylesheet" type="text/css" href="css/component.css"> <script src="js/jquer
レスポンシブサイトではウィンドウの幅（画面解像度）によって、レイアウトの調整や動作処理の制御を行います。 ウィンドウサイズ（画面幅／高さ）の取得方法に関しては、スクリプト制御ではjQueryの「.width()」メソッドのほか、JavaScriptの「.innerWidth」メソッドや「.matchMedia」メソッドを使用する方法などがあり、CSSメディアクエリでは「@media only screen and (max-width:○○px)」などといった手法でウィンドウサイズを取得することが可能になります。 それぞれの取得する方法によってすこし厄介なのは、ページ内にスクロールバーがある時とない時で取得する値が変わってくるというもの。 さまざまな場面でウィンドウサイズを取得する機会が増えてきているので、上記のそれぞれ取得方法について比較してみました。 まずは各スクリプト処理とCSSメデ
サンプル サンプル1 var divs = $("div").get(); // add 3 elements of class dup too (they are divs) divs = divs.concat($(".dup").get()); $("div:eq(1)").text("Pre-unique there are " + divs.length + " elements."); divs = jQuery.unique(divs); $("div:eq(2)").text("Post-unique there are " + divs.length + " elements.") .css("color", "red");
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近友人と『中学生円山』を観に行きました。 女性にはおそらく理解できないであろう「男子中学生あるある（主に下ネタ）」が盛り込まれていて、いい意味でヒドイ内容でした。もう一回観たい（´ω`） さて、今回は「HTMLとCSSはわかるけどjQueryってなにそれ、おいしいの」という方向けに、今日から使える簡単かつ便利な3つのメソッド「slideToggle／fadeToggle／toggleClass」をご紹介します。 こいつらを知っとくと下記のようなメリットがあります。。 アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」とか実装できる 超シンプルな記述なので、今日から使える いやーこれは便利ですね。 というわけで、早速解説していきます。 【こちらもおすすめ】 超簡単jQ
jsTree は インタラクティブなツリービューを使えるようにするjquery 用プラグインです。 これは完全に無料であり、オープンソースであり、MIT ライセンスで配布されています。 jsTree は拡張、テーマ付け、設定が簡単にでき、HTML と JSON データソースと AJAX の読み込みをサポートしています。 コンテンツボックスもしくはボーダーボックスのいずれかのボックスモデルにおいても、jsTree の機能は正しいAMDモジュールとして読み込むことができ、レスポンシブデザインに対応した携帯用のテーマを内蔵しており、簡単にカスタマイズができます。 jsTreeはjQueryのイベントシステムを使用するため、ツリー上で発生する様々なイベントにコールバックを紐付けることが慣れ親しんだ方法で簡単にできます。 注目すべき機能をほんの一部紹介します: ドラッグ & ドロップをサポート キー
jsTree（ https://www.jstree.com/ ）はエクスプローラ風のツリー表示を行うことができるJavascriptライブラリです。 ここでは、jsonファイルに定義した内容をツリー表示するサンプルを掲載しています。また、ノードクリック時に定義した内容を取得する方法もあわせて掲載しています。 jsonファイルから読み込んでツリー表示 以下がそのサンプルになります。詳細はサンプル内のコメントを参照ください。 しっかし、難しいな～～～。とっかかりなんて全くわからなかったYO! HTML <!-- ツリーを表示する器を定義 --> <div id="jstree"></div> json（doraemon.json） { "text" : "のび太のパパ", "state" : { "opened" : true }, "a_attr" : { "test_data" : "の
多分最初のほうに見たのがこのページ。自分で調べていくうちに納得感が深まった。 http://qiita.com/alingogo/items/b49d48f1b024f6022a85 今回の私の要求 まだ決めていないのでReactでも使える選択肢にしておきたい PCでもスマホ（iOS）でもD&Dしたい 実装はできればスマートにして拡張性もある程度確保したい 性能的なこともわからないなりに考慮しておきたい １万円程度なら有料でもいいかも D3.jsとかと整合性があるといいかも 途中経過として いろいろ試行錯誤した 基本はjQuery系が多い jQuery系でもスマホでのD&D対応は少ない React系やピュア系は少ない もっと粒度の小さなライブラリはあるので独自実装になるのかな jQuery系のラッパーがあるがどこまでフォローできるのか若干不安 他 ポインターイベントというのが以前は流行って
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
「Datepicker」とは？ まず最初に、「Datepicker」の基本的な知識から学んでいきましょう！ 「Datepicker」は、jQuery UIのライブラリにある機能の1つで高機能なカレンダーを生成＆表示することができます。さまざまな「テーマ」を変更するだけで、以下のように多彩なカレンダーを表示することができます！ 日付のフォーマットなど多彩なカスタマイズができるオプション設定や、日本語化なども可能なので自分好みのカレンダーを作れるのが特徴です。 本記事では、Datepickerの基本的な使い方から応用技まで体系的に学べるように構成していますのでぜひ参考にしてみてください！ ここからは、実際にDatepickerを使うプログラミング手法について学習を進めていきましょう！ jQuery UIも含めたDatepickerの導入方法からカレンダーの表示まで詳しく見ていきます。 jQue
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く