博客

如何用jQuery Mobile制作一个URL输入

  • Post category:jquery

如何用jQuery Mobile制作一个URL输入：

1. 创建一个HTML页面和JavaScript文件

首先，我们将创建一个HTML页面和一个JavaScript文件。在本例中，HTML页面中包含了一个包装在data-role="content"块中的表单，用于输入URL。

<!DOCTYPE html>
<html>
    <head>
        <title>URL输入</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
        <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head>
    <body>
        <div data-role="page">
            <div data-role="header">
                <h1>URL输入</h1>
            </div>
            <div data-role="content">
                <form>
                    <label for="url-input">输入URL:</label>
                    <input type="text" id="url-input" name="url-input">
                    <button type="submit">Go</button>
                </form>
            </div>
        </div>
        <script src="main.js"></script>
    </body>
</html>

2. 编写JavaScript

在main.js文件中，我们将为表单绑定一个提交事件。当表单提交时，我们将获取输入的URL并进行跳转。

$(document).on("pagecreate", function () {
    $("form").on("submit", function (event) {
        event.preventDefault();
        var url = $("#url-input").val().trim();
        if (url !== "") {
            window.location.href = url;
        }
    });
});

3. 运行项目

在页面中输入URL，然后单击“Go”按钮即可跳转至指定页面。

示例

以下是一个实际应用的示例，它创建了一个可以与Google搜索引擎交互的URL输入器。在该示例中，表单使用GET方法提交查询参数，并且用户可以在页面中选择使用哪个Google域名（例如www.google.com或www.google.cn）进行搜索。

<!DOCTYPE html>
<html>
    <head>
        <title>Google搜索</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
        <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head>
    <body>
        <div data-role="page">
            <div data-role="header">
                <h1>Google搜索</h1>
            </div>
            <div data-role="content">
                <form id="search-form" method="get" action="http://www.google.com/search">
                    <fieldset data-role="controlgroup">
                        <legend>选择域名:</legend>
                        <input type="radio" name="site" id="site-google" value="www.google.com" checked="checked">
                        <label for="site-google">Google.com</label>
                        <input type="radio" name="site" id="site-google-cn" value="www.google.cn">
                        <label for="site-google-cn">Google.cn</label>
                    </fieldset>
                    <label for="q">搜索： </label>
                    <input type="search" name="q" id="q">
                    <button type="submit">Search</button>
                </form>
            </div>
        </div>
        <script src="main.js"></script>
    </body>
</html>

JavaScript代码如下：

$(document).on("pagecreate", function () {
    $("#search-form").on("submit", function (event) {
        event.preventDefault();
        var site = $("input[name=site]:checked").val();
        var q = $("#q").val().trim();
        if (q !== "") {
            var url = "http://" + site + "/search?q=" + encodeURIComponent(q);
            window.location.href = url;
        }
    });
});

该示例中使用了encodeURIComponent方法来对用户输入的搜索字符串进行编码，以确保它可以被用作URL查询参数的一部分。

这些示例展示了如何使用jQuery Mobile制作URL输入的基本方法和扩展方法。在实际应用中，您可以根据需要对这些方法进行自定义，以便创建更适合自己网站需求的URL输入界面。

Tags: