a

ABLY مقالات و مطالب مجموعه

بسم الله الرحمن الرحیم

 

آموزش ساخت اسلایدرx

بخش ششم (آموزش ساخت اسلایدشو)

نمایش لیست آموزش های Bootstrap

 آموزش ساخت slide showx

در آموزش پیش نحوه ایجاد منو را در بوت استرپ با هم بررسی کردیم. در این بخش از آموزش قصد داریم بخش مربوط به Slide show را طراحی کنیم.

در این بخش بیشتر فعالیت هایی را انجام خواهیم داد که بوت استرپ در آن تاثیر زیادی نخواهد داشت. در این آموزش نحوه طراحی انواع Slide Show ها را برای سایت های مختلف بررسی خواهیم کرد و نحوه ایجاد Slide Show های زیبا را برای سایت های مختلف و موضوعات مختلف خواهیم آموخت.

 

یکی از بخش هایی که در تمامی سایت های امروزی وجود دارد Slide Show می باشد، طراحی و ساخت اسلایدشوهای حرفه ای کار بسیار پیچیده ای می باشد زیرا شما باید در jQuery تخصص بسیار زیادی داشته باشید که بتوانید اسلاید شوهای جذاب ایجاد کنید.

اما سایت های زیادی وجود دارند که اسلایدر های زیادی را برای دانلود در اختیار شما قرار می دهند. یکی از این سایت ها، سایت http://www.jssor.com می باشد. در این سایت شما می توانید اسلایدر های زیادی را مشاهده کنید و در میان آنها اسلایدر مورد نظر خود را انتخاب و دانلود کنید. اما طبیعتا این اسلایدری که انتخاب می کنید نیاز به تغییرات دارد، در برخی موارد هزینه ی تغییر این اسلایدر ها به قدری زیاد است که شاید شما ترجیح دهید از این اسلایدر ها استفاده نکنید!.

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

بسم الله الرحمن الرحیم

ممکن است شما نیاز داشته باشید، برخی از عناصر یک Drop Down را با استفاده jQuery حذف و یا Hidden کنید برای این کار می توانید به صورت زیر عمل کنید:

<html>
<head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
    <select id="MyDropDown">
        <option value="1">Ably.ir</option>
        <option value="2">__________________ ABLY ____________</option>
        <option value="3">yahoo.com</option>
        <option value="2">google.com</option>
    </select>

    <button type="button" onclick="HiddenOptionInDropDown(2)">Hidden Secound Item</button>


    <script>  
        function HiddenOptionInDropDown(id) {
            $("#MyDropDown option").css("display", "block"); // show all hidden option
            $("#MyDropDown option[value='" + id + "']").css("display", "none"); // hidden current option
        }
    </script>
</body>

</html>

در کد بالا ما توسط یک button دومین عنصر Drop Down را مخفی می کنیم.

بسم الله الرحمن الرحیم

اعتبار سنجی فرم ها با html5

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

با توجه به تکنولوژی های مورد استفاده نظیر PHP, JSP, ASP.NET و.. برای توسعه صفحات وب شما می توانید از روش های متفاوتی استفاده کنید.

در این آموزش قصد داریم تا شما را با یکی از ساده ترین روشهای اعتبارسنجی اطلاعات در سمت کلاینت آشنا کنیم. طبیعتا همه شما امروزه خواه و ناخواه از دستورات HTML5 استفاده می کنید، در این آموزش نیز می خواهیم با استفاده از دستورات HTML5 اعتبارسنجی اطلاعات ورودی کاربر را در سمت کلاینت بررسی کنیم.

 از همین رو شما می توانید از این آموزش در تکنولوژی های مختلف توسعه صفحات وب استفاده کنید.

در مبحث اعتبارسنجی اطلاعات در Client Side در گذشته تنها توسط کدهای java Script و یا با استفاده ا ز یک Framework (مانند jQuery validation plugin) صورت می گرفت، اما با معرفی HTML5 این روش رویکرد تغییر کرد زیرا شما برای انجام اعتبارسنجی نیاز به کدهای پیچیده java script ندارید.

اعتبارسنجی فرم ها با HTML5

HTML5 با ارائه attribute های type, pattern و  requireدر تگ <input /> به ما اجازه می دهد به سادگی اطلاعات ورودی کاربر را بررسی و Validate کنیم.

در این آموزش نیز مانند همیشه سعی خواهیم کرد با مثال های متفاوت روش های مختلف Validation را بررسی کنیم.

