読者です 読者をやめる 読者になる 読者になる

【react】jqueryメインの非SPAシステムの特定ページでのみreactを導入してみたのでメモ

はじめに 以前に自分が作ったシステムで主にjqueryを使って作ったものがありました。 基本的には困ることはなかったのですが、特定のページだけ複雑になってきていじるのが嫌になってきました。。。作りたい画面のイメージとしてはこんなかんじメイン画面 モ…

【bootstrap】プルダウンに画像を表示するライブラリ

はじめに 今回やりたかったのは画像を選択するようなプルダウン。 検索してみたら、bootstrap-select.jsというのがありました。http://thdoan.github.io/bootstrap-select/ こちらからDL 実装 使い方は簡単でjsを読み込んで以下みたいな感じで使える。 boots…

【javascript】ドラッグアンドドロップで画像をアップロードする方法メモ〜jqueryも使った

はじめに 以前につくったサービスの改修で必要になった。どこかのブログに書いてあったのをコピーして動いたのでそれでよしとしていたのだが、今回はそれが1ページに複数必要になって問題が発生したので作り直してクラスにしてみた DOM操作にjQuery使ってい…

【bootstrap】Modalの初期値を動的に設定する方法

たまにやろうとするとパッと出てこずに何度も調べている気がするのでメモしておく 一覧のクリックする行によってモーダルの中身を変えたい時などにも使える <button id="onModal" class="btn btn-default">Open</button> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> </div></div></div>

【chart.js】x軸(横軸)のラベルに間隔を空ける方法メモ

はじめに 今回初めてadminLTEというboostrap製の管理画面用のデザインテンプレートを使ったのですがかなりイイです。 情けない事に今までcssは1ミリもいじりたくないってタイプだったのですが、それなりの見た目の画面が用意できましたで、その中でchartjsと…

bootstrapのdaterangepicker(datepicker)を日本語化して少しカスタマイズ?して使う方法メモ

はじめに タイトルのとおりですが知っていればかなり便利でした。 次回もサクっと使えるようにメモしておきます 使うもの ・jQuery ・Bootstrap ・bootstrap-daterangepicker ・moment.js 準備 jqueryとbootstrapはCDNを使用 bootstrap-daterangepickerはこ…

jqueryでvaridationを実装する方法2 - NGワードチェック追加

はじめに jqueryでvalidationを実装する方法 - とりあえずphpとか こちらで実装したvalidationにさらにNGワードのチェックをリアルタイムにつける必要があったので、この処理にさらに実装方法を追加追加する機能 ・NGワードのリストはデータベースにもつ ・N…

jqueryでvalidationを実装する方法

はじめに jqueryでのvalidation実装。 ありがちな機能ではありますが、久々に実装する機会があったのでメモ。 jqueryのプラグインとか探せば色々ありますが、過去にかゆいところに手が届かない的な事もあったので今回は全て自前で実装してみました。機能とし…

ブラウザの戻るをされたときにフォームを初期化する方法 - javascriptで

やりたかったこと 1. ユーザが入力フォームからデータを入力して登録ボタンをおす 2. 登録完了ページを表示 3. ブラウザの戻るボタン(iPhone等ならスワイプで戻る) 4. 1で入力した内容が残ってしまう、、、 上記の4.で入力した内容をすべて空にしたいとい…

javascriptでFLASHのバージョン情報を取得する方法

やりたいこと サイトにアクセスしたユーザの端末のFLASHのインストール状況を取得したかった 実装 こちらに実装方法がありました。 swfobjectを使用した簡単Flash Playerバージョン取得 | iwb.jpSWFObjectというプラグインで本来(?)HTMLにFLASHを埋め込む用…

jquery.pageslideが動かないときの対応

はじめに このプラグインはとても有名なようで、けっこう使われているようです。 今回デザイナーさんからもらったページでも使われていてヌルヌルとメニューがスライドしていいかんじでした。レシポンシブにも対応しているようなのでスマホでも使用可能ですh…

jqueryで画像選択画面を作る方法

画像選択して選択中の画像をフォームで送信できるようなプラグインを探していたらいい感じのがあったので紹介です。 公式サイトはこちらで「Image Picker」というプラグインです。こちらはjqueryのプラグインで、angular.jsで作ってるサイトで使おうとしたら…

画像の読み込みが遅かったので対応メモ(jquery lazy load使用)

やりたかったこと 画像の一覧ページの表示が非常に重いとのことで見てみると1ページに表示してるコンテンツの画像は10件。 けど1ファイルのサイズがどれも3Mくらいあってそのまま表示してるだけなので、それは重くなるなぁと、、、対応案としては 案1. jquer…

ajaxでphpセッションが使えなかったときの対応

まずやりたかったこと ログインフォームとボタンだけ設置してログインボタン押下でajax通信で外部のサーバへ認証処理を行う。 サーバ側での認証がokだったらphpのセッション変数に保存。 ログイン成功後はhtmlからajax通信でphpで作成したapiにアクセスして…

画像アップロード jquery.canvasResize.jsを使用してファイルを選択した時点でリサイズしてページに表示

ファイル選択時に選択した画像をページに表示 まずはココから、canvasResize.jsをダウンロード その中に以下のファイルがあるのでこれらを使います。またjqueryも使います binaryajax.js exif.js canvasResize.js <script src="jquery.js"></script> <script src="binaryajax.js"></script> <script src="exif.js"></script> <script src="canvasResize.js"></script>

fulephpとjquery.autopager.jsで「もっと見る」を実装したのでメモ

まずはjquery.autopager.jsをダウンロード こちらにありました PHP部分の実装 mvc的にはこういうのはviewに書くのがいいのかもしれませんが、僕は迷わずcontrollerに書いてます。 //全データ数を取得 $all_num = 何らかの処理//select count(*) from *** whe…

javascriptで名前空間を使う

わかりやすい、使いやすいのでメモ http://qiita.com/mocha/items/c6a626416daaa04d0668 ↑このページのものをそのままです var top = top || {}; // ancestor namespace top.second = top.second || {}; // ancestor namespace (function (third) { // names…

jqueryで確認ダイアログをカスタマイズする方法

といいつつ、カスタマイズではなくてjqueryのプラグインの紹介ですjquery.remodal.jsというプラグインがあるのですがコレを使います ここからダウンロードsrc/ の中の以下の2ファイルを使用します jquery.remodal.css jquery.remodal.jsで,使い方は以下のよ…

jqueryで複数要素に対してイベントハンドラを設定する方法

複数要素に対して同じ様なことを記述していたので、こうすれば少しはコードが短くなるかもしれません、、、 <select id="elm1" name="elm1"> <option value="1">選択1</option> <option value="2" selected>選択2</option> </select> <select id="elm2" name="elm2"> <option value="1" selected>選択1</option> <option value="2">選択2</option> </select> <script> $("#elm1,#elm2")…

jqueryでformをsubmitする前に<input>タグを追加する方法

これでformをsubmitするさいに任意の値を追加して送信することができました <form id="form"> <input type="submit" value="送信"/> </form> <script> $("#form").submit(function() { $("<input>",{ type:"hidden", name:"input_name", value:"input_value" }).appendTo("#form"); }); </script>リンク集へ

jqueryでtriggerでイベントを起こしてイベントハンドラに値をわたす方法

triggerメソッドの第2引数に配列で渡すことで実装できました <form id="form"> <input type="submit" value="送信"/> </form> <script> var data = ["aaa","bbb"]; $("#form").trigger("submit",data); $("#form").submit(function(event,v1,v2) { console.log(v1);//aaa console.log(v2);//bbb }); </script>リンク集へ