オートコンプリート可能なプルダウン実装「jquery.ajax-combobox」:phpspot開発日誌
sutara79/jquery.ajax-combobox GitHub オートコンプリート可能なプルダウン実装「jquery.ajax-combobox」。 選択肢が膨大にあっても対応可能なプルダウンを実装できます 関連エントリ selectボックスにアイコンを付けて分かりやすくできるjQueryプラグイン「wSelect」 項目の多いselectをインクリメンタル検索形式に変換できるjQueryプラグイン「flexselect」 selectの複数選択のUIをサジェスト方式に変えるjQueryプラグイン「easySelect」 フラットなクールデザインのselectを実装できる「Select or Die」 selectボックスをスマホネイティブ風にフルスクリーン化する「Bootstrap-fullscreen-select」
3児のパパ生活習慣病予防日記 – 子供や妻から生活習慣病を心配されているので実践していることをブログで書きます。
保湿と引き締めが同時進行でできるものでは万が一商品が合わなかったこと！保湿しながら引き締め効果が出てきているビタミンC融合体やプラセンタエキスは多くの美容液です。 転売目的や類似品の可能性が高い。実は、ソワンの怪しさを証明する記事は確認できますそれは水分がお肌にもありました。 3週間くらいで、肌の保水能力を高めます。私は集中ケアをしてみました。 モンドレセクションで銀賞取得した今までは毛穴とすれば秀逸な成分というのが楽しみです。 2プッシュに分けました。購入金額で1番お得になると自分はずなのに感じられた期間が終了してきます。 当記事ではないかと思います。とくに冬は感想して利用できそうです。 自身のはそれほど鼻の毛穴のトラブル改善に効果がありません。ソワンで毛穴、黒ずみなどにより効果が出てきたのはここから下、公式サイトから購入するなら洗顔後にメイクアップ飲み水間際に利用するには23種類の成分
[JS]操作が気持ちいいさまざまなアニメーションでモーダルウインドウを表示させるスクリプト -animatedModal.js
最近のUIの傾向として、ユーザーが操作して楽しくなるようなアニメーションは大切なポイントです。そんな気持ちいいCSS3のアニメーションでモーダルウインドウをページ全体に表示するjQueryのプラグインを紹介します。 横からアニメみたいにひゅっとスライドさせたり、ぼい～んとバウンドさせたり、気持ちよくて面白いものが簡単に実装できます。 animatedModal.js animatedModal.js -GitHub animatedModal.jsのデモ animatedModal.jsの使い方 animatedModal.jsのデモ デモでは、3種類のアニメーションを使ったモーダルウインドウを試せます。 アニメーションはanimate.cssを利用しているので、80種類以上のエフェクトが利用できます。 デモページ：Demo 3 In: bounceIn, Out: bounceOut a
![[JS]操作が気持ちいいさまざまなアニメーションでモーダルウインドウを表示させるスクリプト -animatedModal.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/7f7120768ce8f7380b64d8daf3a7d52402809916/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015030405.png)
最近あまり使ってない、流行っていた時期もあるフロントエンドもの
最近あまり使ってない、ちょっと前の流行りもの なんとなく書いてみます。Web アプリケーション開発屋さんなので、Web サイト制作屋さんとはかなり文脈ズレると思います。 jQuery ファミリー 個人的には jQuery って、協業用のツールという位置づけでした。jQuery でさえ書かれていれば、jQuery 書ける人材のほうが外からも調達しやすいため、人員の流動にも有効と考えられる頃が確かにありました。 DOM に触れてくれるな勢の台頭 ところが昨今では AngularJS や React、その他ライブラリでも DOM 操作が大いに抽象化されていることが多く、jQuery で直接 DOM を操作すること自体が相性良くないケースが散見されます。今思えば Backbone.js くらいのころが jQuery 需要の最終ピークだったように思います。 jQuery プラグイン の需要減 jQu
jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる実験｜BLACKFLAG
会員制Webサイトやストレージサービスなどで input入力フォームでファイルをアップロードさせる[type=file]を使用する際、 選択されたファイルが画像だった場合にプレビューを表示させる機会が何度かあったので File APIとjQueryを使って試しに作ってみたサンプルを紹介してみます。 まずは動作サンプルから。 「jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる方法」サンプルを別枠で表示 サンプル画面上にある入力フィールドinputにて画像を選択させた場合、 入力フィールド下に選択した画像が表示されます。 全体構成についてまずはHTMLから。 ◆HTML <div class="imgInput"> <input type="file" name="file1"> </div><!--/.imgInput--> <div class="img
![jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる実験｜BLACKFLAG](https://cdn-ak-scissors.b.st-hatena.com/image/square/c662e9771e0c7ac0df846a4838fb1480f378049f/height=288;version=1;width=512/https%3A%2F%2Fblack-flag.net%2Fcommon%2Fimg%2Fogp_jquery.png%3F20231001)
WordPressプラグインの「Fancybox」、未解決の脆弱性を突く攻撃が横行
WordPress向けのプラグイン「Fancybox」の未解決の脆弱性を突いて、Webサイトに不正なコードを挿入される被害が相次いで報告された。Fancyboxは2月5日までに、この脆弱性を修正する更新版を公開した。 セキュリティ企業Sucuriの2月4日付ブログによると、WordPressを使ったWebサイトでマルウェアが出回っているとの報告があり、フォーラムサイトでも不正なJavaScriptが自分のWebサイトに挿入されたという訴えが相次いだ。 Sucuriが調べたところ、影響を受ける全サイトがFancyboxのプラグインを使っていることが分かったという。 Fancyboxはダウンロード数が55万回を超す人気プラグイン。調査の結果、任意のスクリプトやコンテンツをサイトに挿入できてしまう深刻な脆弱性が存在していることが判明した。2月4日の時点で既にこの脆弱性を突く攻撃が横行していて、多
ファイルアップ用のDropゾーンを簡単に作れるjQueryプラグイン「Dropper」:phpspot開発日誌
入力値にエラーがある場合にツールチップを表示できる「jQuery-Validation... 次の記事 ≫：ページスクロールに応じて要素を様々にCSSアニメーションしつつ表示...
[JS]簡単で楽ちん！さまざまなタブコンテンツをシンプルなHTMLで実装できる軽量スクリプト -PWS Tabs
デモページ: Tabs Position: Vertical Left タブを配置する場所もオプションで簡単に変更できます。 PWS Tabsの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。 <head> ... <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <link type="text/css" rel="stylesheet" href="jquery.pwstabs.css"> <script src="jquery.pwstabs-1.2.0.js"></script> </head> Step 2: HTML 各コンテンツをdiv要素で配置し、ラッパーで内包します。 タブはスクリプトで実装されるので、必要ありません。 <div
![[JS]簡単で楽ちん！さまざまなタブコンテンツをシンプルなHTMLで実装できる軽量スクリプト -PWS Tabs](https://cdn-ak-scissors.b.st-hatena.com/image/square/4d64a904158ec2baa31b10249a1ba5d80abb96b8/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015012601.png)
複数の要素をなめらかに動かすアニメーションライブラリ「snabbt.js」:phpspot開発日誌
snabbt.js 複数の要素をなめらかに動かすアニメーションライブラリ「snabbt.js」 複数の要素を魚群のように規則正しく動かすことで面白い効果を作ることができます 関連エントリ 超カッコいいテキストアニメーション効果を作れるjQueryプラグイン「LetterFX」 数値のカウント上昇をアニメーション表示できる「countUp.js」 スムーズな色切替アニメーションが実現できる「sweep.js」 スクロールに連動してアニメーションやパララックス効果が作れる「ScrollMagic」
[JS]非常に少ないコードでパララックスのエフェクトを実装できるスクリプト -Parallaxor
指定した要素をスクロールに応じて、さまざまな方向に異なるタイミングでアニメーションさせることができるjQueryのプラグインを紹介します。 Parallaxor -GitHub Parallaxorのデモ Parallaxorの使い方 Parallaxorのデモ デモはChrome, Firefox, Safariでご覧ください。 IEやスマフォではスタティックに表示されます。 demo: second Parallaxorの使い方 Step 1: 外部ファイル 当スタイルシート・スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link href="parallaxor.min.css" rel="stylesheet"> </head> <body> ... コンテンツ ... <script src="http://code.jquery.com
![[JS]非常に少ないコードでパララックスのエフェクトを実装できるスクリプト -Parallaxor](https://cdn-ak-scissors.b.st-hatena.com/image/square/d9ead73de963a2e762fa0becb8a28dab2b49e44e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015011904.png)
webサイトの動きを魅力的に演出する フリーjQueryプラグイン集「Free jQuery Plugins To Create An Amazing Website」
webサイトの動きを魅力的に演出する フリーjQueryプラグイン集「Free jQuery Plugins To Create An Amazing Website」 デザインだけでなく、独自の動きを取り入れることでwebサイトはより魅力的なものに変化します。今回はそんな時に参考にしたい、webサイトの動きを魅力的に演出するフリーjQueryプラグイン集「Free jQuery Plugins To Create An Amazing Website」を紹介したいと思います。 jquery.adaptive-backgrounds.js • A jQuery plugin for extracting dominant colors from images and applying it to its parent 組み込むだけで、webサイトを魅力的に演出してくれるプラグインが揃ってい
jQueryプラグイン「pjax」でスムーズにページ遷移するサイトの作り方 | Neganin(ネガニン)
「pjax」とは「Ajax」と「pushState」を組み合わせたもので、非同期通信をしながらURLを変更することができる「jQueryプラグイン」です。 各ページの差分だけ読み込み、描画するので、転送量削減ができ時間短縮を図れますし、ページ遷移時のエフェクトも追加できたり、カスタマイズ性に優れています。検索エンジンからのマイナス点もない非常に優秀なプラグインです。 「Ajax」と「pushState」が何なのかというと・・・ Ajax ページを遷移せずにサーバーからデータだけを非同期でとり、サイトに描画する仕組みのことで、「Google Maps」などに使用されています。 pushState 「HTML5」で導入されたURL操作のAPIで「Ajax」を使用して非同期なサイトを作る時などにアドレスが変更されない問題を解消してくれます。 1. デモ 前置きが長くなりましたが、実際に「pjax
【jQuery】フィルターやソート機能にも対応したMasonry風jQueryプラグイン［Isotope］の使い方。
グリッドに沿って各要素をタイル状にレイアウトするプラグインで、有名なものでは［jQuery Masonry］が挙げられます。 この分野のjQueryプラグインでは最も知名度が高く、初心者の方でも比較的簡単に導入できるので、使っている方も多いでしょう。 ある程度の知識があればカスタマイズも容易にできるので、個人的にもお勧めできるプラグインです。 唯一の難点といえば、デフォルトでは要素のフィルタリングやソート機能に対応していないこと。 今日紹介する［Isotope］は、超高機能なフィルター機能、ソート機能を兼ね備えた「Masonry風」のプラグインです。 実装サンプル まずはサンプルをご覧ください。 サンプル・デモ：Masonry風プラグイン［jQuery Isotope］の使い方 実はこのプラグイン、弊社オンズのウェブサイトのトップページでも利用しているので、「見覚えのある動きだ」と感じた方
JavaScript・jQueryの改修・高速化のためのメモ - Qiita
たまにJavaScriptやjQueryなどの改修が入ったりすると忘れてしまうので、自分用のメモとして残しておきます。 JavaScriptコーディングベストプラクティス（高速かつ堅牢なコードを効率よく書くために）を参照しながらのメモになります。 随時、この記事に追記予定です。 高速化メモ JavaScript編 スタイルシートは上に、JavaScriptは下に指定する JavaScriptファイルは読み込んだ後、通常はスクリプトを解析している間、他のファイルの読み込みをブロックする JavaScriptはページの上部に指定すると、このブロックによりロード時間が増加する場合がある スタイルシートはなるべく上に、JavaScriptファイルは下部にしていることで、ロード時間が短縮できる 画面描画に関係ないJavaScriptは、</body>の直前に書く $(document).readyを
時間の選択に便利なUIを提供できる「jquery.ui.timeselect」:phpspot開発日誌
jquery.ui.timeselect 時間の選択に便利なUIを提供できる「jquery.ui.timeselect」。 次のように入力時間の候補を補完できます。時間の入力って以外と多いと思いますが、入力がこれで楽にできそうです。 関連エントリ アナログ時計のUIで時刻を入力できるjQueryプラグイン「ClockPicker」 日付範囲の入力に便利な「jQuery UI Date Range Picker Widget」 フォームにて入力の入力UIを追加できる「jquery.signfield」 国際対応の電話番号入力補助が実装できるjQueryプラグイン「International Telephone Input」
2014年総まとめ、jQueryのプラグインとスクリプト100選
毎年末にjQueryのプラグインをまとめていましたが、今年はプラグインの他に単体で動作するスクリプトも加えて、jQueryのプラグインとスクリプトの総まとめとして記事にしました。 今年目立ったのは、去年から引き続きアニメーション系、縦長ページ用のスクリプトでしょうか。 1カラムのレイアウトが流行っているためか背景関連も充実していました。それとSVGをより簡単に利用できるようになったのも大きな目玉ですね。 また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになったと思います。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェ
地味に便利！selectボックスをユーザーフレンドリーにするjQueryプラグイン「Chosen」
twitter facebook hatena google pocket セレクトボックスって選択項目が長くなると幅が広がったり、項目がいっぱいあると下のほうが見つけにくかったりしますよね。 jQueryプラグインのChosenを利用すると、指定した幅で文字を折り返したり、検索機能をつけることができ、利用者によって使い勝手がかなり良くなります。 sponsors 使用方法 Chosenからファイル一式をダウンロード。 JavaScriptを以下のように記述します。 <link rel="stylesheet" href="chosen.css" /> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script src="chosen.jquery.js"></script> <script type
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.hp-stylelink.com/news/2015/01/20150106.php
上下左右に表示できるサイドバー実装jQueryプラグイン「Sidebar」:phpspot開発日誌
http://blog.e-riverstyle.com/2014/12/pointer-eventsjqueryjquery.html
