تدجی اس چیست؟

اساسا تد جی اس یک افزونه جاوا اسکریپت است و می تواند یک چارچوب باشد. اما بیشتر از یک پلاگین است .تد جی اس یک پلت فرم برای ایجاد ایده های شما است که می تواند به شما برای ایجاد کتابخانه ای از عناصر و یا استفاده از کتابخانه های دیگر توسعه دهندگان کمک کند. تد جی اس بسیاری از توابع مورد نیاز برای کمک به شما را دارد که کد را واضح تر ، قابل فهم تر و قدرتمند تر می سازد. تد جی اس را در کنار هر کتابخانه جاوا اسکریپت دیگر می توانید استفاده نمایید.

کتابخانه گرا

تد جی اس یک پلتفرم کتخانه گراست که بدین معنی است هسته تد جی اس در حالت کم و مبتنی بر کتابخانه هایش است، اما دارای توابع اساسی مورد نیاز مانند توابع DOM ها ، توابع درهم آمیزی ، کوکی ها ... می باشد. اندازه فایل کوچک شده تنها 65 کیلوبایت است. تد جی اس ای پی آی هایی را برای ایجاد DOM های html و توابع دیگر در دسترس قرار می دهد.

مدیر کتابخانه

تد جی اس یک سرویس برای توسعه دهندگان فراهم می کند تا کتابخانه های خود را در داخل مدیریت کتابخانه تد جی اس اضافه کنند تا برای همه کاربران در دسترس باشد. علاوه بر این، هر توسعه دهنده می تواند صفحه مستندات خود را برای کتابخانه ها ایجاد کند که به صورت یک پارچه با github در ارتباط می باشد و می توان به صورت markdown طراحی شود.


عنصر نوار پیشرفت

برای اولین مثال ، یک نوار پیشرفت واکنشگرا می تواند مثال خوبی باشد. در تد جی اس ما به تمامی قسمت ها دسترسی داریم. در طراحی یک عنصر ، ب تمامی خواص یک عنصر نیر دسترسی داریم مانند محتوای داخل آن و مشخصه های DOM تا بتوان یک مد سند کاملا واکنشگرا طراحی کرد. این مثال یک ویجت کوچک را نشان می دهد که به وسیله تد جی اس ساخته شده است. تب Library کد اصلی عنصر را در بر دارد. در تب Result می توانید ورودی بازه را تغییر دهید تا نتیجه را مشاهده نمایید. تغییرات را نیز میتوانید از طریق Inspector رصد نمایید.

عنصر پیشرفت پویا

مقدار کنونی : 4%

