2015-01-21 3 views
0

와 양식을 작성 그래서 내가 http://i.gyazo.com/cadc9c6726d2ba16f8072f0bae73c966.png 를 만들 필요가 무엇이며,이 내가 지금 난 아직해야 할 기능까지 만들어 무엇이며 어떻게 알 수 없습니다 :2 개 탭 (FORM 및 미리보기)

1) 미리보기 탭에서 ADD CAMPAING 탭에 채워진 모든 정보는 라벨 태그에 표시해야하지만 버튼 제출을 클릭하기 전에 저장 및 표시하는 방법을 알고 있습니다.

2) ADD Campaing Tab이 켜져있을 때와 ADD Campaing Tab이 켜져있을 때 및/스위치를 클릭하여 검토 할 때 "Create New CAMPAIGN"헤드 라인을 넣어야합니다. UST ... 제출하면 검토 세부 사항은

3)/캠페인 .. 단서가 그것에게 도움을 줄 수있는 모든

감사를하지 않는다하는 방법을 자바 스크립트로 입력 체크가 있어야 클릭 추가 될

$(document).ready(function(){ 
 
    $("#linkOne").click(function(e){ 
 
     e.preventDefault(); 
 
     $("#preview").removeClass("active"); 
 
     $("#add").addClass("active"); 
 
    }); 
 
    $("#linkTwo").click(function(e){ 
 
     e.preventDefault(); 
 
     $("#add").removeClass("active"); 
 
     $("#preview").addClass("active"); 
 
    }); 
 
}); 
 
.tab-pane{ 
 
    display: none; 
 
} 
 

 
.active 
 
{ 
 
    display: block !important; 
 
} 
 

 
<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>jQuery UI Tabs - Collapse content</title> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
    
 
<div class="bs-example"> 
 
<ul class="nav nav-tabs" id="myTab"> 
 
    <li><a id="linkOne" href="#add">ADD CAMPAIGN</a></li> 
 
    <li><a id="linkTwo" href="#preview">PREVIEW</a></li> 
 

 
</ul> 
 
<div class="tab-content"> 
 
    <div id="add" class="tab-pane active"> 
 

 
     <form method="post" action="javascript.php"> 
 
        <table> 
 
       <tr> 
 
       <th> 
 
        <label for="campaignname">Campaign name</label> 
 
       </th> 
 
       <td> 
 
        <input type = "text" name="campaignname" id="campaignname" > 
 
       </td> 
 
       
 
       </tr> 
 
       <tr> 
 
       <th> 
 
        <label for="dailybudget">Daily budget</label> 
 
       </th> 
 
       <td> 
 
        <input type = "text" name="dailybudget" id="dailybudget" placeholder="Min $10/day"> 
 
       </td> 
 
       
 
       </tr> 
 

 
       <tr> 
 
       <th> 
 
        <label for="campaigntype">Campaign type</label> 
 
       </th> 
 
       <td>     
 
        <select name="campaigntype" id="campaigntype" > 
 
       
 
        <option value="" disabled selected>Dialog click to message</option> 
 
        <option value="a"> a </option> 
 
        <option value="b"> b </option> 
 
        <option value="c"> c </option> 
 
        <option value="d"> d </option> 
 
        </select> 
 
       </td> 
 
       
 
       </tr> 
 

 
       <tr> 
 
       <th> 
 
        <label for="startdate">Start Date</label> 
 
       </th> 
 
       <td> 
 
        <input type = "text" name="startdate" id="startdate" placeholder="YYYY-MM-DD H:I"> 
 
       </td> 
 
       
 
       </tr> 
 

 
       <tr> 
 
       <th> 
 
        <label for="enddate">End Date</label> 
 
       </th> 
 
       <td> 
 
        <input type = "text" name="enddate" id="enddate" placeholder="YYYY-MM-DD H:I" > 
 
       </td> 
 
       
 
       </tr> 
 

 
       <tr> 
 
       <th> 
 
        <label for="catagory">Catagory</label> 
 
       </th> 
 
       <td>     
 
        <select name="catagory" id="catagory"> 
 
        <option value="" disabled selected>Select catagory...</option> 
 
        <option value="a"> a </option> 
 
        <option value="b"> b </option> 
 
        <option value="c"> c </option> 
 
        <option value="d"> d </option> 
 
        </select> 
 
       </td> 
 
       
 
       </tr> 
 

 
