۳ مطلب با کلمه‌ی کلیدی «آموزش jQuery» ثبت شده است

تغییر عناصر یک DropDown با jQuery

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

ممکن است شما نیاز داشته باشید، برخی از عناصر یک 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 را مخفی می کنیم.

ادامه مطلب...

ساخت Scroll Top

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

طبیعتا همه شما دکمه های 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);
    });
  }

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

کد زیر را نیز در همین فایل قرار دهید.

$('#scroll-link').click(function (event) {
  event.preventDefault();
  $('#header').scrollView();
});

header ای دی element ای است که در ابتدای صفحه قرار می دهیم و می خواهیم پس از کلیک بر روی scroll-link به آن جا انتقال پیدا کنیم

حال این فایل را نیز به صفحه خود اضافه کنید.

در بالای صفحه یک div با id منحصر به فردی ایجاد کنید تا هنگامی که ما بر روی لینک پایین صفحه کلیک می کنیم به این div لینک شود.

<div id="header"></div>

در پایین صفحه یک تگ a به صورت زیر اضافه کنید

<a href="#" id="scroll-link">TOP</a>

در نهایت صفحه خود را با مطلبی پر کنید تا اسکرول آن نمایش داده شود

کد این آموزش را می توانید از این جا دانلود کنید.

پسورد فایل

EduOnline.ir

دانلود jQuery Scroll bar
حجم: 32.7 کیلوبایت

انتخاب Button پیش فرض

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

<script type="text/javascript">
         var ButtonKeys = { "EnterKey": 13 };
         $(function() {
             $("#MainForm").keypress(function(e) {
if (e.which == ButtonKeys.EnterKey) {
var defaultButtonId = $(this).attr("defaultbutton");
                     $("#" + defaultButtonId).click();
return false;
                 }
             });
         });
</script>
<% using (Html.BeginForm("DefaultButtonTest", "Home", FormMethod.Post,
new { defaultbutton = "SubmitButton",id="MainForm" })){%>
    <%= Html.TextBox("test")%>
  <input type="submit" name="btnSubmit" id="SubmitButton" value="Submit" />
<%}%>

<form action="/Home/DefaultButtonTest" defaultbutton="SubmitButton"
id="MainForm" method="post">
<input id="test" name="test" type="text" value="" />
<input type="submit" name="btnSubmit" id="SubmitButton" value="Submit" />
<input type="submit" name="btnSubmit" id="CancelButton" value="Cancel" />
</form>

آموزش برنامه نویسی

۳ مطلب با کلمه‌ی کلیدی «آموزش jQuery» ثبت شده است