[onsen-ui] タグが付いた質問
219
質問
1
票
1
回答
351
閲覧数
monacaでテンプレート上でjavascriptが効かない
monacaのテンプレート「Onsen UI Sliding Menu」を編集しているのですが、[PAGE2.html]に埋め込みのjavascriptを記載したのですが動作しません。index.html内では動作しますので何が原因なのかわからない状態です。お助けお願い致します。
<script>
alert("アラート");
</script>
1
票
0
回答
173
閲覧数
onsenUIのnavigatorがChromeアプリでうまく機能していない
開発環境
⇒Monacaクラウド
新規プロジェクトのテンプレート
⇒Onsen UI最小限のテンプレート(ユニバーサルアプリ対応版)
上記内容で新規プロジェクトを作成し、そのままChormeアプリビルドを行い
Choromeアプリを実行したところ、何も表示されませんでした。
(onsenuiのnavigatorがうまく機能していないように見えるんですがindex....
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,'...
1
票
1
回答
2,116
閲覧数
OnsenUIのpopover内でng-clickが効かない?
AngularJS×OnsenUIで開発を行っています。
OnsenUIのpopover内にng-clickをセットしても、イベントとして検知されません。
(Plunkerにソースを置いています)
解決方法はありますでしょうか?
どなたかわかる方いらっしゃいましたら、ご教示いただけると幸いです。
plunkerにソースがあります。
何卒、よろしくお願い申し上げます。
---------- ...
1
票
0
回答
751
閲覧数
<ons-page>でのスクロールバーの表示
onsen-uiの<ons-page>を使用すると、ページが1画面以上ある場合もスクロールバーが表示されないのですが、表示させるにはどのような方法があるでしょうか?
※onsen-uiをスマホ/PCのレスポンシブで製作を行っております。
スマホの場合はスクロールバーがなくてもよいのですが、PCの場合は、ユーザビリティの観点でスクロールバーを表示させたいと考えております。
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....
1
票
0
回答
300
閲覧数
OnsenUI + Android4.0〜4.3でチェックボックスのアニメーションが遅い
ons-page内に以下のようなチェックボックスを配置してクリックした場合、iOSでは即時チェックマークが表示されますが、Androidではワンテンポ遅れて表示されます。
FastClickが入ってないCheckboxをクリックするイメージが近いかと思います。
<label class="checkbox">
<input type="checkbox">
...
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>
<...
1
票
1
回答
493
閲覧数
ons-toolbarにmodifierでtransparentを設定しても反映されない
ons-toolbar
ons-toolbarにて以下のようにmodifierを設定しています。
<ons-toolbar modifier="transparent"> ... </ons-toolbar>
ところが反映されません。書き方に問題があると思いますが、サンプルを読んでもこれ以上は読み取れませんでした。
どのように記載するのが正しいのでしょうか?
...
1
票
0
回答
201
閲覧数
ons.notification.alert表示中にAndroid端末のbackボタン
よろしくお願い致します。
onsen-ui、AnglarJS、cordovaを利用してAndroidアプリを開発しています。
Android端末の backボタンの取扱いについて苦慮しています。
メインとなるページ(ons-pageで定義)に関しては、ng-device-backbutton属性を
指定することで、アプリ終了の確認メッセージを表示できているのですが、
ons....
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 = ...
1
票
0
回答
246
閲覧数
ons-gesture-detectorで捕捉したイベントの発生元DOMを取得したい
monaca+onsen-ui初心者です。
ons-gesture-detectorであるページでのタップ操作のイベントを補足して、そのイベント発生元ページのDOMをJavescriptで操作したいのですが、DOMを取得するにはどうすればよいのでしょうか?
イベントハンドラ内でdocumentやイベントオブジェクトをダンプしてみたのですが、
対象のDOMが見つかりませんでした。
...
1
票
0
回答
106
閲覧数
ons-bottunをふたつ配置すると片方のボタンがクリックすらできない
なぜこんなことが起こるのか全くわかりませんが、
表題のようにボタンがテキスト扱いのようになりクリックすらできなくなります。
<ons-button modifier="large" class="login-button" ng-click="myNavi.pushPage('test.html', {animation: 'slide', user: user});">もっとみる&...
1
票
0
回答
192
閲覧数
onsenUIをbrowserifyでrequireするには?
onsenUIをbrowserifyで使うには、どのようにrequireすればよいのでしょうか?
ons = require 'onsenui'
上の記述だけでは、consoleに
Uncaught TypeError: Cannot read property 'documentElement' of undefined
というエラーが出ます。
onsenはbowerで入れました。
...
1
票
0
回答
599
閲覧数
ons-back-buttonのカスタマイズについて
ons-back-buttonをons-buttonに使用しているCSSと同様のカスタマイズを行いたいと思いますが、
modifierによる方法が使えないためどのように行えばいいか、教えていただけますでしょうか?
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=...
1
票
0
回答
375
閲覧数
Onsen UI tabberのホームに動的にリンクを読み込み、イベントを生成したい
初めて質問をさせていただきます。
バックエンドから読み込んだデータをpage1のulに、リンクを持ったリストとして追加します。
その後、リンクをクリックするとブラウザを起動するアプリを作成しようとしています。
しかし、リンクをクリックしてもイベントが発生しません。
index.htmlだけのファイルで作成した際は、クリックしてブラウザが起動したのですが、Onsen UI の ...
1
票
0
回答
469
閲覧数
Onsen UIでページナビゲーションの中で複数のポップオーバーを使う
Moncaca + OnsenUI(Cordova4.1)環境において、ページナビゲーション(<ons-navigator>)下で複数のポップオーバー(<ons-popover>)を使用したいと考えております。
ポップオーバー1つだけなら、可能なのですが、2つポップオーバーを定義するとエラーが出てしまいます。
また、ページナビゲーションを使用しない場合は、...
1
票
1
回答
2,181
閲覧数
onsen ui で背景画像を設定したい
Onsen UI を利用すると、style.css に body 設定で background を指定しても反映されません。
背景画像を設定したいのですが、どこかに良いサンプルはないでしょうか?
0
票
1
回答
918
閲覧数
AngularJSにて、変数に$scopeを代入した際の質問
スコープの基礎的な指摘になるかもしれませんが、以下の事象が起きます。
app.controller("test", function($scope){
var options = $scope.nav.getCurrentPage().options;
$scope.item = options.item; // {str:'test',int:'000000'}
$...
0
票
1
回答
629
閲覧数
$applyを使っても$scopeに反映されない
Onsenを使用してアプリを作っています。
以下の順番でリストを作ろうとしています。
1.外部にデータを作成
2.アプリ起動時にindexedDBでテーブルを作成し、外部データを格納
3.ページ読み込み時、indexedDBからデータを変数に格納し、$scopeへ引き渡す
4.ng-repeatにてリストを作成
3の別関数を呼び出しているため、$applyを使っているのですが、...
0
票
1
回答
1,785
閲覧数
スマートニュースやGunosyのようなUIの実装
お世話になります。
はじめてmonacaを使って、スマートニュースやGunosyの様な左右のスワイプでタブが切り替わるようなアプリの作成を予定しております。
一通り、monacaやONSEN UIのマニュアル等に目を通したのですが、スワイプでタブを切り替えるような機能が見当たりませんでした。
もし出来るならコードをお教えいただけないでしょうか?...
0
票
2
回答
754
閲覧数
ons-listでボタンを押したとき、先頭のlist-itemを表示させたい。
ons-listと、ons-list-itemを使って、リスト表示するアプリを作りました。
listの下の方まで閲覧しているとき、メニューの「先頭を表示」ボタンを押すことで、listを巻き戻し、先頭のlist-itemから表示できるようにしたいと思っています。
どのようにすれば良いのでしょうか?
初歩的なことかもしれませんが、よろしくお願いいたします。
0
票
1
回答
1,055
閲覧数
Onsen UIで遷移先のページを別htmlファイルとして用意してそのファイルの中に<template>を使用したい。
monacaでOnsen UI とJavaScriptテンプレートを使ってSPAをつくっています。
pushPageでページを遷移するとき、別のhtmlファイルを用意してそのファイルにindex.htmlと同じようなtemplateを使用したいのですが、やり方が分かりません。
index.htmlでtemplateを使用すると動くのですが、page2.htmlを別のファイルで用意すると
...
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 '...
0
票
1
回答
151
閲覧数
Onsen-UI list-itemを<ol><li>のような順番つきにする方法
Onsen-UIのリスト表示で、項目の先頭に、
HTMLの<ol><li>で実現されるような連番を自動で
振ることができるでしょうか。
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として書き込むのではなく、別ページ(別ファイル)として読み込みたいです。...
0
票
1
回答
584
閲覧数
InAppBrowserでのページ遷移時のloading表示について
初心者の質問ですみせん。
monacaにてInAppBrowserを使ってwebサイトへ飛ばした際に、webサイトが表示されるまでの間にloading画面を付けたいのですが、どのようにすればいいでしょうか。
分かる方是非、お助け下さいm(__)m
0
票
1
回答
166
閲覧数
ons-list の特定行のみ、アイコンを表示したい
ons-listの特定行(1~3行目)のみアイコンを表示したいのですが、
どのようにすればよいでしょうか。
OnsenUI v2とAngularJS v1で開発しております。
ご教授のほど、よろしくお願い致します。
<ons-list>
<ons-list-item ng-repeat="data in dataList ">
&...
0
票
1
回答
640
閲覧数
Onsen UIを使った背景の画像
Onsen UIを使用して背景に画像を張りたいのですが
HTMLのCSSを使用して
body { background-image : url("画像");
font-family: 'Open Sans', sans-serif;
}
としてるのですが変わりません
Onsen UIのスタイルシートを使用し変更した方が良いでしょうか?
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 ...
0
票
1
回答
313
閲覧数
iOSのみ、checkboxのlabelが反応しません。
CSSコンポーネントにあるサンプル「Material List with Checkboxesコンポーネント(http://components.onsen.io/)」を使ってチェックボックスを作りたいのですが、iOSのみlabelがうまく反応しません。サンプルコードはそのまま使っています。
一緒に読み込んでいるonsenui.min.jsを削除すると動作するようですが、...
0
票
1
回答
540
閲覧数
Angular2×OnsenUI2 ons-tabのsetActiveTabの使い方
onsenUIとAngularjs2を使用しています。
ons-tabのメソッドのsetActiveTabを使用したいのですが使用方法がわかりません。どのように使うのでしょうか?
コードがこちらです。
@Component({
selector: 'ons-page',
template: `
<ons-tabbar #tabbar>
<ons-tab [...
0
票
1
回答
1,405
閲覧数
ons-inputの正しい使用方法は?
もしかしてドキュメントの見方が間違っているだけなのかもしれませんが、ons-inputにclass="text-input"を指定して、更にplaceholder属性も指定すると、placeholderに指定した文字が2重になって表示されます。この2つを同時に使用するのが正しいのか?間違っているのか?それとももしかすると不具合なのか?を判断することができないでいます。Ver....
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;
}
このように背景を設定しているのですが、
この背景画像を変更するには、...
0
票
1
回答
404
閲覧数
レスポンシブなグリッドレイアウトの実現方法
こんにちは
Cordova+OnsenUIでリストを表示するアプリを作成しています。
現在はiPadでも上から下へ1列でリストを表示していますが、
iPadの(のように大きな画面の)場合は3列でリストを表示するなどレスポンシブなデザインにしたいと思っていますが、OnsenUIで実現可能でしょうか。
ons-colでは固定で列数を指定しているようなので一つのソースでは難しいかと思っています。
&...
0
票
1
回答
1,651
閲覧数
onsenUIにて、スワイプとタブバーでのページ遷移を組み合わせたいです。
monacaIDE+genymotionで開発しています。
onsenUIのタブバーをベースに、ある特定タブでは、左右のスワイプでタブ切り替えとは別のページ遷移をさせたいと考えています。
<ons-gesture-detector>がうまく動かなかったため、jQueryを使って以下のようにスワイプを検出するコードを見つけ、タブバーと組み合わせようとしたのですが、...
0
票
1
回答
1,545
閲覧数
<ons-tabbar></ons-tabbar>を画面下部に固定させる方法
お世話になっております。
機能としては、
・コンテンツをスクロール表示
・画面下部にタブバーを配置し、「前のページ」「次のページ」等でコンテンツ内容を切り替える
このようなアプリなのですが、
タブバーが固定されずコンテンツのスクロールに付いてきてしまいます。
解決法、対処法等ご教授願います。
※該当箇所(ページ)のみの最小限のコードにしてあります。
タブバー部分のonClick関数には、
...
0
票
1
回答
1,345
閲覧数
ログイン画面とタブバー付きのホーム画面を分けたい
現在、OnsenUIでTwitterクライアントの制作に挑戦しております。参考としてhttp://docs.monaca.mobi/cur/ja/sampleapp/samples/twitter/のサンプルを基に制作しておりました。サンプルにはindex.htmlのページにConnect to Twitterを設置していました。このConnect to ...
0
票
1
回答
3,227
閲覧数
別CSSファイルのスタイルを読み込み、background-imageでローカル画像を指定の時だけ表示されない
MonacaのOnsenUIで作業をしています。そのときに、別のスタイルシートを読み込んでローカル(この場合Monacaクラウド上)のファイルを指定した時だけ背景画像が表示されませんでした。
今のプロジェクトの何かが影響しているのかと思い、新規でプロジェクトを作り試してみましたが同じでした。そこで以下のようなパターンで試してみたところ、やはり別CSSの読み込みで、...
0
票
1
回答
84
閲覧数
PullHookサンプルでの初期読込の追加方法
http://ja.onsen.io/guide/overview.html#UsingPullHook
にありますサンプルで初期表示時に、pullhookせずに、スクリプトにて読込を実施するにはどうすれば良いでしょうか?
宜しくお願い致します。
0
票
1
回答
920
閲覧数
pushPage先にあるons-switchを、動的に操作したい
MonacaでOnsen UIを用いて開発しています。
アプリ画面上部右端にあるアイコンをタップすると、
setting.html
というページをpushPageするようにコーディングしています。
setting.htmlへ遷移した際に、setting.htmlにあるons-switchの初期状態を
データベースから読み込んだ値にしたいのですが、
反映させるタイミング、方法がイマイチわからず
...
0
票
1
回答
1,856
閲覧数
ons-toolbarのカスタマイズ方法について
ons-toolbarは以下構造が基本だと思いますが、
<ons-toolbar><div class="left">...</div><div class="center">...</div><div class="right">...</div></ons-toolbar>
...
0
票
1
回答
525
閲覧数
jQueryからOnsenUIの画面遷移を実行出来ますか?
初めて質問させて頂きます。何卒よろしくお願い致します。
質問内容はOnsenUIとjQueryをつかったハイブリッドアプリ実装に関する事で、jQuery側で動的に作成したli要素のOnでクリックイベントをハンドルした際に、OnsenUI側のons.navigatorに対してpushPageを発動させる為にはどのようにすれば宜しいでしょうか?
...
0
票
1
回答
744
閲覧数
AngularJSでデータ入力して、別のページにTodoリストのようにリスト追加する機能を作りたい
サンプルのOnsen UI TabbarにPage1.htmlは入力フォーム、Page2.htmlは入力した結果を出力する形式になっております。AngularJSでPage1上でテキスト入力させ、Page2にPage1で書いたテキストを表示させることはできましたが、Page1でテキスト入力し送信ボタンを押して、Page2にonsenUIのons-lazy-...
0
票
1
回答
688
閲覧数
Radiobutton Listでラジオボタンをリストの右側に表示する方法
Onsen UIのパターンにRadiobutton Listがありますが、チェックの表示位置を
iOSのUIに準拠し、右側に表示させたいのです。
その方法をご存知でしたら、ご教授のほどお願いいたします。
0
票
1
回答
365
閲覧数
ons-carousel-itemをng-repeatで作成した場合にinitial-indexが効かない
ons-carouselのons-carousel-itemをng-repeatを使って作成しているのですが、
initial-indexがどうも効いていないようで、1つ目のアイテムが表示されてしまいます。
どうすればinitial-indexが反映されるようになるのでしょうか?
コードは以下のような感じです。
前のページからファイルの情報や絞り込みのフィルタ等を含んだdataを渡しています。
...
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-...
0
票
1
回答
506
閲覧数
angularjsのpromise処理を使用時、onsen ui のmodalが表示されない
angularjsのpromise処理を使用時に、onsen ui のmodalが表示されずに悩んでいます。
Controllerでサービスの終了を待つ間、onsen uiのmodalを表示させたいのですが、うまくいきません。修正点がありましたら、ご教授いただければと思います。
コードは以下の通りです。10秒かかるサービスをまって、文字列を表示するサンプルです。
index.html
<...
0
票
1
回答
248
閲覧数
onsenuiがユニットテストでエラーが発生する
onsenuiを使用したハイブリットアプリを作成しています。
Karmaとjasminを使用してユニットテストをしたいのですが、
テスト実行時に下記のエラーが発生します。
Error: isWebView() method is available after dom contents loaded.
onsenuiはangularJSでDIしています。
var appModule = ...