آموزش jQuery UI قسمت نهم کار با Button
0 0

آموزش jQuery UI قسمت نهم کار با Button


آموزش jQuery UI قسمت نهم کار با Button

در این پست در ادامه آموزش jQuery UI به مبحث دکمه ها یا همان Button ها می پردازیم.

در مثال زیر چهار دکمه را با استفاده از آی دی آنها انتخاب کردیم و سپس تابع ()button را صدا زدیم. و همچنین با استفاده از تابعد ()buttonset سه دکمه Left و Middle و Right کنار هم ایجاد کردیم.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="content/jquery-ui.css" rel="stylesheet" />
    <script src="scripts/jquery.js"></script>
    <script src="scripts/jquery-ui.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $("#button-1, #button-2, #button-3, #button-4").button();
            $("#button-5").buttonset();
        });
    </script>

</head>
<body>
    <button id="button-1">A button element</button>
    <input id="button-2" type="submit" value="A submit button">
    <a id="button-3" href="">An anchor</a>
    <input type="checkbox" id="button-4">
    <label for="button-4">Toggle</label>
    <br><br>
    <div id="button-5">
        <input type="checkbox" id="check1">
        <label for="check1">Left</label>
        <input type="checkbox" id="check2">
        <label for="check2">Middle</label>
        <input type="checkbox" id="check3">
        <label for="check3">Right</label>
    </div>
</body>
</html>

تنظیمات بیشتر برای دکمه ها

در مثال زیر سه دکمه در صفحه قرار دادیم و با استفاده تنظیمات زیر برای دکمه اول یک آیکون اضافه کردیم و برای دکمه دوم با استفاده از disabled آن را غیر فعال کردیم و برای دکمه سوم با استفاده از primary یک آیکون در اول دکمه قرار دادیم و با استفاده از secondary یک آیکون در آخر دکمه قرار دادیم.

نکته:

برای تغییر شکل آیکون دکمه ها می توانید کلاس مورد (فایل css) نظر را برای دکمه ها انتخاب کنید.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="content/jquery-ui.css" rel="stylesheet" />
    <script src="scripts/jquery.js"></script>
    <script src="scripts/jquery-ui.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $(function () {
                $("#button-6").button({
                    icons: {
                        primary: "ui-icon-locked"
                    },
                    text: false
                });
                $("#button-7").button({
                    disabled: true
                });
                $("#button-8").button({
                    icons: {
                        primary: "ui-icon-gear",
                        secondary: "ui-icon-triangle-1-s"
                    }
                });
            });
        });
    </script>

</head>
<body>
    <button id="button-6">
        Button with icon only
    </button>
    <button id="button-7">
        Button Disabled
    </button>
    <button id="button-8">
        Button with two icons
    </button>
</body>
</html>

در مثال زیر که مانند مثال قبلی می باشد به نوعی دیگر به دکمه ها تغییرات را اعمال کردیم.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="content/jquery-ui.css" rel="stylesheet" />
    <script src="scripts/jquery.js"></script>
    <script src="scripts/jquery-ui.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $(function () {
                $("#button-9").button({
                    text: false,
                    icons: {
                        primary: "ui-icon-seek-start"
                    }
                });
                $("#button-9").button('destroy');
                $("#button-10").button({
                    icons: {
                        primary: "ui-icon-seek-prev"
                    }
                });
                $("#button-10").button('disable');
                $("#button-11").button({
                    text: false,
                    icons: {
                        primary: "ui-icon-play"
                    }
                });
            });
        });
    </script>

</head>
<body>
    <button id="button-9">
        I'm destroyed
    </button>
    <button id="button-10">
        I'm disabled
    </button>
    <button id="button-11">
        play
    </button>
</body>
</html>

دانلود

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

نظر / سوال

Captcha

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