collapse相关知识
-
在vue中使用iview Collapse折叠面板遇到的坑需求：Collapse中嵌套Collapse，点击子面板的时候向后台请求数据内容。问题：因为是循环输出且iview给出的demo中嵌套是记忆打开，所以在点击了第一个父面板中的某个子面板后，再点击另一个父面板的时候，子面板自动打开，且内容为上次打开的子面板内容。解决办法：图片.png图片.png图片.png作者：duadu链接：https://www.jianshu.com/p/c5d6c4260e8f
-
Element 的学习Element 的内置动画 fade 淡入淡出：el-fade-in-linear，el-fade-in zoom 缩放：el-zoom-in-center，el-zoom-in-top，el-zoom-in-bottom collapse 展开折叠 使用 el-collapse-transition 组件实现折叠展开效果 <template> <div> <el-button @click="show3 = !show3">Click Me</el-button> <div style="margin-top: 20px; height: 200px;"> <el-collapse-transition> <div v-show="show3"> <div class="transition-box">el-collapse-transition</div> <div class="t
-
vue2.0实现轻量级日期选择器组件vue2.0实现轻量级日期选择器组件 最值效果如图： //css .dp { margin-top:5px; width: 213px; height: 240px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.17); border: 1px solid #d9d9d9; border-radius: 6px; position: absolute; top: 28px; background: #fff; z-index: 10; font-size: 12px; color: #666; } .dp-table { width: 100%; text-align: center; border-collapse: collapse; } .dp-table th { padding: 6px 0; border: 0; } .d
-
Bootstrap教程(24)--折叠插件1. 概述 折叠的意义是当内容需要是，则显示在界面上，而内容不需要时，就是折叠收藏起来。 Bootstrap对折叠的实现非常简单，我们本篇就来演示一番。 2. 通过a元素控制折叠 先看一段代码： <a type="button" class="btn btn-primary" data-toggle="collapse" href="#section1">显示春晓文字</a> <div id="section1" class="collapse"> 春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。 </div> 解释下： section1是折叠部分，通过设置collapse类使section1部分内容默认折叠不
collapse相关课程
-
玩转Bootstrap（JS插件篇） 你可以把这门课程看成是《玩转Bootstrap》的补充篇，带领大家学习怎么使用JS自由控制Bootstrap中提供的组件（插件）。
讲师：大漠 中级 127941人正在学习
collapse相关教程
- 5. 示例 给 demo 增加右上和左下的圆角<div class="demo"></div>可以这样.demo{ border-radius:0 8px 0 8px; }推荐第一种写法，但是也可以这样.demo{ border-top-right-radius:8px; border-bottom-left-radius:8px;}效果图demo 增加右上和左下的圆角效果图制作一个带有圆角的卡片<div class="card"> <div class="text"> demo1 </div></div>.card{ background: red; width: 100px; height: 200px; line-height: 200px; text-align: center; border-radius: 6px;}.text{ display: inline-block; width: 50px; height: 50px; line-height: 50px; background: #fff; border-radius: 50%;}效果图带有圆角的卡片效果图给一个 table 增加圆角左上和右上是 8px 右下和左下是直角<table> <tr> <td>姓名</td><td>年龄</td> </tr> <tr> <td>demo</td><td>19</td> </tr></table>table{ background: red; border-radius: 8px 8px 0 0; font-size: 18px; color: #fff; border-collapse: collapse; overflow: hidden;}`table` 增加圆角左上和右上是 8px 右下和左下是直角效果图
- 3. 页面结构 <!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <title>ajax example</title> </head> <style> table { border-collapse: collapse; text-align: center; width: 800px; } table td, table th { border: 1px solid #b8cfe9; color: #666; height: 30px; } table tr:nth-child(odd) { background: #fff; } table tr:nth-child(even) { background: rgb(246, 255, 255); } input { outline-style: none; border: 1px solid #ccc; border-radius: 3px; padding: 5px 10px; width: 200px; font-size: 14px; } button { border: 0; background-color: rgb(87, 177, 236); color: #fff; padding: 10px; border-radius: 5px; margin-top: 20px; } </style> <body> <div id="container"> <!--------列表查询模块-------------> <div class="query"> <h3>课程列表</h3> <table id="courseTable"></table> </div> <!--------列表查询模块 结束-------------> <!--------课程录入模块-------------> <div class="create"> <h3>添加课程</h3> <div> <label for="name">课程名称:</label><br /> <input type="text" id="name" name="name" /><br /> <label for="teacher">老师:</label><br /> <input type="text" id="teacher" name="teacher" /><br /> <label for="startTime">开始时间:</label><br /> <input type="date" id="startTime" name="startTime" /><br /> <label for="endTime">结束时间:</label><br /> <input type="date" id="endTime" name="endTime" /><br /> <button id="submitBtn">点击提交</button> </div> </div> <!--------课程录入模块 结束-------------> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> <script src="/__build__/example.js"></script> </body></html>如上所示，我们首先定义好页面的结构和样式。可以清晰看出。页面主要分为两块，上面一块展示的是所有课程的结果，并且是表格呈现的，这里的 table 标签之所以没有嵌套，是因为我们会在后面 JavaScript 部分进行插入。下面一块则是录入课程的模块，分别有 课程名称、老师、开始时间和结束时间 4 个 input 标签。
- 3.1 全局配置 全局配置作用于整个项目，也就是对项目中所有的页面都起作用，在项目根目录下面的 pages.json 文件中，找到globalStyle配置项，在这个配置项中进行项目的全局配置。实例："globalStyle": { "navigationBarTextStyle": "black", //导航栏标题颜色 "navigationBarTitleText": "慕课网", //导航栏标题文字 "navigationBarBackgroundColor": "#F8F8F8", //导航栏背景颜色 "backgroundColor": "#F8F8F8", //下拉窗口背景颜色 "backgroundTextStyle":light, //下拉 loading 的样式 "enablePullDownRefresh":true, //开启下拉刷新 "onReachBottomDistance":60,//页面上拉触发距页面底部距离为60 "usingComponents":{ "collapse-tree-item":"/components/collapse-tree-item" },//引用小程序组件 "pageOrientation": "auto"//支持屏幕旋转},3.1.1 enablePullDownRefresh 下拉刷新想要实现页面下拉刷新的效果，需要先在配置文件中将 enablePullDownRefresh 设置为 true，再在.vue页面文件中配合 onPullDownRefresh 函数进行页面下拉效果的实现。这里很多人会忘记在配置文件中设置 enablePullDownRefresh 配置项，导致下拉效果失灵。实例：//pages.json 文件"globalStyle": {"enablePullDownRefresh":true}//页面.vue文件onPullDownRefresh() { console.log('refresh'); //用stopPullDownRefresh结束下拉 uni.stopPullDownRefresh();}3.1.2 pageOrientation 屏幕旋转设置这个属性可以设置为 auto、portrait、landscape。分别代表启用屏幕旋转、固定为竖屏显示、固定为横屏显示。默认值为 portrait 固定为竖屏显示。这个属性，通常可以使用 js 作为辅助，用 js 读取页面的显示区域尺寸，来进行屏幕方向的监听，每次屏幕旋转时都会调用这个方法。需要注意的是，在模拟器上面不会触发这个方法，需要使用真机调试才能触发。实例：Page({ onResize(res) { res.size.windowWidth // 新的显示区域宽度 res.size.windowHeight // 新的显示区域高度 }})
- 01 Go语言简介 零基础从头开始学习 Go 语言
- 3 数据接口定义及开发 从0基础到笑傲大数据的成长必备秘笈
- 资源路径说明 跨端开发首选框架
collapse相关搜索
-
c 正则表达式
c string
c 编程
c 程序设计
c 程序设计教程
c 多线程编程
c 教程
c 数组
c 委托
c 下载
c 线程
c 语言
caidan
cakephp
call
calloc
calu
camera
caption
case语句