区切り線をドラッグで可変できる「Vue Split Panes」 | カバの樹
Vue Split Panesとは Vue Split Panesは、区切り線をドラッグで可変できるコンポーネントライブラリです。 レスポンシブへの対応、タッチデバイスのサポートなども完備されています。 インストール 以下のnpm、CDNを使ってインストールします。 npm npm i --S splitpanes CDN <script src="https://unpkg.com/splitpanes"></script> <link href="https://unpkg.com/splitpanes/dist/splitpanes.css" rel="stylesheet"> gitリポジトリは以下から取得できます。 https://github.com/antoniandre/splitpanes 導入手順 1. ライブラリの取り込み （1）webpack等の場合 [注意]モジュ
入門者のためのLaravelのバリデーションとエラーメッセージ | アールエフェクト
バリデーション(validation)とは 入力フォームで入力した値をチェックすることをバリデーションと呼びます。例えばECサイトから商品を初めて購入した場合は必ず住所の入力が必要となります。入力した郵便番号に漏れがないか数字であるかまた郵便番号の桁数が7桁になっているかなどチェックすることをバリデーションといいます。 基本的なバリデーションの動作についてはLaravel5, Laravel6, Laravel7, Laravel8, Laravel9, Laravel10で共通です。またバリデーションという機能はLaravel特有のものではなく他の言語やフレームワークでも利用されるものなのでLaravelでのバリデーションを理解できれば基本的な知識は他でも幅広く活用することができます。バリデーションはアプリケーションの開発者であれば必須の知識となります。 本文書を読み終えるとバリデーショ
アップロードの進捗状況が分かるプログレスバー付きのJavaScript製ファイルアップローダー - Yahho Uploader [ゼロと無限の間に]
下記の内容のXMLファイルを作成し、アップロード先のサーバのWebディレクトリのルートに“crossdomain.xml”という名前で保存する。（参考：Flashのドメイン間のデータロード許可） ただし、YUIのファイルを自分のサーバからロードする場合は不要。<?xml version="1.0"?> <cross-domain-policy> <allow-access-from domain="ajax.googleapis.com" /> </cross-domain-policy> 後は下記の例を参考に、アップローダーを組み込む<!-- Yahho Uploaderを読み込む --> <script type="text/javascript" src="path/to/your/yahho-uploader.js"></script> <!-- Yahho Uploader設置の
jqueryでファイルアップロードにオススメなプラグイン「jQuery-File-Upload」 | ホームページ作成、システム設計 glic株式会社
こんにちわ。 プログラマの湊です。 今回は、jqueryでファイルアップロードにオススメなプラグイン「jQuery-File-Upload」をご紹介いたします。 今まで使用した中でも、抜群のカスタマイズ性があるのでオススメですよ☆ ダウンロード ソースコードはGithubに上がっております。 https://github.com/blueimp/jQuery-File-Upload デモページはこちらから 使い方 指定のJS,CSSファイルを下記のように読み込み、呼び出してあげるだけでOK。 僕の場合は、composerを利用し、アップデートを楽にしております。（composerについてはまた別の機会に） bootstrapにも対応しておりますので、簡単にスタイル設定されます。 jqueryベースですので、jqueryは読み込んであげて下さい。(コードはサンプルのものを抜粋しております。)
Progressbarウィジェットでプログレスバーを作成するには？
jQuery UIは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、ユーザーインターフェイス（UI）に関わる機能を提供します。jQuery UIの導入方法や使い方、jQuery UIが提供する主要なコンポーネントについては、「jQuery UI逆引きリファレンス： jQuery UIを利用するには？」を参照してください。 Progressbarは、名前のとおり、プログレスバーを実装するためのウィジェットです。（例えば）ファイルのアップロードのような時間のかかる処理を実行する際に、その進捗（しんちょく）状況をユーザーに対して通知するために利用します。 HTML5でも、同じ役割を持つ<progress>要素が用意されていますが、まだまだ未対応のブラウザーを利用しているユーザーも少なくはありません。当面は、Progressbarウィジェットにお世話になる局面も多いでしょう
jQueryでプログレスバー機能を実装する | オウンドメディア | 大阪市天王寺区ホームページ制作｜合同会社デザインサプライ-DesignSupply.LLC-
ページの読み込み進捗状況をプログレスバーで表示されているのをたまに見かけますが、今回はjQueryでそれを実装してみたいと思います。前回記事「jQueryでページローディング機能を実装する」と合わせてページローディングのUIとしてみたり、…
jQuery【 jQuery UI 】progressbar を使用してプログレスバーを作成 - プログラマカレッジ
1. progressbar を使用してプログレスバーを作成 jQuery UI の progressbar を使用して プログレスバーを作成します。 スタートボタンをクリックしてみて下さい。 上のサンプルのソースコードは次の通りです。 <script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script type="text/javascript"> $(function(){ $("#wkBtn").click(function(){ $("#wkPg").progre
6.x バリデーション Laravel
イントロダクションIntroduction Laravelは入力されたデータに対するバリデーションのさまざまなアプローチを提供しています。Laravelの基本コントローラクラスはパワフルでバラエティー豊かなバリデーションルールを使いHTTPリクエストをバリデーションするために便利な手法を提供している、ValidatesRequestsトレイトをデフォルトで使用しています。Laravel provides several different approaches to validate your application's incoming data. By default, Laravel's base controller class uses a ValidatesRequests trait which provides a convenient method to validate
作成してみよう！LaravelでAPIを扱う方法【初心者向け】
APIとは API（Application Programming Interface）は、アプリケーション同士を協調して動作させるための仕様です。 アプリケーションはAPIを提供することで、他のアプリケーションとやりとりすることができます。 例えば、Twitter、Facebookなど様々な事業者は自社のサービスを外部のアプリケーション向けに提供するために、Web APIを公開しています。外部のアプリケーションはそれらのWeb APIを通してサービスを利用できます。 私たちがWebページを参照する場合、WebブラウザがHTTPのURLにリクエストし、レスポンスとして返されるHTMLを描画します。 それと同様にWeb APIの場合も、アプリケーションがHTTPのURLにリクエストし、レスポンスとして返されるデータを処理します。 Web APIでは、HTTP経由でJSON形式のメッセージを送
JQueryのAjaxのJSONを取得したい
JQueryのAjaxでdone()を使用しています。その返り値から以下のようにJsonデータを取得しようとしているのですが、エラーがでてできません。 //$.Ajax().done(function(response){ var data = $.parseJSON(response.responseJSON); }); エラー Uncaught SyntaxError: Unexpected token o //エラー箇所localhost/:1 レスポンスのJSONは以下のものです。 {"code":900,"message":"Already existed"} どうすればJSONを取り出してオブジェクトにできるのかおしえてください。よろしくお願いします。
post()：postメソッド(成功はdone、失敗はfail)による非同期通信 - jQuery無双
postメソッド(成功はdone、失敗はfail)による非同期通信の書式 $.post({ url: リクエスト送信先のURL, data: URLのクエリ（パラメータ）, }).done(function(data, textStatus, jqXHR){ // 成功の場合の処理 }).fail(function(jqXHR, textStatus, errorThrown){ // エラーの場合処理 }); postメソッド(成功はdone、失敗はfail)による非同期通信する場合は、 postメソッドを使用します。 具体例(postメソッド(成功はdone、失敗はfail)による非同期通信のサンプルコード) リクエストの送信先のテスト用のPHP １．受け取ったリクエストタイプの判定 ２．ajax通信にて受け取ったパラメータを各変数に代入 ３．このパラメータはmethod（非同期通信で
prepend(content) - jQuery 日本語リファレンス
<p>there friend!</p> <p>amigo!</p> $("p").prepend("<b>Hello </b>");
jQueryでページ読み込み中にローディング画面を表示する方法｜Gimmick log
TOPjQuery jQueryでページ読み込み中にローディング画面を表示する方法 jQueryでページ読み込み中にローディング画面を表示する方法 公開日：2015.11.20 更新日：2020.05.19 jQuery, ローディング jQueryでローディング画面を実装しました。 全てのページの内容が読み込まれたらローディング画面が非表示になる仕様です。 2GRAVITY様の方法を参考にさせていただいています。 jQueryを使わずにjavaScriptで実装するプラグインはこちら デモページ 実装方法 html ロード画面とロード後に表示させたい要素を個別に括っておきます。 <div id="loader-bg"> <div id="loader"> <img src="img-loading.gif" width="80" height="80" alt="Now Loading.
[JavaScript] Ajaxでファイルをアップロード【jQuery使用】 - Qiita
<form id="my_form"> <input type="file" name="file_1"> <button type="button" onclick="file_upload()">アップロード</button> </form> 【注意点】 ボタンに type="button" が無い場合は submit と見なされ、ボタン押下時にブラウザーが勝手にアップロードしてしまいます(現画面を再更新)。そのため、下記 JavaScript によるアップロード処理中には意図しない status が返ってくるため、成功したり失敗したり、不可解な動きとなります。 function file_upload() { // フォームデータを取得 var formdata = new FormData($('#my_form').get(0)); // POSTでアップロード $.ajax({
![[JavaScript] Ajaxでファイルをアップロード【jQuery使用】 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/6f7580cb2aa91402287c6c00933e589f24e2c7fd/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-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMEFqYXglRTMlODElQTclRTMlODMlOTUlRTMlODIlQTElRTMlODIlQTQlRTMlODMlQUIlRTMlODIlOTIlRTMlODIlQTIlRTMlODMlODMlRTMlODMlOTclRTMlODMlQUQlRTMlODMlQkMlRTMlODMlODklRTMlODAlOTBqUXVlcnklRTQlQkQlQkYlRTclOTQlQTglRTMlODAlOTEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTY0ODdiYjNmM2JhZjA3OGM2M2VjNGM4NDNmMzI5MDQ4%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQweWFzdW1vZGV2JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1hZGVmYjFjYWYyMmRmM2Q0ZTE2MDg4NGE0ZTg3MjExNg%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dd4874a06e75ab172c161d55785d87480)
ajax(jQuery)でファイルをアップロードする - Qiita
<form> <input type="file" name="upfile"> <button id="upButton" type="button">送信</button> </form> let $upfile = $('input[name="upfile"]'); let fd = new FormData(); fd.append("upfile", $upfile.prop('files')[0]); $('#upButton').on('click', function () { $.ajax({ url:'index.php', type:'post', data: fd, processData: false, contentType: false, cache: false, }).done(function (data) { // 成功時の処理 }).fail(fu
吉村知事「軽々に」インサイダー疑惑に語気荒げ反論 - 社会 : 日刊スポーツ
大阪府の吉村洋文知事（45）は11日、府庁で取材に応じ、殺菌効果のあるポビドンヨード配合のうがい薬をめぐり、会員制交流サイト（SNS）などで批判の声が続出している“インサイダー取引疑惑”について反論した。 インサイダー取引は不当に株を売買することだが、吉村知事は「まずインサイダー取引というのは犯罪です。ネット上で匿名とは言え、『インサイダー疑惑がある』とか軽々には言わないほうがいい。注意されたほうがいい。もちろん、インサイダー取引にはいっさい、関わりはない。そんな事実はありえない。そもそも経済的な利益を得ようとして知事をやっているわけではない」と、ぴしゃりと言い放った。 さらに「維新が嫌いなのは分かる。発表の仕方に問題があるという声も分かる。ただ『インサイダーじゃないか』というのは、ちょっとそこは『あなたは犯罪者』に等しい」と語気を荒らげた。 吉村知事は4日の会見で、大阪はびきの医療センタ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【ゲーミング】PCを自作した弟『俺は光らせるつもりはなかったのに自作する上で必要だから組み込んだパーツが問答無用で七色に光る』
Nuxt.js vue-moveableを使用してドラッグ、サイズ変更、回転可能な要素を作成する
Nuxt.js ライブラリ「vue-table-dynamic」を使用してテーブルを実装する
https://www.web-development-kb-ja.site/ja/javascript/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E9%9D%9E%E5%90%8C%E6%9C%9F%E7%9A%84%E3%81%AB%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/958371745/
Loading...
【ajax】通信エラーとなった原因の取得方法 | クロジカ
LaravelでAjaxかどうか判定し、自動テストにも対応させる - Qiita