Facebook Twitter LinkedIn E-mail
magnify
Home 2013 三月

jQuery 入门教程(40): jQuery UI Spiner 示例

Spinner 主要用来输入各种格式的数字,可以使用鼠标滚轮,键盘方向键来修改输入值,也支持直接键入数字。支持本地化的输入金额和时间。

基本用法
下面代码显示了Spinner的基本用法,设置和取得Spinner的当前值。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Demos</title>
    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
    <script src="scripts/jquery-1.9.1.js"></script>
    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
    <script>
        $(function () {
            var spinner = $("#spinner").spinner();

            $("#disable").click(function () {
                if (spinner.spinner("option", "disabled")) {
                    spinner.spinner("enable");
                } else {
                    spinner.spinner("disable");
                }
            });
            $("#destroy").click(function () {
                if (spinner.data("ui-spinner")) {
                    spinner.spinner("destroy");
                } else {
                    spinner.spinner();
                }
            });
            $("#getvalue").click(function () {
                alert(spinner.spinner("value"));
            });
            $("#setvalue").click(function () {
                spinner.spinner("value", 5);
            });

            $("button").button();
        });
    </script>
</head>
<body>

    <p>
        <label for="spinner">Select a value:</label>
        <input id="spinner" name="value" />
    </p>

    <p>
        <button id="disable">Toggle disable/enable</button>
        <button id="destroy">Toggle widget</button>
    </p>

    <p>
        <button id="getvalue">Get value</button>
        <button id="setvalue">Set value to 5</button>
    </p>


</body>
</html>

20130320017

显示地图

本例使用两个Spinner,以步长为0.001 做为经纬度,然后和Google地图配合,通过Spinner修改地图的中心。
此外为了适应Google Map API,需要添加对其引用

代码如下:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Demos</title>
    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
    <script src="scripts/jquery-1.9.1.js"></script>
    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script>
        $(function () {
            function latlong() {
                return new window.google.maps.LatLng($("#lat").val(),
                    $("#lng").val());
            }
            function position() {
                map.setCenter(latlong());
            }
            $("#lat, #lng").spinner({
                step: .001,
                change: position,
                stop: position
            });

            var map = new window.google.maps.Map($("#map")[0], {
                zoom: 8,
                center: latlong(),
                mapTypeId: window.google.maps.MapTypeId.ROADMAP
            });
        });
  </script>
  <style>
  #map {
    width:500px;
    height:500px;
  }
  </style>
</head>
<body>
 
<label for="lat">Latitude</label>
<input id="lat" name="lat" value="44.797" />
<br />
<label for="lng">Longitude</label>
<input id="lng" name="lng" value="-93.278" />
 
<div id="map"></div>
 
 
</body>
</html>

20130320018

 

jQuery 入门教程(39): jQuery UI Slider 示例(二)

前面的slider 例子Slider都是水平显示的,Slider也可以显示成垂直的,这可以通过配置orientation ,将其值设为“vertical”。

基本用法

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Demos</title>
    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
    <script src="scripts/jquery-1.9.1.js"></script>
    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
    <script>
        $(function () {
            $("#slider-vertical").slider({
                orientation: "vertical",
                range: "min",
                min: 0,
                max: 100,
                value: 60,
                slide: function (event, ui) {
                    $("#amount").val(ui.value);
                }
            });
            $("#amount").val($("#slider-vertical")
                .slider("value"));
        });
    </script>
</head>
<body>
    <p>
        <label for="amount">Volume:</label>
        <input type="text" id="amount" style="border: 0; 
                 color: #f6931f; font-weight: bold;" />
    </p>

    <div id="slider-vertical" style="height: 200px;"></div>
</body>
</html>

20130320015

垂直选择值域

同样,Slider垂直显示时也可以使用两个滑块来选择值域。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Demos</title>
    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
    <script src="scripts/jquery-1.9.1.js"></script>
    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
    <script>
        $(function () {
            $("#slider-range").slider({
                orientation: "vertical",
                range: true,
                values: [17, 67],
                slide: function (event, ui) {
                    $("#amount").val("$" + ui.values[0]
                        + " - $" + ui.values[1]);
                }
            });
            $("#amount").val("$" + $("#slider-range")
                .slider("values", 0) +
              " - $" + $("#slider-range").slider("values", 1));
        });
    </script>
</head>
<body>

    <p>
        <label for="amount">Target sales goal (Millions):</label>
        <input type="text" id="amount" style="border: 0; 
                color: #f6931f; font-weight: bold;" />
    </p>

    <div id="slider-range" style="height: 250px;"></div>