آموزش Type Attribute

type Attribute اولین Attribute ایی است که در HTML5 برای کنترل مقادیر ورودی کاربر مورد استفاده قرار می گیرد. توسط این Attribute شما مشخص می کنید که کنترل input شما چیست. با چند مثال این ویژگی را بررسی خواهیم کرد.

بسم الله الرحمن الرحیم

کرک کردن WowSlider

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

پیشنهاد می کنم برای اینکار از ابزار WowSlide استفاده کنید. این ابزار با در اختیار گذاشتن نمونه های متفاوتی از اسلاید شو ها به شما اجازه می دهد Slideshow مورد نظر خود را با تمامی پاارمترهای مورد نیاز خود طراحی و با یک Wizard ساده ایجاد کنید.

شما می توانید این ابزار را از لینک زیر دانلود کنید

http://wowslider.com

این ابزار رایگان نبوده و در صورتی که هزینه آن را پرداخت نکنید، اگر یک اسلاید شو ایجاد کنید در پایین تمامی تصاویر لولگو مربوط به نرم افزار دیده می شود.

برای مشاهده لطفا یک اسلاید شو با این نرم افزار ایجاد کنید تا مشکل مربوطه مشخص گردد.

بسم الله الرحمن الرحیم

 

حتما شما نیز با کاربرانی که به دلیل آشنا نبودن به مرورگرهای دیگر، از مرورگر قدرتمند IE استفاده می کنند در وب سایت داشته، دارید و خواهید داشت!
خوب به دلیل مشکل کاربران در عدم استفاده از ابزار بهتر شما مجبور هستید که سایت خود را به نحوی برای کاربرانتان تغییر دهید که بتوانند آن را به خوبی مشاهده کنند:
 
لطفا مقاله "طراحی وب سایت برای مرورگرهای مختلف" را مطالعه کنید.

 

 

چطور می توان یک استایل CSS اختصاصی برای IE نوشت؟ Cross-Browser

 

برای این کار می توانید از روشهای زیر استفاده کنید:
در روش اول کافی است درون تگ head مانند تمامی link هایی که قرار می دهید تگ مربوط به لود کردن استایل IE را نیز قرار دهید اما با چند ویژگی، که می توانید تعیین کنید این استایل برای چه نسخه ای از مرورگر IE است.
شما می توانید با دستور IF تعیین کنید که این استایل فقط برای مرورگرهای IE مورد استفاده قرار گیرد
در دستور IF می توانید از شرطهای منطقی استفاده کنید:

 

 

  • ! به معنی not است. مثال !IE یعنی برای IE استفاده نشود.
  • gt به معنی greater than (بزرگتر از)
  • gte به معنی greater than or equal (بزرگتر مساوی)
  • lt به معنی less than (کوچکتر از)
  • lte به معنی less than or equal (کوچکتر مساوی)

بسم الله الرحمن الرحیم

طبیعتا همه شما دکمه های Top را در کنار صفحات وب سایت ها دیده اید که با کلیک بر روی آن می توانید به بالای سایت باز گردید.

در این آموزش می خواهیم کد این دکمه را در jQuery  بنویسیم.

یک صفحه HTML ایجاد کنید و کد jQuery را به صفحه خود اضافه کنید.

jquery-1.8.0.min.js

سپس یک فایل js ایجاد کنید و کد زیر را در آن قرار دهید.

  $.fn.scrollView = function () {
    return this.each(function () {
      $('html, body').animate({
        scrollTop: $(this).offset().top
      }, 1000);
    });
  }

با استفاده از این کد ما ظرف مدت زمان یک ثانیه از محلی که بر روی لینک کلیک می کنیم به ابتدای صفحه انتقال پیدا می کنیم.

بسم الله الرحمن الرحیم

طبیعتا همه با طراحی یک جدول ساده HTML آشنایی دارید، مثلا جدول زیر را در نظر بگیرید:

<table >
        <tr>
            <th >
            Title
            </th>
       
            <th >
            Price
            </th>
        </tr>
         <tr>
            <td >
            CSS
            </td>
       
            <td >
            1,000,000
            </td>
        </tr>
         <tr>
            <td >
            HTML
            </td>
       
            <td >
            12,000,000
            </td>
        </tr>
</table>

خوب حالا فکر کنید می خواهید به سطرهای جدولتان استایلی بدهید، در زمان های گذشته شما می بایست یک استایل تعریف می کردید مثلا

0912 097 5516 :Phone Number
0713 625 1757 :Phone Number