ijquery

فرم اسلایدری

screenshot

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

آموزش استفاده

۱- فراخوانی کتابخانه پلاگین و خصوصیت ها

        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="sliding.form.js"></script>
        <link rel="stylesheet" type="text/css" href="css/main.css" />
        <script type="text/javascript">
                $("#username").change({
                    function(){ $("#username").hide();
                }});
        </script>

2-  کد html جهت استفاده پلاگین

        <div id="content">
            <h1>دنیای جی کوئری</h1>
            <div id="wrapper">
                <div id="steps">
                    <form id="formElem" name="formElem" action="" method="post">
                        <fieldset class="step">
                            <legend>حساب کاربری</legend>
                            <p>
                                <label for="username">نام کاربری</label>
                                <input id="username" name="username" />

                            </p>

                        </fieldset>
                        <fieldset class="step">
                            <legend>اطلاعات شخصی</legend>
                            <p>
                                <label for="name">نام و نام خانوادگی</label>
                                <input id="name" name="name" type="text" AUTOCOMPLETE=OFF />
                            </p>
                            <p>
                                <label for="country">کشور</label>
                                <input id="country" name="country" type="text" AUTOCOMPLETE=OFF />
                            </p>
                            <p>
                                <label for="phone">تلفن</label>
                                <input id="phone" name="phone" placeholder="09*********" type="tel" AUTOCOMPLETE=OFF />
                            </p>
                            <p>
                                <label for="website">وب سایت</label>
                                <input id="website" name="website" placeholder="www.ijquery.ir" type="tel" AUTOCOMPLETE=OFF />
                            </p>
                        </fieldset>
                        <fieldset class="step">
                            <legend>پرداخت</legend>
                            <p>
                                <label for="cardtype">بانک</label>
                                <select id="cardtype" name="cardtype">
                                    <option>ملی</option>
                                    <option>ملت</option>
                                    <option>کشاورزی</option>
                                    <option>...</option>
                                </select>
                            </p>
                            <p>
                                <label for="cardnumber">شماره کارت</label>
                                <input id="cardnumber" name="cardnumber" type="number" AUTOCOMPLETE=OFF />
                            </p>
                            <p>
                                <label for="secure">شماره شبا</label>
                                <input id="secure" name="secure" type="number" AUTOCOMPLETE=OFF />
                            </p>
                            <p>
                                <label for="namecard">نام صاحب کارت</label>
                                <input id="namecard" name="namecard" type="text" AUTOCOMPLETE=OFF />
                            </p>
                        </fieldset>
                        <fieldset class="step">
                            <legend>تنظیمات</legend>
                            <p>
                                <label for="newsletter"></label>
                                <select id="newsletter" name="newsletter">
                                    <option value="Daily" selected>Daily</option>
                                    <option value="Weekly">Weekly</option>
                                    <option value="Monthly">Monthly</option>
                                    <option value="Never">Never</option>
                                </select>
                            </p>
                            <p>
                                <label for="updates">Updates</label>
                                <select id="updates" name="updates">
                                    <option value="1" selected>Package 1</option>
                                    <option value="2">Package 2</option>
                                    <option value="0">Don't send updates</option>
                                </select>
                            </p>
							<p>
                                <label for="tagname">Newsletter Tag</label>
                                <input id="tagname" name="tagname" type="text" AUTOCOMPLETE=OFF />
                            </p>
                        </fieldset>
						<fieldset class="step">
                            <legend>Confirm</legend>
							<p>
								Everything in the form was correctly filled 
								if all the steps have a green checkmark icon.
								A red checkmark icon indicates that some field 
								is missing or filled out with invalid data. In this
								last step the user can confirm the submission of
								the form.
							</p>
                            <p class="submit">
                                <button id="registerButton" type="submit">Register</button>
                            </p>
                        </fieldset>
                    </form>
                </div>
                <div id="navigation" style="display:none;">
                    <ul>
                        <li class="selected">
                            <a href="#">حساب کاربری</a>
                        </li>
                        <li>
                            <a href="#">اطلاعات شخصی</a>
                        </li>
                        <li>
                            <a href="#">پرداخت</a>
                        </li>
                        <li>
                            <a href="#">تنظیمات</a>
                        </li>
						<li>
                            <a href="#">پایان</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

پیش نمایش دانلود فایل پلاگین

6 دیدگاه دربارهٔ «فرم اسلایدری»

  1. سلام فرم قشنگیه
    اگه بخوام فقط چندتا از فیلدها رو ولید کنم یعنی کاربر مجاز باشه بعضی از فیدها رو اگه خواست خالی بذاره (مثلا فیلد کشور) چکار باید کرد؟ممنون

  2. با سلام
    و تشکر بابت کدهای زیباتون
    من چندتا مشکل دارم
    می خوام از این کدها در asp.net تحت vb استفاده کنم
    وقتی کدها را وارد می کنم اسلاید کار نمی کنه و فقط صفحه آخر نمایش داده می شه
    از طرفی css لود نمشه
    لطفا برای کار با asp منو راهنمایی کنید.
    با تشکر

  3. سلام. فایل php که باید برای action بهش آدرس بدیم رو نمیذارید؟
    چجوری اطلاعات فرم رو تو ایمیل دریافت کنیم؟؟؟؟

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *