Navigation

    Monaca & Onsen UI
    • Register
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. anderson
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    anderson

    @anderson

    Web and Android Developer.

    1
    Reputation
    20
    Posts
    1558
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online
    Website www.linkedin.com/in/andersonvillamizargil Location Spain

    anderson Follow

    Posts made by anderson

    • RE: ons.notification.confirm console error

      @Fran-Diox Problem solved. Thank you!

      posted in Onsen UI
      anderson
    • RE: ons.notification.confirm console error

      I also tried without callback: function(idx) but it does not work

      <!doctype html>
      <html lang="en" ng-app="my-app">
      <head>
      	<title>App</title>
      	<meta charset="utf-8">
      
      	<!-- ONSENUI v2.1.0 and ANGULARJS v1.6.1 -->
      	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsenui.css"/>
      	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsen-css-components.css"/>
      	
      	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
      	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/onsenui.js"></script>
      	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/angular-onsenui.js"></script>
      
      </head>
      <body>
      	<ons-navigator var="navegador" page="main.html"></ons-navigator>
      
      	<ons-template id="main.html">
      		<ons-page ng-controller="AppController">
      	    	<ons-button ng-click="remove()">REMOVE</ons-button>
      		</ons-page>
      	</ons-template>
      	
      
      	<script type="text/javascript">
      	var app = angular.module('my-app', ['onsen']);
      
      	app.controller('AppController', function($scope) {
      
      	    $scope.remove = function(){
      	    	ons.notification.confirm({
      	    		title: 'Remove',
      	    		message: 'Remove?',
      	    		buttonLabels: ['YES', 'CANCEL'],
      	    		cancelable: true,
      	    	}).then(function(idx) {
      	    		switch (idx) {
      	    			case -1:
      	    				console.log("tap the background");
      	    				break;
      	    			case 0:
      	    				console.log("REMOVE OK");
      	    				break;
      	    			case 1:
      	    				console.log("REMOVE NO");
      	    				break;
      	    		}
      	    	});
      	    }
      
       	});
      	</script>
      
      </body>
      </html>
      
      posted in Onsen UI
      anderson
    • RE: ons.notification.confirm console error

      @munsterlander said:

      Have you tried -1 in your case statement to see if this resolves it or have a default statement?

      I tried, but it does not work.

      <!doctype html>
      <html lang="en" ng-app="my-app">
      <head>
      	<title>App</title>
      	<meta charset="utf-8">
      
      	<!-- ONSENUI v2.1.0 and ANGULARJS v1.6.1 -->
      	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsenui.css"/>
      	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsen-css-components.css"/>
      	
      	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
      	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/onsenui.js"></script>
      	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/angular-onsenui.js"></script>
      
      </head>
      <body>
      	<ons-navigator var="navegador" page="main.html"></ons-navigator>
      
      	<ons-template id="main.html">
      		<ons-page ng-controller="AppController">
      	    	<ons-button ng-click="remove()">REMOVE</ons-button>
      		</ons-page>
      	</ons-template>
      	
      
      	<script type="text/javascript">
      	var app = angular.module('my-app', ['onsen']);
      
      	app.controller('AppController', function($scope) {
      
      	    $scope.remove = function(){
      	    	ons.notification.confirm({
      	            title:'Remove',
      	            message: 'Remove?',
      	            buttonLabels: ['YES', 'CANCEL'],
      	            cancelable: true,
      	            callback: function(idx) {
      	                switch (idx) {
      	                case -1:
      	                	console.log("tap the background");
      	                	break;
      	                case 0:
      	                    console.log("REMOVE OK");
      	                    break;
      	                case 1:
      	                    console.log("REMOVE NO");
      	                    break;
      	                }
      	            }
              	});
      	    }
      
       	});
      	</script>
      
      </body>
      </html>
      

      Console:
      0_1487604900039_Screen Shot 2017-02-20 at 16.33.32.png

      Is there any solution?

      Thank you!

      posted in Onsen UI
      anderson
    • RE: ons-splitter menu reveal effect

      I have read the documentation but it says nothing of the “type” attribute in the ons-splitter/ons-splitter-side element

      I have tried it but it does not work:

      <!doctype html>
      <html lang="en" ng-app="my-app">
      <head>
      	<title>App</title>
      	<meta charset="utf-8">
      
      	<!-- ONSENUI v2.1.0 and ANGULARJS v1.6.1 -->
      	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsenui.css"/>
      	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsen-css-components.css"/>
      	
      	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
      	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/onsenui.js"></script>
      	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/angular-onsenui.js"></script>
      
      </head>
      <body>
      
      	<ons-navigator var="navegador" page="main.html"></ons-navigator>
      
      	<ons-template id="main.html">
      		
      		<ons-splitter var="mySplitter" ng-controller="SplitterController as splitter">
      		  <!-- TYPE: overlay - push - reveal -->
      		  <ons-splitter-side side="left" width="220px" collapse swipeable type="push">
      		    <ons-page>
      		      <ons-list>
      		        <ons-list-item ng-click="splitter.load('home.html')" tappable>
      		          Home
      		        </ons-list-item>
      		      </ons-list>
      		    </ons-page>
      		  </ons-splitter-side>
      		  <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
      		</ons-splitter>
      	</ons-template>
      
      	<ons-template id="home.html">
      	  <ons-page>
      	    <ons-toolbar>
      	      <div class="left">
      	        <ons-toolbar-button ng-click="mySplitter.left.open()">
      	          <ons-icon icon="md-menu"></ons-icon>
      	        </ons-toolbar-button>
      	      </div>
      	      <div class="center">
      	        Main
      	      </div>
      	    </ons-toolbar>
      	    <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
      	      HOME
      	    </p>
      	  </ons-page>
      	</ons-template>
      
      	<script type="text/javascript">
      		var app = angular.module('my-app', ['onsen']);
      
      		app.controller('SplitterController', function($scope) {
      			this.load = function(page) {
      				content.load(page).then(function() {
      					mySplitter.left.close();
      				});
      			}
      
      	 	});
      	</script>
      
      </body>
      </html>
      
      posted in Onsen UI
      anderson
    • ons.notification.confirm console error

      Hello,
      I am using on.notification.confirm and it shows an error in console when I tap the background.

      <!doctype html>
      <html lang="en" ng-app="my-app">
      <head>
      	<title>App</title>
      	<meta charset="utf-8">
      
      	<!-- ONSENUI v2.1.0 and ANGULARJS v1.6.1 -->
      	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsenui.css"/>
      	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsen-css-components.css"/>
      	
      	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
      	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/onsenui.js"></script>
      	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/angular-onsenui.js"></script>
      
      </head>
      <body>
      	<ons-navigator var="navegador" page="main.html"></ons-navigator>
      
      	<ons-template id="main.html">
      		<ons-page ng-controller="AppController">
      	    	<ons-button ng-click="remove()">REMOVE</ons-button>
      		</ons-page>
      	</ons-template>
      	
      
      	<script type="text/javascript">
      	var app = angular.module('my-app', ['onsen']);
      
      	app.controller('AppController', function($scope) {
      
      	    $scope.remove = function(){
      	    	ons.notification.confirm({
      	            title:'Remove',
      	            message: 'Remove?',
      	            buttonLabels: ['YES', 'CANCEL'],
      	            cancelable: true,
      	            callback: function(idx) {
      	                switch (idx) {
      	                case 0:
      	                    console.log("REMOVE OK");
      	                    break;
      	                case 1:
      	                    console.log("REMOVE NO");
      	                    break;
      	                }
      	            }
              	});
      	    }
      
       	});
      	</script>
      
      </body>
      </html>
      

      Console:
      0_1487524085558_Screen Shot 2017-02-19 at 18.07.45.png

      Why is this happen?

      Thank you!

      posted in Onsen UI
      anderson
    • RE: How to pass data between pages?

      @Fran-Diox Thank you! :+1:

      posted in Onsen UI
      anderson
    • How to pass data between pages?

      How can you pass data between pages in ONSENUI v2.1.0?

      (I have read the documentation)

      My code:

      <!doctype html>
      <html lang="en" ng-app="my-app">
      <head>
      	<title>App</title>
      	<meta charset="utf-8">
      
      	<!-- ONSENUI v2.1.0 and ANGULARJS v1.6.1 -->
      	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsenui.css"/>
      	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsen-css-components.css"/>
      	
      	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
      	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/onsenui.js"></script>
      	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/angular-onsenui.js"></script>
      
      </head>
      <body>
      	<ons-navigator var="navegador" page="example.html"></ons-navigator>
      
      	<ons-template id="example.html">
      		<ons-page ng-controller="exampleController">
      			<ons-toolbar>
      			<div class="center">
      				Home
      			</div>
      			</ons-toolbar>
      			<ons-list>
      		    	<ons-list-item modifier="longdivider" tappable ng-click="editUser(nombre)">
      		    		<div class="center">
      		    			<ons-input type="text" placeholder="Name" ng-model="name"></ons-input>
      		    		</div>
      		    	</ons-list-item>
      			</ons-list>
      			<div style="text-align:center">
      			<ons-button ng-click="save(name)">SAVE</ons-button></p>
      			</div>
      		</ons-page>
      	</ons-template>
      
      	<ons-template id="user.html">
      		<ons-page ng-controller="UserController">
      		<ons-toolbar>
      			<div class="left">
      				<ons-back-button>Atras</ons-back-button>
      			</div>
      			<div class="center">
      				User
      			</div>
      		</ons-toolbar>
      		<p>User: {{username}}</p>
      		</ons-page>
      	</ons-template>
      	
      
      	<script type="text/javascript">
      	var app = angular.module('my-app', ['onsen']);
      	app.controller('exampleController', function($scope) {
      		$scope.save= function(name){
      			options = {
      	            data: {
      	                name:name
      	            }
      	        };
      	        $scope.navegador.pushPage("user.html",options);
      		}
      	});
      
      	app.controller('UserController', function($scope) {
      
      		//var user = navegador.topPage.data.user;
      		var user = $scope.navegador.topPage.data.user;
      		$scope.username=user;
      		console.log(user);
      	});
      	</script>
      
      </body>
      </html>
      

      Thanks!

      posted in Onsen UI
      anderson
    • RE: ons-progress-bar moves the elements down

      I’ve solved it.
      Just put the visibility property in the element <ons-progress-bar>

      <!doctype html>
      <html lang="en" ng-app="my-app">
      <head>
      	<title>App</title>
      	<meta charset="utf-8">
      
      	<!-- ONSENUI v2.1.0 and ANGULARJS v1.6.1 -->
      	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsenui.css"/>
      	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsen-css-components.css"/>
      	
      	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
      	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/onsenui.js"></script>
      	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/angular-onsenui.js"></script>
      
      </head>
      <body>
      	<ons-page ng-controller="ExampleController">
      		<ons-toolbar>
      		<div class="left">
      			<ons-back-button>Atras</ons-back-button>
      		</div>
      		<div class="center">
      			Hello
      		</div>
      		</ons-toolbar>
      		<ons-progress-bar id="bar" indeterminate style="visibility: hidden;"></ons-progress-bar>
      		<div style="text-align:center">
      			<p><ons-input modifier="underbar" type="text" placeholder="Name" float></ons-input></p>
      			<p><ons-button ng-click="showProgress()">Button</ons-button></p>
      		</div>
      	</ons-page>
      
      	<script type="text/javascript">
      	var app = angular.module('my-app', ['onsen']);
      	app.controller('ExampleController', function($scope) {
      		$scope.showProgress = function(){
      			var element = document.getElementById("bar");
      			element.setAttribute("style", "visibility: visible;");
      		}
      	});
      	</script>
      
      </body>
      </html>
      
      posted in Onsen UI
      anderson
    • ons-progress-bar moves the elements down

      I have a little problem. When I show <ons-progress-bar>, the elements then move 1px down.
      I’m using the ng-show attribute with AngularJS 1.6.1.

      <!doctype html>
      <html lang="en" ng-app="my-app">
      <head>
      	<title>App</title>
      	<meta charset="utf-8">
      
      	<!-- ONSENUI v2.1.0 and ANGULARJS v1.6.1 -->
      	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsenui.css"/>
      	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsen-css-components.css"/>
      	
      	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
      	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/onsenui.js"></script>
      	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/angular-onsenui.js"></script>
      
      </head>
      <body>
      	<ons-page ng-controller="ExampleController">
      		<ons-toolbar>
      		<div class="left">
      			<ons-back-button>Atras</ons-back-button>
      		</div>
      		<div class="center">
      			Hello
      		</div>
      		</ons-toolbar>
      		<ons-progress-bar indeterminate ng-show="loading"></ons-progress-bar>
      		<div style="text-align:center">
      			<p><ons-input modifier="underbar" type="text" placeholder="Name" float></ons-input></p>
      			<p><ons-button ng-click="showProgress()">Button</ons-button></p>
      		</div>
      	</ons-page>
      
      	<script type="text/javascript">
      	var app = angular.module('my-app', ['onsen']);
      	app.controller('ExampleController', function($scope) {
      		$scope.showProgress = function(){
      			$scope.loading=true;
      		}
      	});
      	</script>
      
      </body>
      </html>
      

      Why is this happen?
      Thank you!

      posted in Onsen UI
      anderson
    • RE: ons-tabbar tabs problem on destroy

      Hi quince,

      I have removed the “content” class from the div element (<div class = “content”>) and it works.
      Apparently the <ons-tabbar> element cannot be the child of a class element “content”.

      <!doctype html>
      <html lang="en">
      <head>
      	<title>App</title>
      	<meta charset="utf-8">
      
      	<!-- ONSENUI v.2.1.0 -->
      	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsenui.css"/>
      	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/css/onsen-css-components.css"/>
      	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.1.0/js/onsenui.js"></script>
      
      </head>
      <body>
      	<ons-page>
      		<ons-toolbar style="background-color:#000;">
      			<div class="left">
      				<ons-toolbar-button ng-click="app.menu.toggleMenu()">
      				<ons-icon icon="md-menu"></ons-icon>
      			</ons-toolbar-button>
      			</div>
      			<div class="center toolbarText">Products</div>
      		</ons-toolbar>
      		<!--<div class="content" style="text-align: center">-->
      		<div class="" style="text-align: center">
      		<ons-tabbar>
      			<ons-tab label="Products1" page="tab1.html" active></ons-tab>
      			<ons-tab label="Products2" page="tab2.html"></ons-tab>
      			<ons-tab label="Products3" page="tab3.html"></ons-tab>
      			<ons-tab label="Products4" page="tab4.html"></ons-tab>
      			<ons-tab page="tab5.html" icon="ion-ios-cart-outline"></ons-tab>
      		</ons-tabbar>
      		</div>
      	</ons-page>
      
      	<ons-template id="tab1.html">
      		<ons-page id="tab1">
      		TAB 1
      		</ons-page>
      	</ons-template>
      
      	<ons-template id="tab2.html">
      		<ons-page id="tab2">
      		TAB 2
      		</ons-page>
      	</ons-template>
      
      	<ons-template id="tab3.html">
      		<ons-page id="tab3">
      		TAB 3
      		</ons-page>
      	</ons-template>
      
      	<ons-template id="tab4.html">
      		<ons-page id="tab4">
      		TAB 4
      		</ons-page>
      	</ons-template>
      
      	<ons-template id="tab5.html">
      		<ons-page id="tab5">
      		TAB 5
      		</ons-page>
      	</ons-template>
      
      </body>
      </html>
      
      posted in Onsen UI
      anderson