0

我想知道我是否可以在没有按钮感觉的情况下将手风琴的标题也设为按钮？这是手风琴标题的图片和里面的一些数据？我想单击标题中的文本以导航到页面...使用phonegap/cordova v1.9。Visual Studio 2010 express for windows phone/html,CSS,javascript (c#) 任何帮助都将不胜感激:) 无论如何我都对解决方案持开放态度，包括 jquery

在此处输入图像描述

标题是 inboxentry1 POS556445
我在一堆 div 中制作了手风琴，这些 div 堆叠在一起......告诉我是否必须添加其他任何东西来帮助解决问题！
这是手风琴的一些html！

 <div id="AccordionContainer" class="AccordionContainer"></div>
    <div onclick="runAccordion(1)">
      <div class="Accordiontitle" onselectstart="return false;">
        <input type="button" href="ItemPages.html">inbox entry1</input>
        <br/>
        <a>POS556446x</a>      
      </div>
    </div>
    <div id="Accordion1Content" class="AccordionContent" style="background-color:white; color:grey;">
      <form>
        <p>
          <label for="create" >Created by :</label>
          <input type="text" style="margin-left:60px;" size="22" id="create"/>
        </p>
        <p>
          <label for="createdate" >Created Date :</label>
          <input type="text" style="margin-left:43px;" size="22" id="createdate"/>
        </p>
        <p>
          <label for="process" >Process name :</label>
          <input type="text" style="margin-left:36px;" size="22" id="process"/>
        </p>
        <p>
          <label for="transtype">Transaction type :</label>
          <input type="text" style="margin-left:20px;" size="22" id="transtype"/>
        </p>
        <p>
          <label for="lastact">Last action :</label>
          <input type="text" style="margin-left:61px;" size="22" id="lastact"/>
        </p>
        <p>
          <label for="lastuser">Last user :</label>
          <input type="text" style="margin-left:73px;" size="22" id="lastuser"/> 
        </p>
        <p>
          <label for="lastupd">Last update :</label>
          <input type="text" style="margin-left:55px;" size="22" id="lastupd"/> 
        </p>
        <p>
          <label for="duration">Duration :</label>
          <input type="text" style="margin-left:78px;" size="22" id="duration"/> 
        </p>
        <p>
          <label for="saved">Saved :</label>
          <input type="text" style="margin-left:93px;" size="22" id="saved"/>
        </p>
        <p>
          <label for="adhoc">Ad hoc user :</label>
          <input type="text" style="margin-left:53px;" size="22" id="adhoc"/> 
        </p>
      </form>
    </div>

这是我的 .js 文件

    var ContentHeight = 200;
  var TimeToSlide = 250.0;

  var openAccordion = '';

  function runAccordion(index) {
  var nID = "Accordion" + index + "Content";
  if (openAccordion == nID)
  nID = '';

  setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'" + openAccordion + "','" + nID + "')", 33);

  openAccordion = nID;
  }

  function animate(lastTick, timeLeft, closingId, openingId) {
  var curTick = new Date().getTime();
  var elapsedTicks = curTick - lastTick;

  var opening = (openingId == '') ? null : document.getElementById(openingId);
  var closing = (closingId == '') ? null : document.getElementById(closingId);

  if (timeLeft <= elapsedTicks) {
  if (opening != null)
  opening.style.height = ContentHeight + 'px';

  if (closing != null) {
  closing.style.display = 'none';
  closing.style.height = '0px';
  }
  return;
  }

  timeLeft -= elapsedTicks;
  var newClosedHeight = Math.round((timeLeft / TimeToSlide) * ContentHeight);

  if (opening != null) {
  if (opening.style.display != 'block')
  opening.style.display = 'block';
  opening.style.height = (ContentHeight - newClosedHeight) + 'px';
  }

  if (closing != null)
  closing.style.height = newClosedHeight + 'px';

  setTimeout("animate(" + curTick + "," + timeLeft + ",'" + closingId + "','" + openingId + "')", 33);
  }
4

2 回答 2

1

如果您想在单击输入字段时导航到其他页面，这里有一个简单的解决方法。只需将它绑定到这样的 mouseup-event （需要 jQuery 实现）：

更新代码

HTML：

 <input class="followThisRel" type="button" rel="http://yoursite.com/">

JS： 

$(function() {
    $('input.followThisRel').on('click', function() {
        var url = $(this).attr('rel');
        window.location = url;
    });
})
于 2012-10-16T09:42:37.677 回答
1

您可能想在此处进行一些更改。添加了一些类，并且由于不正确而更改了按钮标记。您想删除手风琴的内联事件并将其粘贴在下面的评论中。

<div class="AccordionRun">
  <div class="Accordiontitle" onselectstart="return false;">
    <input class="AccordionLink" type="button" href="ItemPages.html" value="inbox entry1">
    <br/>
    <a>POS556446x</a>      
  </div>
</div>

然后你可以得到它并向它添加一个点击事件......

var goToPage = function(elem) {
    elem.onclick = function() {
        alert('Go to page...');
        window.location = elem.href;
    };
};

var runAccordion = function(elem) {
    elem.onclick = function() {
        alert('Run Accordion...');
        // Your accordion code goes here...
    }; 
};

var buttons = document.getElementsByTagName('input');
for(var i=0; i < buttons.length; i++) {
    if (buttons[i].className == 'AccordionLink') {
       goToPage(buttons[i]);             
    }
}

var divs = document.getElementsByTagName('div');
for(var i=0; i < divs.length; i++) {
    if (divs[i].className == 'AccordionRun') {
       runAccordion(divs[i]);             
    }
}

jsfiddle.net/FKt4K/2

于 2012-10-16T09:53:39.680 回答