Bootstrap File Input Demo - © Kartik
Thankful to Krajee! BUY A COFFEEor DONATE to get more out of us. Learn We strive hard in creating high quality JQuery plugins and Bootstrap extensions for the community as free open source code, and maintaining this demonstration site. Any donation would help us maintain our resources better and help improve our plugins or create new ones. Even, if it does not fulfil our resource needs, it will st
ブラウザでローカル画像をリサイズしてアップロード - Qiita
【2019/8/20】 多くの方に見ていただいている記事なので、改めてまとめ直しました。 https://www.mahirokazuko.com/entry/2019/08/20/133713 よくある画像アップロード機能を作ってみた😋 ◆ 要件 ・ フォルダにある画像を選択すると、小さくリサイズされたサムネが表示される ・ 送信ボタンを押すとリサイズ済みの画像がフォームデータとして送信される ◆ サンプル ↓ ファイル選択するとサムネを表示 上の画像、生データだと横幅6000pxくらいあります。最近のスマホで撮った写真はサイズが大きすぎるので、通信量を抑えるためにもリサイズしてアップロードは必須ですね。 ◆ コード ファイル取得→canvas描画→base64取得→Blob作成→Blob送信 という流れ <!-- ファイル選択ボタン --> <div style="width: 50
Client side Image Resizing
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included --> <script src="js/vendor/jquery.ui.widget.js"></script> <!-- The Load Image plugin is included for the preview images and image resizing functionality --> <script src="https://blueimp.github.io/JavaScript-Load-Image/js/load-image.a
日付・時刻入力を手助けしてくれるデートピッカー・タイムピッカーを実装できるスクリプト 15 | NxWorld
ユーザーに日付や時刻を入力してもらう際に手助けするデートピッカー・タイムピッカーを実装できるスクリプトのまとめです。 日付であればカレンダーを、時刻であれば時計を表示させるといったように選択しやすい感じの見栄えにしてくれるものもあれば、シンプルな見た目で入力・選択させるといったものもあり、使いたいデザインのテイストに合わせて選べると思います。 以前だとjQueryを使っている環境でデートピッカーといえば「jQuery UI Datepicker」が定番という印象で、オプションが豊富なのでいろいろな機能・見せ方を実装できますし、ちょっとしたカスタマイズ情報なども検索でたくさん出てくることもあって使ったことあるという人も多いと思います。 ただ、今では同じjQueryプラグインでももっと軽量なものだったり、そもそもjQueryなどは使わず単体で動いて且つオプションが豊富でカスタマイズもしやすいス
プラグインなし！横からスライドするドロワーメニューの作り方
ボタンを押せば画面の横からメニューがスライドして現れるドロワーメニュー。facebookを先駆けに、最近のスマホサイトやアプリなどで当たり前のように見るようになりましたね。 デザイン的にカッコイイだけでなく、スマホなどの小さい画面でも、上手く情報を詰め込むことができるので、ユーザビリティの面でも必須の機能といえるでしょう。 この記事では、ドロワーメニューを設置する手順を紹介しますが、プラグインを使わない自作する方法で解説したいと思います。 ドロワーメニューの作成手順 まず、ドロワーメニューを作るために必要な言語はHTMLとCSSとjQeryの３つ。 仕組みとしては、HTMLで作ったドロワーメニューを、CSSで隠れている状態と表示した状態を作成し、jQeryでその切り替えをするだけという単純な作りになります。 HTMLとCSSはある程度わかるけど、jQeryはちょっと…という方もいるかと思い
jQuery Plugin - 同じ内容の入力フォームを追加・削除 - Repeater
同じ内容の入力フォームを追加・削除できるようにするプラグイン「Looking For」を紹介します。 jQueryプラグイン「Repeater」このプラグインを使えば、同じ内容の入力フォーム（例えば「名前」など）をページを更新せずに追加・削除することができます。 さまざまな input要素（「text」「checkbox」「option」……など）をグループにまとめて、追加・削除することができるので、使い勝手がいいですね。 それではデモページのフォームをご覧ください。 「Repeater」のデモ デモのソース（HTML + jQuery）<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="Repeater のデモでーす。"> <title>Looking For - j
kcToggle by kevinchappell
Replace default browser checkboxes with this customizable jQuery plugin Example View the Project on GitHub kevinchappell/kcToggle Download ZIP File Download TAR Ball View On GitHub Install In your html document simply add the following to your <head>. kcToggle is jQuery dependent so be sure to have a copy of jQuery 1.6+ loaded before including the plugin files in your document's <head>. <link href
フォームのフィールド変更を検出して処理を記述できるjQueryプラグイン「dirrty」:phpspot開発日誌
dirrty: lightweight jquery plugin to detect if the fields of a form had been modified フォームのフィールド変更を検出して処理を記述できるjQueryプラグイン「dirrty」 フォームが変更された場合にSubmitボタンをActiveにしたり、自由に処理を記述できて便利そうです。 自分で実装しようとすると若干面倒な部分ですがプラグインで簡略化できます 関連エントリ 開店/閉店を細かく指定して切り替えられる「jQuery Now Open」 長ーいリストをアルファベット別にインデックスしてくれる「jQuery alphaindex」 入力値のマスクとバリデーションがリアルタイムに行える「Jquery.inputmask」
画像ファイルをアップロードし、サーバー側で処理した結果を画面遷移せずに表示する
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>jQuery.uploadのサンプル</title> <script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="./js/jquery.upload-1.0.2.min.js"></script> <script type="text/javascript"> $(function() { $('#file_id').change(function() { $(this).upload('upload.php', function(res) { $(res
テーブル行の詳細をクリックで開けるテーブル実装:phpspot開発日誌
Expand Table Rows Using jQuery, HTML And CSS On TalkersCode.com テーブル行の詳細をクリックで開けるテーブル実装 気になる行をクリックすれば詳細となるテキスト等を表示できます タグとしてはtd colspan=4などでdisplay:noneしておき表示するという単純な物のようですがなかなか良いアイデアかも。 関連エントリ Bootstrapのテーブルをソート可能にする「Bootstrap Sortable Tables」 テーブルのヘッダーを固定表示することが出来る「jQuery.floatThead」 テーブルのソート・フィルタ機能等、超多機能テーブルに変形させられる「jQuery-KingTable」 横長テーブルもレスポンシブにできる「jquery.responsive-tables」
jQuery deferredの使い方 | 前編 deferredの基本
jQuery deferredの使い方 前編 deferredの基本 jQuery deferredをなんとなく知っているが使い方がよくわからない人のために短期シリーズでおさらいをします。第1回目は非同期処理の概念からdeferredの基本機能までをおさえます。 なぜ、今、jQuery deferred？ この短期シリーズでは、2回に分けてjQuery deferredについて解説します。 jQuery deferredは、jQuery1.5で追加された機能であり、特に新しいものではありません。 しかしながら、私が昔書いたjQuery deferredに関するブログ記事をブックマークする人が、いまだにちょこちょこいるのが見受けられるのです。 もしかして、deferredの存在はなんとなく知っているけれど、どのように使ったらいいのかよくわからないという人が多いのかもしれないと思い、改めてまと
tableの行をクリックすると下部に詳細が表示される
Result jQuery//参照元に準拠し、onclick処理はtable内に書いてます function show_hide_row(row) {$("#"+row).toggle();}css#table_detail tr:hover{ background-color:#ddd; cursor:pointer; } #table_detail .hidden_row{ display:none; }html<table border=1 id="table_detail" align=center cellpadding=10> <tr> <th>名前</th> <th>年齢</th> <th>給料</th> <th>仕事</th> </tr> <tr onclick="show_hide_row('hidden_row1');"><td>たける</td><td>25</td><
初心者向けのjQuery入門講座
使い方 まず最初にチェックするコンテンツです。どのような考えをもとにプログラムを組み立てていくか、設計力を学びます。 サンプル 使い方で学んだことを生かして、簡単なサンプルの作成を学んでいきます。 プラグイン jQueryで利用できる便利なプラグインを紹介していきます。 リファレンス jQueryのリファレンスです。辞書代わりにご利用ください。 使用例 企業サイトでのjQueryの使用例を紹介していきます。 始めに jQueryはデザイナーにも利用しやすいjavaScriptプラグインです。このサイトはhtmlやcssを充分に理解しており、さらに基礎的なjavaScriptをマスターしている方を対象に記事を書いています。 現在はスマートフォン用のゲーム制作に注力しているため、本サイトの更新は休止状態（2014年3月が最終更新）です。ゲーム制作に関するブログ：スマゲー作るよ！はほぼ毎日更新し
selectボックスをBootstrapのボタングループの形にしてしまうjQueryプラグイン:phpspot開発日誌
GitHub - wpic/bootstrap-select-togglebutton: JQuery plugin for converting select input to friendly bootstrap buttons group selectボックスをBootstrapのボタングループの形にしてしまうjQueryプラグイン。 selectボックスはスマホ等では使いづらいケースもあり、選択肢が少なければ、ボタンの選択式にしてしまってもよいのかも。 単一選択と複数選択が選べ、selectボックスよりも使い勝手がよさそうです 関連エントリ 複数選択が出来るBootstrapなサイトで使えそうなselectボックス実装「jQuery select-multiple」 ポップアップ形式のselectの代替になる入力要素を実装できる「PopSelect」 Bootstrapのselec
【JavaScript】【PHP】jQueryでフォームダイアログを表示して裏でmysql処理 - Furudateのブログ
こんにちは。 今回は、jQueryでフォームをダイアログで出すこと、そして、ダイアログのボタンを押したら裏でPHPを用いてmysql処理をし、ログイン処理を行いたいと思います。 これがあるとログインフォームなどの簡単なフォームを作らなくていいし、画面も無駄に増えなくていい感じです。 jQueryを用いたダイアログ表示 まずはダイアログを表示させたいと思います。今回はフォーム付きのダイアログです。 まず、以下のものを用意します。 jQuery最新バージョン こちらからどうぞ jQuery UI最新バージョン(この時点では1.10.3) こちらからどうぞ 今回jQuery UIを使いますが、ダウンロードファイルには、デモページが同封されていますので、そこのソースコードを参考にしましょう！ダイアログ以外にも色々とあります。 また、jQuery UIのファイルについては、"jquery-ui-1.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
autocompleteを無効化する - PukiWiki
縦に長いtableのヘッダーをstickyにするスクリプト・「jquery.stickyTableHeader 」
finefinefine.jp
JSONデータをHTMLフォームに変換し、更にJSONに戻せる「medea」:phpspot開発日誌
Redirecting to gridstackjs.com