jQuery ui datepicker directive for angular with typescript

יום רביעי, מאי 11, 2016

לאחרונה כתבתי מערכת מבוססת אנגולר עם typescript, והייתי צריך להטמיע jquery ui datepicker, כדי לעשות זאת כתבתי directive קטן שיעזור לבצע את העבודה. אני אציג כאן את שני הגרסאות של הקוד, אחד באנגולר רגיל והשני בעטיפה ל – typescript   אנגולר Code Snippet function datePickerUi() {    return {        restrict: 'A',        require: 'ngModel',        link: function (scope, element, attrs, ngModelCtrl) {            element.datepicker({                isRTL: true,                dateFormat: 'dd/mm/yy',                onSelect: function (date) {                    scope.$apply(function () {                        ngModelCtrl.$setViewValue(date);                    });                }            });            ngModelCtrl.$render = function () {                element.datepicker('setDate', ngModelCtrl.$modelValue);            };            element.datepicker('option', $.datepicker.regional);        }    }} החלק הראשון במתודת ה – link, מטפל ביצירת האלמנט ל...
תגובה אחת

dblclick on kendo grid with angular

יום שלישי, מאי 12, 2015

אחד מהספריות החביבות עלי זהו Kendo, יש להם כיום תמיכה מלאה באנגולר, אבל לצערי דוקמנטצייה חסרה עבור אנגולר. לאחרונה התבקשתי לכתוב directive של אירוע dblclick עבור כל הגרידים של Kendo. השימוש ב – html יראה משהו בסגנון הזה: Code Snippet <div kendo-grid="grid"         my-dbl-click="testFunc"         k-options="gridOPtions"></div>   הפוקנציה ב – controller, תהיה פשוטה, ואמורה לקבל את האובייקט המקושר לשורה שעליה לחצו dblclick. Code Snippet $scope.testFunc = function (item) {    console.log(item);};   הקוד היותר מורכב יהיה ה – directive עצמו כמובן. Code Snippet app.directive('myDblClick', function () {    return {        link: function (scope, elem, attrs)...
תגיות: , , ,
אין תגובות

הגדרת גלילה פנימית, והתאמה בזמן שינוי גודל המסך

יום שני, דצמבר 8, 2014

לפעמים בדפי ה – html שלנו, יש לנו חלק עליון שיכול להיות מורכב מכותרת או תפריט, תוכן העמוד, וטקסט כלשהו בתחתית, במידה והתוכן יהיה מספיק גדול, זה כמובן יגרום לגלילה, במצבים מסויימים ייתכן שנרצה להגדיר גלילה פנימית לתוכן, כך שהכותרת או התפריט והטקסט בתחתית המסך ייראו תמיד. הבעייה אינה בלהגדיר זאת, אלא בלתת את הגובה לתוכן עצמו, כלומר כדי לעשות זאת יש לעטוף את התוכן ב – div כלשהו שיקבל ערך קבוע עבור מאפיין height והגדרת scroll, הבעייה שגובה האלמנט אמור להשתנות לפי גובה המסך. (קוד המקור להורדה) לדוגמה במידה וה – html שלנו נראה כך: Code...
אין תגובות

bootstrap-combobox-angular

יום רביעי, אוגוסט 20, 2014

אחד הפקדים הנחמדים שמצאתי הוא bootstrap-combobox, המאפשר גם לראות את כל הרשימה, וגם משמש  כ – autocomlete. הקוד שלהם כאן, והדמו כאן. הבעייה התחילה כשרציתי להשתמש איתם יחד עם angular, לכאורה הקוד צריך להיות פשוט ביותר ולהראות כך: (הורדת הקוד המלא) Code Snippet <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" ng-app="app"><head>    <title></title>    <script src="content/jquery-1.11.1.js"></script>    <script src="bootstrap/js/bootstrap.js"></script>    <script src="content/bootstrap-combobox.js"></script>    <script src="content/angular.js"></script>    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" />    <link href="bootstrap/css/bootstrap-theme.css" rel="stylesheet" />    <link href="content/bootstrap-combobox.css" rel="stylesheet" />    <script type="text/javascript">        $(document).ready(function () {            $('.combobox').combobox();        });        angular.module('app', ).config(function ($controllerProvider) {            $controllerProvider.allowGlobals();        });        function testCtrl($scope) {            $scope.a = 'Test page 123';            $scope.list = [                { value: 'PA', text: 'Pennsylvania'...
תגיות: , , ,
תגובה אחת

שליחת אובייקטים עם תתי אובייקטים ב – ajax לשרת

יום שבת, מרץ 22, 2014

כדי לשלוח אובייקט מצד לקוח לצד שרת ב – ajax, בעזרת jQuery זה די פשוט, בהנחה שיש לנו אובייקט בשם Person בצד השרת ו – action שמקבל אותו – הקוד ייראה ככה: Code Snippet public class Person{    public int Id { get; set; }    public string Name { get; set; }    public int Age { get; set; }} Code Snippet public ActionResult Update(Person model){} נוכל בצד לקוח לפנות בעזרת jQuery לשרת ולשלוח את המידע כך: Code Snippet var obj = {    id: 1,    name: 'shlomo',    age:29};$.post('/home/save', obj);   אבל במידה שהאוביקט בצד שרת...
תגיות: , , , , , ,
תגובה אחת

jQuery events and singelton

יום שישי, דצמבר 20, 2013

אחד הדברים ש – jQuery מאפשר, זה להגדיר בקלות אירועים לאובייקטים מותאמים אישית. לדוגמא, נניח שיש לנו אובייקטי שתפקידו בחיים הוא לייצר ריבועים עלהמסך, (לדוגמא בזמן קליק) ונרצה בנוסף להרים אירוע שנוצר ריבוע חדש למי שיאזין לו.   Code Snippet <style>    .rect {        position: absolute;        background-color: silver;    }</style><script src="Scripts/jquery-1.8.2.js"></script><script>    var RectManager = function () {        $(document).click(function (e) {            var rect = new Rect(e.pageX, e.pageY, 100, 100);            rect.append();            $(RectManager).trigger('rectCreatedEvent', rect);        });    }    var Rect = function (x, y, w, h) {        var self = this;        self.x = x;        self.y = y;        self.width = w;        self.height = h;       ...
תגיות: , , ,
2 תגובות

Simple jQuery menu

יום שני, דצמבר 2, 2013

לא מזמן כתבתי אתר קטן אשר מדגים יכולות של HTML5, כחלק מהאתר רציתי תפריט פשוט אשר יהיה לא את היכולות הבאות: לחיצה פתיחה וסגירה של תפריטים המכילים תוכן פנימי. אפשרות קלה לעצב בעזרת CSS. זכירת הפריט הנבחר בתפריט (מכיוון שהתפריט הינו Link) אשר מנווט לדף אחר) לא רציתי להוריד משהו מוכן, מכיוון שהדרישות נראו לי מאוד פשוטות לכתיבה לבד ולא רציתי לסבך את האתר עם עוד ספריה, לכן כתבתי קוד קטנטן אשר מיד אציג אותו. לפני כן נראה כיצד התוצאה הסופית נראית (כמובן שניתן לשנות את ההגדרות ב - CSS) קוד...
תגיות: , , , , ,
תגובה אחת

הפיתוח בעולם החדש

יום חמישי, נובמבר 21, 2013

לאחרונה הרציתי במרכז השתלמויות של בית יעקב בירושלים, על הפיתוח בעולם המתחדש ומה הכיוון שאילו אנחנו הולכים בעולם ה - WEB וה -Windows (בהתמקדות בטכנולוגיות מייקרוסופט) מצורפת המצגת. (מומלץ להוריד - הצפייה ב - google docs הופכת את העברית אנגלית) אורך ההרצאה כשעה וחצי, אולי בהמשך אדאג להעלות הסרטה שלה, בכל מקרה לבקשת משתתפות אני מעלה כרגע את המצגת לבלוג. להלן רשימת הנושאים: HTML5 קצת היסטוריה על עולם ה – WEB ותהליך התקדמות התקן. מדוע ועל מה יצא הקצף על HTML4. מה הבשורה ומה מיוחד ב – HTML5. ממה מורכב HTML5. האם אפשר כבר היום לפתח עם התקן החדש (רמז – דפדפנים). HTML6, HTML7 ??? ASP.NET MVC  היסטוריית טכנולוגיות פיתוח אתרים בעולם...
תגובה אחת

MVC Validators

יום ראשון, נובמבר 17, 2013

אחת התכונות של MVC, היא האפשרות להגדיר על המודל האם הוא Valid או לא – זה נעשה בעזרת Attributes שונים על המאפיינים, לדוגמא. Code Snippet public class Person{        public string Name { get; set; }            public string Email { get; set; }} כעת במידה ובצד השרת נקבל אובייקט Person נוכל לשאול האם המודל תקין, כך:   Code Snippet public ActionResult Index(Person person){    if (ModelState.IsValid)    {        //....    }    return View();} מה שעוד יותר נחמד, שבמידה ונגדיר את ה – View שלנו בעזרת model של MVC, הוא ייצור עבורנו jquery validators מתאימים,...
תגיות: , , ,
תגובה אחת

Ajax inside html5 worker

יום שלישי, אוקטובר 1, 2013

אחד מהדברים שפחות עושים ב – Worker זה פנייה לשרת ב – ajax. אבל יש מקרים שבהם עושים זאת, הבעייה עם אותם מקרים, שלא ניתן להשתמש ב – jQuery ajax מכיוון ש – jQuery הינה ספריית DOM ואין גישה ל – UI בתוך ה – worker, הפיתרון הפשוט (או המסובך) זה כמובן להשתמש ב – XMLHttpRequest – אבל זה בהחלט לא יהיה כיף. כתבתי אובייקט קטן העוטף את XMLHttpRequest לשימושים פשוטים כדי שהשימוש יהיה יותר נוח. דוגמא לשימוש: ...
תגיות: , , , , , ,
3 תגובות