github.com/apremalal/vamps-core@v1.0.1-0.20161221121535-d430b56ec174/server/webapps/app/base/plugins/jcrop/demos/styling.html (about)

     1  <!DOCTYPE html>
     2  <html lang="en">
     3  <head>
     4    <title>CSS Styling Example | Jcrop Demo</title>
     5    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
     6  
     7  <script src="../js/jquery.min.js"></script>
     8  <script src="../js/jquery.Jcrop.js"></script>
     9  <script src="../js/jquery.color.js"></script>
    10  <script type="text/javascript">
    11    jQuery(function($){
    12  
    13      var api;
    14  
    15      $('#target').Jcrop({
    16        // start off with jcrop-light class
    17        bgOpacity: 0.5,
    18        bgColor: 'white',
    19        addClass: 'jcrop-light'
    20      },function(){
    21        api = this;
    22        api.setSelect([130,65,130+350,65+285]);
    23        api.setOptions({ bgFade: true });
    24        api.ui.selection.addClass('jcrop-selection');
    25      });
    26  
    27      $('#buttonbar').on('click','button',function(e){
    28        var $t = $(this), $g = $t.closest('.btn-group');
    29        $g.find('button.active').removeClass('active');
    30        $t.addClass('active');
    31        $g.find('[data-setclass]').each(function(){
    32          var $th = $(this), c = $th.data('setclass'),
    33            a = $th.hasClass('active');
    34          if (a) {
    35            api.ui.holder.addClass(c);
    36            switch(c){
    37  
    38              case 'jcrop-light':
    39                api.setOptions({ bgColor: 'white', bgOpacity: 0.5 });
    40                break;
    41  
    42              case 'jcrop-dark':
    43                api.setOptions({ bgColor: 'black', bgOpacity: 0.4 });
    44                break;
    45  
    46              case 'jcrop-normal':
    47                api.setOptions({
    48                  bgColor: $.Jcrop.defaults.bgColor,
    49                  bgOpacity: $.Jcrop.defaults.bgOpacity
    50                });
    51                break;
    52            }
    53          }
    54          else api.ui.holder.removeClass(c);
    55        });
    56      });
    57  
    58    });
    59  
    60  
    61  
    62  </script>
    63  <link rel="stylesheet" href="demo_files/main.css" type="text/css" />
    64  <link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
    65  <link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
    66  
    67  </head>
    68  <body>
    69  
    70  <div class="container">
    71  <div class="row">
    72  <div class="span12">
    73  <div class="jc-demo-box">
    74  
    75  <div class="page-header">
    76  <ul class="breadcrumb first">
    77    <li><a href="../index.html">Jcrop</a> <span class="divider">/</span></li>
    78    <li><a href="../index.html">Demos</a> <span class="divider">/</span></li>
    79    <li class="active">CSS Styling Example</li>
    80  </ul>
    81  <h1>CSS Styling Example</h1>
    82  </div>
    83  
    84    <img src="demo_files/sago.jpg" id="target" alt="[Jcrop Example]" />
    85  
    86    <div style="margin-top:1em; width:500px;">
    87    <fieldset>
    88    <legend>Manipulate classes</legend>
    89      <div class="btn-group" id="buttonbar">
    90        <button id="radio1" data-setclass="jcrop-light" class="btn active" />jcrop-light</button>
    91        <button id="radio2" data-setclass="jcrop-dark" class="btn" />jcrop-dark</button>
    92        <button id="radio3" data-setclass="jcrop-normal" class="btn" />normal</button>
    93      </div>
    94    </fieldset>
    95    </div>
    96  
    97    <p>
    98      <b>Example styling tricks.</b> Click the buttons above to change the appearance of Jcrop in real-time.
    99    </p>
   100  
   101  
   102  <div class="tapmodo-footer">
   103    <a href="http://tapmodo.com" class="tapmodo-logo segment">tapmodo.com</a>
   104    <div class="segment"><b>&copy; 2008-2013 Tapmodo Interactive LLC</b><br />
   105      Jcrop is free software released under <a href="../MIT-LICENSE.txt">MIT License</a>
   106    </div>
   107  </div>
   108  
   109  <div class="clearfix"></div>
   110  
   111  </div>
   112  </div>
   113  </div>
   114  </div>
   115  
   116  </body>
   117  </html>
   118