sábado, 12 de novembro de 2016

HTML | Cantos redondos em imagens

Apresentar uma imagem com os cantos arredondados:

style="border-radius: 10px;"

Utilizei em ionic com o template Ionic Material e também funcionou, como era óbvio :).

Se quiserem arredondar mesmo os cantos definitivamente:

http://www.roundpic.com/

sexta-feira, 14 de outubro de 2016

ionic | ionic-filter-bar

Viva.

Se precisarem de implementar um filtro na barra podem usar estes tutoriais. Consultei estes três e consegui implementar um filtro na minha APP mais ou menos facilmente.

http://www.codingdefined.com/2016/04/adding-search-bar-in-header-of-ionic-app.html

http://gonehybrid.com/how-to-add-a-search-bar-in-the-header-on-ionic/

https://github.com/djett41/ionic-filter-bar/tree/master/demo/app

Para perceberem melhor como funciona os filtros, podem também dar uma olhada nestes:

http://mcgivery.com/filters-ionic/

https://forum.ionicframework.com/t/issue-filtering-items-in-collection-repeat-with-search-box/11804/4

quarta-feira, 12 de outubro de 2016

ionic | Plugins para o ionic

Aqui ficam uma serie de plugins para usar no ionic.

http://www.gajotres.net/must-have-plugins-for-ionic-framework/

Indice

ionic | Uma boa explicação sobre o que é uma promessa!

Deixo-me um sítio que explica de forma simples o que é uma promessa e como é usada no angular/ionic.

http://mcgivery.com/promise-based-architecture-in-an-ionic-app/

quarta-feira, 28 de setembro de 2016

ionic | Mais um artigo sobre como ler dados a um endereço http no formato JSON

Aqui fica mais um artigo sobre como ler dados a um endereço http no formato JSON.

Este artigo tem a particularidade de usar o controller as em vez do $scope.

http://samcroft.co.uk/2016/loading-json-into-an-ionic-app/

segunda-feira, 18 de julho de 2016

jQuery | Uma forma simples de criar e chamar uma função em jQuery


<script>
$(document).ready(function(){
        $('button').click(function(){
                $.minhafuncao();
        });
});
</script>


<script>

$(document).ready(function(){
    $.minhafuncao = function(){
        alert('Olá malta!');
    }
});
</script>

Fonte:

https://www.sitepoint.com/community/t/jquery-calling-function-from-other-script/8006/2

https://www.sitepoint.com/5-ways-declare-functions-jquery/

quinta-feira, 14 de abril de 2016

Angular | Precisam de carregar uma imagem e fazer um corte?!

Deixo-vos uma forma de carregarem (upload) uma imagem e depois depois têm a possibilidade e a cortarem (crop) conforme necessitarem:

https://jsfiddle.net/rw6q9/2842/

Efeitos gráficos espetaculares

Aqui ficam alguns efeitos gráficos muito porreiros que podem usar nas vossas aplicações móveis, por exemplo:

https://davidwalsh.name/codepen-demos

Angular | Mostra e esconde um determinado componente HTML

Vejam neste exemplo como podem esconder e mostrar um determinado componente HTML com o Angular e JQuery:

http://jsfiddle.net/geniuscarrier/tKZjZ/55/

http://geniuscarrier.com/ng-toggle-in-angularjs/

Angular | O mais pequeno carrinho de compras do mundo!

Aqui fica um excelente pequeno exemplo como podem fazer um mini carrinho de compras, com possibilidade de remover itens e tudo. No meu caso adaptei-o adicionar fotos da câmara a uma lista e depois com opção de remover.

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
    $scope.products = ["Milk", "Bread", "Cheese"];
    $scope.addItem = function () {
        $scope.errortext = "";
        if (!$scope.addMe) {return;}
        if ($scope.products.indexOf($scope.addMe) == -1) {
            $scope.products.push($scope.addMe);
        } else {
            $scope.errortext = "The item is already in your shopping list.";
        }
    }
    $scope.removeItem = function (x) {
        $scope.errortext = "";
        $scope.products.splice(x, 1);
    }
});
</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">
<ul>
    <li ng-repeat="x in products">{{x}}<span ng-click="removeItem($index)">×</span></li>
</ul>
<input ng-model="addMe">
<button ng-click="addItem()">Add</button>
<p>{{errortext}}</p>
</div>

<p>Try to add the same item twice, and you will get an error message.</p>

</body>
</html>

Retirado de:

http://www.w3schools.com/angular/tryit.asp?filename=try_ng_app4

quinta-feira, 21 de janeiro de 2016

ionic | Procurar uma string dentro de outra string

/* Encontrar uma string dentro de outra */
var s = JSON.stringify($scope.account);
var emServicoTrueFalse = s.indexOf($scope.DataAtual) > -1;

ionic | Serviço e Controller para ler um JSON num endereço http

/* Service para devolver dias de serviço */
.service("diasDeServicoService", function($http, $q) {

var deferred = $q.defer();

this.getAccount = function() {
return $http.get('http://endereço_servidor_de_dados_json.com')
.then(function(response) {
// promise is fulfilled
deferred.resolve(response.data);
return deferred.promise;
}, function(response) {
// the following line rejects the promise
deferred.reject(response);
return deferred.promise;
});
};
})

/* Controller para mostrar os dias de serviço */
.controller("diasDeServicoController", function($scope, $q, diasDeServicoService) {

diasDeServicoService.getAccount()
.then(
function(result) {
// promise was fullfilled (regardless of outcome)
// checks for information will be peformed here
$scope.account = result;

console.log($scope.account); //mostrar objecto
console.log(JSON.stringify($scope.account)); //mostrar em string
alert(JSON.stringify($scope.account));

}

},
function(error) {
// handle errors here
console.log(error.statusText);
}
);
})

ionic | Devolver a data atual

/* Devolver a data atual */
var date = new Date();
$scope.DataAtual = date.getFullYear() + '-' + ('0' + (date.getMonth() + 1)).slice(-2) + '-' + ('0' + date.getDate()).slice(-2);
alert($scope.DataAtual);

ionic | Service vs Factory - De uma vez por todas

Deixo-vos um artigo que explica de "uma vez por todas" as diferenças entre Service e Factory.

http://blog.thoughtram.io/angular/2015/07/07/service-vs-factory-once-and-for-all.html