<tr> 
 
       <th> 
 
        <label for="platformtype">Platform type</label> 
 
       </th> 
 
       <td>     
 
        <select name="platformtype" id="platformtype"> 
 
        <option value="" disabled selected>Select platform...</option> 
 
        <option value="a"> a </option> 
 
        <option value="b"> b </option> 
 
        <option value="c"> c </option> 
 
        <option value="d"> d </option> 
 
        </select> 
 
       </td> 
 
       
 
       </tr> 
 

 
      </table> 
 
      <input type="submit" value="Send"> 
 
     </form>  
 
     
 
     
 
    </div> 
 
    <div id="preview" class="tab-pane"> 
 
     
 

 

 
     <form method="post" action="javascript.php"> 
 
          <table> 
 
         <tr> 
 
         <th> 
 
          <label for="campaignname">Campaign name</label> 
 
         </th> 
 
         
 
         
 
         </tr> 
 
         <tr> 
 
         <th> 
 
          <label for="dailybudget">Daily budget</label> 
 
         </th> 
 
         
 
         
 
         </tr> 
 

 
         <tr> 
 
         <th> 
 
          <label for="campaigntype">Campaign type</label> 
 
         </th> 
 
         
 
         
 
         </tr> 
 

 
         <tr> 
 
         <th> 
 
          <label for="startdate">Start Date</label> 
 
         </th> 
 
         
 
         
 
         </tr> 
 

 
         <tr> 
 
         <th> 
 
          <label for="enddate">End Date</label> 
 
         </th> 
 
         
 
         
 
         </tr> 
 

 
         <tr> 
 
         <th> 
 
          <label for="catagory">Catagory</label> 
 
         </th> 
 
         
 
         
 
         </tr> 
 

 
     <tr> 
 
         <th> 
 
          <label for="platformtype">Platform type</label> 
 
         </th> 
 
         
 
         
 
         </tr> 
 

 
        </table> 
 
        <input type="submit" value="Send"> 
 
       </form>  
 

 
    </div> 
 

 
    </div> 
 
</div> 
 

 

 

 
</body> 
 
</html>

답변

0

1) 다음은 첫 번째 질문에 대한 해결책입니다. 미리보기 탭을 클릭 할 때 호출되는 updateFields() 함수를 추가하고 해당 함수가 다양한 미리보기 입력 상자를 채 웁니다.

이렇게하면 나머지를 알아낼 수 있습니다.

$(document).ready(function() { 
 
    $("#linkOne").click(function(e) { 
 
    e.preventDefault(); 
 
    $("#preview").removeClass("active"); 
 
    $("#add").addClass("active"); 
 
    }); 
 
    $("#linkTwo").click(function(e) { 
 
    e.preventDefault(); 
 
    $("#add").removeClass("active"); 
 
    $("#preview").addClass("active"); 
 
    }); 
 
}); 
 

 
function updateFields() { 
 
    $("#campaignNameLabel").text(" : " + $("#campaignname").val()); 
 
    $("#dailyBudgetLabel").text(" : " + $("#dailybudget").val()); 
 
    $("#campaignTypeLabel").text(" : " + $("#campaigntype").val()); 
 
    $("#startDateLabel").text(" : " + $("#startdate").val()); 
 
    $("#endDateLabel").text(" : " + $("#enddate").val()); 
 
    $("#categoryLabel").text(" : " + $("#catagory").val()); 
 
    $("#platformTypeLabel").text(" : " + $("#platformtype").val()); 
 
}
.tab-pane { 
 
    display: none; 
 
} 
 
