Air asia FAQ 部分的这个效果叫什么？

sheeta · 发表于 20-4-2009 12:25 PM

http://www.airasia.com/site/en/faqSearchMain.jsp?nav=6-2

有些网页比如FAQ，有很问题。很多字。
所以问题旁边，会出现一个“+”符号。

要读那个部分就按“＋”，答案就会列出来。
不要的时候又按“－”，问题又会不见了。

想请大家提供一些相关的coding.
最好是简单的HTML或者 script

另外，如果想做到好像
http://www.w3schools.com/JS/tryit.asp?filename=tryjs_anchor1

这个的效果，但是不要button的，而是图片点击进去后，就有另外更大的图片和一些字体。
这个方法叫什么呢？

谢谢！

[ 本帖最后由 sheeta 于 20-4-2009 01:13 PM 编辑 ]

geekman · 发表于 20-4-2009 01:29 PM

应该是template+tag吧？我也不是很清楚它的“专业名称”，只是我之前用php做forum时有用过一个叫easy template system的，可以让我define 一些 tag，然后当我有赋予这些tag一些数值时，这些tag的内容就会显示出来，反之就不会显示。至于要做到这种run time的效果可可能还要配合javascript之类的吧。

vampcheah · 发表于 20-4-2009 02:04 PM

tree menu/ navigation
好象是。。。。

r9jason · 发表于 20-4-2009 03:32 PM

AIR-ASIA那个只是SHOW & HIDE罢了，

function show(id) {

if (document.getElementById) { // DOM3 = IE5, NS6
if (document.getElementById(id).style.display == "none"){
document.getElementById(id).style.display = 'block';
filter(("img"+id),'imgin');
} else {
filter(("img"+id),'imgout');
document.getElementById(id).style.display = 'none';
}
} else {
if (document.layers) {
if (document.id.display == "none"){
document.id.display = 'block';
filter(("img"+id),'imgin');
} else {
filter(("img"+id),'imgout');
document.id.display = 'none';
}
} else {
if (document.all.id.style.visibility == "none"){
document.all.id.style.display = 'block';
} else {
filter(("img"+id),'imgout');
document.all.id.style.display = 'none';
}
}
}
}
你找GOOGLE = document.getElementById(id).style.display 就会有一堆example给你了。。

你的第二个问题我看不懂，你可以解释清楚一点吗？

lawty · 发表于 20-4-2009 04:26 PM

第一 jquery就可以了。。。
去jquery的documentation 看 effect / events的example.

第二去看jquery thickbox。。。。

晨光 · 发表于 20-4-2009 05:03 PM

属于 AJAX 的其中一种运用。

mylover · 发表于 20-4-2009 06:33 PM

其实那个是一个java script但是要specific 名我想没有吧

shingrons · 发表于 20-4-2009 11:56 PM

他们叫toggle~~~

sheeta · 发表于 21-4-2009 08:55 AM

@_@感谢各位大侠。。
但我需要一些时间消化，有问题会再请教你么的。。

