Question

我在ASP.NET MVC 4和JQuery Mobile中创建了一个Web项目。

我尝试使用mobiscroll组件来打印滚动条。

问题是显示器很奇怪。

这是我的代码：

<html>
 <head>
  @Scripts.Render("~/ScriptsJQuery")
  @Styles.Render("~/Content/css")
  @Styles.Render("~/mobiscrollCSS")
  @Scripts.Render("~/mobiscrollScripts")
  @Scripts.Render("~/mobiscrolli18n")

  <script>
     $(function () {
        $('#demo').mobiscroll({ preset: 'time', lang: 'fr',display:'bottom', mode:'scroller', theme : 'android' });

        $('#demo').click(function () { $('#demo').mobiscroll('show'); });

     });
  </script>
  <meta name="viewport" content="width=device-width" />
  <title>Index</title>
 </head>


<body>
  <div data-role="page">
    <div data-role="header">
     <a id="arrow_left_link" data-ajax="false" href="@Url.Content("/MyRecipes")">
        <img id="arrow_img" src="~/Content/images/arrow_left.jpg" />
     </a>
     <label>Ajouter ma recette</label>
  </div>
  <div data-role="content">

    <div class="ui-grid-a">
        <div class="ui-block-a"><div class="ui-bar ui-bar-e">Image</div></div>
        <div class="ui-block-b"><div class="ui-bar ui-bar-e"><input type="file" /></div></div>

        <div class="ui-block-a"><div class="ui-bar ui-bar-e">Titre</div></div>
        <div class="ui-block-b"><div class="ui-bar ui-bar-e"><input type="text" /></div></div>

        <div class="ui-block-a"><div class="ui-bar ui-bar-e">Recette</div></div>
        <div class="ui-block-b"><div class="ui-bar ui-bar-e"><input type="text" /></div></div>

        <div class="ui-block-a"><div class="ui-bar ui-bar-e">Cat&eacute;gorie</div></div>
        <div class="ui-block-b">
            <div class="ui-bar ui-bar-e">
                <select id="select-category" name="select-category">
                    <option value="entree">Entr&eacute;e</option>
                    <option value="plat">Plat</option>
                    <option value="dessert">Dessert</option>
                </select>
            </div>

        </div>

        <div class="ui-block-a"><div class="ui-bar ui-bar-e">Difficult&eacute;</div></div>
        <div class="ui-block-b">
            <div class="ui-bar ui-bar-e">
                <select id="select-difficulty" name="select-difficulty">
                    <option value="easy">Facile</option>
                    <option value="middle">Moyen</option>
                    <option value="difficult">Difficile</option>
                </select>
            </div>

        </div>

        <div class="ui-block-a"><div class="ui-bar ui-bar-e">Cuisson</div></div>
        <div class="ui-block-b">
            <div class="ui-bar ui-bar-e">
                <input type="text" id="demo" name="demo" />
            </div>

        </div>

        <div class="ui-block-a"><div class="ui-bar ui-bar-e">Pr&eacute;paration</div></div>
        <div class="ui-block-b">
            <div class="ui-bar ui-bar-e">
                <input type="text" id="durationPreparation" name="durationPreparation" data-role="datebox" data-options='{"mode": "durationflipbox","overrideDurationOrder":["h","i"],"overrideDurationFormat": "%M"}'/>
            </div>

        </div>
    </div>
    <a id="addIngredientsLink" href="/CheckFridge" data-ajax="false" class="ui-corner-all">Ingr&eacute;dients</a>
    <textarea cols="40" rows="15" name="ingredientListArea" id="ingredientListArea" readonly>
        @if (ViewBag.IngredientList != null)
        {
            @ViewBag.IngredientList
        }
    </textarea>
        <label id="preparationLab" class="ui-corner-all">Pr&eacute;paration</label>
    <textarea cols="40" rows="15" name="textarea-1" id="textarea-1"></textarea>
    <a data-role="button" data-theme="b">Ajouter ma recette</a>
</div>

</div>
</body>
</html>

当我点击名为“demo”的输入时，我没有显示“底部”，而是在左侧打印所有数字：

enter image description here

你有解决方案吗？

谢谢

Answer 1

您不必在输入点击事件处理程序中调用show。如果将mobiscroll绑定到输入，则会在点击/点击时自动调用该节目。

删除$('#demo').click(function () { $('#demo').mobiscroll('show'); });

Mobiscroll时间组件 - 显示不良

1 个答案: