Question

我正在使用Pixel Admin template来实现使用旧版本的select2依赖版本3.5.1的jinja2 Web应用程序，这不是我现在认为的当前版本。它工作正常，除了在iso设备上查看时，虚拟键盘总是在触摸选择2上显示。

我知道这个bug已经在select2最新版本4.0.6中修复了，所以我想把它改成这个版本。

的layout.html

<!DOCTYPE html>
<html class="gt-ie8 gt-ie9 not-ie pxajs">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Web Application</title>

        <script src="{{ url_for('static',filename='js/jquery-1.11.1.min.js') }}"></script>
        <script src="{{ url_for('static',filename='js/bootstrap.min.js') }}"></script>

        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/bootstrap.min.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/pixel-admin.min.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/rtl.min.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/themes.min.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/pages.min.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/widgets.min.css') }}">
        <script src="{{ url_for('static',filename='javascripts/dynamic_con.js') }}"></script>
    <!-- Remove select2 old version -->
        <!-- <script src="{{ url_for('static',filename='js/select2.js') }}"></script>    -->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
        <script src="{{ url_for('static',filename='js/bootstrap-datepicker.js') }}"></script>
        <script src="{{ url_for('static',filename='javascripts/toolbar.js') }}"></script>

        <script>var init = [];</script>

        {% block content %}

        {% endblock %}
         <script src="{{ url_for('static',filename='javascripts/pixel-admin.min.js') }}"></script>
        <script type="text/javascript">
            init.push(function () {

            })
            window.PixelAdmin.start(init);
        </script>
    </body>
</html>

Centre.html

{% extends "layout.html" %}

{% block content %}
<select class="js-example-basic-single" name="state">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

<script type="text/javascript">
    $(document).ready(function() {
        $('.js-example-basic-single').select2();

    });
</script>

{% endblock %}

当打开网址http://127.0.0.1:5000/Centre时，select2不会在所有ios设备上打开，但在桌面视图上正常工作。除非我删除像素管理<script src="{{ url_for('static',filename='javascripts/pixel-admin.min.js') }}"></script>的主要js文件，否则select2工作正常，但主题的其他功能将丢失，主要的js脚本也被删除。因此，这不是我正在寻找的解决方案。

我的问题如何用select2版本4.0.6替换模板像素管理中的版本3.5.1的select2，以使其在ios设备上运行良好？感谢。

加了：

我刚刚发现文件pixel-admin.min.js中出现的主题包含许多其他插件，包括select2。我看到它里面包含了一个精确的select2脚本脚本。这可能是我无法使用较新版本的select2覆盖它的原因，因为如果说我注释掉文件pixel-admin.min.js，它可以工作但是js文件中的其他插件和函数也将消失，我不知道那个。因此，我如何克服这种权衡？请帮助，我非常需要，谢谢。

Answer 1

只需在pixel-admin.min.js中找到相应的代码并将其注释。

然后，像通常一样，在您的html中包含Select2版本4.0.6：
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css">
和
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>

最好使用Select2版本4.0.5，因为4.0.6是rc。
看看Select2 release page。

Answer 2

要在PixelAdmin中禁用Select2并根据您发布的文件，第1473-1475行

if (window.Select2 !== undefined) {
    return;
}

更改为

return;
if (window.Select2 !== undefined) {
    return;
}

您正在使用哪个版本的PixelAdmin？

如何在PixelAdmin模板中将select2依赖插件更新到4.0.6版

2 个答案: