Konular

Eskiler

Kategori Arşivleri: Javascript

jQuery UI API – Front End Programlama

jQuery UI Nedir ? jQuery UI, jQuery javaScript kütüphanesi ile yazılmış, kullanıcı arayüzü bileşenleri , web sitesi efektleri ve form elemanları gibi web programlama unsurlarını içinde barındıran, oldukça sık kullanılan bir API yapısıdır. Ön yüz geliştiricisi birçok yazılımcı bu UI yapılarını kullanarak çeşitli işlemleri gerçekleştirmektedir. Form yapılarını ve bazı basit efektleri bu yapılar ile gerçekleştirmek oldukça pratiktir. Yazımızda Bulunan İçerikler  1- User Interface (Kullanıcı Arayüzü) Widget Unsurları Sortable Selectable Draggable Droppable Resizable 2- jQuery UI Widget Kullanımları Accordion Autocomplete Checkboxradio Controlgroup Datepicker Dialog Menu Progressbar Selectmenu Slider Spinner Tooltip 3- Bazı jQuery UI Efektleri Add Class Remove Class Switch Class Toggle Toggle Class Color Animation Effect Show Hide 4- Nereden ulaşabilirsiniz?  User Interface (Kullanıcı Arayüzü) Widget Unsurları Sortable: HTML sayfası içerisinde liste şeklinde tasarlanan ve liste elemanlarını fare yardımıyla sıralamanızı sağlayan javascript yapılarıdır. Selectable: Liste elemanlarını tek tek veya grup olarak seçme imkanı sunan kullanıcı arayüzü bileşenlerindendir. Draggable: HTML etiketlerini fare yardımıyla hareket ettirebilmemizi sağlayan Jquery…

AngularJS Nedir? Temel Yapılar ve Fonksiyonlar

1. AngularJS Giriş Günümüz web teknolojilerinde yaygın olarak kullanılan Javascript, günümüz şartlarına ayak uymasını sağlayabilecek bazı web uygulama mimarilerine ihtiyaç duymaktadır ve bu ihtiyaçlar doğrultusunda AngularJS, tek sayfa üzerinde Model – View – Controller ( MVC ) yazılım mimarisine uyumlu olacak şekilde tasarlanmıştır. Google tarafından geliştirilmiş olıp açık kaynak kodlu bir web uygulama çatısıdır. (Bakınız : https://tr.wikipedia.org/wiki/) Model – View – Controller konusunda bilgi sahibi olmak isterseniz bu yazıdan da faydalanabilirsiniz : http://www.tolgasariyildiz.com.tr/blog/asp-net-mvc-framework/ Konu anlatımları ve teorik bilgilere internet üzerinden pek çok kaynaktan ulaşabilirsiniz. Yazımızda daha çok uygulamalar üzerinde durmayı planlıyorum. Tabiki yeri geldikçe teorik olarak açıklanması gereken yerlerde gerekli bilgilerin verileceğinden şüpheniz olmasın. Yararlanabileceğiniz Bazı Kaynaklar : Temel Düzeyde Öğrenmek İsteyenler İçin : http://www.w3schools.com/angular/ İleri Düzeyde Öğrenmek İsteyenler İçin : https://www.codecademy.com/ https://www.codeschool.com/courses/shaping-up-with-angular-js * Bu iki sitede kurslara girebilmeniz için üye olmanız gerekiyor. AngularJS öğrenmenize yardımcı olacak dokümanlara da bu bağlantıda yer alan ingilizce kaynaktan ulaşabilirsiniz. AngularJS uygulama çatısı web…

Metotlar ve Fonksiyonlar Jquery AngularJS

ANGULARJS FONKSİYON – METOT KULLANIMI Fonksiyonların  tanımlandığı ve metot tanımlamalarının yapıldığı kısım, AngularJS MVC (Model-View-Controller) yapısının controller tarafıdır. View ve Model yapıları arasındaki bağlantı ile işlevselliğin sağlandığı kısımda gerekli fonksiyon-metot tanımlamaları yapılmaktadır. Örnek bir angular fonksiyonunu aşağıda yer alan kısımda görmektesiniz. angular.copy () fonksiyonunun kullanıldığı basit bir angularJS uygulaması aşağıda yer almaktadır… <!doctype html> <html lang="tr"> <head> <meta charset="utf-8"> <title>addClass copy demo </title> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <div ng-controller="ExampleController"> <form novalidate class="simple-form"> İsim: <input type="text" ng-model="user.name" /><br /> E-mail: <input type="email" ng-model="user.email" /><br /> Cisnsiyet: <input type="radio" ng-model="user.gender" value="male" />erkek <input type="radio" ng-model="user.gender" value="female" />kadın<br /> <button ng-click="reset()">SIFIRLA</button> <button ng-click="update(user)">KAYDET</button> </form> <pre>form = {{user | json}}</pre> <pre>master = {{master | json}}</pre> </div> <script> angular.module('copyExample', []) .controller('ExampleController', ['$scope', function($scope) { $scope.master= {}; $scope.update = function(user) { // Example with 1 argument $scope.master= angular.copy(user); }; $scope.reset = function() { // Example with 2 arguments angular.copy($scope.master, $scope.user); }; $scope.reset(); }]); </script> </body> </html>…