次のタグが付いている話題の回答:

4

要素のid属性を削除したい

属性を削除するには、要素に対しremoveAttribute()メソッドを実行します。 var elm = document.getElementById("newsitem"); elm.removeAttribute("id");
  • 1.1万
3

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

<ons-gesture-detector>を使うと、スワイプなどのジェスチャーを受け取ることができます。 http://ja.onsen.io/guide/overview.html#DetectingFingerGestures ジェスチャーを受け取ったら、<ons-tabbar>のsetActiveTab()メソッドを呼び出すことで、タブが切り替えられると思います。...
3
Accepted

複数のhtmlファイルとons-templateを併用するとうまく動かない

page属性やpushPage()の引数に外部ファイルを指定すると、そのページ全体を<ons-page>として読み込もうとするみたいです。今回の場合、テンプレ集を読み込みたいだけなので、<body>タグの下に以下の1行を加えると(case A)でうまく動くと思います。 <ng-include src="'debug.html'"></ng-include&...
  • 1,448
3

OnsenUI Navigatorのpushpage内をリロードさせたい

animation: 'none'を指定してreplacePage()でどうでしょうか。 修正 第2階層以下でanimation: none;のreplacePage()を呼んだ場合、popPage時のアニメーションまで消えてしまうので、リロード後にanimationをリセットする必要があります。 <ons-back-button>を使わない場合は、...
  • 1,448
3

ons-tabbarを冗長なコードを書かず上部ツールバー下へ配置したい