</body>
</html>

20130320016

 

jQuery 入门教程(38): jQuery UI Slider 示例(一)

jQuery Slider组件可以把选中的HTML元素变成滑动条UI控件,滑动条可以支持多个滑块用来设置单个值或一个值域。
基本用法

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Demos</title>
    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
    <script src="scripts/jquery-1.9.1.js"></script>
    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
    <script>
        $(function () {
            $("#slider").slider();
        });
    </script>
</head>
<body>
    <div id="slider"></div>

</body>
</html>

20130320013

多个滑块选择值域

Slider支持使用两个滑块来选择一个值域,通过 min,max指定大范围, values 指定当前选择的值域。

range: true
min: 0,
max: 500,
values: [ 75, 300 ],

完整代码如下:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Demos</title>
    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
    <script src="scripts/jquery-1.9.1.js"></script>
    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
    <script>
        $(function () {
            $("#slider-range").slider({
                range: true,
                min: 0,
                max: 500,
                values: [75, 300],
                slide: function (event, ui) {
                    $("#amount").val("$" + ui.values[0]
                        + " - $" + ui.values[1]);
                }
            });
            $("#amount").val("$"
                + $("#slider-range").slider("values", 0) +
              " - $" + $("#slider-range").slider("values", 1));
        });
    </script>
</head>
<body>

    <p>
        <label for="amount">Price range:</label>
        <input type="text" id="amount" 
               style="border: 0; color: #f6931f; 
               font-weight: bold;" />
    </p>

    <div id="slider-range"></div>


</body>
</html>

20130320014

 

jQuery 入门教程(37): jQuery UI Progressbar 示例

前面在介绍jQuery 入门教程(20): jQuery UI 基本工作过程时简要介绍过Progessbar用法。
在使用进度条时,如果可以预知进度的大小,可以设置Max大小,如果对于一些无法预约时间比如下载文件可以使用“中间状态”的状态条。

基本用法

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Demos</title>
    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
    <script src="scripts/jquery-1.9.1.js"></script>
    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
    <script>
        $(function () {
            $("#progressbar").progressbar({
                value: 37
            });
        });
    </script>
</head>
<body>

    <div id="progressbar"></div>


</body>
</html>

显示进度

可以在显示进度条的同时显示当前的百分比(实际上可以显示任意文字),这是通过两个嵌套的div元素来实现,本例使用一个定时器来模拟进度条的动态效果。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Demos</title>
    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
    <script src="scripts/jquery-1.9.1.js"></script>
    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
    <style>
        .progress-label {
            float: left;
            margin-left: 50%;
            margin-top: 5px;
            font-weight: bold;
            text-shadow: 1px 1px 0 #fff;
        }
    </style>
    <script>
        $(function () {
            var progressbar = $("#progressbar"),
              progressLabel = $(".progress-label");

            progressbar.progressbar({
                value: false,
                change: function () {
                    progressLabel.text(progressbar.progressbar("value") + "%");
                },
                complete: function () {
                    progressLabel.text("Complete!");
                }
            });

            function progress() {
                var val = progressbar.progressbar("value") || 0;

                progressbar.progressbar("value", val + 1);

                if (val < 99) {
                    setTimeout(progress, 100);
                }
            }

            setTimeout(progress, 3000);
        });
    </script>
</head>
<body>

    <div id="progressbar">
        <div class="progress-label">Loading...</div>
    </div>


</body>
</html>

20130320011

“中间过渡”状态条
可以通过设置 value=false 将进度条显示为“过渡”状态的进度条,此外也可以通过配置来修改进度条的颜色。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Demos</title>
    <link rel="stylesheet" href="themes/base/jquery-ui.css" />
    <script src="scripts/jquery-1.9.1.js"></script>
    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
    <script>
        $(function () {
            $("#progressbar").progressbar({
                value: false
            });
            $("button").on("click", function (event) {
                var target = $(event.target),
                  progressbar = $("#progressbar"),
                  progressbarValue
                      = progressbar.find(".ui-progressbar-value");

                if (target.is("#numButton")) {
                    progressbar.progressbar("option", {
                        value: Math.floor(Math.random() * 100)
                    });
                } else if (target.is("#colorButton")) {
                    progressbarValue.css({
                        "background": '#'
                            + Math.floor(Math.random()
                                * 16777215).toString(16)
                    });
                } else if (target.is("#falseButton")) {
                    progressbar.progressbar("option",
                        "value", false);
                }
            });
        });
    </script>
    <style>
        #progressbar .ui-progressbar-value {
            background-color: #ccc;
        }
    </style>
