[onsen-ui] タグが付いた質問

携帯端末用アプリのフロントエンドをビルドする為の HTML5 フレームワーク。

絞り込み
並べ替え
タグ付けされた
1
1 回答
351 閲覧数

monacaでテンプレート上でjavascriptが効かない

monacaのテンプレート「Onsen UI Sliding Menu」を編集しているのですが、[PAGE2.html]に埋め込みのjavascriptを記載したのですが動作しません。index.html内では動作しますので何が原因なのかわからない状態です。お助けお願い致します。 <script> alert("アラート"); </script>
monaca_javascript's user avatar
1
0 回答
173 閲覧数

onsenUIのnavigatorがChromeアプリでうまく機能していない

開発環境 ⇒Monacaクラウド 新規プロジェクトのテンプレート ⇒Onsen UI最小限のテンプレート(ユニバーサルアプリ対応版) 上記内容で新規プロジェクトを作成し、そのままChormeアプリビルドを行い Choromeアプリを実行したところ、何も表示されませんでした。 (onsenuiのnavigatorがうまく機能していないように見えるんですがindex....
enya's user avatar
  • 43
1
0 回答
291 閲覧数

Monaca+OnsenUIアプリのios9でのタップ反応が悪化(セレクトピッカーが出ない)

セレクトピッカーが反応する部分のコードは以下になります。 <div class="mod_form"> <form> <div class="mod_form_select"> <select class="Select2" name="sample1" select id="select_test" onchange="getS(this,'...
AIA's user avatar
  • 21
1
1 回答
2,116 閲覧数

OnsenUIのpopover内でng-clickが効かない?

AngularJS×OnsenUIで開発を行っています。 OnsenUIのpopover内にng-clickをセットしても、イベントとして検知されません。 (Plunkerにソースを置いています) 解決方法はありますでしょうか? どなたかわかる方いらっしゃいましたら、ご教示いただけると幸いです。 plunkerにソースがあります。 何卒、よろしくお願い申し上げます。 ---------- ...
y.yamaguchi's user avatar
1
0 回答
751 閲覧数

<ons-page>でのスクロールバーの表示

onsen-uiの<ons-page>を使用すると、ページが1画面以上ある場合もスクロールバーが表示されないのですが、表示させるにはどのような方法があるでしょうか? ※onsen-uiをスマホ/PCのレスポンシブで製作を行っております。  スマホの場合はスクロールバーがなくてもよいのですが、PCの場合は、ユーザビリティの観点でスクロールバーを表示させたいと考えております。
user12234's user avatar
1
0 回答
307 閲覧数

Webサービスでonsenuiを使いたいのですが、buildするとcssが適用されません。

monacaでアプリ制作が一段落ついたので、アプリと連携したブラウザで動くWebサービスを開発しようとしています。 Webサプリのひな形はyeoman-angularで作成し、 bower install onsenui --save としonsenuiをダウンロードし、index.htmlでonsenui.jsとonsenui.cssとonsen-css-components....
oxygen8's user avatar
  • 336
1
0 回答
300 閲覧数

OnsenUI + Android4.0〜4.3でチェックボックスのアニメーションが遅い

ons-page内に以下のようなチェックボックスを配置してクリックした場合、iOSでは即時チェックマークが表示されますが、Androidではワンテンポ遅れて表示されます。 FastClickが入ってないCheckboxをクリックするイメージが近いかと思います。 <label class="checkbox"> <input type="checkbox"> ...
gsjp21's user avatar
  • 45
1
0 回答
322 閲覧数

ONSEN UIでカメラロールのようなUI実装は可能ですか?

ONSEN UIでカメラロールのようなUI実装事例を探しています。 見つからなかったので、擬似的に以下のコードで実現しています。 <ons-list-item class="item" ng-repeat="i in [1,2,3,4,5]"> <ons-row> <...
Akinobu Yamamoto's user avatar
1
1 回答
493 閲覧数

ons-toolbarにmodifierでtransparentを設定しても反映されない

ons-toolbar ons-toolbarにて以下のようにmodifierを設定しています。 <ons-toolbar modifier="transparent"> ... </ons-toolbar> ところが反映されません。書き方に問題があると思いますが、サンプルを読んでもこれ以上は読み取れませんでした。 どのように記載するのが正しいのでしょうか? ...
user avatar
1
0 回答
201 閲覧数

ons.notification.alert表示中にAndroid端末のbackボタン

よろしくお願い致します。 onsen-ui、AnglarJS、cordovaを利用してAndroidアプリを開発しています。 Android端末の backボタンの取扱いについて苦慮しています。 メインとなるページ(ons-pageで定義)に関しては、ng-device-backbutton属性を 指定することで、アプリ終了の確認メッセージを表示できているのですが、 ons....
hi-nomal's user avatar
1
0 回答
167 閲覧数

<ons-navigator>と<ons-template>を指定したアラートダイアログ

ons-navigatorタグとons-templateタグを指定するとアラートダイアログが利用できません。 http://codepen.io/anon/pen/mJxEWN ons.bootstrap() .controller('NotificationController', function($scope) { $scope.alert = ...
tackflow's user avatar
1
0 回答
246 閲覧数

ons-gesture-detectorで捕捉したイベントの発生元DOMを取得したい

monaca+onsen-ui初心者です。 ons-gesture-detectorであるページでのタップ操作のイベントを補足して、そのイベント発生元ページのDOMをJavescriptで操作したいのですが、DOMを取得するにはどうすればよいのでしょうか? イベントハンドラ内でdocumentやイベントオブジェクトをダンプしてみたのですが、 対象のDOMが見つかりませんでした。 ...
snfkn's user avatar
  • 11
1
0 回答
106 閲覧数

ons-bottunをふたつ配置すると片方のボタンがクリックすらできない

なぜこんなことが起こるのか全くわかりませんが、 表題のようにボタンがテキスト扱いのようになりクリックすらできなくなります。 <ons-button modifier="large" class="login-button" ng-click="myNavi.pushPage('test.html', {animation: 'slide', user: user});">もっとみる&...
komatsu's user avatar
  • 21
1
0 回答
192 閲覧数

onsenUIをbrowserifyでrequireするには?

onsenUIをbrowserifyで使うには、どのようにrequireすればよいのでしょうか? ons = require 'onsenui' 上の記述だけでは、consoleに Uncaught TypeError: Cannot read property 'documentElement' of undefined というエラーが出ます。 onsenはbowerで入れました。 ...
taxi's user avatar
  • 11
1
0 回答
599 閲覧数

ons-back-buttonのカスタマイズについて

ons-back-buttonをons-buttonに使用しているCSSと同様のカスタマイズを行いたいと思いますが、 modifierによる方法が使えないためどのように行えばいいか、教えていただけますでしょうか?
user9587's user avatar
1
1 回答
900 閲覧数

CSSとJSがHTMLに読み込まれないためちゃんとしたUIが動かない

以下のonsenuiで書いたloginページですが、CSSとJSを読み込みません。 どうしたら良いかと悩んでいます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=...
user avatar
1
0 回答
375 閲覧数

Onsen UI tabberのホームに動的にリンクを読み込み、イベントを生成したい

初めて質問をさせていただきます。 バックエンドから読み込んだデータをpage1のulに、リンクを持ったリストとして追加します。 その後、リンクをクリックするとブラウザを起動するアプリを作成しようとしています。 しかし、リンクをクリックしてもイベントが発生しません。 index.htmlだけのファイルで作成した際は、クリックしてブラウザが起動したのですが、Onsen UI の ...
monaca勉強中's user avatar
1
0 回答
469 閲覧数

Onsen UIでページナビゲーションの中で複数のポップオーバーを使う

Moncaca + OnsenUI(Cordova4.1)環境において、ページナビゲーション(<ons-navigator>)下で複数のポップオーバー(<ons-popover>)を使用したいと考えております。 ポップオーバー1つだけなら、可能なのですが、2つポップオーバーを定義するとエラーが出てしまいます。 また、ページナビゲーションを使用しない場合は、...
HIDEKIT5095's user avatar
1
1 回答
2,181 閲覧数

onsen ui で背景画像を設定したい

Onsen UI を利用すると、style.css に body 設定で background を指定しても反映されません。 背景画像を設定したいのですが、どこかに良いサンプルはないでしょうか?
ゲストとして投稿's user avatar
0
1 回答
918 閲覧数

AngularJSにて、変数に$scopeを代入した際の質問

スコープの基礎的な指摘になるかもしれませんが、以下の事象が起きます。 app.controller("test", function($scope){ var options = $scope.nav.getCurrentPage().options; $scope.item = options.item; // {str:'test',int:'000000'} $...
user19733's user avatar
0
1 回答
629 閲覧数

$applyを使っても$scopeに反映されない

Onsenを使用してアプリを作っています。 以下の順番でリストを作ろうとしています。 1.外部にデータを作成 2.アプリ起動時にindexedDBでテーブルを作成し、外部データを格納 3.ページ読み込み時、indexedDBからデータを変数に格納し、$scopeへ引き渡す 4.ng-repeatにてリストを作成 3の別関数を呼び出しているため、$applyを使っているのですが、...
CoolPon's user avatar
0
1 回答
1,785 閲覧数

スマートニュースやGunosyのようなUIの実装

お世話になります。 はじめてmonacaを使って、スマートニュースやGunosyの様な左右のスワイプでタブが切り替わるようなアプリの作成を予定しております。 一通り、monacaやONSEN UIのマニュアル等に目を通したのですが、スワイプでタブを切り替えるような機能が見当たりませんでした。 もし出来るならコードをお教えいただけないでしょうか?...
espoolflow's user avatar
0
2 回答
754 閲覧数

ons-listでボタンを押したとき、先頭のlist-itemを表示させたい。

ons-listと、ons-list-itemを使って、リスト表示するアプリを作りました。 listの下の方まで閲覧しているとき、メニューの「先頭を表示」ボタンを押すことで、listを巻き戻し、先頭のlist-itemから表示できるようにしたいと思っています。 どのようにすれば良いのでしょうか? 初歩的なことかもしれませんが、よろしくお願いいたします。
eclipse's user avatar
  • 85
0
1 回答
1,055 閲覧数

Onsen UIで遷移先のページを別htmlファイルとして用意してそのファイルの中に<template>を使用したい。

monacaでOnsen UI とJavaScriptテンプレートを使ってSPAをつくっています。 pushPageでページを遷移するとき、別のhtmlファイルを用意してそのファイルにindex.htmlと同じようなtemplateを使用したいのですが、やり方が分かりません。 index.htmlでtemplateを使用すると動くのですが、page2.htmlを別のファイルで用意すると ...
torayaki's user avatar
0
1 回答
3,489 閲覧数

サイトが表示できない

monacaを使ってwebサイトを表示するアプリを作っているのですが、端末上でアプリを動かすと net::ERR_BLOCKED_BY_RESPONSE と表示されてしまいmonacaデバッカー上でも Refused to display 'http://www.アドレス名.jp/' in a frame because it set 'X-Frame-Options' to '...
よたか's user avatar
0
1 回答
151 閲覧数

Onsen-UI list-itemを<ol><li>のような順番つきにする方法

Onsen-UIのリスト表示で、項目の先頭に、 HTMLの<ol><li>で実現されるような連番を自動で 振ることができるでしょうか。
user3855169's user avatar
0
1 回答
668 閲覧数

Onsen UIで遷移先のページを別htmlファイルとして用意する方法(非Angular)

Onsen UI(v2系)でSPAをつくっています。 AngularやVueなどのフレームワークを使わないで、構築しています。 ons-list-itemをクリックすると、hoge.htmlに遷移し、戻るボタンでまたindex.htmlに戻るとしたいです。このとき,hoge.htmlはindex.html内にtemplateとして書き込むのではなく、別ページ(別ファイル)として読み込みたいです。...
user3855169's user avatar
0
1 回答
584 閲覧数

InAppBrowserでのページ遷移時のloading表示について

初心者の質問ですみせん。 monacaにてInAppBrowserを使ってwebサイトへ飛ばした際に、webサイトが表示されるまでの間にloading画面を付けたいのですが、どのようにすればいいでしょうか。 分かる方是非、お助け下さいm(__)m
ills's user avatar
  • 1
0
1 回答
166 閲覧数

ons-list の特定行のみ、アイコンを表示したい

ons-listの特定行(1~3行目)のみアイコンを表示したいのですが、 どのようにすればよいでしょうか。 OnsenUI v2とAngularJS v1で開発しております。 ご教授のほど、よろしくお願い致します。 <ons-list> <ons-list-item ng-repeat="data in dataList "> &...
Taka M's user avatar
  • 9
0
1 回答
640 閲覧数

Onsen UIを使った背景の画像

Onsen UIを使用して背景に画像を張りたいのですが HTMLのCSSを使用して body { background-image : url("画像"); font-family: 'Open Sans', sans-serif; } としてるのですが変わりません Onsen UIのスタイルシートを使用し変更した方が良いでしょうか?
user20365's user avatar
0
1 回答
980 閲覧数

Web SQLで取得したデータをAngularJSを使って表示する方法について

Web SQLで取得したデータをAngularJSを使って表示することができず、困っております。 解決策をご存知の方、ご教授頂けないでしょうか。 ↓ page1.html <ons-page id="page1"> <div ng-controller="hoge_Controller">  <ons-list ng-repeat ="item in ...
Taka M's user avatar
  • 9
0
1 回答
313 閲覧数

iOSのみ、checkboxのlabelが反応しません。

CSSコンポーネントにあるサンプル「Material List with Checkboxesコンポーネント(http://components.onsen.io/)」を使ってチェックボックスを作りたいのですが、iOSのみlabelがうまく反応しません。サンプルコードはそのまま使っています。 一緒に読み込んでいるonsenui.min.jsを削除すると動作するようですが、...
Miyako Chocho's user avatar
0
1 回答
540 閲覧数

Angular2×OnsenUI2 ons-tabのsetActiveTabの使い方

onsenUIとAngularjs2を使用しています。 ons-tabのメソッドのsetActiveTabを使用したいのですが使用方法がわかりません。どのように使うのでしょうか? コードがこちらです。 @Component({ selector: 'ons-page', template: ` <ons-tabbar #tabbar> <ons-tab [...
Kohei Okazaki's user avatar
0
1 回答
1,405 閲覧数

ons-inputの正しい使用方法は?

もしかしてドキュメントの見方が間違っているだけなのかもしれませんが、ons-inputにclass="text-input"を指定して、更にplaceholder属性も指定すると、placeholderに指定した文字が2重になって表示されます。この2つを同時に使用するのが正しいのか?間違っているのか?それとももしかすると不具合なのか?を判断することができないでいます。Ver....
nasu38yen's user avatar
0
1 回答
511 閲覧数

onsen-UIでの背景の変更

onsen-UIでのCSSで .page__background { background:url('../images/title_img.jpg') no-repeat; background-size: auto 80%; background-position: center; } このように背景を設定しているのですが、 この背景画像を変更するには、...
松川重明's user avatar
0
1 回答
404 閲覧数

レスポンシブなグリッドレイアウトの実現方法

こんにちは Cordova+OnsenUIでリストを表示するアプリを作成しています。 現在はiPadでも上から下へ1列でリストを表示していますが、 iPadの(のように大きな画面の)場合は3列でリストを表示するなどレスポンシブなデザインにしたいと思っていますが、OnsenUIで実現可能でしょうか。 ons-colでは固定で列数を指定しているようなので一つのソースでは難しいかと思っています。 &...
raimtoon's user avatar
  • 175
0
1 回答
1,651 閲覧数

onsenUIにて、スワイプとタブバーでのページ遷移を組み合わせたいです。

monacaIDE+genymotionで開発しています。 onsenUIのタブバーをベースに、ある特定タブでは、左右のスワイプでタブ切り替えとは別のページ遷移をさせたいと考えています。 <ons-gesture-detector>がうまく動かなかったため、jQueryを使って以下のようにスワイプを検出するコードを見つけ、タブバーと組み合わせようとしたのですが、...
未経験者's user avatar
0
1 回答
1,545 閲覧数

<ons-tabbar></ons-tabbar>を画面下部に固定させる方法

お世話になっております。 機能としては、 ・コンテンツをスクロール表示 ・画面下部にタブバーを配置し、「前のページ」「次のページ」等でコンテンツ内容を切り替える このようなアプリなのですが、 タブバーが固定されずコンテンツのスクロールに付いてきてしまいます。 解決法、対処法等ご教授願います。 ※該当箇所(ページ)のみの最小限のコードにしてあります。  タブバー部分のonClick関数には、  ...
ggj_tanaka's user avatar
0
1 回答
1,345 閲覧数

ログイン画面とタブバー付きのホーム画面を分けたい

現在、OnsenUIでTwitterクライアントの制作に挑戦しております。参考としてhttp://docs.monaca.mobi/cur/ja/sampleapp/samples/twitter/のサンプルを基に制作しておりました。サンプルにはindex.htmlのページにConnect to Twitterを設置していました。このConnect to ...
Nao Tera's user avatar
0
1 回答
3,227 閲覧数

別CSSファイルのスタイルを読み込み、background-imageでローカル画像を指定の時だけ表示されない

MonacaのOnsenUIで作業をしています。そのときに、別のスタイルシートを読み込んでローカル(この場合Monacaクラウド上)のファイルを指定した時だけ背景画像が表示されませんでした。 今のプロジェクトの何かが影響しているのかと思い、新規でプロジェクトを作り試してみましたが同じでした。そこで以下のようなパターンで試してみたところ、やはり別CSSの読み込みで、...
106's user avatar
  • 1
0
1 回答
84 閲覧数

PullHookサンプルでの初期読込の追加方法

http://ja.onsen.io/guide/overview.html#UsingPullHook にありますサンプルで初期表示時に、pullhookせずに、スクリプトにて読込を実施するにはどうすれば良いでしょうか? 宜しくお願い致します。
じじまろ's user avatar
0
1 回答
920 閲覧数

pushPage先にあるons-switchを、動的に操作したい

MonacaでOnsen UIを用いて開発しています。 アプリ画面上部右端にあるアイコンをタップすると、 setting.html というページをpushPageするようにコーディングしています。 setting.htmlへ遷移した際に、setting.htmlにあるons-switchの初期状態を データベースから読み込んだ値にしたいのですが、 反映させるタイミング、方法がイマイチわからず ...
ggj_tanaka's user avatar
0
1 回答
1,856 閲覧数

ons-toolbarのカスタマイズ方法について

ons-toolbarは以下構造が基本だと思いますが、 <ons-toolbar><div class="left">...</div><div class="center">...</div><div class="right">...</div></ons-toolbar> ...
user14318's user avatar
0
1 回答
525 閲覧数

jQueryからOnsenUIの画面遷移を実行出来ますか?

初めて質問させて頂きます。何卒よろしくお願い致します。 質問内容はOnsenUIとjQueryをつかったハイブリッドアプリ実装に関する事で、jQuery側で動的に作成したli要素のOnでクリックイベントをハンドルした際に、OnsenUI側のons.navigatorに対してpushPageを発動させる為にはどのようにすれば宜しいでしょうか? ...
OnsenUI初心者's user avatar
0
1 回答
744 閲覧数

AngularJSでデータ入力して、別のページにTodoリストのようにリスト追加する機能を作りたい

サンプルのOnsen UI TabbarにPage1.htmlは入力フォーム、Page2.htmlは入力した結果を出力する形式になっております。AngularJSでPage1上でテキスト入力させ、Page2にPage1で書いたテキストを表示させることはできましたが、Page1でテキスト入力し送信ボタンを押して、Page2にonsenUIのons-lazy-...
Nao Tera's user avatar
0
1 回答
688 閲覧数

Radiobutton Listでラジオボタンをリストの右側に表示する方法

Onsen UIのパターンにRadiobutton Listがありますが、チェックの表示位置を iOSのUIに準拠し、右側に表示させたいのです。 その方法をご存知でしたら、ご教授のほどお願いいたします。
Akinobu Yamamoto's user avatar
0
1 回答
365 閲覧数

ons-carousel-itemをng-repeatで作成した場合にinitial-indexが効かない

ons-carouselのons-carousel-itemをng-repeatを使って作成しているのですが、 initial-indexがどうも効いていないようで、1つ目のアイテムが表示されてしまいます。 どうすればinitial-indexが反映されるようになるのでしょうか? コードは以下のような感じです。 前のページからファイルの情報や絞り込みのフィルタ等を含んだdataを渡しています。 ...
MxxxxxFxxxxx's user avatar
0
1 回答
9,244 閲覧数

divタグに"background-image"を設定しても画像表示しません。

TabBarベースのテンプレートをもとにUIを実装しています。 ons-pageタグ内にdivタグを設定し、その1つに「background-image」をCSSファイルに 設定したのですが、画像表示しません。 .main-body { background-image: url('../img/main.png'); height: 80%; } <ons-...
Akinobu Yamamoto's user avatar
0
1 回答
506 閲覧数

angularjsのpromise処理を使用時、onsen ui のmodalが表示されない

angularjsのpromise処理を使用時に、onsen ui のmodalが表示されずに悩んでいます。 Controllerでサービスの終了を待つ間、onsen uiのmodalを表示させたいのですが、うまくいきません。修正点がありましたら、ご教授いただければと思います。 コードは以下の通りです。10秒かかるサービスをまって、文字列を表示するサンプルです。 index.html <...
JuJun Ju's user avatar
0
1 回答
248 閲覧数

onsenuiがユニットテストでエラーが発生する

onsenuiを使用したハイブリットアプリを作成しています。 Karmaとjasminを使用してユニットテストをしたいのですが、 テスト実行時に下記のエラーが発生します。 Error: isWebView() method is available after dom contents loaded. onsenuiはangularJSでDIしています。 var appModule = ...
のぐそん's user avatar