Question

我有4页这样的形式，并且在这4页内有一些多页和弹出窗口。

我要做的是在标题下面添加标题类型的东西，它将显示当前页面的数字，其中突出显示的内容或箭头指示其当前页面。

我的网站基于JQM，所以我试图弄清楚我能做些什么。

这是与之相关的小提琴。任何人都可以帮我设计这个。

提前致谢

HTML

<div data-role="page" id="page1">
    <div data-role="header">
            <h1>Click</h1>

    </div>
    <!-- /header -->
    <div role="main" class="ui-content">
        <p> <a data-role="button" href="#foo" class="clicko" id="1">Venta</a>
 <a data-role="button" href="#foo" class="clicko" id="2">Aliquilar</a>
 <a data-role="button" href="#foo" class="clicko" id="3">Busca</a>

        </p>
    </div>
</div>
<!-- Start of first page -->
<div data-role="page" id="foo">
    <div data-role="header"> <a class="ui-btn ui-icon-carat-l ui-btn-icon-notext ui-corner-all" data-direction="reverse" href="#page1">Back to page "one"</a>

            <h1 id="pagem"></h1>

    </div>
    <!-- /header -->
    <div role="main nopad " class="ui-content" style="padding-left: 0 !important;padding-right: 0 !important;padding-top: 0 !important; ">
        <div class="tracker ui-btn ui-grid-c center" style="border-top-width: 1px; padding: 0px; margin-bottom: 0px;">
            <div class="ui-block-a"><a class=" center1 ui-shadow ui-btn ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline">Button</a>
                <div class="line" style="margin-left:62%"></div>
            </div>
            <div class="ui-block-b"><a class=" center1 ui-shadow ui-btn ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline">Button</a>
                <div class="line" style="margin-right:62%"></div>
                <div class="line" style="margin-left:62%"></div>
            </div>
            <div class="ui-block-c"><a class="center1 ui-shadow ui-btn ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline">Button</a>
                <div class="line" style="margin-right:62%; top:-21px"></div>
                <div class="line" style="margin-left:62%"></div>
            </div>
            <div class="ui-block-d"><a class="center1 ui-shadow ui-btn ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline">Button</a>
                <div class="line" style="margin-right:62%;top:-21px"></div>
            </div>
        </div>
        <p>I'm Second in the source order so I'm shown as the page.</p>
        <p>View internal page called <a href="#bar">bar</a>

        </p>
    </div>
    <!-- /content -->
    <div data-role="footer">
            <h4>Page Footer</h4>

    </div>
    <!-- /footer -->
</div>

CSS

.line {
    width: 40%;
    bottom: 22px;
    position: relative;
    border-bottom: 1px solid #333333;
}
.center {
    text-align: center !important;
}

Answer 1

@Vikram所以我知道您希望箭头图标替换为页码。您是否尝试过数据图标属性并指定自定义图标？

其他方法是覆盖按钮的CSS属性。将 customIcon 类添加到锚标记，其属性如下所示。

HTML：

<div class="ui-block-b"><a class=" center1 ui-shadow ui-btn ui-corner-all ui-btn-inline customIcon">12</a><div class="line" style="margin-right:62%"></div><div class="line" style="margin-left:62%"></div>
</div>

CSS：

.customIcon{
    border-radius: 1em!important;
    -webkit-border-radius: 1em!important;
    padding: 0;
    width: 1.75em;
    white-space: nowrap!important;
    line-height: 1.8em;

}

现在，您可以在每个 pagebeforeshow 中访问此锚标记，并手动设置页码。希望这有帮助！

如何在JQM中为不同页面的页码编号

1 个答案: