Hexaの日記

Bootstrap

CSS

Bootstrap を使ってみました． Twitter Bootstrap

こんな感じになりました．

レイアウトを考えるときはいつも class 名や id 名で悩むので， (container や span4 等々で)固定される点は楽できてありがたいですね．

あと，jQuery で modal や Tooltips も簡単に組み込めるし，Example もあるので，視覚的に全体の構成を考えやすいです．

%div{ :class => "container" }
  %div{ :class => "hero-unit "}
    %h1= "PEM to Text"
  %div{ :class => "row" }
    %div{ :class => "span4" }  
    %div{ :class => "span4" }
      %textarea{ :class => "xxlarge", :id => "pem", :name => "pem", :rows => "25" }
      %div{ :id => "modal-from-dom", :class => "modal hide fade", :style => "display: none;" }
        %div{ :class => "modal-header" }
          %a{ :href => "#", :class => "close" } ×
          %h3 Text format
        %div{ :class => "modal-body" }
          %div{ :id => "view" }
      %p{ :class => "xxlarge" }
        %button{ :class => "btn primary", :id => "submit", :'data-controls-modal' => "modal-from-dom", :'data-backdrop' => "static" } text
  %div{ :class => "footer" }
    #version{ :align => "right" }
      %p= h @version

:javascript

  $('#submit').click(function() {
    $.ajax({
      type: 'POST',
      url: '/to_text',
      data: {'pem': $('#pem').attr('value')},
      success: function(data) {
        $("#view > ul").remove();
        var elements = [
          "version",
          "serial",
          "not_before",
          "not_after",
          "issuer",
          "subject",
          "signature_algorithm",
          "extensions",
          "public_key"
        ]
        var ul = $("<ul>");
        ul.attr("style", "list-style:none");
        $.each(elements, function(i, value) {
          var li = $("<li>");
          switch(value) {
          case "not_before":
            li.text(value + ": " + data["validity"][value]);
            ul.append(li);
            break;
          case "not_after":
            li.text(value + ": " + data["validity"][value]);
            ul.append(li);
            break;
          case "extensions":
            li.text(value + ": ");
            var extension = $("<ul>");
            extension.attr("style", "list-style:none");
            $.each(data[value], function(i, v) {
              extension.append($("<li>").text(v));});
            li.append(extension);
            ul.append(li);
            break;
          case "public_key":
            var pre = $("<pre>");
            pre.text(data["public_key"]);
            li.append(pre);
            ul.append(li);
            break;
          default:
            li.text(value + ": " + data[value]);
            ul.append(li);
            break;
          }
        });
        $("#view").append(ul);
      },
      error: function(data, text_status) {
        alert(text_status);
      },
      dataType: 'json'
    })
   });

ツイートする

Permalink | コメント(0) | トラックバック(0) | 23:13