0

アコーディオンのタイトルもボタン感なしでボタンにできないかな？これはアコーディオンのタイトルとその中のデータの写真ですか? タイトルにあるテキストをクリックしてページに移動したい... phonegap/cordova v1.9を使用しています。Windows phone/html、CSS、javascript (c#) 用の Visual Studio 2010 Express

ここに画像の説明を入力

タイトルは inboxentry1 POS556445 互いに
積み上げられた 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

入力フィールドをクリックして他のページに移動したい場合は、簡単な回避策があります。そのようにマウスアップイベントにバインドするだけです（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 に答える