用例。我需要一个单页应用程序(SPA),但希望保持“伪”页面功能。注意:通过Ajax调用登录后推送到应用程序的内容为不同业务用户的角色定制...
我有菜单:
<ul class="cust_style components">
<li class="active">
<a class="btn btn-primary" data-toggle="collapse" href="#home" role="button" aria-expanded="false" aria-controls="collapseExample">Home</a>
</li>
<li>
<a class="btn btn-primary collapsed" data-toggle="collapse" href="#about" role="button" aria-expanded="false" aria-controls="collapseExample">About</a>
</li>
<li>
<a class="btn btn-primary collapsed" data-toggle="collapse" href="#stuff" role="button" aria-expanded="false" aria-controls="collapseExample">Stuff</a>
</li>
</ul>
我有html div内容...
<div class="jumbotron collapse show" id="home">
<h1>Home Page Content</h1>
<p> Blah, blah, blah...</p>
</div>
<div class="jumbotron collapse" id="about">
<h1>About...</h1>
<p>One, two, three...</p>
</div>
<div class="jumbotron collapse" id="stuff">
<h1>Stuff...</h1>
<p>Data. Data. Data....</p>
</div>
显然,这些巨型div中的每一个都代表一个用于显示的“页面”。我想根据用户的菜单选择一次显示这些。
不幸的是,引导折叠功能是一个简单的切换。引导折叠向元素添加或删除类标记。单击菜单项以显示链接的内容,单击同一菜单项以关闭内容显示…效果很好,但这不是我想要的…我想要单击一个菜单以切换引导折叠--
我想每次进行任何菜单选择时,我都可以从每个jumbotron元素中删除classshow
,但这会对我要打开的菜单选择的“本机”引导折叠数据切换功能产生不利影响。
Bootstrap折叠工具可以用作简单的菜单控制器吗?
其他想法?
匿名用户
事实证明,引导选项卡导航工具在这里是一个更好的调用。有关选项卡导航的更多信息,请从此处的链接向下滚动到并使用垂直按钮。
代码提取:
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#about" role="tab" aria-controls="v-pills-profile" aria-selected="false">About</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#stuff" role="tab" aria-controls="v-pills-messages" aria-selected="false">Stuff</a>
</div>
和页面内容。。。
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<div class="jumbotron">
<h1>Home Page Content</h1>
<p> Blah, blah, blah...</p>
</div>
</div>
<div class="tab-pane fade" id="about" role="tabpanel" aria-labelledby="v-pills-profile-tab">
<div class="jumbotron">
<h1>About...</h1>
<p>One, two, three...</p>
</div>
</div>
<div class="tab-pane fade" id="stuff" role="tabpanel" aria-labelledby="v-pills-messages-tab">
<div class="jumbotron">
<h1>Stuff...</h1>
<p>Data. Data. Data....</p>
</div>
</div>
</div>
更好的导航控制器工具…不需要额外的javascript。
Github repo: Bootstrap-SPA-侧边栏-菜单
我想使用和,有什么方法或可靠的解决办法可以使Pageable与jpaQuery一起工作吗?
本文向大家介绍DataGridView使用BindingNavigator实现简单分页功能,包括了DataGridView使用BindingNavigator实现简单分页功能的使用技巧和注意事项,需要的朋友参考一下 上篇文章给大家介绍DataGridView使用自定义控件实现简单分页功能,本篇使用BindingNavigator来实现简单分页功能。其实也只是借用了一个BindingNavigato
对于大多数网站(尤其是博客),当文章越来越多的时候,就会有分页显示文章列表的需求。Jekyll 已经自建分页功能,你只需要根据约定放置文件即可。 在 Jekyll 3 中,需要在 gems 中安装 jekyll-paginate 插件,并添加到你的 Gemfile 和 _config.yml 中。在 Jekyll 2 中,分页是标准功能。 分页功能只支持 HTML 文件 Jekyll 的分页功能不
问题内容: 当我学到角度时,有两个问题困扰着我: 当用户刷新页面或点击后退按钮时,如何恢复状态? 如何在属于不同控制器的合并范围之间共享数据? 下面我展示了一个使用客户端会话存储的简单解决方案。在用户刷新页面或点击后退按钮后,它既允许共享公共数据,又可以自动恢复状态。 注意:事实证明,以下解决方案对于回答以下问题至关重要: 如何获得“后退”按钮以与AngularJSui路由器状态机一起使用? 问题
问题内容: 我有一个分类广告网站…我让Solr搜索分类广告,然后返回ID:nrs,然后将其用于放置到数组中。然后,我使用此数组在MySql数据库中找到所有分类,其中ID:s与Solr返回的数组中的ID:s相匹配。 现在,由于此数组可能非常大(十万个记录或更多),因此我需要“分页”结果,以便一次返回100个。然后在MySql中使用这100个ID:来查找分类。 那么,是否可以使用SOLR进行分页? 如
几天来,我一直在为我的单页应用程序寻找安全的身份验证和会话管理机制。从大量关于SPA和身份验证的教程和博客文章来看,将JWTs存储在localStorage或常规cookie中似乎是最常见的方法,但将JWTs用于会话并不是一个好主意,因此它不是这个应用程序的选项。 null null 由于cookie具有标志,JavaScript将无法读取其内容,因此只要通过HTTPS传输,就可以安全地免受攻击。