jQuery UI -- Repeater & 手风琴(Accordion)效果
很简单的范例,完全不用写程序
直接套用就能做!
但是,基础不稳的人,连「复制贴上」直接套用,
对您而言,都困难重重,不是吗?

jQuery UI 与 RWD的入门介绍,网站上都讲过了。
简单的jQuery UI特效与入门 from jQuery UI官方网站
您可以参阅 松岗出版 的 「ASP.NET学习教材」这本书有专文为您解说。
基础入门,上面文章已经说明过。
当您选用了手风琴特效 (Accordion),只要花时间观察 HTML码里面的规则
就能看出端倪!
如下图,规则很简单。 标题+内文
- 标题 ---- 使用 <h3>
- 内文 ---- 使用 <div>

您知道上图的「规则」以后,放入 Repeater控件
让他重复为您产生(类似帮您跑循环)不就好了吗?

之前也介绍过下面范例,上课时都会讲:
[习题]ASP.NET 搭配 美工人员设计好的HTML网页 #1 -- ADO.NET + HTML
[习题]ASP.NET 搭配 美工人员设计好的HTML网页 #2 -- Repeater
忍不住要抱怨一下:
写程序,说要写到天下无敌.......这个我不会
但熟练以后,加上一点巧思 或是搭配一些 "现成的"套件、效果
真的不难!
前提是:您要 懂 而且 熟练,不然无法做出变化。
您还在上网四处「捞」范例? 乞讨、捡拾人家的程序片段吗?
还是定下心,给自己一点时间,好好「练一下」、「熟悉」一下呢?
[给读者的话]软土深掘 #1
一万小时法则 -- 请放下你的速成心态!
我不知道PO这篇文章几次了,但每次都觉得这篇文章说得好!
Bill的经典好文 -- 读书与上课
http://www.dotblogs.com.tw/billchung/archive/2010/11/28/19767.aspx
- 或许是因特网太发达且信息已经多到爆炸,
- 也许有人觉得要对一门计算机技术精通 只要上网查查数据、看看别人的部落格就有机会达成这样的目标。
- 我不否认应该有少数这样具有特别天份的人,这类的人多半对于知识的组织与吸收是有独到之处,
- 不过这也意味着 大部份的人 走这条路通常都会进到死胡同,
- 很快地将会遭遇许多技术瓶颈的挑战。....详见全文
您(初学者)就继续在网络的「免费」空间流浪吧
继续在网络上「兜」程序、「凑」片段吧!
您的人生、您的青春、您的生命,.........您自己去浪费吧!
[感想]「指挥艇,组合!」....别把写程序当成无敌铁金刚,用「兜」的,不会有好下场~
李智桦老师:兜兜哲学
相关的小故事:
一位佛友电话抱怨道:为什么我努力了还是得不到?念经行善了但命运却不变?
师:我给你寄五百块钱来好不好?
众:师父,你的钱我不敢要呢!
师:我是要你帮我办一件事。
众:师父,你说办什么,我绝对帮你办好!
师:帮我买一辆汽车。
众:(大吃一惊)师父,五百块怎么能买到汽车呢?!
师:你知道五百块买不到汽车!
可是世上有太多的人都在绞尽脑汁,想付出一点,就得到很多。
为什么不一次学好、学清楚?
然后让自己有生产力呢?
(你学了一百招,但上了战场,一招都使不出来?)
(客户的要求,没有一个你能自己做到?还是上网逐一发问、抄抄改改?)
为什么人家可以千变万化?
我只能到处拼拼凑凑?却还天天加班、做不完?最后还是迷迷糊糊?
让我来告诉您,ASP.NET该怎么学?心法在哪里?
如何一以贯之?
如何启动「轻轻松松的自我学习之道」?
让我告诉你,
一个没有大型补习班招牌、没有关键词广告的书籍与课程
在时局这么乱、经济与工作越来越萧条的 Bumbler 无能年代,
为何所有补习班的 ASP.NET课程都开不成、招不到学生
我的课程,班班额满,欲罢不能.............纵贯这三四年 全台湾 的 ASP.NET入门教学
1. [自我评量表] ASP.NET 我该上什么课?入门、或是进阶?.....
2. [课程大纲]ASP.NET入门实战 + ADO.NET进阶班(七周),教学内容
jQuery UI -- Repeater & 手风琴(Accordion)效果的更多相关文章
- jQuery实际案例③——手风琴的效果
如图,用最简单的方式实现手风琴的效果,核心,就是通过改变自身即鼠标移上去的那张图的width,与其他的width就可,但是需要用animate,先改变自己的width,再改变其他的.
- jQuery动态提示消息框效果
效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/2.htm 原文:http://keleyi.com/a/bjac/hxv86dyi.htm <!DOC ...
- Jquery qTip2实现多种提示效果,支持ajax,以及多种样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- MVC自定义编辑视图,DateTime类型属性显示jQuery ui的datapicker
实现的效果为:在编辑视图中,对DateTime类型的属性,显示jQuery UI的datepicker.效果如下: Student.cs public class Student { ...
- Jquery UI accordion手风琴菜单
最近学习jQuery,总结了一些心得. 1.引用 <script type="text/javascript" src=jquery.js></script> ...
- jquery ui中 accordion的问题及我的解决方法
原文:jquery ui中 accordion的问题及我的解决方法 jquery有一套所谓的ui组件,很不错的.如果有兴趣的朋友,可以参考http://jqueryui.com/ 但其中的accord ...
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.5.Accordion控件
accordion是另一个UI控件,能允许你将一组content加入相互分隔的.能够被浏览者的交互打开或关闭的panels中.因此,它大多数的content在初始化的时候是隐藏的,很像tabs控件.每 ...
- 创建一个jQuery UI的垂直进度条效果
日期:2013-9-24 来源:GBin1.com 在线演示 缺省的jQuery UI只有水平的进度条效果,没有垂直的进度条效果,仅仅重新定义JQuery UI的CSS不能解决这个问题. 这里我们扩 ...
- jquery.ui.accordion的修改(支持展开多个)
原文:jquery.ui.accordion的修改(支持展开多个) 背景:原jquery.ui.accordion插件,最多只能展开一个,不能展开多个,后来在网上找到了一个基于它的一个修改版(http ...
随机推荐
- Pseudo Random Nubmer Sampling
Pseudo Random Nubmer Sampling https://en.wikipedia.org/wiki/Inverse\_transform\_sampling given a dis ...
- Linux 之问题集锦(一)
1. 打开目录时,怎么只显示一个窗口 计算机 -- 编辑 -- 首选项 -- 行为 -- 总是总浏览器窗口中打开 2. linux中添加PATH时出现 Found a swap file by the ...
- Docker环境下的前后端分离项目部署与运维(七)Redis高速缓存
Redis高速缓存 利用内存保存数据,读写速度远超硬盘:可以减少I/O操作,降低I/O压力. 发红包.抢红包的数据可以存在高速缓存中,加快处理速度,不需要经过数据库 淘宝首页一些优惠活动商品等热数据可 ...
- ue4 动态增删查改 actor,bp
ue4.17 增 特殊说明:创建bp时,如果bp上随手绑一个cube,那么生成到场景的actor只执行构造不执行beginPlay,原因未知 ATPlayerPawn是c++类 直接动态创建actor ...
- DOTween Sequence 使用图解
http://blog.csdn.net/jiejieup/article/details/41521577 最近在使用DOTween制作一些动画过渡的内容,发现非常好用,使用Sequence类可以方 ...
- Unity 自动寻路Navmesh之跳跃,攀爬,斜坡
在之前的几篇Blog总,我们已经系统学习了自动寻路插件Navmesh的相关概念和细节.然而,如果要做一个场景精美的手游,需要用到各种复杂的场景地形,而不仅仅是平地上的自动寻路.今天我们将通过一个完整的 ...
- AGC001 C - Shorten Diameter【枚举】
一开始没看到要保证最后是树--所以一定要从叶子开始删 枚举重心,如果k是偶数,那么按当前重心提起来deep大于k/2的全都要切掉,这样枚举重心然后取min即可 奇数的话就是枚举直径中间的边,然后从两边 ...
- 洛谷P5173 传球(暴力)
传送门 真·暴力艹过去 不难发现这个转移其实就是一个循环卷积的形式,设有多项式\(A=x+x^{n-1}\),那么\(f_m=f_0\times A^m\) 直接暴力计算并卡常就行了 //minamo ...
- pycharm安装教程,汉化教程,以及正版激活码---
密钥在下面 安装过程 PyCharm2019本地下载: http://www.100c1.com/upload/default/20190420/1c08a3209029093a8b34df941f1 ...
- java编写jmeter压测脚本
目前项目中接触的比较多的是接口测试,功能测个差不多后会对部分接口进行压测,采用的是java编写脚本,导入jmeter进行压测. 使用到的jmeter的相关包 写一个测试类,继承AbstractJava ...