</head>
<body>

    <div id="progressbar"></div>
    <button id="numButton">Random Value - Determinate</button>
    <button id="falseButton">Indeterminate</button>
    <button id="colorButton">Random Color</button>


</body>
</html>


20130320012

 

jQuery 入门教程(36): jQuery UI Menu 示例

jQuery Menu 组件可以应用到任何具有父/子关系的元素,就其变为菜单,但通常使用u>,li ,如果你希望使用除 ul,li 之外的元素,可以通过menus 来配置。下例使用缺省的 ui和 li
菜单支持选择事件select,因此可以为菜单添加事件处理。

基本用法

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Demos</title>
    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
    <script src="scripts/jquery-1.9.1.js"></script>
    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
    <script>
        $(function () {
            $("#menu").menu({
                select: function(event, ui) {
                    alert(ui.item.context.innerText);
                }
            });
        });
    </script>
    <style>
        .ui-menu {
            width: 150px;
        }
    </style>
</head>
<body>

    <ul id="menu">
        <li class="ui-state-disabled"><a href="#">Aberdeen</a></li>
        <li><a href="#">Ada</a></li>
        <li><a href="#">Adamsville</a></li>
        <li><a href="#">Addyston</a></li>
        <li>
            <a href="#">Delphi</a>
            <ul>
                <li class="ui-state-disabled"><a href="#">Ada</a></li>
                <li><a href="#">Saarland</a></li>
                <li><a href="#">Salzburg</a></li>
            </ul>
        </li>
        <li><a href="#">Saarland</a></li>
        <li>
            <a href="#">Salzburg</a>
            <ul>
                <li>
                    <a href="#">Delphi</a>
                    <ul>
                        <li><a href="#">Ada</a></li>
                        <li><a href="#">Saarland</a></li>
                        <li><a href="#">Salzburg</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Delphi</a>
                    <ul>
                        <li><a href="#">Ada</a></li>
                        <li><a href="#">Saarland</a></li>
                        <li><a href="#">Salzburg</a></li>
                    </ul>
                </li>
                <li><a href="#">Perch</a></li>
            </ul>
        </li>
        <li class="ui-state-disabled"><a href="#">Amesville</a></li>
    </ul>

</body>
</html>

20130320009

添加图标

可以为菜单项添加图标,这是通过 定义不同的CSS类来添加的。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Demos</title>
    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
    <script src="scripts/jquery-1.9.1.js"></script>
    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
    <script>
        $(function () {
            $("#menu").menu();
        });
    </script>
    <style>
        .ui-menu {
            width: 150px;
        }
    </style>
</head>
<body>

    <ul id="menu">
        <li>
            <a href="#">
                <span class="ui-icon ui-icon-disk"></span>Save
            </a>
        </li>
        <li>
            <a href="#">
                <span class="ui-icon ui-icon-zoomin"></span>Zoom In
            </a>
        </li>
        <li>
            <a href="#">
                <span class="ui-icon ui-icon-zoomout"></span>Zoom Out
            </a>
        </li>
        <li class="ui-state-disabled">
            <a href="#">
                <span class="ui-icon ui-icon-print"></span>
                Print...

            </a></li>
        <li>
            <a href="#">Playback</a>
            <ul>
                <li>
                    <a href="#">
                        <span class="ui-icon ui-icon-seek-start"></span>Prev
                    </a></li>
                <li>
                    <a href="#">
                        <span class="ui-icon ui-icon-stop"></span>Stop
                    </a></li>
                <li>
                    <a href="#">
                        <span class="ui-icon ui-icon-play"></span>Play
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="ui-icon ui-icon-seek-end"></span>Next
                    </a>
                </li>
            </ul>
        </li>
    </ul>


</body>
</html>

20130320010

 

jQuery 入门教程(35): jQuery UI Dialog 示例(三)