ons-pageの配下にons-tabbarを書いてしまっていますが、こんな感じにすればons-tabbarの記述は1カ所でいけるかなと思います。 あるタブの中で画面遷移が頻繁に発生する 選択したタブによってツールバーの内容が大きく異なる といった場合にはこれだと難しいかもしれません。 ons.bootstrap() .controller('MainCtrl', ["$scope"...
  • 2,797
3

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

thenに渡している関数は非同期で呼ばれるので、そのタイミングで$scope.$applyしても無駄です。 $scope.$applyはthen内で呼ぶ必要があります。 setTimeout(function () { getData().then(function(value) { $scope.$apply(function() { $...
  • 1,074
3
Accepted

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

JavaScriptにおいて、オブジェクトや配列を変数に代入すると参照渡しとなります。 dataは最終的に$scope.nav.getCurrentPage().options.itemを参照しているということです。 これを回避するには、angular.copy()を使用します。 var data = angular.copy($scope.item);
  • 1,438
2
Accepted

OnsenUIで画面遷移のボタンを複数押すと、押した分画面が出てきてしまう件

ボタン押下後は画面遷移処理を無効にしておき、遷移終了したタイミングで再び遷移処理実行可能にすればよいです。navigation.pushPage() の options では、onTransitionEnd にコールバック関数が指定できます。 以下のようになります。 root page: <!DOCTYPE HTML> <html> <head> ....
2

ons-list内で最下部までスクロールした時のイベント

1.スペルミス scrol→scroll 2.Onsen-UIなら以下のような感じで出来ませんか? $("#scroll_test").on("scroll", function(){ console.log("change : "+scroll_test.scrollTop); //スクロール最大値 == スクロールエリアサイズ + スクロール値 if(...
  • 1,698
2
Accepted

ドロップダウンメニューをOnsen UIで実装することはできますか?

「ons-popover」というコンポーネントを使用するとできるようです。 http://ja.onsen.io/guide/components.html#ons-popover 実装例は英語版の回答者の方が記載している下記リンク先が分かりやすいです。 http://codepen.io/argelius/pen/zxGEza 上記リンクを参考にした方が良いですが、...
  • 2,797
2
Accepted

親画面が子画面の値を見る方法

あるコントローラーからons-modal中のコントローラーの値を見たいということで大丈夫でしょうか。あるコントローラーから別のコントローラーに値を渡したいのであれば、少なくとも方法は2つあります。 一つはAngularJSのサービスを使って値を渡す方法です。あるサービスを作ってそのサービスを2つの両方のコントローラーにインジェクションします。1つ目のコントローラーで値を入力して、...
  • 441
2

onsen-uiを使ってのおえーじ更新について

<a href="page2.html">で遷移するとページ全体にpage2.htmlが読み込まれてindex.htmlの制御下から外れるんじゃないかなと思います。 質問に何がしたいという記述がありませんのでここからは余談になりますが、 Page2から画面を遷移したいのであればPage2をons-navigator配下にしてpushPageを使うと良いと思います。 ons....
  • 2,797
2
Accepted

ons-popover利用時のJavaScriptの変数の値について

表示位置とか大きさとかいろいろおかしいですが、一応表示はできました。 ガイドの実例で「Edit」を押すとCodePenに飛べるので、そっちを参考にした方がやりやすいかもしれません。 あと、Onsen UIがAngularJSベースらしいので、Angularっぽい記述の方が動きやすい気がします。 ons.bootstrap() .factory("SharedService", ["$...
  • 2,797
2

pushPage終了時のちらつきが気になる。

<ons-page>がネストしてはいませんか?デベロッパーツールでDOM構造を確認してみてください。私も同じ問題で長い間悩まされてきたのですが、<ons-page>がネストしていることを発見し、これを解消したところ、pushPage()およびpopPage()時のちらつきが無くなりました。
  • 1,448
2
Accepted

Wifiに接続・未接続で処理を分岐したい

こちらの公式プラグインを利用することで、Wifiで接続しているか確認することができるようです。 https://github.com/apache/cordova-plugin-network-information if(Connection.WIFI == navigator.connection.type){ // WIFIで接続している }; ...
  • 1,201
2

Onsen UI を使用したソースをAndroidのChrome(「PC版サイトを見る」のチェックを外した状態)で動す方法につきまして。

すみません、AndroidのChromeでDeveloper Toolを使用するのに手間取りました。 (Windows端末だとなぜか認識してくれなく、Macでやっと認識してDeveloper Toolで確認できました。) loader.js内の15行目で使用しているsplitでエラーになっておりました。 (エラー内容:「Uncaught TypeError: Cannot read ...
2
Accepted

ons-carouselでループさせるための方法

ons.bootstrap() .controller('appCtrl', function($scope, $timeout){ $timeout(function(){ $scope.carousel.on('postchange', function(event){ if(event.activeIndex === 0){ $scope....
  • 1,448
2
Accepted

ons-alert-dialogの表示スタイルを変更したい

<ons-alert-dialog>をandroidで開くとandroid用のmodifierが自動で設定されて以下のCSSが効いてしまいます。 .alert-dialog--android { -webkit-border-radius: 2px; border-radius: 2px; padding: 0; -webkit-box-shadow: none; ...
  • 1,448
2
Accepted

onsenui ons-navigator内のpushPageでパラメータを渡したい

URLにパラメータを渡すやり方はうまくいかないと思います。 代わりに、pushPage()の第二引数にオプションを渡し、目的ページでgetCurrentPage()を呼んで受け取る方法があります。 ons.bootstrap() .controller('listController', function($scope){ $scope.items = [ {id: 1,...
  • 1,448
2
Accepted

ons.notification内で改行したい

アラートダイアログを使う のサンプルにコメントで書いてありますが、messageではなくmessageHTMLを使用します。 ons.notification.alert({ // message: 'メッセージ', messageHTML: 'メッセージが<br>改行されました。', // もしくはmessageHTML: '<div>...
  • 1,438
2

onsenui ons-navigatorのpushPage内でajax通信(jquery )は可能ですか?

OnsenUIで遷移した後もAjax通信をすることは可能です。 上記コードではHTMLのBODYが読み込み完了した際にしかよばれません。 似たような回答を下記でも行っていますが、 OnsenUIの遷移完了時に呼ばれるons.readyを使用する必要があります。 「タブバーの推移先のhtmlファイルでjsを実行する」 var module = ons.bootstrap('my-app'...
  • 1,698
2

onsenui ons-navigatorのpushPage内でajax通信(jquery )は可能ですか?

Ajaxの通信エラーの原因は、$.ajax のオプション指定が間違っているためではないかと思います。 どのようなリクエストを送っているのかわからないので、paramが正しいリクエストパラメータを表現したオブジェクトだとすると、 $.ajax({ url: "http://sample.com/app/sample.php", type:"POST", dataType: "...
  • 166
2

ons-tabbarを冗長なコードを書かず上部ツールバー下へ配置したい

OnsenUIにそのようなオプションは用意されていませんが、CSSを適当に指定すれば可能です。 以下はons-toolbarをons-tabbarの外に置くパターンです。 ons.bootstrap(); .tab-bar { top: 44px; border-top: none; border-bottom: 1px solid rgba(0,0,0,0); ...
  • 1,448
2

<ons-carousel-item>コンポーネントを追加した場合refresh()メソッドの使い方

Let’s Build a Weather App using AngularJS and Onsen UI! を参考に、実例のサンプルを改造してみました。 Addボタンをタップすると、ons-carousel-itemがGRAYから順に追加されます。 この場合、ng-repeatで配列分を回していますが、配列に追加しただけではons-carousel-itemに反映されないため、refresh(...
  • 1,438
2
Accepted

ons-popover 内で ons-scrollerが使えない

自己解決できましたので、要点をまとめておきます。 問題点(調査中に発見した問題点を含む) ・Ons-Popover内のOns-Scrollerが機能しない。 ・コンソール画面に「Onsen UI require jqLite. Load jQuery after loading AngularJS to fix this error. jQuery may break Onsen UI ...
  • 85
2
Accepted

replacePageで画面遷移する際のアニメーションの方向を変えたい

理解できる範囲で解析しただけなので詳しく説明できませんが、onsenui.jsをカスタマイズしないと左から右は無理のようです。 SimpleSlideTransitionAnimator()、IOSSlideTransitionAnimator()を直接改造するか、新たに左から右用を追加すれば実現できると思います。 // Preset transition animators. ...
  • 1,438
2

navigator.resetToPage()の際にnavigator.getPages()が正しい値を返さない

resetToPageの実装は以下のようになっています。 resetToPage: function(page, options) { options = options || {}; if (!options.animator && !options.animation) { options.animation = 'none'; } ...
  • 1,448
2

ons-navigatorにて同一のページを複数表示した場合の、getElementByIdに代わるエレメント検索手段

自己回答になりますが、代替案で、以下のような方法を見つけました。 初心者の為、正しく理解できているか心もとないので、上級者の方、フォローお願いします。 idを使わずに、ng-modelを使用することで、データバインディング(?)できる。 <script> var module = ons.bootstrap(); module.controller('...
2

ons-navigatorにて同一のページを複数表示した場合の、getElementByIdに代わるエレメント検索手段

そもそもjavascriptでは getElements系で配列として取得することが出来ます。 後は配列の順番で対象を特定してやれば好きにコントロールできるはずです。 getElementsByName("name") getElementsByTagName("tagName") getElementsByClassName("class") ex) fast_input_value = ...
1
Accepted

基本的なサンプルページの表示が上手くいかない

Onsen UIのons-toolbarを使う場合、Androidで実行するとタイトル部分が自動的に左寄せになります。これは、Androidではネイティブのツールバーのタイトルが左寄せになるのがデフォルトであるのでそれに合わせているからです。 この動作を抑制したい(タイトルを中央寄せにしたい)場合には、ons-toolbarにfixed-style属性を追加するとうまくいくと思います。 <...
  • 161

Only top scored, non community-wiki answers of a minimum length are eligible