Yii2选项卡的简单使用

本文实例为大家分享了Yii2选项卡使用的具体代码，供大家参考，具体内容如下

<!--选项卡开始-->
<?php
echo \yii\bootstrap\Tabs::widget([
'id' => 'tabs',
'renderTabContent' => false, //如果是每个选项卡里要显示的是自定义的DIV或者Render其他页面文件,就设为false.
'linkOptions' => ['data-toggle' => "tab"],
'items' => [
    [
'label' => Yii::t('app', '帐号设置'),
'content' => '',
'headerOptions' => ["id" => 'li_account'], //可设可不设
'url' => '#tab_account',
'active' => true,
    ],
    [
'label' => Yii::t('app', '修改密码'),
'content' => '',
'headerOptions' => ["id" => 'li_password'],
'url' => '#tab_password',
'active' => false,
    ],
    [
'label' => Yii::t('app', '绑定邮箱'),
'content' => '',
'headerOptions' => ["id" => 'li_email'],
'url' => '#tab_email',
'active' => false,
    ]
  ]
]) ?>

<div class="tab-content">
  <!--修改个人信息-->
　　<div class="tab-pane active"id="tab_account"> <!--ID要对应上面的第1个 item 的URL-->
　　　　 内容....　　
　　</div>
  <!--修改密码-->
　　<div class="tab-pane"id="tab_password"> <!--ID要对应上面的第2个 item 的URL-->
　　　　 内容....　　
　　</div>
  <!--绑定邮箱-->
　　<div class="tab-pane"id="tab_email"> <!--ID要对应上面的第3个 item 的URL-->
　　　　 内容....　　
　　</div>
</div>

<!--选项卡结束-->

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • yii2实现 "上一篇,下一篇" 功能的代码实例

    最近做了简答的文章详情页面,需要在页面底部加入上一篇,下一篇 按钮,分析了下,最基本需要有文章的标题和id(作为参数). 开始想的是当前的id加减1,但考虑到如果部分id丢失就不对了,于是分别查询比当前id大和小的记录并且限定为一条,于是有了以下代码. 代码如下,不对的地方请指教. 控制器中 //查询上-篇文章 $prev_article = 你的模型::find() ->andFilterWhere(['<', 'id', $id]) ->andFilterWhere([其他条件) -

  • yii2使用gridView实现下拉列表筛选数据

    yii2使用gridView实现下拉列表筛选数据

    本文实例为大家分享了yii2 gridView下拉列表筛选数据的具体代码,供大家参考,具体内容如下 view: 'columns' => [ ['class' => 'yii\grid\SerialColumn'], 'id', [ 'attribute' => 'category_id', 'label'=>'类型', 'value'=> function($model){ return $model->getCategoryName(); //值 }, 'filte

  • yii2实现分页，带搜索的分页功能示例

    一.模型配置 事例会用到三个models.文章类别表和文章表用gii生成下即可,最后一个是搜索验证模型.其中,只讲下一个联表和搜索验证.其他不用操作. 1.文章表关联 <?php //...other code //关联 public function getCate(){ return $this->hasOne(ArticleCate::className(),['id' => 'cid']); } ?> 2.搜索模型 common/models/search/创建Articl

  • Yii2选项卡的简单使用

    本文实例为大家分享了Yii2选项卡使用的具体代码,供大家参考,具体内容如下 <!--选项卡开始--> <?php echo \yii\bootstrap\Tabs::widget([ 'id' => 'tabs', 'renderTabContent' => false, //如果是每个选项卡里要显示的是自定义的DIV或者Render其他页面文件,就设为false. 'linkOptions' => ['data-toggle' => "tab"

  • jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例

    jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例

    目录结构: noContextMenu.js 文件内容如下: $(function(){ //屏蔽右键菜单 $(document).bind("contextmenu", function(e){ return false; }); }); 效果图: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE H

  • Yii2框架数据库简单的增删改查语法小结

    User::find()->all(); //返回所有用户数据: User::findOne($id); //返回 主键 id=1 的一条数据: User::find()->where(['name' => 'ttt'])->one(); //返回 ['name' => 'ttt'] 的一条数据: User::find()->where(['name' => 'ttt'])->all(); //返回 ['name' => 'ttt'] 的所有数据: U

  • Yii2中DropDownList简单用法示例

    本文实例讲述了Yii2中DropDownList简单用法.分享给大家供大家参考,具体如下: 这里以实际应用为例讲解Yii2 DropDownList用法. 有一张分类表,无限极分类那种,表结构如下,pid就是父分类ID 这里我们要实现: 新建分类的时候,父分类可以从所有分类中任选一个或者不选 编辑分类时,父分类不能选择当前编辑的分类...如果选自己,父分类就是自己了,必然出错! 实现代码如下,我就贴上form的全部代码吧 <?php use common\models\Category; use

  • 微信小程序 选项卡的简单实例

    微信小程序 选项卡的简单实例

    微信小程序 选项卡的简单实例 看下效果 代码: home.wxml <!--pages/home/home.wxml--> <view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">热门</view&g

  • jQuery实例—选项卡的简单实现(js源码和jQuery)

    jQuery实例—选项卡的简单实现(js源码和jQuery)

    分别利用javascript的源码和jQuery来实现一个简单的选项卡,对比各自的步骤. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

  • Android TabLayout(选项卡布局)简单用法实例分析

    Android TabLayout(选项卡布局)简单用法实例分析

    本文实例讲述了Android TabLayout(选项卡布局)简单用法.分享给大家供大家参考,具体如下: 我们在应用viewpager的时候,经常会使用TabPageIndicator来与其配合.达到很漂亮的效果.但是TabPageIndicator是第三方的,而且比较老了,当然了现在很多大神都已经开始自己写TabPageIndicator来满足自己的需求,在2015年的google大会上,google发布了新的Android Support Design库,里面包含了几个新的控件,其中就有一个

  • jQuery之选项卡的简单实现

    jQuery实现选项卡功能.首先将界面搭建好. 有导航头tab_menu,还有内容tab_box. 要实现的效果就是,点击后,将相应的内容显示出来,其他内容隐藏掉. 同时为了展现选中状态,为选中的项添加背景,以示区别. 这一次,我自己写了代码,先看html部分: 复制代码 代码如下: <div class="tab">    <div class="tab_menu">        <ul>            <li

  • 微信小程序实现选项卡的简单实例

    微信小程序实现选项卡的简单实例

    本文实例为大家分享了微信小程序实现选项卡的具体代码,供大家参考,具体内容如下 效果图 实现的功能:点击上面选项卡,下面商品内容实现切换,滑动下面的商品页面,上面的选项也随页面进行切换. text.wxml: <!-- 分类 --> <view class='listMiddle swiper-tab'>   <view class='middle {{currentTab==0? "action" : ""}}' data-curren

  • 结构/表现/行为完全分离的选项卡(jquery版和原生JS版)

    结构/表现/行为完全分离的选项卡(jquery版和原生JS版)

    关于思路,和常规选项卡思路一样.点击选项菜单,突出显示,并显示对应的选项.本文实例中主要是通过判断点击菜单在菜单列表中的索引位置来显示或隐藏选项区.原生js还有很多种实现方法(蓝色理想中搜索),为了与jQ版思路保持一致,本文实例用的是循环判断. 详见注释. 另有几点说明: 1. 通过本文DEMO演示,可以很明显的看到原生JS的window.onload=function(){-}与jQuery的$(document).ready(function(){-});的区别,这也是我为什么不用样式定义初

随机推荐