[Blog]DropDownPanel

[Blog]DropDownPanel


 

前言

之前在和朋友聊到一些资讯人不可不读的经典好书时,
就在想怎么把这些书推荐给大家。

为了这发一篇文,好像文章看完就算了,文章置顶又太小题大作了,
学一些有出书的老师摆在Blog上,好像又怪怪的,毕竟我不是卖书的。

加上又不想占用到太大的版面,才不会妨碍大家看文章的心情,
最好可以做的像可以折起来的panel一样,点一下就展开,再点一下就缩起来。

Solution

用ajax control toolkit不难…就如同之前自己练习过的一篇一样:[AjaxControlToolkit] CollapsiblePanelExtender- 可折起来的panel

可是点部落是怎么设计的,我也不知道…毕竟不是自己写一支程序挂上来。
用jQuery,似乎可行…但语法会不会看不懂,恩,可能看的懂,也可能有其他问题。

最后我是决定先找DHTML的作法,HTML+CSS+Javascript,想办法达到目的在说。

DHTML,当然就先找我BLOG上推荐的DHTML Sample Code的网站,
我就找到了这一篇文章:DD Drop Down Panel

很好,简单明了又好改,这就是我要的,
顺便当作自己练习改javascript、套css的机会。

查了一下 Iris Kang 8,左右column套的CSS,自己定了个符合CSS的div出来,再把该文章的CSS和JavaScript挂上去。

把自己要推荐的书的图片和网址KEY到自订HTML栏里面,搞定。

如图所示,把该code放在该放的位置里。

 

各位额外要自己改的区块为下方这段code,div的名字和class名字请不要修改。


91推荐好书






















  • Structure and Interpretation of Computer Programs,






最后把我改好的文件放上来,给对web比较不熟的朋友当个参考。

Sample CSS & JavaScript:dropdowndiv.rar

野人献曝了…希望各位前辈海涵


或许您会对下列培训课程感兴趣:

  1. 2019/7/27(六)~2019/7/28(日):演化式设计:测试驱动开发与持续重构 第六梯次(中国台北)
  2. 2019/8/16(五)~2019/8/18(日):【C#进阶设计-从重构学会高易用性与高弹性API设计】第二梯次(中国台北)
  3. 2019/9/21(六)~2019/9/22(日):Clean Coder:DI 与 AOP 进阶实战 第二梯次(中国台北)
  4. 2019/10/19(六):【针对遗留代码加入单元测试的艺术】第七梯次(中国台北)
  5. 2019/10/20(日):【极速开发】第八梯次(中国台北)

想收到第一手公开培训课程资讯,或想询问企业内训、顾问、教练、咨询服务的,请洽 Facebook 粉丝专页:91敏捷开发之路。