h4, .RangeBox p{ direction:rtl; text-align:center; color:#fff; margin:20px 0px; font-family:'Vazir' } .RangeBox{ direction:rtl; width:100%; text-align:center; padding:20px 0px; } #Show{ direction:rtl; color:#0092CA } ainclude('file: ./libraries/ex1.js'); tedApi.bind("#Range","change",function(){ tedApi.elm("#bar").value = this.self.value; tedApi.html("#Show",tedApi.elm("#bar").value); }); var bar = ted.define("bar", ["value"]); ted.create(bar, function(val) { var $this = this; val = parseInt(val); if (val >= 0) { this.ElementStyle({ overflow: "hidden", width: "80%", position: "relative", height: "20px", border: "solid 1px #ccc", margin: "0 auto" }); this.html(""); var span = this.find("span"); tedApi.css(span, { height: "20px", width: (val <= 100 ? val : 0) + "%", background: "#ccc", osition: "relative", display: "block" }); this.bind("attrchange:value", function(value) { tedApi.css(span, { width: (parseInt(value) <= 100 ? parseInt(value) : 0) + "%" }); }); Object.defineProperty(this.self, 'value', { get() { return $this.attr("value"); }, set(val){ $this.attr("value",val); } }); } this.show(); });

مشخصه بررسی صحت ایمیل

تد جی اس علاوه بر طراحی عناصر ،امکان طراحی مشخصه هایی را برای همه یا تعدادی تگ مشخص می دهد. این مثال یک نمونه ساده از مشخصه ای است که صحت ایمیل ورودی در تگ input را بررسی می کند و در صورت وجود خطایی ، آن را در پایین ورودی به کاربر نشان می دهد. در این مثال برای اضافه کردن کتابخانه از روش دیگری استفاده شده است. (js tab)
درباره tedjs.export می توانید در مستندات مطالعه نمایید.
برای بررسی این مشخصه ، ورودی را با داده های مختلف بررسی نمایید.

لطفا ایمیلی برای اعتبارسنجی وارد نمایید

div{ width: 100%; text-align: center; position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); } p{ margin: 0px; color: #fff; font-family: serif; } input{ background: #fff; border: solid 1px #2962ff; padding: 5px 10px; border-radius: 5px; box-shadow: 0 0 32px 2px rgba(0, 145, 203, 0.35); margin: 21px 0px; outline:none; } input:focus{ box-shadow: 0 0 32px 2px rgba(0, 145, 203, 0.5); } *{ font-family:'Vazir' !important; } tedApi.export.isEmail = function(ted){ ted.createAttr("isEmail",function(val){ var messageSpan = tedApi.elm(""+val+""); if(this.self.type !== "text"){ return 0; } tedApi.css(messageSpan,{ color:"red", display:"none" }); tedApi.insert(messageSpan).after(this.self); this.bind("input",function(e){ if(!tedApi.isEmail(this.self.value)){ tedApi.css(messageSpan,{ display:"block" }); } else{ tedApi.css(messageSpan,{ display:"none" }); } }); },["input"]); }

طراحی موتور الگو با نود های متنی

این قدرت تد جی است که به عنوان یک پلت فرم می باشد. یک پلت فرم برای خلق فریم ورک خود. تمامی ایده های شما می تواند به آسانی پیاده سازی شود.
این مثال به وضوح کارهایی که می توانید انجام دهید را نمایش می دهد. طراحی یک موتور الگو به برنامه نویسی سمت کلاینت کمک می کند تا بتواند سریع تر عمل نماید و در سئو سایت نیز مانند طراحی عناصر شخصی سازی شده ، تاثیر منفی اعمال نکند.
در اینجا ، ما یک بلوک شرط if...else به وسیله نود متنی طراحی کرده ایم.

@if (false) این یک متن شرطی است

سلام جهان

@else این یک متن غیره در یک شرط است @endif
#TextBox{ text-align:center; color:#fff; font-family:serif; position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); } *{ font-family:'Vazir' !important; } tedApi.export.TemplateEngine = function(ted){ var $ifStack = []; ted.createTextNode(/\@if\s*\((.+?)\)/,function(whole,p1){ var that = this; tedApi.splitTextNode(this,whole); $ifStack.push({ cond:p1, others:null, elm:that }); }); ted.createTextNode(/\@else/,function(whole){ var poped = $ifStack.pop(); tedApi.splitTextNode(this,whole); if(!tedApi.isUndefined(poped)){ poped.others = this; } $ifStack.push(poped); }); ted.createTextNode(/@endif/,function(whole){ var $ifs = $ifStack.pop(), $ifbw = null,$elsebw = null; tedApi.splitTextNode(this,whole); if(typeof $ifs === typeof undefined){ return 0; } if(tedApi.isTextNode($ifs.others)){ $ifbw = tedApi.between($ifs.elm,$ifs.others); $elsebw = tedApi.between($ifs.others,this); tedApi.delete([this,$ifs.others,$ifs.elm]); } else{ $ifbw = tedApi.between($ifs.elm,this); tedApi.delete([this,$ifs.elm]); } if( !tedApi.run.call( window, "try{if("+$ifs.cond+"){return true;}}catch(e){}return false;" ) ){ tedApi.delete($ifbw); } else if($elsebw !== null){ tedApi.delete($elsebw); } }); }

توضیح یک ناحیه با نود کامنت

توضیحات همیشه برای کاربران مهم نیست. تنها به برنامه نویسان کمک می کند تا متوجه کد های خود شوند. نکته دیگر این است که در برنامه نویسی سمت کلاینت مانند HTML ، کامنت ها توسط موتور های جستجو در نظر گرفته نخواهند شد ، بنابراین می توان از آن ها برای ذخیره یا بازیابی اطلاعاتی استفاده کرد که نمی خواهیم توسط موتور های جستجو یا کاربران قابل نمایش باشد.
به علاوه ، می توان اطلاعات درون کامنت ها را برای پردازش های مختلفی استفاده کرد. خواه برای نمایش به کاربر یا برای پردازش های پس زمینه باشد.

این متن قبل از عنصر p است

این عنصر پاراگراف است

این متن قبل از عنصر p است
div{ color:#fff; font-family:serif } #box{ padding:20px; } p{ padding:5px 10px; background:#fff; color:#000000; cursor:pointer; } .descBlock{ display:none; position:absolute; } *{ font-family:'Vazir' !important; } tedApi.export.Description = function(ted){ ted.createComment(/\@desc[\s ]*\:([^]+)/,function(whole,content){ var afterElm = this.nextElementSibling, descBlock = '

{{BODY}}

', temp = ""; if(tedApi.isString(content) && tedApi.isNode(afterElm)){ content = content.trim(); temp = tedApi.elm(descBlock.replace("{{BODY}}",content)); if(tedApi.isNode(temp)){ tedApi.insert(temp).after(afterElm); tedApi.bind(afterElm,"mousemove",function(){ var cu = (tedApi.cursor()); tedApi.css(temp,{ display:"block", top:cu.client.client.top+5 + "px", left:cu.client.client.left+5 + "px" }); }); tedApi.bind(afterElm,"mouseleave",function(){ tedApi.css(temp,{ display:"none" }); }); } } }); }

طراحی افکت با AnimGraph

در تد جی اس علاوه بر توابع موتور DOM ، بیشتر توابع مورد نیاز نیز پیاده سازی شده است. این توابع ماننند css ، انتخاب و یافتن DOM ها ، تایید صحت داده ها ، ... و تابع animGraph می باشد. انیم گراف یک موتور طراحی افکت می باشد که تابع فراخوان را در محیط فیزیکی و بر روی یک گراف اجرا می کند. توضیحات بیشتر را در مستندات بخوانید.

این یک متن تست است
#test{ background:#fff; color:#000; padding:20px 30px; margin:0 auto; width:40%; text-align:center; font-family:serif; top:30%; position:relative; } #Repeat{ margin: 0 auto; position: absolute; bottom: 10%; left: 0px; right: 0px; display: block; width: 169px; background: #2962ff; border: none; padding: 5px 0px; border-radius: 5px; cursor: pointer; color: #fff; } *{ font-family:'Vazir' !important; } var testElm = tedApi.elm("#test"); var animShake = new tedApi.animGraph([ [100,200] ], function(x, y,per) {}); animShake.precent(0,function(){ tedApi.css(testElm,{ transform:"translate(1px, 1px) rotate(0deg)" }); }); animShake.precent(10,function(){ tedApi.css(testElm,{ transform:"translate(-1px, -2px) rotate(-1deg)" }); }); animShake.precent(20,function(){ tedApi.css(testElm,{ transform:"translate(-3px, 0px) rotate(1deg)" }); }); animShake.precent(30,function(){ tedApi.css(testElm,{ transform:"translate(3px, 2px) rotate(0deg)" }); }); animShake.precent(40,function(){ tedApi.css(testElm,{ transform:"translate(1px, -1px) rotate(1deg)" }); }); animShake.precent(50,function(){ tedApi.css(testElm,{ transform:"translate(-1px, 2px) rotate(-1deg)" }); }); animShake.precent(60,function(){ tedApi.css(testElm,{ transform:"translate(-3px, 1px) rotate(0deg)" }); }); animShake.precent(70,function(){ tedApi.css(testElm,{ transform:"translate(3px, 1px) rotate(-1deg)" }); }); animShake.precent(80,function(){ tedApi.css(testElm,{ transform:"translate(-1px, -1px) rotate(1deg)" }); }); animShake.precent(90,function(){ tedApi.css(testElm,{ transform:"translate(1px, 2px) rotate(0deg)" }); }); animShake.precent(99,function(){ tedApi.css(testElm,{ transform:"translate(1px, -2px) rotate(-1deg)" }); }); animShake.precent(100,function(){ tedApi.css(testElm,{ transform:"none" }); }); animShake.gravity(true).start(); tedApi.bind("#Repeat","click",function(){ animShake.gravity(true).start(); });
web stats