|
本帖最后由 yaodis 于 2014-4-16 12:39 编辑
$ J4 l, @6 e+ O" r# `6 F' l' A
( i V5 w) [6 i5 D( k' K# h+ T在 适合高阶英语学习者的 Vocabulary.com Dictionary 优美发布 这个帖子中可以下载半成品/ Q3 _- z7 I& E8 K
7 J2 D3 e5 X. t& n8 G
目前主要的问题是,论坛里没有明显的关于mdict如何实现javascript的明确说明,或者说关于mdict对javascript支持程度的说明
4 F0 b$ a6 t, b+ a使用谷歌site:pdawiki.com方式搜索论坛,我只发现了这两个帖子
4 i' O: q, ?5 H8 O“mdict”的经验交流分享,mdict是一个优秀的便携式数据库
4 g/ O' |; H1 p" e( yMdict 是否支援 javascript *.js 檔?! {9 P3 U8 o P0 O5 ]$ Y
/ i. v( X, M, Y" @
第一个帖子中两种方法大概是mdict唯二能用的了,因为当我想把里面的<a href='#'>换成<a href="javascript:void(0)">这种浏览器常用取消页面回到页首的方法却发现mdict里又出现错误,说明mdict连这种基本的javascript都不支持8 U9 m/ g" h$ ~1 y
; M2 t1 g3 f' i# W; |: k/ z% \
昨天还发现vocabulary.com里面实现show和hide好像是javascript的一个高级库jQuery(下面的代码里你会看到有hasClass),所以我更不对能实现原网页效果抱有希望了
! K# d6 {- F+ o0 @* C9 E9 c5 ~2 M4 P1 t0 M+ [& A
而mdict这能用的唯二方法,我都觉得加不加上没什么意思了,加上了反而还影响页面搜索的功能(必须点开了才能搜到), F4 z% d1 Z* R1 W0 l; p' H; B
& P# g! i9 B1 C( r- _6 ]所以我是不会再去弄他了2 M0 `; w& B& L* f8 `) G$ B5 a
" P1 \4 b& H* Y% M2 W+ W. i! M
-----------------------------原贴分割线--------------------------$ y I- x- J* n1 N8 V* z# _
' R% d' K+ G7 H( H3 ~
; c; o1 k, g/ K% m最近在制作vocabulary.com离线版,上图中左边是原网页,右边是我抓取的网页,不包含.js,包含部分css,目前显示效果如图
( [! B0 v% X2 ~: _/ L5 m: x8 I3 u很明显show example不能像原网页那样显示* l$ Z: z b4 z) D! l2 r0 S
' T& P1 U$ t2 p% ^5 K
我用chrome浏览器的inspect element查看这里代码是
3 M/ M0 G2 F+ ]. R3 ^- A' U<dd class="more">
a, y, [: I6 d0 o! l: w( R<a href="javascript:void(0);" class="expander" onclick="toggleList(this)">show 335 examples...</a>: ~4 A, r0 i! t6 t
</dd>' A0 O/ m4 T5 u2 P0 J
<dd class="less">8 c/ z& p7 Z+ H+ g p; A
<a href="javascript:void(0);" class="expander" onclick="toggleList(this)">hide 335 examples...</a>
% E9 A, a! M! J9 I3 I9 T& U: [% z</dd>
~9 }2 u A) f; J& z9 V5 J<dd class="less">! [) u- y+ h8 S; [% ^7 i2 U
...
* _& _0 d" d1 O5 P+ j* x) E</dd>" Z1 {! _" N$ |7 c1 H3 Y
由于对应的css文件中有这样一条
( b7 [3 X# R- G+ [3 l2 e- }5 w0 Idd.less {display:none;}! a+ r8 J( U6 O/ K
这样hide example和下面的单词就不会显示了$ a9 w. w4 f( O) G9 g4 e8 N
/ w* @$ r. d8 E) d& H& b1 j1 ]5 v2 @
下面的问题是如何用javascript替换more和less; O4 `+ P3 u$ O% C: k8 t( j
# f* @) G5 R2 h0 M( E$ }# ?
又在原网页引用的一个dictionary-1hbh6zq.js文件中找到了toggleList(this)这个函数:- window.toggleList=function(ele){while(ele&&ele.nodeName!="DL"){ele=ele.parentNode}if(ele){if(Element.hasClass(ele,"expanded")){Element.removeClass(ele,"expanded")}else{Element.addClass(ele,"expanded")}}};
复制代码 我尝试在词条里加入这样的代码
7 f% b2 ^ A1 [0 z5 J1 D& r- y2 e0 B+ l R' J) ]4 e
<script type="text/javascript">
! ~( o; O% U3 Q% o: F4 X& g+ vwindow.toggleList=function(ele){while(ele&&ele.nodeName!="DL"){ele=ele.parentNode}if(ele){if(Element.hasClass(ele,"expanded")){Element.removeClass(ele,"expanded")}else{Element.addClass(ele,"expanded")}}};- Z- u# m* u# V' k
</script>
* b) h4 B4 Y( R5 Y8 t) ~/ d4 W! Q2 ]4 Q, H& L f
不行,或者src引用js文件,也不行( E+ b( L4 |4 C8 j
, ?$ M9 d4 |2 Y6 j' C& Z N5 r2 O有没有人知道该如何实现这段代码 |
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有账号?免费注册
x
|