r9jasaon..其实我的意思是
http://www.w3schools.com/JS/tryit.asp?filename=tryjs_anchor1
这个网页给你的example是button的形式，然后click会有另外一个window出现。我想改成，button变图片(小的），然后click了button后，图片就在另外一个window变大的意思。。

keroro小军曹 · 发表于 21-4-2009 11:12 AM

原帖由 sheeta 于 21-4-2009 08:55 AM 发表
@_@感谢各位大侠。。
但我需要一些时间消化，有问题会再请教你么的。。

r9jasaon..其实我的意思是
http://www.w3schools.com/JS/tryit.asp?filename=tryjs_anchor1
这个网页给你的example是button的形式，然后 ...

你说的那个是 lightbox

sheeta · 发表于 23-4-2009 11:53 AM

各位，我想请教一下。
我在这个网页找到我要的东西
http://jdstiles.com/java/expandcollapsesections.html

出来的结果看到是有 COLLAPSE 和 EXPAND 这个2句话。
按这2个字就可以把内容hide and 不hide了。

我想问下，如果我想把显示出来的 COLLAPSE 和 EXPAND改成 “+" 和 "-"
请问应该修改一下的那些code呢？

<script type="text/javascript">
var collapseDivs, collapseLinks;
function createDocumentStructure (tagName) {
  if (document.getElementsByTagName) {
var elements = document.getElementsByTagName(tagName);
collapseDivs = new Array(elements.length);
collapseLinks = new Array(elements.length);
for (var i = 0; i < elements.length; i++) {
   var element = elements;
   var siblingContainer;
   if (document.createElement &&
      (siblingContainer = document.createElement('div')) &&
      siblingContainer.style)
   {
      var nextSibling = element.nextSibling;
      element.parentNode.insertBefore(siblingContainer, nextSibling);
      var nextElement = elements[i + 1];
      while (nextSibling != nextElement && nextSibling != null) {
      var toMove = nextSibling;
      nextSibling = nextSibling.nextSibling;
      siblingContainer.appendChild(toMove);
      }
      siblingContainer.style.display = 'none';

      collapseDivs = siblingContainer;

      createCollapseLink(element, siblingContainer, i);
   }
   else {
      // no dynamic creation of elements possible
      return;
   }
}
createCollapseExpandAll(elements[0]);
  }
}
function createCollapseLink (element, siblingContainer, index) {
  var span;
  if (document.createElement && (span = document.createElement('span'))) {
span.appendChild(document.createTextNode(String.fromCharCode(160)));
var link = document.createElement('a');
link.collapseDiv = siblingContainer;
link.href = '#';
link.appendChild(document.createTextNode('expand'));
link.onclick = collapseExpandLink;
collapseLinks[index] = link;
span.appendChild(link);
element.appendChild(span);
  }
}
function collapseExpandLink (evt) {
  if (this.collapseDiv.style.display == '') {
this.parentNode.parentNode.nextSibling.style.display = 'none';
this.firstChild.nodeValue = 'expand';
  }
  else {
this.parentNode.parentNode.nextSibling.style.display = '';
this.firstChild.nodeValue = 'collapse';
  }
  if (evt && evt.preventDefault) {
evt.preventDefault();
  }
  return false;
}
function createCollapseExpandAll (firstElement) {
  var div;
  if (document.createElement && (div = document.createElement('div'))) {
var link = document.createElement('a');
link.href = '#';
link.appendChild(document.createTextNode('expand all'));
link.onclick = expandAll;
div.appendChild(link);
div.appendChild(document.createTextNode(' '));
link = document.createElement('a');
link.href = '#';
link.appendChild(document.createTextNode('collapse all'));
link.onclick = collapseAll;
div.appendChild(link);
firstElement.parentNode.insertBefore(div, firstElement);
  }
}
function expandAll (evt) {
  for (var i = 0; i < collapseDivs.length; i++) {
collapseDivs.style.display = '';
collapseLinks.firstChild.nodeValue = 'collapse';
  }

  if (evt && evt.preventDefault) {
evt.preventDefault();
  }
  return false;
}
function collapseAll (evt) {
  for (var i = 0; i < collapseDivs.length; i++) {
collapseDivs.style.display = 'none';
collapseLinks.firstChild.nodeValue = 'expand';
  }

  if (evt && evt.preventDefault) {
evt.preventDefault();
  }
  return false;
}
</script>
<script type="text/javascript">
window.onload = function (evt) {
  createDocumentStructure('h1');
}
</script>

谢谢！

keroro小军曹 · 发表于 23-4-2009 01:19 PM

原帖由 sheeta 于 23-4-2009 11:53 AM 发表
各位，我想请教一下。
我在这个网页找到我要的东西
http://jdstiles.com/java/expandcollapsesections.html

出来的结果看到是有 COLLAPSE 和 EXPAND 这个2句话。
按这2个字就可以把内容hide and 不hide了。

...

Legend · 发表于 23-4-2009 06:11 PM

air asia这个是用ajax的. 好长的code..需要做到那么复杂咩??

sheeta · 发表于 24-4-2009 09:49 AM

原帖由 keroro小军曹 于 23-4-2009 01:19 PM 发表

function expandAll (evt) {
  for (var i = 0; i < collapseDivs.length; i++) {
collapseDivs.style.display = '';
collapseLinks.firstChild.nodeValue = 'collapse';
  }

  if (evt && evt ...

谢谢，我试了。好像不可以。
弄到一次后，最后还是变回expand 和collapse..

sheeta · 发表于 24-4-2009 09:56 AM

原帖由 keroro小军曹 于 23-4-2009 01:19 PM 发表

function expandAll (evt) {
  for (var i = 0; i < collapseDivs.length; i++) {
collapseDivs.style.display = '';
collapseLinks.firstChild.nodeValue = 'collapse';
  }

  if (evt && evt ...

好像是按了expand ALL and collapse ALL的那个部分。
下面的那些小分支才会跟着变成＋和－。

但是如果我在已改变的＋和 - 那里，按一下的话，
+ - 又变成expand 和 collapse了。

如果我不要expandALL 和 collpase ALL,这个部分。
那么该怎么做呢？

keroro小军曹 · 发表于 24-4-2009 10:23 AM

原帖由 sheeta 于 24-4-2009 09:49 AM 发表
谢谢，我试了。好像不可以。
弄到一次后，最后还是变回expand 和collapse..

keroro小军曹 · 发表于 24-4-2009 10:27 AM

原帖由 sheeta 于 24-4-2009 09:56 AM 发表

好像是按了expand ALL and collapse ALL的那个部分。
下面的那些小分支才会跟着变成＋和－。

但是如果我在已改变的＋和 - 那里，按一下的话，
+ - 又变成expand 和 collapse了。

如果我不要expandA ...

不要expandAll或collapseAll的function
只要删除以下的code就好了

function createCollapseExpandAll (firstElement) {
  var div;
  if (document.createElement && (div = document.createElement('div'))) {
var link = document.createElement('a');
link.href = '#';
link.appendChild(document.createTextNode('expand all'));
link.onclick = expandAll;
div.appendChild(link);
div.appendChild(document.createTextNode(' '));
link = document.createElement('a');
link.href = '#';
link.appendChild(document.createTextNode('collapse all'));
link.onclick = collapseAll;
div.appendChild(link);
firstElement.parentNode.insertBefore(div, firstElement);
  }
}

sheeta · 发表于 24-4-2009 11:39 AM

我刚才也是研究到了。
但是还是非常感谢你～

keroro小军曹 · 发表于 24-4-2009 11:48 AM

原帖由 sheeta 于 24-4-2009 11:39 AM 发表

我刚才也是研究到了。
但是还是非常感谢你～

很好啊。。继续努力的成为好的programmer吧　

sheeta · 发表于 25-4-2009 01:00 PM

原帖由 keroro小军曹 于 24-4-2009 11:48 AM 发表

很好啊。。继续努力的成为好的programmer吧　

我没有那么大志啊，只是玩玩下的研究罢了。

但我现在有个问题要问了。

我发现弄了那个“+”后有点难看。。

如果想找个可爱的“＋”的图片(jpg or gif格式）

那么那个"+" 要怎样做成连接去图片的格式呢？

link.appendChild(document.createTextNode('+'));

		自动登录	找回密码
密码			注册

Air asia FAQ 部分的这个效果叫什么？

回复 11# sheeta 的帖子

所属分类: 电脑手机

浏览过的版块