Laravel Whereの使い方をケース別にまとめ | 実践的Web開発メソッド
LaravelのEloquentは、シンプルなデータ操作が可能なORMです。今回は、Eloquentのwhere系メソッドの使い方をケース別にまとめました。 題材として、よくあるブログのデータをサンプルに、where系メソッドの使い方を説明します。 ※ 本記事のサンプルはLaravel5.6で動作確認済みです。 テストデータ概要 サンプルとして上記のデータベースを利用します。 記事のデータ（Posts）があり、一人の著者と複数のタグが紐づくデータを想定しています。 記事と著者は1対多、記事とタグは多対多の関係となります。 部分一致記事のタイトルに対して、あるワードが含まれる記事を検索したいケースなどを想定しています。 Eloquentのwhereを使った実装は下記のようになります。 部分一致で検索したいため、whereの第二引数にLIKEを設定します。 $title = 'velit';
HTMLのSelectタグやInputタグのRadioボタンをReadOnlyにする方法
チェックボックスをリードオンリーにする方法を調べていたとき、実はコンボボックス（Selectタグ）をリードオンリーにする方法も同時に調べていて、挫折した。 でも案外簡単。 必要な部分以外を削ったソースはこんな感じ <select> <option disabled="">犬</option> <option disabled="">猫</option> <option selected="">オランウータン</option> <option disabled="">うさぎ</option> </select> で結果が こうなる。 SelectタグもReadonly属性では無理なので散々迷ったが実際なんのことない、selected属性を付けたoption以外はdisableにするだけ（実は選択可能なオプションが1つだけなのでselected=""は無くても同じだが有った方が分かりやすいでし
selectボックスを華麗にしてくれる「Chosen」「Select2」
selectボックスに当てるjQueryプラグインを色々探してみましたがこれに決めました。シングルやマルチ、またグループにも対応しています。インスタンス検索してくれるのが決め手 Chosen CDN ライブラリ <link href="chosen.css" type="text/css" rel="stylesheet"> <script src="jquery.min.js" type="text/javascript"></script> <script src="chosen.jquery.min.js" type="text/javascript"></script> 実装 既存のselect(combo)ボックスにidもしくはclassを付与して、以下を追加するだけです。 $("#sel1049").chosen(); jQuery以外のJavascriptフレームワーク用のも
jQuery multiselect
I'm a user-friendlier drop-in replacement for the standard <select> with multiple attribute activated. Free (under WTFPL license) Works in an unobtrusive fashion Fully open sourced Keyboard support Provides some callbacks Fully customizable via CSS Depends on jQuery 1.8+ Tiny code ~8kb minified HTML <html> <head> <link href="path/to/multiselect.css" media="screen" rel="stylesheet" type="text/css">
セレクトボックス（multiple）間の移動 | jQuery逆引き | Webサイト制作支援 | ShanaBrian Website
jQueryでセレクトボックス（multiple）間のアイテムの移動を行う実装方法をご紹介します。 ※ ソート機能などはありません。 デモ HTML <select name="list1" size="5" multiple="multiple"> <option value="項目1">項目1</option> <option value="項目2">項目2</option> <option value="項目3">項目3</option> <option value="項目4">項目4</option> <option value="項目5">項目5</option> <option value="項目6">項目6</option> <option value="項目7">項目7</option> <option value="項目8">項目8</option> <option va
Bootstrapのselectをカッコよくできる「Bootstrap-select」:phpspot開発日誌
Bootstrap-select Bootstrapのselectをカッコよくできる「Bootstrap-select」。 通常のselectをもっとカッコよくカラフルにすることが出来ちゃいます カラフルなのもなかなか使えそう 関連エントリ BootStrapのフォーム入力をもっと便利にするための「Bootstrap Form Helpers」 BootstrapをベースとしたフリーのUIKit「Flat UI」 Bootstrapのテーマで良い感じに動くオートサジェスト実装jQueryプラグイン「MagicSuggest」 Bootstrapなサイトで使えそうなクールなツールチップ実装jQueryプラグイン「Smallipop」 Bootstrapベースのサイトでサイトの使い方をステップ別にオーバレイ表示できる「Bootstro.js」 Bootstrapに270の使えるアイコンを追加で
jQueryプラグインChosenの使い方 - 小さい頃はエラ呼吸
はじめに selectボックスをスタイリッシュにしてくれるjQueryプラグインChosenの使い方をまとめてみました。 Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)posted with amazlet at 13.06.12西畑一馬 アスキー・メディアワークス 売り上げランキング: 4,610 Amazon.co.jpで詳細を見る デモ 以下のサイトでChosenを体験することができます。 Chosen - a JavaScript plugin for jQuery and Prototype - makes select boxes better Chosenの基本的な使い方 １．jsライブラリをインクルードします。 <script type="text/javascript" src="http://ajax.googleapi
[JS]フォームのselect要素をHTMLの変更無しで、ミニマルに美しく使いやすくするスクリプト -Minimalect
フォームのselect要素をHTMLには手を加えずに、美しいミニマルなデザインを適用し、使いやすさもアップさせるjQueryのプラグインを紹介します。 デザインのテーマも用意されており、オリジナルのテーマをスタイルシートベースでつくることもできます。 Minimalect Minimalectの特徴 Minimalectのデモ Minimalectの使い方 Minimalectの特徴 select要素を洗練されたデザインに置き換えます。 optgroupsのサポート。 フィルタリングのサポート。 キーボードナビゲーション。 テーマのサポート。 Minimalectのデモ HTMLの変更は無しで、select要素を美しく、そして使いやすくしたデモがあります。 まずは、一つ目。
Bootstrap向けの、select要素の複数選択を分かりやすくするjQueryプラグイン・Bootstrap Multiselect - かちびと.net
Twitter Bootstrap向けに作られた、select要素の複数選択を分かりやすくするjQueryのプラグインのご紹介。個人的にBootstrapの使用率が減りましたので利用させてもらう機会は無いかもですけど・・ Bootstrap向けのマルチセレクトのユーザビリティ向上用スクリプトです。 チェックボックス式になっていて、チェックが入るとハイライトされます。 数が多い場合はenableFilteringというオプションを使えばフィルタリングもできる。と言っても、あまり多すぎるようならもう少し工夫しないとですね。 <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="bootstrap.min.js"></script> <script type
selectボックスをインクリメンタル検索可能に機能拡張できるjQueryプラグイン「zelect」:phpspot開発日誌
mtkopone/zelect GitHub selectボックスをインクリメンタル検索可能に機能拡張できるjQueryプラグイン「zelect」 既存のselectは初期のブラウザで実装されたもので、大概古いインタフェースなわけですが、標準ではあのままです。 これを簡単にjQueryプラグインで、インクリメンタル検索対応にして入力を楽にできます。 選択肢が多すぎる場合なんかに便利 関連エントリ selectボックスをiPhoneのOn/OffスイッチっぽくできるjQueryプラグイン「switchy」 selectボックスをリッチかつクールにできるjQueryプラグイン「jAutochecklist」 selectボックスを超カッコよくするjQueryプラグイン「Chosen」
セレクトボックスの検索もタグの補完入力もこれ一つでできる！ BootstrapベースのjQueryプラグインSelect2
セレクトボックスの検索もタグの補完入力もこれ一つでできる！ BootstrapベースのjQueryプラグインSelect2 「Select2」はセレクトボックスに検索機能を付けたり、タグの補完（サジェスト）入力ができるBootstrapベースのjQueryプラグインです。 投稿日2013年05月14日 更新日2013年05月14日 準備 最初に「bootstrap」と「select2」のcss&jsと「jQuery」を読み込みます。 （bootstrapのcssは必須ではないです。） html <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/select2.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/
【jQuery】selectboxにoption要素の追加・削除をする at softelメモ
状況によって、動的に、jQueryで、選択項目を増やしたり、減らしたりしたい。 そんな時に役立つ基本的なやり方。 //select要素のIDをselectとする //追加するとき $('#select').append($('<option>').html("追加される項目名").val("追加される値")); //全て取り除くとき $('#select > option').remove(); //選択されたものを取り除くとき $('#select > option:selected').remove(); 普通にHTMLに追加、削除をするだけ。 応用するとデモみたいなことも楽にできる。 DEMO selectboxにoption要素の追加・削除をする。- デモ
optionタグを選択不可にする disabled 属性 | Sun Limited Mt.
フォーム画面を動的に表示してある条件のときにはラジオボタンなどを disabled にしたりします。 今回もあるフォームを作成していて在庫が0のときに select タグで表示する項目を選択できないようにしたかったので調べてみたところ、option タグにも disabled 属性がありました。 そこで下記のようにしてみたところ <form action=""> <select> <option>オプション1</option> <option disabled="disabled">オプション2</option> <option>オプション3</option> <option>オプション4</option> </select> <input type="submit"> </form> うまく選択不可になりました。 ところが Firefox では OK だったのですが、IE6では選択可能に
画像をクリックで選択してフォーム送信できるようにするjQueryプラグイン「Image Picker」:phpspot開発日誌
画像をクリックで選択してフォーム送信できるようにするjQueryプラグイン「Image Picker」 2013年01月18日- Image Picker 画像をクリックで選択してフォーム送信できるようにするjQueryプラグイン「Image Picker」。 好きな画像を選んでもらう、というようなインタフェースを考えた時に、画像をそのまま表示してクリックして選ぶというのが当たり前のインタフェースですが、これをHTMLで簡単にできるようにするのはちょっと面倒。 というわけで、こちらのプラグインを活用すれば、selectボックスを簡単に画像選択UIに変換出来ます selectのoptionにdata-img-srcといった感じで画像のパスを定義しておいてあげればOK Pinterest風なレイアウトに出来るのも今時のライブラリ感がありますね 関連エントリ フォームをカッコよくするjQuery
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