.active { 
 
    display: block !important; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>jQuery UI Tabs - Collapse content</title> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css"> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <div class="bs-example"> 
 
    <ul class="nav nav-tabs" id="myTab"> 
 
     <li><a id="linkOne" href="#add">ADD CAMPAIGN</a> 
 
     </li> 
 
     <li><a id="linkTwo" href="#preview" onclick="updateFields()">PREVIEW</a> 
 
     </li> 
 

 
    </ul> 
 
    <div class="tab-content"> 
 
     <div id="add" class="tab-pane active"> 
 

 
     <form method="post" action="javascript.php"> 
 
      <table> 
 
      <tr> 
 
       <th> 
 
       <label for="campaignname">Campaign name</label> 
 
       </th> 
 
       <td> 
 
       <input type="text" name="campaignname" id="campaignname"> 
 
       </td> 
 

 
      </tr> 
 
      <tr> 
 
       <th> 
 
       <label for="dailybudget">Daily budget</label> 
 
       </th> 
 
       <td> 
 
       <input type="text" name="dailybudget" id="dailybudget" placeholder="Min $10/day"> 
 
       </td> 
 

 
      </tr> 
 

 
      <tr> 
 
       <th> 
 
       <label for="campaigntype">Campaign type</label> 
 
       </th> 
 
       <td> 
 
       <select name="campaigntype" id="campaigntype"> 
 

 
        <option value="" disabled selected>Dialog click to message</option> 
 
        <option value="a">a</option> 
 
        <option value="b">b</option> 
 
        <option value="c">c</option> 
 
        <option value="d">d</option> 
 
       </select> 
 
       </td> 
 

 
      </tr> 
 

 
      <tr> 
 
       <th> 
 
       <label for="startdate">Start Date</label> 
 
       </th> 
 
       <td> 
 
       <input type="text" name="startdate" id="startdate" placeholder="YYYY-MM-DD H:I"> 
 
       </td> 
 

 
      </tr> 
 

 
      <tr> 
 
       <th> 
 
       <label for="enddate">End Date</label> 
 
       </th> 
 
       <td> 
 
       <input type="text" name="enddate" id="enddate" placeholder="YYYY-MM-DD H:I"> 
 
       </td> 
 

 
      </tr> 
 

 
      <tr> 
 
       <th> 
 
       <label for="catagory">Catagory</label> 
 
       </th> 
 
       <td> 
 
       <select name="catagory" id="catagory"> 
 
        <option value="" disabled selected>Select catagory...</option> 
 
        <option value="a">a</option> 
 
        <option value="b">b</option> 
 
        <option value="c">c</option> 
 
        <option value="d">d</option> 
 
       </select> 
 
       </td> 
 

 
      </tr> 
 

 
      <tr> 
 
       <th> 
 
       <label for="platformtype">Platform type</label> 
 
       </th> 
 
       <td> 
 
       <select name="platformtype" id="platformtype"> 
 
        <option value="" disabled selected>Select platform...</option> 
 
        <option value="a">a</option> 
 
        <option value="b">b</option> 
 
        <option value="c">c</option> 
 
        <option value="d">d</option> 
 
       </select> 
 
       </td> 
 

 
      </tr> 
 

 
      </table> 
 
      <input type="submit" value="Send"> 
 
     </form> 
 

 

 
     </div> 
 
     <div id="preview" class="tab-pane"> 
 

 

 

 
     <form method="post" action="javascript.php"> 
 
      <table> 
 
      <tr> 
 
       <th> 
 
       <label for="campaignname">Campaign name</label> 
 
       </th> 
 
       <td> 
 
       <label id="campaignNameLabel"></label> 
 
       </td> 
 

 
      </tr> 
 
      <tr> 
 
       <th> 
 
       <label for="dailybudget">Daily budget</label> 
 
       </th> 
 
       <td> 
 
       <label id="dailyBudgetLabel"></label> 
 
       </td> 
 

 

 
      </tr> 
 

 
      <tr> 
 
       <th> 
 
       <label for="campaigntype">Campaign type</label> 
 
       </th> 
 
       <td> 
 
       <label id="campaignTypeLabel"></label> 
 
       </td> 
 

 
      </tr> 
 

 
      <tr> 
 
       <th> 
 
       <label for="startdate">Start Date</label> 
 
       </th> 
 
       <td> 
 
       <label id="startDateLabel"></label> 
 
       </td> 
 

 

 
      </tr> 
 

 
      <tr> 
 
       <th> 
 
       <label for="enddate">End Date</label> 
 
       </th> 
 
       <td> 
 
       <label id="endDateLabel"></label> 
 
       </td> 
 

 

 
      </tr> 
 

 
      <tr> 
 
       <th> 
 
       <label for="catagory">Category</label> 
 
       </th> 
 
       <td> 
 
       <label id="categoryLabel"></label> 
 
       </td> 
 

 

 
      </tr> 
 

 
      <tr> 
 
       <th> 
 
       <label for="platformtype">Platform type</label> 
 
       </th> 
 
       <td> 
 
       <label id="platformTypeLabel"></label> 
 
       </td> 
 

 

 
      </tr> 
 

 
      </table> 
 
      <input type="submit" value="Send"> 
 
     </form> 
 

 
     </div> 
 

 
    </div> 
 
    </div> 
 

 

 

 
</body> 
 

 
</html>