UISearchBarのキーボードの検索ボタンのラベルを変える
UISearchBarのキーボードのReturnキーのラベルはデフォルト「検索」になっています。
検索欄に入力すると随時検索処理を走らせて、入力が終わったらキーボードを閉じるだけの処理を行いたい場合、
「検索」ボタンだと何かしっくりこない感じがします。
そこで、キーボードの右下にある青いボタン（Returnキー）のラベルを変えてみました。
UISearchBarは、入力値はtext属性で取得出来てもTextInput自体は普通には取れませんでした。
そこで、キー値を指定して取得する方法がありました。
UISearchBarに対してvalueForKeyで「_searchField」を指定するという方法で取れます。
実装例は以下です。
//検索バー UISearchBar *searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 44.0f)]; searchBar.delegate = self; searchBar.showsCancelButton = YES; searchBar.placeholder = @"店名や市区名で絞り込み"; //デフォルトキーボードタイプ searchBar.keyboardType = UIKeyboardTypeDefault; searchBar.barStyle = UIBarStyleBlack; //「_seachField」キーを指定してUITextFieldを取得 UITextField *searchInputTextField = [searchBar valueForKey:@"_searchField"]; //Returnキータイプを「完了」に変更 searchInputTextField.returnKeyType = UIReturnKeyDone; //テーブルビューのヘッダーに設定 self.tableView.tableHeaderView = searchBar;
・変更前
・変更後
returnKeyTypeにはUIReturnKeyDone（完了）の他に、UIReturnKeyJoin（接続）やUIReturnKeyGo（開く）などがあります。
・参照
http://stackoverflow.com/questions/1407833/uisearchbar-text-color
ちなみに、キーボードを開いた時にReturnキーをタップ不可にしたくない場合は、
以下の設定を追加すれば入力値が0文字でもReturnキーをタップする事が出来ます。
//自動でReturnキー活性非活性の制御をOFF searchInputTextField.enablesReturnKeyAutomatically = NO;
UISearchBarのキーボードの検索ボタンのラベルを変える
UISearchBarのキーボードのReturnキーのラベルはデフォルト「検索」になっています。
検索欄に入力すると随時検索処理を走らせて、入力が終わったらキーボードを閉じるだけの処理を行いたい場合、
「検索」ボタンだと何かしっくりこない感じがします。
そこで、キーボードの右下にある青いボタン（Returnキー）のラベルを変えてみました。
UISearchBarは、入力値はtext属性で取得出来てもTextInput自体は普通には取れませんでした。
そこで、キー値を指定して取得する方法がありました。
UISearchBarに対してvalueForKeyで「_searchField」を指定するという方法で取れます。
実装例は以下です。
//検索バー UISearchBar *searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 44.0f)]; searchBar.delegate = self; searchBar.showsCancelButton = YES; searchBar.placeholder = @"店名や市区名で絞り込み"; //デフォルトキーボードタイプ searchBar.keyboardType = UIKeyboardTypeDefault; searchBar.barStyle = UIBarStyleBlack; //「_seachField」キーを指定してUITextFieldを取得 UITextField *searchInputTextField = [searchBar valueForKey:@"_searchField"]; //Returnキータイプを「完了」に変更 searchInputTextField.returnKeyType = UIReturnKeyDone; //テーブルビューのヘッダーに設定 self.tableView.tableHeaderView = searchBar;
・変更前
・変更後
returnKeyTypeにはUIReturnKeyDone（完了）の他に、UIReturnKeyJoin（接続）やUIReturnKeyGo（開く）などがあります。
・参照
http://stackoverflow.com/questions/1407833/uisearchbar-text-color
ちなみに、キーボードを開いた時にReturnキーをタップ不可にしたくない場合は、
以下の設定を追加すれば入力値が0文字でもReturnキーをタップする事が出来ます。
//自動でReturnキー活性非活性の制御をOFF searchInputTextField.enablesReturnKeyAutomatically = NO;
ラーメン二郎系のお店一覧ページを作りました
↓コチラ
ラーメン二郎系のお店一覧
jQuery Mobileで作成したのでiPhoneやAndroidなどのモバイルブラウザに最適化されています。
自分で実際に食べたお店しか載せない・自分で撮った写真しか載せないため、
まだお店の数も少なかったり地域が偏ってたりします。
技術＆コンテンツ不足ではありますが、これからどんどん機能を増やして
カバーできたらいいなと思っています。
2012/06/26 更新
・お店に関するツイート一覧表示を実装しました。 ・@jirolian関連のツイート一覧表示を実装しました。（ジロツイボタン）
Androidではdatasetがうまく取れない？
リストアイテムにhtml5の独自データ属性（data-*形式）を設定し、
リスト選択時にdatasetから取得をやってみた。
PC+ChromeやiOSでは取得出来たけど、Android(2.3で確認)ではエラーになる模様。
実装内容は、liタグに独自のデータ属性(data-test="true")を設定。
リストのクリックイベントで、datasetから設定したデータ属性値を取得。
・list.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title> 二郎系一覧 </title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <style> /* App custom styles */ /* jQuery Mobileのリスト内の文字を折り返す */ .ui-li .ui-btn-text a.ui-link-inherit { white-space: normal !important; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="list.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-theme="a" data-role="header"> <h3> 二郎系一覧 </h3> </div> <div data-role="content"> <ul id="list" data-role="listview" data-divider-theme="a" data-inset="false"> <li data-theme="c"> <a href="" data-test="true">東京都 世田谷区 豪徳寺らーめん りらくしん</a> </li> <li data-theme="c"> <a href="" data-test="false">テスト１</a> </li> <li data-theme="c"> <a href="" data-test="true">テスト２</a> </li> <li data-theme="c"> <a href="" data-test="false">テスト３</a> </li> </ul> </div> <div data-theme="a" data-role="footer" data-position="fixed"> </div> </div> </body> </html>
・list.js
//ページ１初期表示時のイベント $('#page1').live('pageinit', function() { $('li').click(function(e) { alert(e.target.dataset.test); }); });
デバイスによって動きが違うから動作確認が大変・・・。
jQuery Mobileのリスト表示で長い文字を折り返す
リスト内の文字数が多い場合、iPhoneなど幅の表示幅の狭いデバイスでは全て表示しきれない事があります。
その場合末尾に「...」と表示されて、以降の文字が省略されるのですが、全ての文字を表示したい場合はCSSを記述して調整します。
以下は、折り返し前の状態のjQuery Mobileのページソースです。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title> 二郎系一覧 </title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <style> /* App custom styles */ </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="list.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-theme="a" data-role="header"> <h3> 二郎系一覧 </h3> </div> <div data-role="content"> <ul id="list" data-role="listview" data-divider-theme="a" data-inset="false"> <li data-theme="c"> <a href="">東京都 世田谷区 豪徳寺らーめん りらくしん</a> </li> <li data-theme="c"> <a href="">テスト１</a> </li> <li data-theme="c"> <a href="">テスト２</a> </li> <li data-theme="c"> <a href="">テスト３</a> </li> </ul> </div> <div data-theme="a" data-role="footer" data-position="fixed"> </div> </div> </body> </html>
・適用前のリスト
リスト内の文字を折り返す場合は、以下のCSSを上記ソースのstyleタグ（App custom stylesの部分）に追記します。
/* jQuery Mobileのリスト内の文字を折り返す cssのセレクターでaタグを特定 */ .ui-li .ui-btn-text a.ui-link-inherit { white-space: normal; }
white-spaceで、タグ内に表示されている文字のスペース・タブ・改行の表示方法を指定します。
ここでは、折り返したいので「normal」で自動改行を指定します。
また、事情によりjQuery MobileのCSSリンクタグより前に記述する必要がある場合は、
「white-space: normal !important;」と指定して、適用優先度を上げます。
・適用後のリスト
