jsWaffle質問掲示板(雑談やTips歓迎)

jsWaffleについて質問する掲示板です。(雑談や発見したTipsの投稿も大歓迎です!)
[一覧へ] > (@40) [普通] [解決]
@40■ (#132) 下部に常にボタン等を表示する方法 - おっと (2011-08-17 23:51) /普通 質問
jsWaffleを数日前に使い始めました。
とてもシンプルにできていて、学習コストも低くて感動しております。

さて、早速ですが、以下の疑問がありますので、お手数ですがご回答いただければ幸いです。

よろしくお願い致します。

【質問事項】
とても基本的な話かもしれませんが、上部にはスクロールする画面(アプリのメイン画面)、下部にスクロール連動しないボタンを常に表示しておくようなレイアウトは可能なのでしょうか。

【調べた事】
index.htmlの一番下に書けば当然のことながら下に流れて表示されませんので、divタグを使ってcss(overflow)で調整してみましたが、上部がスクロールされませんでした。
layout/main.xmlで指定する場合、WebViewにアクセスする必要があるように思いますが、どのようにやるかまではまだ調査していません。

【jsWaffleバージョン】確認したjsWaffleバージョン
1.181

【Androidのバージョン】確認したAndroidバージョン
Android OS 2.2

【機種名】
エミュレータ

(#139) iframe - クジラ飛行机 (2011-08-21 17:03) /普通 返信
WebVewは普通のブラウザと同じですので
端末の画面サイズを取得した上で固定レイアウトを
行うのも手かと思います。
またiframeを使って実現するのも手です!

Javaレベルでレイアウトするのもそれほど難しくありませんが
メンテナンスなど考えるとHTMLで
完結していると良いかなと思います。

(#142) いくつか試してみました - おっと (2011-08-22 13:28) /普通 返信
ご回答ありがとうございます。

頂いたアドバイスも含め、色々試してみたのですが、結果的には
AndroidのWebkitはdivでもiframeでもスクロールバーは出せない
という事がわかりました。

このため、以下のページのように、JavaScriptライブラリで実現するのが一番スマートなようです。
http://html5-css3.jp/smartphone/iphone-android-position-fixed-iscroll-js.html

ぱっとためしたところ動かなかったのですが、WebView上でデモサイトへのリンクを配置して遷移させたら動いたので、おそらく私が想定している動作はできそうな感じです。

取り急ぎご連絡まで。

(#143) 解決しました - おっと (2011-08-23 11:16) /普通 解決
iScroll4での実装に少々苦労しましたが、結果的にはドキュメントを参照しながらでは動かず(訳し方の問題かもしれませんが・・・)、iScroll4のデモページのソースを丸ごとコピーして、iscroll.jsスクリプトのパスを変更する事で動作しました。

今回のようなレイアウトの実現は案外要求も多いかと思います。
TIPS的にドキュメントに追加すると助かる方が多いのではないかと思いますので、ご検討ください。

ともあれ、ご協力ありがとうございました。

(#144) 感謝 - クジラ飛行机 (2011-08-23 11:35) /普通 解決
おっとさん、固定画面実現の先駆者になり、
いろいろと試してくださり、ありがとうございます。

Tipsにこのスレッドのリンクを貼らせて頂きました。
今後ともよろしくお願いします。

(#132)へ返信する:

名前
タイトル
本文
困った度
状態
確認キー お手数ですが、いたずら防止のために、半角数字で「8932」と入力してください。
編集キー 編集時に使うキーを入力(省略可能)
添付ファイル 画像ファイル(最大300KB)を添付可能