demos/tizen-winsets/tips/two-line-text/two-line-text.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4         <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
   5         <script src="../../tizen-web-ui-fw/latest/js/jquery.min.js"></script>
   6         <script src="../../configure.js"></script>
   7         <script src="../../tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
   8         <script src="../../tizen-web-ui-fw/latest/js/tizen-web-ui-fw.min.js"
   9                         data-framework-theme="tizen-white"
  10                         data-framework-viewport-width="device-width">
  11         </script>
  12         <script src="../../main.js"></script>
  13         <title>Tizen UI - Two line text sample</title>
  14         <!-- for compatibility test -->
  15         <meta name="apple-mobile-web-app-capable" content="yes" />
  16         <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  17         <link rel="apple-touch-icon" href="../../icon-tizen.png" />
  18 </head>
  19 <body>
  20 <div data-role="page" data-add-back-btn="true" id="twolinesample">
  21         <div data-role="header" data-position="fixed">
  22                 <h1>Two line text sample</h1>
  23         </div><!-- /header -->
  24
  25         <div data-role="content">
  26                 <p> short button or long text button</p>
  27                 <p> do not need to control width. because button control text width in case content area<p>
  28                 <div data-role="button" data-inline="true">Text Button</div><br>
  29                 <div data-role="button" data-inline="true">Long Text Button Test</div>
  30                 <br>
  31                 <p> but some case, for example width fixed area or narrow width<br>
  32                 browser change text to ellipsis </p>
  33                         <fieldset data-role="controlgroup" data-type="horizontal">
  34                                 <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment861" value="on" checked="checked" />
  35                                 <label for="segment861">List</label>
  36                                 <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment862" value="off" />
  37                                 <label for="segment862">Short button</label>
  38                                 <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment863" value="off" />
  39                                 <label id="textposition" for="segment863">This button is long<br>please type 2line</label>
  40                         </fieldset><br>
  41                 <p> to make text in button, 2 line
  42                 <p> Simple making step is ...<br>
  43                 <div>
  44                         <p style="margin-right:0.5em; padding:1em; font-size:0.7em; background-color:whitesmoke; color:black; border-width:3px; border-style:inset">
  45                         1. first insert &lt;br&gt; tag between text.<br><br>
  46                         2. then set fontsize to see text in small area.<br>
  47                                 &nbsp;&nbsp;var $elTxt = $( "#textposition" );<br>
  48                           &nbsp;&nbsp;$elTxt.find( ".ui-btn-text" ).css("font-size", "12px");<br><br>
  49                         3. if element attribute or inner attributes has padding-top/bottom,
  50                          control this value because this value hide some text top/bottom.<br>
  51                           &nbsp;&nbsp;$elTxt.find("span").css("padding-top", "2px");<br><br>
  52                         4. last control height between line text using line-height.<br>
  53                                 &nbsp;&nbsp;$elTxt.find("span").css("line-height", "10px");<br>
  54                         </p>
  55                 </div><br>
  56         </div>
  57         <div data-role="footer">
  58         </div>
  59         <script src="two-line-text.js"></script>
  60 </div>
  61 </body>
  62 </html>