0

Document Manager のプロジェクトをほぼ完成させましたが、トグル ボタンを追加するように依頼されました。私はすでに JavaScript と CSS コードをリンクしましたが、html コードで立ち往生しています。私は置くことを知っています

  <input type = 'checkbox' .... />

誰かが残りを埋めるのを助けることができますか? 私は本当に立ち往生しています。

どうもありがとうございました

4

3 に答える 3

1 
<input type="checkbox" id="clickme" name="Notifications"> Notifications<br />    
<div id="notifications">Notifications</div>

$('#clickme').click(function() {
  $('#notifications').toggle('slow', function() {
    // some code after completion
  });
});

css の変更やその他のイベントなど、他の効果が必要な場合は、疑問符をコードに置き換えることができます。これは不要なので、代わりにこれを使用して削除できます。

$('#clickme').click(function(){
    $('#notifications').toggle('slow');
});

上記のこのコードでは、チェックボックスがあり、その横に通知というテキストが表示されます。誰かがチェックボックスをクリックすると .click 関数が実行され、これが発生すると .toggle 関数が実行されます。.toggle 関数が行うことは、#notifications 要素 (通知を含む div) の表示プロパティを切り替えることです。チェックボックスをクリックすると、通知の非表示と表示が切り替わります。

コードに関しては、「//完了後のいくつかのコード」これは、実行したいコードをさらに配置できる場所です。そのセクションが必要ない可能性が高いため、それが何であるかわからない場合そのため、私が置いた 2 番目のサンプル コードを使用できます。次のように、init 関数内のページの JavaScript タグ内にこのコードを追加する必要があります。

$(document).ready(function(){
     //the code I showed above
});
于 2012-10-02T13:21:08.953 に答える
0

このプロジェクトの教育範囲から外れることなく、以下の基本から始めることをお勧めします。必要な正確なボタンは iOS フレームワーク クラスUISwitchに含まれていますが、ここで頭を悩ませることはやめましょう :)

フロントエンドの html 構造を作成することから始め、タグに css と javascript のリンクを含め、javascript フォルダーを作成し、その中に .js ファイルを作成します。

ボタン クリック イベントがトリガーされる任意のタイプのフォームでボタン/チェック ボックスが使用されるのはよくあることであり、どのボタンが選択されているかを判断する必要があります。

<head>
<link href="yourstylesheet.css" rel="stylesheet" type="text/css">
<link href="~/javascript/mobilejavascript.js" type="text/javascript" />
</head>

<input type="radio" name="radio1" class="radio_form" value="male"/>
<input type="radio" name="radio2" class="radio_form" value="female"/>

on submit of form...

var isMale = false;

$('.radio_form').each(function(){
     //perform some check or store information
     if($(this).val('male') == true)
     {
         isMale = true;
     }
     //and so on...
});

スタイルシート (.css) で:

.radio_form {
  //style properties will go here, such as radius, border, width, height, etc..
}

これがあなたの基準である場合、これは正しい方向に始めるのに役立つはずです

于 2012-10-02T13:36:07.170 に答える
0

明確にしてくれてありがとう。次のようなトグル ボタンを作成します。

http://www.google.co.uk/imgres?num=10&hl=en&biw=1366&bih=643&tbm=isch&tbnid=CfXL9cv8l0CfvM:&imgrefurl=http://mitchjinfo.deviantart.com/art/iPhone-Toggle-Button-173878367&docid= KCfqyS-NlBl4eM&imgurl=http://fc03.deviantart.net/fs71/f/2010/215/2/0/iPhone_Toggle_Button_by_mitchjinfo.png&w=400&h=300&ei=ffJqUMnTOcP80QXosYCwDA&zoom=1&iact=rc&dur=1&sig=117831312973390827386&page=1&tbnh=136&tbnw=224&start= 0&ndsp=23&ved=1t:429,r:0,s:0,i:71&tx=115&ty=55

次のようなコードを使用できます。

<div id="toggleImage">
    <img id="toggleOn" class="toggle" src="on.jpg" />
    <img id="toggleOff" class="toggle" src="off.jpg" />
</div>

$(document).ready(function(){
    $('.toggle').click(function(){
        $(this).hide();
        $(this).sibbling('img').show();
        /* the code for whatever you are toggling goes here */
    });
});

トグルするもののコードには、通知コンテンツの表示または非表示、またはページ上でトグルしたいものを含めることができます。この on.jpg はトグル「オン」イメージであり、off.jpg はトグル「オフ」イメージであり、ちょうど iphone のボタンのようです。

于 2012-10-02T14:06:35.480 に答える