新しく記事を書きました（2016/03/19）。こちらを、参考にしてください。 ・Rails で確認画面を作る＜Perfect Edition＞ confirm アクションが許されるのは小学生までだよねーってことで、私が良く使う方法。rails3.0.7 で確認。 rails g scaffold article title:string models/article.rb を以下のように書き換え。 views/articles/_form.html.erb を以下のように書き換えて実行。controller や、routes を書き換える必要は無し。これで、確認画面の時のvalidation とかもちゃんと動く。 （追記） confirming に無理やり値を入れられた場合は「確認したくない」という意思表示とみなして、確認画面をスキップします。confirming のhidden を、チ
Before in view <% form_for_tag blabal do |f| %> <%= f.text_field_tag :quick, params[:search][:quick] %> <%= select_tag("country", options_for_select([["unassigned" , "0" ]] + Country.to_dropdown, region.country_id), {:name => "search[country]"} ) %> <%= f.submit "Search" %> <% end %> After in controller require 'ostruct' def index @search = OpenStruct.new(params[:search]) end in view <% form_for :
こんにちは。神崎です。 早速ですが auの端末でselectboxの中身が改行されて意図しない表示になることがあります。 これを回避するには<option>内に<span style="font-size:x-small"></span>を適用するとよいです。 <select name="pref"> <option value="1" selected="selected"><span style="font-size:x-small">北海道</span></option> <option value="2"><span style="font-size:x-small">青森県</span></option> </select> 村式では上記のことをよしなに適用してくれるsymfonyやCodeIgniterのプラグインを社内ライブラリとして開発し利用をしています。 機会があれば、プ
１個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」 2010年05月26日- jQuery Doubleselect Plugin １個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」。 次のように、１個目のSelectボックスの内容によって２個目のselectボックスの内容が容易に切り替えるようなUIが簡単に実現できてしまうプラグインです。 １個目が野菜(Vegetables)の場合は、tomato, potato, asparagus が表示されます。 １個目をフルーツ(Fruits)にすると、apple, orange, kiwi, melon になります。 いざ実装しようとすると面度臭そうなのですが、jQueryプラグインによって、比較的簡単に実装できま
入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」 2010年05月24日- Autotabindex Example 入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」。 例えば、携帯番号を入力する場合など、一定の文字数以上になった場合に、TABキーを押すなどせずとも、次のフィールドにカーソルを合わせることができます。 TABキーを知らないライトユーザーな方々はマウスでいちいち移動していたりもしますが、このプラグインでユーザビリティを上げられそうです。 JavaScript で１から実装するとなると、少し面倒な上に、要素ごとにonkeydownを入れたりしてコードが汚くなったりしますが、jQueryプラグインなので１行で次のように初期化できます。 $(document).ready(fun
ボックス間でアイテム移動できるselectボックス実装jQueryプラグイン「multiselect2side」 2010年05月24日- Senamion.com - multiselect2side (multiple select double side) plugin: documentation and demo page ボックス間でアイテム移動できるselectボックス実装jQueryプラグイン「multiselect2side」 デスクトップアプリケーションなんかでよくある、使うリスト＆使わないリストを表示する際に便利なUIを実装出来ます。 select ボックス内のアイテムを複数選択して、移動することも出来ます。 ボックスの中身をソートすることも出来ます。 ボタン部分のUIが独特ですが、CSSでリデザインできるようなので安心です。 このUIで、例えば、利用者がWEBサイト
※) 最新版をprefSupport.jsとあわせてjQuery.selectable.jsにまとめました。 jQuery.selectable.jsをごらんください。 フォームで西暦とか月、日付入力がselectだったりすると… 1984年…スクロール…あ、、ずれた、、 みたいにすごい勢いでイライラする人多いはず。 カレンダーから入力出来るライブラリもあるけど あれやと西暦だけ選択、とか月だけ選択が出来ないので それ単体でも使えるようなのが欲しいなー。と思って作った。 会員登録とかそういうとこで西暦だけ選択が多い。。。 そういえば都道府県選択のやつ便利やなぁ。 →追記@08.07.21 都道府県の選択はselect拡張で作りました。 導入は超簡単。 データをダウンロード(20KB)、解凍とかテキトーに保存してヘッダでCSSとスクリプトを読み込んで、 適用したいinputのクラスにyear
pForm - Free HTML Form Builder - Create Web Form Template Online WEBフォームをWEB上でWYSIWYG編集して瞬時にダウンロードできる「pForm」。 出来上がるフォームのなかなかのカッコ良さで十分実用できると思います。 まずは多数あるサンプルカラーの中から好きな色合いを選びます。 フォームに追加したい、テキストボックスやドロップダウンなどのクリックで追加していきます。 追加したらその場でサクサク反映されます。 で「Save Form」ボタンを押します。 たったこれだけのステップで完成しました。 ダウンロードしたフォームにはCSS、JavaScriptが含まれていてなかなかカッコいいものになってます。 HTML部分はサクッと終わってしまうので、あとはこれをカスタマイズして送信できるようにすればいいだけです。 残念ながら、P
セレクトボックスをアンカーっぽくしてスッキリさせられるjQueryプラグイン「Narrative Select」 2010年05月12日- JQuery Narrative Select Plugin セレクトボックスをアンカーっぽくしてスッキリさせられるjQueryプラグイン「Narrative Select」が公開されています。 例えば、文章の途中にselect ボックスで選択肢を入れるようなUIがあったとすると、次のようになります。 普通にやれば、上のようになりますが、今回紹介するプラグインを使えば、次のようにアンカーっぽくなります。 クリックすると、select のように選択肢が次のようにカッコよく表示され、変更すると、当然、内容も変更されます。 Correct → Incorrect になりました。 select ボックスによるデザインも分かりやすくていいという意見もあると思いま
連休は足の踏み場もない部屋を片付けて模様替えをしていたtanakaです。今日はCakePHPのコネタで、複数のボタンをフォームに設置する話を紹介します。 複数の送信ボタンが欲しい 例えば、更新フォームに更新ボタンと削除ボタンが欲しいとします。単にinput type="submit/image"なボタンを配置すると、サーバーサイドで、押されたボタンが判別できません。(例が強引ですみません。更新ボタンと、更新して戻るボタンとかでもかまいません。でも、この例であれば、削除ボタンをリンクにすればほぼ解決しますね。それはさておき) 2つのボタン <?php e($form->submit('更新'));?> <?php e($form->submit('削除'));?> この2つのボタンのどちらが押されたかを判別するにはname属性を追加するといいでしょう。 <?php e($form->subm
![[cakephp]複数のボタンのどれが押されたかを判別する | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/c7796aeff850adf4c767f9064eba6e857cd01e20/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fbashalog.c-brains.jp%2Fimages%2Fcat_php.png)
twitter facebook hatena google pocket フォームに何を入力していいかうっすら表示するウォーターマークをたまに見ます。 これによりユーザビリティの向上が図れます。 このウォーターマークをオシャレに表示するjQueryプラグインSliding Labels jQuery Pluginを紹介します。 sponsors 使用方法 Sliding Labels jQuery Pluginからjquery.slidinglabels.jsをjQueryからjquery.jsをダウンロードします。 また以下のようなフォームがあったとします。 <form id="contactform"> <div class="slider"> <label for="name">お名前</label> <input type="text" id="name" name="name"
checkboxがcheckされてるかどうかを判別するメソッドってjQuery側に用意されてないんですよね。 twitterでも色々教えてもらったけど方法としては3つくらいかなー。 https://twitter.com/kyo_ago/status/11685019866 https://twitter.com/songmu/status/11675950113 https://twitter.com/rea/status/11675545507 素のHTMLエレメントから取得 var checked = $('#elem').get(0).checked; せっかくjQuery使ってるのにという感じがいなめない。。これはないかな。 is()で取得 var checked = $('#elem').is(':checked'); これが一番直感的ではある。これでいいっちゃいい気もする。
twitter facebook hatena google pocket 近年スパム防止のためフォームにCAPTCHA（キャプチャ）と呼ばれる仕組みを導入しているケースが多く見られます。 これ読みにくい英数字なので、本当に読めない場合がありイラッとすることもあります。 JavaScriptライブラリの大御所jQueryのプラグインslideLockを利用するとロックを解除するだけなので、ユーザーフレンドリーになります。 sponsors 使用方法 slideLock Demoのファイルダウンロードが404なので、jslideLock.zipからダウンロードして下さい。 またjQuery UIの1.7+slider pluginが必要となります。 <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <scri
テキストエリアにTwitterみたく残り文字数を超簡単に表示できるjQueryプラグイン「NobleCount」 2010年03月25日- jQuery Plugin: Give Your Characters a NobleCount The Product Guy テキストエリアにTwitterみたく残り文字数を超簡単に表示できるjQueryプラグイン「NobleCount」。 今、テキストエリア内に何文字はいっているのか？というのは、文字数制限をしているフォームにとっては重要なユーザビリティになりますね。 送信ボタンを押した後に、文字数オーバーです、というのは不親切ですしサーバに無駄なリクエストが増えることになります。 Twitter では残り文字数を表示していますが、これをjQueryで１行で実装してしまえるのがこのプラグイン。 $(element).NobleCount('#ta
ちょっと便利かも、と思ったので ご紹介。送信フォームなどを オンラインで手軽に作成できる Webサービス、Accessifyです。 パスワード（type=”password”） なんかも作れますよ。 ちょっとした入力フォームなんかをパッと作りたいときに便利かも。 なかなかお手軽なサービスでしたよ。ユーザー登録も不要で、HTMLソースを吐き出すだけの仕組みなので日本語も問題なく使えます。CMSの普及が進めば必要なくなるかもしれませんが・・・ 使い方・Step1 まず入力項目（label）を作ります。複数作る際は改行します。良ければnextを。 Step2 それぞれの項目のinput typeを選択します。必須項目はRequired field?にチェックを入れてください。 Step3 詳細を決定します。フォームのメソッド、nameやidを含めるかどうか、などなど。 完成 HTMLコードが出て
Cakephp1.2.6 追記(2010/12/16)： コメントでPHP5.3の動作不具合報告を頂いたので対応しました。報告ありがとうございました。現状、PHP5.2.15, PHP5.3.4で確認し、CakePHPは1.3.6, 1.2.9で確認しました。gitの最新版か、githubにあるダウンロードボタンから0.02というバージョンのコードをダウンロードしてご利用ください。 入力項目が多くなると、確認画面を作るのも時間がかかりますよね、面倒ですし。今までは、確認画面で別途 $form->value使うとか、Postの値をそのまま表示するようにしてたのですが、デザインが入力画面とほぼ同じなのに別に実装するのがなんだかなと思ってました。それに嫌気がさして、フォーム入力画面でも確認画面でも同じメソッドで、フォームタグと値の表示を切り替えるXformHelperを開発しました。 機能は色々
Download Download Uniform jquery.uniform.zip (155kb) Get source on GitHub version 1.5 (2/9/2010) Uniform styles: Selects (Drop downs) Checkboxes Radio buttons File Upload inputs Tested & Compatible in: Safari 3+ Firefox 3+ IE7+ Chrome jQuery 1.3+ Have you ever wished you could style checkboxes, drop down menus, radio buttons, and file upload inputs? Ever wished you could control the look and feel
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
