Question

我无法弄清楚为什么这个jquery移动面板不会以与应用程序中使用的jquery移动主题相同的外观和感觉进行渲染。

该面板与我的jquery移动页面的其余部分加载在同一页面上，因此jquery移动css文件和jquery js文件都被引用并在页面的其他部分工作。

我的布局中缺少什么？

感谢

 <div data-role="page" id="map_page">
        <div data-role="panel" id="transitLayersPage" data-position="right" data-display="overlay">
            <div data-role="header">
                <h1>Routes</h1>
            </div>        
            <div data-role="controlgroup">
                <div id="checkboxes">
                    <input type="checkbox" id="transitRoutesLayerKML0" onclick="toggleLayer(0)" />
                    <label>Routes 1</label>
                    <input type="checkbox" id="transitRoutesLayerKML1" onclick="toggleLayer(1)" />
                    <label>Routes 2</label>
                    <input type="checkbox" id="transitRoutesLayerKML0" onclick="toggleLayer(2)" />
                    <label>Routes 3</label>
                    <input type="checkbox" id="transitRoutesLayerKML1" onclick="toggleLayer(3)" />
                    <label>Routes 4</label>
                    <input type="checkbox" id="transitRoutesLayerKML0" onclick="toggleLayer(4)" />
                    <label>Routes 5</label>
                    <input type="checkbox" id="transitRoutesLayerKML1" onclick="toggleLayer(5)" />
                    <label>Routes 6a</label>
                    <input type="checkbox" id="transitRoutesLayerKML0" onclick="toggleLayer(6)" />
                    <label>Routes 6b</label>
                </div>
                <a href="#my-header" data-role="button" data-rel="close">Close panel</a>
            </div>
            </div>

Answer 1

您忘记将for属性添加到label。此外，您不应对id使用重复的checkbox，每个checkbox必须具有唯一的id。

<input type="checkbox" id="foo">
<label for="foo">bar</label>

<强> Demo

jqueryMobile面板主题不起作用

1 个答案: