STEP - semantic ui

by shigetak

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<p class="ui button" id="changeStep1" >Active Step1</p>
<p class="ui button" id="changeStep2" >Completed Step1</p>

<pre>
completed step
active step
step
<!-- 注文する商品の選択
お届け先の入力
注文内容の確認
注文完了 -->
</pre>

<i class="check square outline icon"></i>
<i class="yen sign icon"></i>
<i class="cart plus icon"></i>
<div class="ui mini steps">
  <div id="step1" class="step">
    <i class="cart plus icon"></i>
    <div class="content">
      <div class="title">商品の選択</div>
      <div class="description">Choose your shipping options</div>
    </div>
  </div>
  <div class="step">
    <i class="edit icon"></i>
    <div class="content">
      <div class="title">お届け先の入力
</div>
      <div class="description">Choose your shipping options</div>
    </div>
  </div>
  <div class="active step">
    <i class="check square outline icon"></i>
    <div class="content">
      <div class="title">注文内容の確認</div>
      <div class="description">Enter billing information</div>
    </div>
  </div>
  <div class="disabled step">
    <i class="truck icon"></i>
    <div class="content">
      <div class="title">注文完了</div>
    </div>
  </div>
</div>

<div class="ui mini ordered steps">
  <div class="completed step">
    <div class="content">
      <div class="title">Shipping</div>
      <div class="description">Choose your shipping options</div>
    </div>
  </div>
  <div class="completed step">
    <div class="content">
      <div class="title">Billing</div>
      <div class="description">Enter billing information</div>
    </div>
  </div>
  <div class="active step">
    <div class="content">
      <div class="title">Confirm Order</div>
      <div class="description">Verify order details</div>
    </div>
  </div>
  <div class="step">
    <div class="content">
      <div class="title">Confirm Order</div>
   ...

JavaScript

$("#changeStep1").click(function() {
	/* alert('yes') */
  /* $('#step1').addClass('active') */
  $('#step1').toggleClass('active')

})
$("#changeStep2").click(function() {
  $('#step1').toggleClass('completed')
	$('#result1').empty()
	$('#result1').text('完了しました')

})

$('#result1').empty();
/* $.ajax({
    method: 'GET',
    dataType: 'jsonp',
    crossDomain: true,
    url: 'https://direct.step.rakuten.co.jp/rms/mall/cartAdd/?shopid=321072&itemid=10000051&units=1&device=pc&userid=itempage',
    success: function(result) {
    alltext=result ;//copy
       alltext=JSON.stringify(result);//to string
       $('#result').text(alltext);
//       json = JSON.parse(result);//divide 
       json = $.parseJSON(alltext);
       $('#result1').text(json.dialogTitle + json.resultMessage);
    }
    });
}); */