「styleバインディングの記述例」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

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>
  9. <script type="text/javascript">
  10.   $(document).ready(function () {
  11.     ko.applyBindings();
  12.   });
  13. </script>
  15. </head>
  16. <body>
  17. <h1>styleバインディングの記述例</h1>
  19. <h2>border関連</h2>
  20. <ol>
  21. <li style="padding-top:5px;"><div data-bind="style: {border: '1px solid red'}">border</div></li>
  22. <li style="padding-top:5px;"><div data-bind="style: {borderWidth: '4px', borderStyle: 'double', borderColor: '#00ffff'}">border-width、border-style、border-color</div></li>
  23. <li style="padding-top:5px;"><div data-bind="style: {borderBottom: '1px dashed #ff00ff'}">border-bottom</div></li>
  24. <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>
  25. </ol>
  27. <h2>margin関連</h2>
  28. <ol>
  29. <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>
  30. <li style="padding:5px;margin-top:2px;background:#ffddff;"><div style="background:#fff;" data-bind="style: {margin: '16px 20px 8px'}">margin - px</div></li>
  31. <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>
  32. </ol>
  34. <h2>padding関連</h2>
  35. <ol>
  36. <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>
  37. <li style="padding:5px;margin-top:2px;background:#ddffff;"><div style="background:#fff;" data-bind="style: {padding: '16px 20px 8px'}">padding - px</div></li>
  38. <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>
  39. </ol>
  41. <h2>background関連</h2>
  42. <ol>
  43. <li style="padding-top:5px;"><div data-bind="style: {backgroundColor:'#ddffff'}">background-color</div></li>
  44. <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'}">１）background-image、background-position、background-repeat</div></li>
  45. <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'}">２）background-image、background-position、background-repeat</div></li>
  46. </ol>
  48. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  49. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  50. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  51. </div>
  53. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  54. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  55. </div>
  57. </body>
  58. </html>