styleバインディングの記述例

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>styleバインディングの記述例</title>
  6. <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
  7. <script type="text/javascript" src="knockout-2.1.0beta.js"></script>
  8. <script type="text/javascript">
  9.   $(document).ready(function () {
  10.     ko.applyBindings();
  11.   });
  12. </script>
  13. </head>
  14. <body>
  15. <h1>styleバインディングの記述例</h1>
  16. <h2>border関連</h2>
  17. <ol>
  18. <li style="padding-top:5px;"><div data-bind="style: {border: '1px solid red'}">border</div></li>
  19. <li style="padding-top:5px;"><div data-bind="style: {borderWidth: '4px', borderStyle: 'double', borderColor: '#00ffff'}">border-width、border-style、border-color</div></li>
  20. <li style="padding-top:5px;"><div data-bind="style: {borderBottom: '1px dashed #ff00ff'}">border-bottom</div></li>
  21. <li style="padding-top:5px;"><div data-bind="style: {borderBottomWidth: '1px', borderBottomStyle: 'dotted', borderBottomColor: '#333'}">border-bottom-style、border-bottom-width、border-bottom-color</div></li>
  22. </ol>
  23. <h2>margin関連</h2>
  24. <ol>
  25. <li style="padding:5px;margin-top:2px;background:#ffddff;"><div style="background:#fff;" data-bind="style: {margin: '1.5em 8em 2em 5em'}">margin - em</div></li>
  26. <li style="padding:5px;margin-top:2px;background:#ffddff;"><div style="background:#fff;" data-bind="style: {margin: '16px 20px 8px'}">margin - px</div></li>
  27. <li style="padding:5px;margin-top:2px;background:#ffddff;"><div style="background:#fff;" data-bind="style: {marginBottom: '1.5em', marginLeft: '4em', marginRight: '3em', marginTop: '2em'}">margin-bottom、margin-left、margin-right、margin-top</div></li>
  28. </ol>
  29. <h2>padding関連</h2>
  30. <ol>
  31. <li style="padding:5px;margin-top:2px;background:#ddffff;"><div style="background:#fff;" data-bind="style: {padding: '1.5em 8em 2em 5em'}">padding - em</div></li>
  32. <li style="padding:5px;margin-top:2px;background:#ddffff;"><div style="background:#fff;" data-bind="style: {padding: '16px 20px 8px'}">padding - px</div></li>
  33. <li style="padding:5px;margin-top:2px;background:#ddffff;"><div style="background:#fff;" data-bind="style: {paddingBottom: '1.5em', paddingLeft: '4em', paddingRight: '3em', paddingTop: '2em'}">padding-bottom、padding-left、padding-right、padding-top</div></li>
  34. </ol>
  35. <h2>background関連</h2>
  36. <ol>
  37. <li style="padding-top:5px;"><div data-bind="style: {backgroundColor:'#ddffff'}">background-color</div></li>
  38. <li style="padding-top:5px;"><div style="height:150px;background-color:#ffddff;" data-bind="style: {backgroundImage: 'url(http://tips.recatnap.info/wp-content/uploads/view_list_of_data_knockout_js.jpg)', backgroundPosition: 'bottom right', backgroundRepeat: 'no-repeat'}">1)background-image、background-position、background-repeat</div></li>
  39. <li style="padding-top:5px;"><div style="height:150px;background-color:#ffffdd;" data-bind="style: {backgroundImage: 'url(http://tips.recatnap.info/wp-content/uploads/view_list_of_data_knockout_js.jpg)', backgroundPosition: '8px 50px', backgroundRepeat: 'no-repeat'}">2)background-image、background-position、background-repeat</div></li>
  40. </ol>
  41. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  42. <a href="http://tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  43. <a href="http://tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ(wiki)</a>
  44. </div>
  45. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  46. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  47. </div>
  48. </body>
  49. </html>