本篇使用Dialog 构造一个比较实用的对话框,它可以内嵌一个表单用来接受用户输入,每个输入框支持数据校验,部分使用正则表达式来检验。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Demos</title>
    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
    <script src="scripts/jquery-1.9.1.js"></script>
    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
    <style>
        body {
            font-size: 62.5%;
        }

        label, input {
            display: block;
        }

            input.text {
                margin-bottom: 12px;
                width: 95%;
                padding: .4em;
            }

        fieldset {
            padding: 0;
            border: 0;
            margin-top: 25px;
        }

        h1 {
            font-size: 1.2em;
            margin: .6em 0;
        }

        div#users-contain {
            width: 350px;
            margin: 20px 0;
        }

            div#users-contain table {
                margin: 1em 0;
                border-collapse: collapse;
                width: 100%;
            }

                div#users-contain table td, div#users-contain table th {
                    border: 1px solid #eee;
                    padding: .6em 10px;
                    text-align: left;
                }

        .ui-dialog .ui-state-error {
            padding: .3em;
        }

        .validateTips {
            border: 1px solid transparent;
            padding: 0.3em;
        }
    </style>
<!-- ReSharper disable ExpressionIsAlwaysConst -->
    <script>
        $(function () {
            var name = $("#name"),
              email = $("#email"),
              password = $("#password"),
              allFields = $([]).add(name).add(email).add(password),
              tips = $(".validateTips");

            function updateTips(t) {
                tips
                  .text(t)
                  .addClass("ui-state-highlight");
                setTimeout(function () {
                    tips.removeClass("ui-state-highlight", 1500);
                }, 500);
            }

            function checkLength(o, n, min, max) {
                if (o.val().length > max || o.val().length < min) {
                    o.addClass("ui-state-error");
                    updateTips("Length of " + n + " must be between " +
                      min + " and " + max + ".");
                    return false;
                } else {
                    return true;
                }
            }

            function checkRegexp(o, regexp, n) {
                if (!(regexp.test(o.val()))) {
                    o.addClass("ui-state-error");
                    updateTips(n);
                    return false;
                } else {
                    return true;
                }
            }

            $("#dialog-form").dialog({
                autoOpen: false,
                height: 300,
                width: 350,
                modal: true,
                buttons: {
                    "Create an account": function () {
                        var bValid = true;
                        allFields.removeClass("ui-state-error");

                        bValid = bValid && checkLength(name, "username", 3, 16);
                        bValid = bValid && checkLength(email, "email", 6, 80);
                        bValid = bValid && checkLength(password, "password", 5, 16);

                        bValid = bValid && checkRegexp(name, /^[a-z]([0-9a-z_])+$/i,
                            "Username may consist of a-z, 0-9, " +
                                "underscores, begin with a letter.");
                        // From jquery.validate.js (by joern), 
                        // contributed by Scott Gonzalez: 
                        // http://projects.scottsplayground.com/email_address_validation/
                        bValid = bValid && checkRegexp(email,
                            /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com");
                        bValid = bValid && checkRegexp(password,
                            /^([0-9a-zA-Z])+$/,
                            "Password field only allow : a-z 0-9");

                        if (bValid) {
                            $("#users tbody").append("<tr>" +
                              "<td>" + name.val() + "</td>" +
                              "<td>" + email.val() + "</td>" +
                              "<td>" + password.val() + "</td>" +
                            "</tr>");
                            $(this).dialog("close");
                        }
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                },
                close: function () {
                    allFields.val("").removeClass("ui-state-error");
                }
            });

            $("#create-user")
              .button()
              .click(function () {
                  $("#dialog-form").dialog("open");
              });
        });
    </script>
<!-- ReSharper restore ExpressionIsAlwaysConst -->
</head>
<body>

    <div id="dialog-form" title="Create new user">
        <p class="validateTips">All form fields are required.</p>

        <form>
            <fieldset>
                <label for="name">Name</label>
                <input type="text" name="name" id="name" 
                   class= "text ui-widget-content ui-corner-all" />
                <label for="email">Email</label>
                <input type="text" name="email" id="email" 
                    value="" class="text ui-widget-content ui-corner-all" />
                <label for="password">Password</label>
                <input type="password" name="password" 
                       id="password" value="" 
                    class="text ui-widget-content ui-corner-all" />
            </fieldset>
        </form>
    </div>


    <div id="users-contain" class="ui-widget">
        <h1>Existing Users:</h1>
        <table id="users" class="ui-widget ui-widget-content">
            <thead>
                <tr class="ui-widget-header ">
                    <th>Name</th>
                    <th>Email</th>
                    <th>Password</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John Doe</td>
                    <td>john.doe@example.com</td>
                    <td>johndoe1</td>
                </tr>
            </tbody>
        </table>
    </div>
    <button id="create-user">Create new user</button>


</body>
</html>

20130320008