آموزش jquery قسمت نهم کار با Event ها
0 0

آموزش jquery قسمت نهم کار با Event ها


آموزش jquery قسمت نهم کار با Event ها

در قسمت های قبلی آموزش نصب JQuery ، Selector ها ، Filter ها ، Traversing ، Manipulating ، Content Inserting ، Replacing Content و CSS Content در jquery پرداختیم.

در ادامه این آموزش به مفهوم Event ها در jquery می پردازیم.

از mouseover و mouseleave برای highlight کردن استفاده می شود.

در مثال زیر یک تابع به نام highlight تعریف کردیم و سپس توسط toggleClass یک کلاس را به آن اختصاص دادیم. زمانی که ماوس روی (mouseover) متن قرار میگرد highlight می شود و زمانی که ماوس بیرون (mouseleave) متن باشد از حالت highlight خارج می شود.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>iranganj</title>
    <script src="jquery/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
        function highlight() {
            $("#eventTarget").toggleClass("highlighted");
        }
        $(document).ready(function () {
            $("#eventTarget").bind("mouseover", highlight);
            $("#eventTarget").bind("mouseleave", highlight);
        });
    </script>
    <style type="text/css">
        .highlighted {
            color: blue;
            background-color: yellow;
        }
    </style>

</head>
<body>
    <div id="eventTarget">
        www.iranganj.ir
    </div>
</body>
</html>

در این مثال فقط مثال قبلی رو تغییر دادیم و mouseover و mouseleave در یک خط نوشتیم.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>iranganj</title>
    <script src="jquery/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#eventTarget").bind("mouseover mouseleave", highlight);
        });
        function highlight(eventArgs) {
            $("#eventTarget").toggleClass("highlighted");
        }
    </script>
    <style type="text/css">
        .highlighted {
            color: blue;
            background-color: yellow;
        }
    </style>

</head>
<body>
    <div id="eventTarget">
        www.iranganj.ir
    </div>
</body>
</html>

در این مثال فقط با اضافه کردن DisableHighlight زمانی که روی عنصر انتخابی کلیک می شود تابع DisableHighlight اجرا شد و توسط unbind عمل mouseover و  mouseleaveرا برای آن غیر فعال می شود.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>iranganj</title>
    <script src="jquery/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#eventTarget").bind("mouseover mouseleave", highlight);

            $("#eventTarget").bind("click", DisableHighlight);
        });

        function highlight(eventArgs) {
            $("#eventTarget").toggleClass("highlighted");
        }
        function DisableHighlight(eventArgs) {
            $("#eventTarget").unbind("mouseover mouseleave", highlight);
        }
    </script>
    <style type="text/css">
        .highlighted {
            color: blue;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="eventTarget">
        www.iranganj.ir
    </div>
</body>
</html>

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>iranganj</title>
    <script src="jquery/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#eventTarget").bind("mouseover mouseleave", highlight);

            $("#eventTarget").bind("click", function (parameters) {
                $("#eventTarget").unbind("mouseover mouseleave", highlight);
                $("#eventTarget").html("<p>You shut off hover effect</p>");
            });
        });
        function highlight(eventArgs) {
            $("#eventTarget").toggleClass("highlighted");
        }
    </script>
    <style type="text/css">
        .highlighted {
            color: blue;
            background-color: yellow;
        }
    </style>

</head>
<body>
    <div id="eventTarget">
        www.iranganj.ir
    </div>
</body>

در مثال زیر که همانند مثال های قبلی است فقط در این مثال از کلمه this استفاده شده که اشاره به عنصر انتخابی همان تابع می کند یعنی دوباره نخواستم ID عنصر انتخابی را بنویسم.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>iranganj</title>
    <script src="jquery/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#eventTarget").bind("mouseover mouseleave", highlight);

            $("#eventTarget").bind("click", function () {
                $(this).unbind("mouseover mouseleave", highlight);
                $(this).html("<p>You shut off hover effect</p>");
            });
        });
        function highlight(eventArgs) {
            $("#eventTarget").toggleClass("highlighted");
        }
    </script>
    <style type="text/css">
        .highlighted {
            color: blue;
            background-color: yellow;
        }
    </style>

</head>
<body>
    <div id="eventTarget">
        www.iranganj.ir
    </div>
</body>
	</html>

این مثال نیز همانند مثال قبلی است فقط با این تفاوت که در صفحه چندین تگ div داریم و چون در اینجا از کلمه this استفاده کردیم زمانی که روی div مورد نظر قرار می گیریم و روی آن div کلیک می کنیم در اینجا this اشاره به همان div ی می کند که روی آن قرار گرفتیم.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>iranganj</title>
    <script src="jquery/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("div").bind("mouseover mouseleave", highlight);

            $("div").bind("click", function (parameters) {
                $(this).unbind("mouseover mouseleave", highlight);
                $(this).html("<p>You shut off hover effect</p>");
            });
        });
        function highlight(eventArgs) {
            $(this).toggleClass("highlighted");
        }
    </script>
    <style type="text/css">
        .highlighted {
            color: blue;
            background-color: yellow;
        }

        div {
            background-color: burlywood;
            margin: 10px;
            height: 100px;
            width: 150px;
        }
    </style>

</head>
<body>
    <div>
        www.iranganj.ir
    </div>
    <div>
        www.iranganj.ir
    </div>
    <div>
        www.iranganj.ir
    </div>
</body>
</html>

در مثال زیر یک table ایجاد کردیم سپس با استفاده از فیلترهای odd و even در jquery سطرهای جدول را یک در میان رنگی کردیم و سپس عمل highlight را همانند مثال های قبلی انجام دادیم و یک جدول highlight دار ایجاد کردیم.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>iranganj</title>
    <script src="jquery/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("tr:odd").addClass("odd");
            $("tr:even").addClass("even");

            $("tr").bind("mouseover mouseleave", highlight);
            $("tr").bind("click", highlight);
        });
        function highlight(eventArgs) {
            $(this).toggleClass("highlighted");
        }
    </script>
    <style type="text/css">
        .odd {
            background-color: burlywood;
        }

        .even {
            background-color: cadetblue;
        }
        .highlighted {
            background-color: yellow;
        }

        table {
            width: 200px;
        }
    </style>

</head>
<body>
    <table>
        <tbody>
            <tr>
                <td>site</td>
                <td>iranganj</td>
            </tr>
            <tr>
                <td>site</td>
                <td>karkoo</td>
            </tr>
            <tr>
                <td>site</td>
                <td>google</td>
            </tr>
            <tr>
                <td>site</td>
                <td>yahoo</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

دانلود

نویسنده حسین فتحی
گروه مطلب Jquery
نوع مطلب سورس کد و آموزش
تاریخ انتشار ۲۸ اردیبهشت ۱۳۹۴
منبع ایران گنج
تعداد نظرات ۰
قیمت کاربران عضو سایت
توضیح توجه:
  • زمانی که روی لینک دانلود کلیک می کنید لینک دانلود به مدت 24 ساعت معتبر خواهد بود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

نظر / سوال

Captcha

این صفحه را می‌پسندم