ایجاد متن تایپ شونده (TypeWriter) در بلاگ های بیان


شاید در وب گردی هاتون سایت هایی رو دیده باشید که دارای اخباری هستند که ماشین تایپشون میکنه و کاربر میتونه روی خبر مورد نظر کلیک کنه. در این مطلب میخوام ساخت این ابزار رو در وبلاگ های بیان آموزش بدم. اول از همه نیازه که کد jQuery رو داخل قالبتون قرار بدید:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

پس از قرار دادن کد jQuery باید کد TypeWriter رو در قالب قرار بدید:

<script> /*! * jquery.typer.js 0.0.4 - https://github.com/yckart/jquery.typer.js * The typewriter effect * * Copyright (c) 2013 Yannick Albert (http://yckart.com) * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php). * 2013/03/24 */ (function($){ $.fn.typer = function(text, options){ options = $.extend({}, { char: '', delay: 2000, duration: 600, endless: true, onType: $.noop, afterAll: $.noop, afterPhrase: $.noop }, options || text); text = $.isPlainObject(text) ? options.text : text; text = $.isArray(text) ? text : text.split(" "); return this.each(function(){ var elem = $(this), isVal = {input:1, textarea:1}[this.tagName.toLowerCase()], isTag = false, timer, c = 0; (function typetext(i) { var e = ({string:1, number:1}[typeof text] ? text : text[i]) + '', char = e.substr(c++, 1); if( char === '<' ){ isTag = true; } if( char === '>' ){ isTag = false; } elem[isVal ? "val" : "html"](e.substr(0, c) + ($.isFunction(options.char) ? options.char() : options.char || ' ')); if(c <= e.length){ if( isTag ){ typetext(i); } else { timer = setTimeout(function() { typetext(i); }, options.duration/10); /* timer = setTimeout(typetext, options.duration/10, i); */ } options.onType(timer); } else { c = 0; i++; if (i === text.length && !options.endless) { return; } else if (i === text.length) { i = 0; } timer = setTimeout(function() { typetext(i); }, options.delay); /*timer = setTimeout(typetext, options.delay, i); */ if(i === text.length - 1) options.afterAll(timer); options.afterPhrase(timer); } })(0); }); }; }(jQuery)); </script>

حالاپس از قرار دادن اسکریپت های بالا کد زیر رو در یه قسمت دلخواه از بخش <body> کد های قالبتون قرار بدید:

<box:daily_links>
    <script>
     $(document).ready(function() {
     $('#typer').typer( [  
              <view:daily_links>
                     '<a alt="(*link_alt*)" href="(*link_url*)" target="_blank"><span>(*link_name*)</span></a>',
              </view:daily_links>                                                                                                                                        
]); });</script>
</box:daily_links>

و در آخر هم کد زیر رو در هر جای قالب قرار بدید تبدیل به متن تایپ شونده میشه:

<div id="typer"></div>

توجه کنید که این ابزار لیست "پیوند های روزانه" شما را به عنوان اخبار نشان میدهد