RemodalRemodal Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
Browserifyでrequireを使ってjavascriptの依存関係をすっきりにしてみる - undefined
ブラウザ上もでrequire使いたい 現状Coffeeのclassを異なるファイルから参照するにはwindow.HogeClassとか@HogeClassとかでグローバル変数をってたんだけどBrowserifyを使えばNode.js のモジュールのようにrequireで読み込みことができるっぽい。参考記事を見ながら簡単なサンプルを実際に作ってみた。 grunt-cli のインストール npm install -g grunt-cli package.jsonを作成 npm init 対話形式でpackage.jsonを作成。 必要な情報を入力してください。 プロジェクトに必要な情報を記述するjsonファイルが生成されます。 browserify grunt grunt-browserifyのインストール npm install browserify grunt grunt-browseri
Browserify + GulpでクライアントのJavaScript / CoffeeScriptでrequire
先日以下の記事で、クライアントサイド JavaScript での require による依存解決の方法を読みました。一言で言うと Browserify というライブラリを使って、クライアント側 JavaScript でも、モジュールをファイルごとに分割して require で読み込むための手順。 Browserifyでrequireを使ってjavascriptの依存関係をすっきりにしてみる – ぼくのかんがえたさいきょうのうぇぶさーびす これを真似したくて、昨日日曜日に試したのでその記録です。 ぼくうぇぶさんのページでは、JavaScript のビルドツール（タスクランナー）として Grunt を使ってありますが、個人の好みにより私は Gulp を使用します。Grunt も Gulp も JavaScript/CSS などフロントエンド用のビルドツールで、C言語の Make、Ruby の
gulp.jsを使ってフロントエンドのビルドをする【webpack, stylus】 - yutaponのブログ
この記事はIwate Developers Advent Calendar 2014の6日目の記事です。 Iwate Developers Advent Calendar 2014 - Qiita 記事の内容はというと、岩手にまったく関係ありません。 学生の頃はフロントエンドを軽視してクソコードを量産していたので、今の学生の方にこんな風に作り始めるといいよって紹介する感じで書きたいと思います。 はじめに 昨今のフロントエンド開発はとにかく複雑になってきていて、学習コストが半端なくなってきてます。 angularとかbackbone.jsとか、最近ではreact+fluxなど、トレンドの移り変わりが激しいです。 またGruntやgulp.jsなどのタスクランナーの活用がフロントエンドでは欠かせなくなっていて、使ってないなら今すぐ導入すべき、とも言えます。 最近gulp.jsを使っていて、gu
軽量なモーダル「Remodal」が使いやすかった - しょぼしょぼプログラマ雑記
2015-04-01 軽量なモーダル「Remodal」が使いやすかった Javascript jQuery jQueryでモーダル表示は種類が沢山ありますが、軽量かつ単純な「Remodal」というライブラリが 非常に使いやすかったのでご紹介します ただ、紹介前に一つ注意喚起があります このライブラリを使う上で参考にさせて頂いたサイト様が多数ありますが 間違った翻訳内容を記載している サイト様が非常に多かったです 具体的には「他の紹介サイトから内容をほとんどコピーしていて、実際には使っていない」というものがほとんどでした ですので、自分が使ってみたときの方法なども記載しておきます 0.jQueryをダウンロードする jQueryのライブラリですから、当たり前な話ですが記載します 1.ライブラリをダウンロードする これは普通にダウンロードすればOKですね ダウンロード先は こちら になります(
Remodal - 使える場面の多そうなjQuery製モーダルウィンドウライブラリ MOONGIFT
jQueryでモーダルウィンドウ表示を行いたい時に使えるのがRemodalです。カスタマイズが多彩、軽量といった特徴があります。 ふわっと浮き出るのも印象的です。 Remodalのインストール まず手順としてスタイルシートとJavaScriptを読み込みます。 <link rel="stylesheet" href="path/to/your/jquery.remodal.css"> <script src="path/to/your/jquery.remodal.min.js"></script> 次にHTML全体をクラスで囲みます（背景を暗くするためです）。 <div class="remodal-bg"> ここにHTMLを記述 </div> そしてモーダルウィンドウで表示する内容を記述します。 <div class="remodal" data-remodal-id="modal">
jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。 | Ginpen.com
必要ならどうぞ。 デモ jQueryでフォームの値を取得する方法をまとめ – jsdo.it – Share JavaScript, HTML5 and CSS jQueryでフォームの値を取得する方法をまとめ – jsdo.it – share JavaScript, HTML5 and CSS 共通：要素の探し方 input要素なんかにid振っちゃうのが一番なんだけど、属性セレクターを使うと楽な場合があります。つまり[name=xxx]で検索するやり方。 <form id="my-form"> <input type="text" name="my-text" value="This is text." /> </form>
jQueryのAjaxを使って複数選択されたチェックボックスの値をPOSTする方法メモ - tech tech -テクテクブログ-
html側で複数選択されたチェックボックスの値を送信するには チェックボックスのname属性をname="xxx[]"のように配列にする必要がある。 <input type="checkbox" name="check[]" value="1" /> <input type="checkbox" name="check[]" value="2" /> jQuery側ではチェック済みの値をeach文を使って配列に保存していく。 var checks=[]; $("[name='check[]']:checked").each(function(){ checks.push(this.value); }); 以下サンプル 選択した要素の値がalertで表示される form.html <html> <head> <script src="http://ajax.googleapis.com/aj
.addEventListener() | JavaScript 日本語リファレンス | js STUDIO
サンプル シンプルなリスナーの登録 下記の例ではmodifyText()は、 addEventListener()を使用してクリックイベントをリスナーに登録しています。 テーブルの何処かをクリックすると、ハンドラがバブルアップしてmodifyText()を実行します。 もし、リスナー関数に引数を渡したいのであれば、無名関数を使用することが出来ます。 <!DOCTYPE html> <html> <head> <style></style> </head> <body> <table id="outside"> <tr><td id="t1">one</td></tr> <tr><td id="t2">two</td></tr> </table> <script> // t2の内容を変更する関数 function modifyText() { var t2 = document.getEle
結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 - Qiita
結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 一年ほど前に JavaScript - jQuery.Deferredを使って楽しい非同期生活を送る方法 - Qiita [キータ] という記事を書きました。 で、一年経って、ふと、「もっと分かりやすくjQuery.Deferredの便利さを説明できるんじゃないか」と思い立ってざざざっと書いてみました。 小話と言うにはちょっと長いけど。 -- jQuery.Deferredを使うと嬉しいのは、jQuery.Deferredの仕様を満たす部品同士を簡単に組み合わせることが可能だからです。中には処理を書き下すことができるとかコールバックのネストを防げるのがいいとか言う人もいますが、個人的にこっちのほうがよっぽど重要だと感じます。 例えるならレゴブロックです。レゴブロックはあの凸と凹を持ってるブロックを自由に組み合
フォントジャンプ率のセオリーを考える | フォントの話 | つみきブログ
株式会社つみき UI/UX事業終了のお知らせ 拝啓 時下ますますご清祥のこととお喜び申し上げます。 平素より格別のご高配を賜り、厚く御礼申し上げます。 この度、弊社は創業以来続けて参りましたUI/UX事業（受託制作事業）につきまして、2024年4月30日をもって終了することを決定いたしました。 今後は、弊社の主力事業であるFilmarksをはじめとした、映像関連事業に注力して参ります。 ご愛顧を受け賜りました皆様には、深く感謝申し上げますとともに、ご理解賜りますようお願い申し上げます。 敬具 株式会社つみき 代表取締役社長 鈴木 貴幸 事業終了予定日：2024年4月30日 biz@tsumikiinc.com
ライブラリ化のススメ | 前編 ライブラリ化のメリット
ライブラリ化のススメ 前編 ライブラリ化のメリット 仕事で書いたコードのうち、単体機能をライブラリとして蓄積していくことは、大きなメリットがあります。この記事では、まずライブラリ化のメリットを考えてみます。 はじめに 筆者、高津戸は、このところ、おおよそ1年〜2年ぐらい、仕事で使うJavaSriptの機能をライブラリにしておくことで、仕事をスムーズに進めることができている気がしています。今回は、ライブラリ化のススメということで、このことについて書きたいと思います。 ライブラリってどういうもの？ 普段からWebサイトを作るためにHTMLやJavaScriptを書いている人であれば、jQueryをはじめとした、ライブラリを多く利用しているかと思います。jQueryの場合は、その拡張機能のことをプラグインと呼んでいますね。 今回「ライブラリ」と呼ぶものは、このようなWebサイトで使うJavaSc
Onsen UI 2: HTML5モバイルアプリを速く、美しく - Onsen UI
ハイブリッドとモバイルWebアプリ開発の決定版 開発環境のセットアップを一切することなく、JavaScript・HTML・CSSを用いたモバイルアプリ開発を始めましょう。クラウド上の開発環境Monacaと組み合わせることで、あなたの開発環境は常に最新の状態に保たれます。 クラウド上にすべてのツールを 強力なCLI（コマンドラインツール）やデスクトップ向けアプリ（WindowsとmacOSに対応）を通じて、Onsen UIアプリはとても簡単に制作できます。それ以外にも、Monacaが提供するライブリロード対応のデバッガーや、リモートビルド機能といったクラウドの機能にアクセスできます。 美しいUIコンポーネントと自動スタイル モバイルアプリに特化した、ネイティブのようなパフォーマンスに優れたUIコンポーネントが自慢です。タブ、サイドメニュー、ナビゲーションといった共通デザインだけでなく、リスト
grunt.jsを使って、frontendのビルドを行う - Qiita
このTopicはWeb ApplicationのfrontendのProjectを管理するTopicの3つ目です。 node.jsのversionを管理するためにnodebrewを利用する npmでnode.jsのpackageを管理する grunt.jsを使って、frontendのビルドを行う 前提条件として、僕の環境はMac OSです。 grunt.jsとは？ grunt.jsはnode.js上で動くTask Runnerです。grunt.jsそのものがビルドなどをしてくれるわけではなく、あくまでgrunt.jsは指定されたTaskを実行するだけです。 実際にビルドを行うためには、gruntを取り巻くたくさんのpackageを利用して、自分が望む内容を実行する環境を構築していく必要があります。 このTopicでは、その入り口として、grunt.jsでいくつかのpackageを実行できる
フロントエンドだけじゃない! サーバサイドの開発も手助けしてくれる grunt-connect-proxy を紹介するよ - Qiita
© 2011 www.GdeFon.com via. http://www.gdefon.com/animals/428716-dog_home_guardian.html grunt-connect-proxy grunt-connect-proxy grunt でプロキシサーバをたてることが出来るプラグインです。 npm i -D grunt-connect-proxy 特徴 もう単純にリバースプロキシするだけです。はい。 でもそれだけだと利点が分かりませんです。はい。 なので以下利点を2つ。 クロスドメイン問題の回避 開発サーバで 複数ポート / 複数FQDN を 同一ドメイン下で リクエストハンドリング出来るようになります。 例えば 本番環境ではAPI実装とアプリ実装が同一なのに、easymock などの APIモックサーバと開発サーバが別立ての場合、クロスドメイン制約があったりし
Magnific Popup レスポンシブデザインにも対応しているモーダルウィンドウ用jQueryプラグイン
TOPjQuery Magnific PopupでjQueryのモーダルウィンドウを実装する方法 Magnific PopupでjQueryのモーダルウィンドウを実装する方法
Magnific Popup を使ってみる | Web Design Leaves
Magnific Popup を使ってみる CATEGORY: jQuery | TAG: Googlemap, Lightbox, Youtube, プラグイン, レスポンシブ 2014年2月7日 Youtube の動画を Lightbox のようなモーダルウィンドウで表示できるプラグインを探していたところ見つけた「Magnific Popup」。レスポンシブ・デザインに対応している上に機能も豊富で Goole map なども表示可能。使い方などに関するメモ。 目次 Magnific Popup のダウンロードと読み込み Magnific Popup を「配布ページ」からダウンロード（ページ右側の「Download ZIP」から） ダウンロードすると「dist」というフォルダがあるのでその中の「jquery.magnific-popup.min.js」と「magnific-popup.c
【jQuery】多機能でカスタマイズしやすいモーダルウィンドウ、Colorboxが最高に使いやすい ｜ Tips Note by TAM
2015.08.05 【jQuery】多機能でカスタマイズしやすいモーダルウィンドウ、Colorboxが最高に使いやすい みなさん、モーダルしてますか？ Webサイトでモーダルウィンドウを実装する機会は多いと思うのですが、プラグインも豊富なので何を使おうか悩んだことがある人も多いはず。 僕は、定番ですがColorboxというjQueryプラグインを使うことが多いというか、ほぼこれ一択です。 Coloroxの何が良いかというと多機能でカスタマイズしやすい！これに尽きます。 標準でyoutubeやvimeoなどの動画サイト、ajaxを使って取得したコンテンツの表示などに対応しているのはもちろん、オプションが豊富でいろいろな設定が可能です。 コールバックやパブリックメソッドと呼ばれる、別のJavaScriptからColorboxの操作を行うための仕組みなどが用意されているので、非常にカスタマイズ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
EventTarget: addEventListener() メソッド
APIサーバを Rails、フロントエンドを AngularJS で開発する [その③] - Qiita![APIサーバを Rails、フロントエンドを AngularJS で開発する [その③] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/9fc636e967f99baae4c06bcf831f24298d111876/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9QVBJJUUzJTgyJUI1JUUzJTgzJUJDJUUzJTgzJTkwJUUzJTgyJTkyJTIwUmFpbHMlRTMlODAlODElRTMlODMlOTUlRTMlODMlQUQlRTMlODMlQjMlRTMlODMlODglRTMlODIlQTglRTMlODMlQjMlRTMlODMlODklRTMlODIlOTIlMjBBbmd1bGFySlMlMjAlRTMlODElQTclRTklOTYlOEIlRTclOTklQkElRTMlODElOTklRTMlODIlOEIlMjAlNUIlRTMlODElOUQlRTMlODElQUUlRTIlOTElQTIlNUQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTZhYmM1ZTdmZmViOGNkZmVjYWNjOWVmYzI5NmNkNWVk%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBoa3VzdSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZDQ2MDhlM2MxY2U1Y2E4MzU0YTFiOWMzNmI0MGNkZWE%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44KG44KB44G_%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D85b92352a0a2cd80832f195df68f522b)
