|
本帖最后由 yaodis 于 2014-4-16 12:39 编辑 8 z3 V6 x I! K3 |
% s3 m( {3 b- K' M* a
在 适合高阶英语学习者的 Vocabulary.com Dictionary 优美发布 这个帖子中可以下载半成品
7 I' h5 i$ j* j8 v
" ]" o5 ^7 Y8 t q4 N3 F目前主要的问题是,论坛里没有明显的关于mdict如何实现javascript的明确说明,或者说关于mdict对javascript支持程度的说明
5 l- g H+ k6 ]' O! w使用谷歌site:pdawiki.com方式搜索论坛,我只发现了这两个帖子 F( n( I# r9 N+ D8 Y0 |
“mdict”的经验交流分享,mdict是一个优秀的便携式数据库
- I6 i" M! m" ]: l, w/ r3 |Mdict 是否支援 javascript *.js 檔?
2 z+ q1 g4 T0 Y* M/ G$ z! H+ }& W, P! z) W6 i- _
第一个帖子中两种方法大概是mdict唯二能用的了,因为当我想把里面的<a href='#'>换成<a href="javascript:void(0)">这种浏览器常用取消页面回到页首的方法却发现mdict里又出现错误,说明mdict连这种基本的javascript都不支持: E0 o; N/ {$ l0 y% Y
+ C# ~' T4 ]5 @/ g6 }! c
昨天还发现vocabulary.com里面实现show和hide好像是javascript的一个高级库jQuery(下面的代码里你会看到有hasClass),所以我更不对能实现原网页效果抱有希望了
# l+ h5 L3 G; E: h8 `. u& J+ x3 w r" Q. m% `# ?1 w
而mdict这能用的唯二方法,我都觉得加不加上没什么意思了,加上了反而还影响页面搜索的功能(必须点开了才能搜到)
' h+ X% [$ V) ?1 K! E5 G4 Y( q
5 H0 @3 v# c# M# x) c% S所以我是不会再去弄他了6 [. m9 E! U/ z
7 M. M2 d; Z, k-----------------------------原贴分割线--------------------------1 T/ V3 P/ L3 `1 t" I$ d3 u
% d" V; G/ w' o/ ]3 }8 O8 G( p3 x E
2 t3 ?- E4 I' G @: u( n最近在制作vocabulary.com离线版,上图中左边是原网页,右边是我抓取的网页,不包含.js,包含部分css,目前显示效果如图
' }9 J1 b: B' N很明显show example不能像原网页那样显示0 I$ a1 U- ], g
1 V4 _7 W+ j, b! C! } l; _
我用chrome浏览器的inspect element查看这里代码是
: ?# u/ Q9 g# E9 F- F5 L<dd class="more">7 w( p- ]; ?8 V0 I+ ]0 r) }2 Z
<a href="javascript:void(0);" class="expander" onclick="toggleList(this)">show 335 examples...</a>
3 ^: s; [$ {- H. t5 }& _</dd>
6 ^$ `% L3 U, W5 v9 n5 s<dd class="less">( b y# u* E: p' s5 S+ \
<a href="javascript:void(0);" class="expander" onclick="toggleList(this)">hide 335 examples...</a>
' d7 @3 l' Y+ R</dd>
0 X* S# {: w) D; N. _; Z<dd class="less">, y. G6 R2 s/ N9 G6 ^. P! M& F1 v3 R
...7 a+ T3 k, V% s- J; I" g8 `
</dd>6 f' A4 ], g1 M0 `& t
由于对应的css文件中有这样一条. l0 b6 ^1 ]# B
dd.less {display:none;}% p. d* Z' ^& R1 s1 Z$ I
这样hide example和下面的单词就不会显示了# p; i/ O* o- [/ u3 x3 c
) ^% P) n( U$ \ [+ X5 \
下面的问题是如何用javascript替换more和less
4 J0 L/ f9 A. Q3 p( V* P$ q! t. P9 \3 c' \6 d( H' R- M. h
又在原网页引用的一个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")}}};
复制代码 我尝试在词条里加入这样的代码& U5 h* x% V' |$ R( I
. W, Y& v, C1 ]% O5 ~6 @+ L
<script type="text/javascript">2 y' T. H+ d3 E7 j2 R _" i$ C3 X" b2 @
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")}}};3 h% c: B( _6 ]. b0 L P
</script>8 p) n) p; H/ v- ^
9 }4 {& M8 k6 |6 V& ?: J0 z z不行,或者src引用js文件,也不行1 v5 T1 X$ f$ v* T. C6 [% z% G
4 d m7 u1 }4 ^; [
有没有人知道该如何实现这段代码 |
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有账号?免费注册
x
|