1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245
  
     | 
    
      <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en_US" lang="en_US">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- qcheckbox.cpp -->
  <title>Qt 4.8: QCheckBox Class Reference</title>
  <link rel="stylesheet" type="text/css" href="style/offline.css" />
</head>
<body>
<div class="header" id="qtdocheader">
  <div class="content"> 
    <a href="index.html" class="qtref"><span>Qt Reference Documentation</span></a>
  </div>
  <div class="breadcrumb toolblock">
    <ul>
      <li class="first"><a href="index.html">Home</a></li>
      <!--  Breadcrumbs go here -->
<li><a href="modules.html">Modules</a></li>
<li><a href="qtgui.html">QtGui</a></li>
<li>QCheckBox</li>
    </ul>
  </div>
</div>
<div class="content mainContent">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#properties">Properties</a></li>
<li class="level1"><a href="#public-functions">Public Functions</a></li>
<li class="level1"><a href="#signals">Signals</a></li>
<li class="level1"><a href="#protected-functions">Protected Functions</a></li>
<li class="level1"><a href="#details">Detailed Description</a></li>
</ul>
</div>
<h1 class="title">QCheckBox Class Reference</h1>
<!-- $$$QCheckBox-brief -->
<p>The QCheckBox widget provides a checkbox with a text label. <a href="#details">More...</a></p>
<!-- @@@QCheckBox -->
<pre class="cpp"> <span class="preprocessor">#include <QCheckBox></span></pre><p><b>Inherits: </b><a href="qabstractbutton.html">QAbstractButton</a>.</p>
<ul>
<li><a href="qcheckbox-members.html">List of all members, including inherited members</a></li>
<li><a href="qcheckbox-qt3.html">Qt 3 support members</a></li>
</ul>
<a name="properties"></a>
<h2>Properties</h2>
<ul>
<li class="fn"><b><a href="qcheckbox.html#tristate-prop">tristate</a></b> : bool</li>
</ul>
<ul>
<li class="fn">11 properties inherited from <a href="qabstractbutton.html#properties">QAbstractButton</a></li>
<li class="fn">58 properties inherited from <a href="qwidget.html#properties">QWidget</a></li>
<li class="fn">1 property inherited from <a href="qobject.html#properties">QObject</a></li>
</ul>
<a name="public-functions"></a>
<h2>Public Functions</h2>
<table class="alignedsummary">
<tr><td class="memItemLeft rightAlign topAlign"> </td><td class="memItemRight bottomAlign"><b><a href="qcheckbox.html#QCheckBox">QCheckBox</a></b> ( QWidget * <i>parent</i> = 0 )</td></tr>
<tr><td class="memItemLeft rightAlign topAlign"> </td><td class="memItemRight bottomAlign"><b><a href="qcheckbox.html#QCheckBox-2">QCheckBox</a></b> ( const QString & <i>text</i>, QWidget * <i>parent</i> = 0 )</td></tr>
<tr><td class="memItemLeft rightAlign topAlign"> Qt::CheckState </td><td class="memItemRight bottomAlign"><b><a href="qcheckbox.html#checkState">checkState</a></b> () const</td></tr>
<tr><td class="memItemLeft rightAlign topAlign"> bool </td><td class="memItemRight bottomAlign"><b><a href="qcheckbox.html#tristate-prop">isTristate</a></b> () const</td></tr>
<tr><td class="memItemLeft rightAlign topAlign"> void </td><td class="memItemRight bottomAlign"><b><a href="qcheckbox.html#setCheckState">setCheckState</a></b> ( Qt::CheckState <i>state</i> )</td></tr>
<tr><td class="memItemLeft rightAlign topAlign"> void </td><td class="memItemRight bottomAlign"><b><a href="qcheckbox.html#tristate-prop">setTristate</a></b> ( bool <i>y</i> = true )</td></tr>
</table>
<a name="reimplemented-public-functions"></a>
<h2>Reimplemented Public Functions</h2>
<table class="alignedsummary">
<tr><td class="memItemLeft rightAlign topAlign"> virtual QSize </td><td class="memItemRight bottomAlign"><b><a href="qcheckbox.html#minimumSizeHint">minimumSizeHint</a></b> () const</td></tr>
<tr><td class="memItemLeft rightAlign topAlign"> virtual QSize </td><td class="memItemRight bottomAlign"><b><a href="qcheckbox.html#sizeHint">sizeHint</a></b> () const</td></tr>
</table>
<ul>
<li class="fn">21 public functions inherited from <a href="qabstractbutton.html#public-functions">QAbstractButton</a></li>
<li class="fn">221 public functions inherited from <a href="qwidget.html#public-functions">QWidget</a></li>
<li class="fn">29 public functions inherited from <a href="qobject.html#public-functions">QObject</a></li>
<li class="fn">13 public functions inherited from <a href="qpaintdevice.html#public-functions">QPaintDevice</a></li>
</ul>
<a name="signals"></a>
<h2>Signals</h2>
<table class="alignedsummary">
<tr><td class="memItemLeft rightAlign topAlign"> void </td><td class="memItemRight bottomAlign"><b><a href="qcheckbox.html#stateChanged">stateChanged</a></b> ( int <i>state</i> )</td></tr>
</table>
<ul>
<li class="fn">4 signals inherited from <a href="qabstractbutton.html#signals">QAbstractButton</a></li>
<li class="fn">1 signal inherited from <a href="qwidget.html#signals">QWidget</a></li>
<li class="fn">1 signal inherited from <a href="qobject.html#signals">QObject</a></li>
</ul>
<a name="protected-functions"></a>
<h2>Protected Functions</h2>
<table class="alignedsummary">
<tr><td class="memItemLeft rightAlign topAlign"> void </td><td class="memItemRight bottomAlign"><b><a href="qcheckbox.html#initStyleOption">initStyleOption</a></b> ( QStyleOptionButton * <i>option</i> ) const</td></tr>
</table>
<a name="reimplemented-protected-functions"></a>
<h2>Reimplemented Protected Functions</h2>
<table class="alignedsummary">
<tr><td class="memItemLeft rightAlign topAlign"> virtual void </td><td class="memItemRight bottomAlign"><b><a href="qcheckbox.html#checkStateSet">checkStateSet</a></b> ()</td></tr>
<tr><td class="memItemLeft rightAlign topAlign"> virtual bool </td><td class="memItemRight bottomAlign"><b><a href="qcheckbox.html#event">event</a></b> ( QEvent * <i>e</i> )</td></tr>
<tr><td class="memItemLeft rightAlign topAlign"> virtual bool </td><td class="memItemRight bottomAlign"><b><a href="qcheckbox.html#hitButton">hitButton</a></b> ( const QPoint & <i>pos</i> ) const</td></tr>
<tr><td class="memItemLeft rightAlign topAlign"> virtual void </td><td class="memItemRight bottomAlign"><b><a href="qcheckbox.html#mouseMoveEvent">mouseMoveEvent</a></b> ( QMouseEvent * <i>e</i> )</td></tr>
<tr><td class="memItemLeft rightAlign topAlign"> virtual void </td><td class="memItemRight bottomAlign"><b><a href="qcheckbox.html#nextCheckState">nextCheckState</a></b> ()</td></tr>
<tr><td class="memItemLeft rightAlign topAlign"> virtual void </td><td class="memItemRight bottomAlign"><b><a href="qcheckbox.html#paintEvent">paintEvent</a></b> ( QPaintEvent * )</td></tr>
</table>
<ul>
<li class="fn">14 protected functions inherited from <a href="qabstractbutton.html#protected-functions">QAbstractButton</a></li>
<li class="fn">37 protected functions inherited from <a href="qwidget.html#protected-functions">QWidget</a></li>
<li class="fn">8 protected functions inherited from <a href="qobject.html#protected-functions">QObject</a></li>
<li class="fn">1 protected function inherited from <a href="qpaintdevice.html#protected-functions">QPaintDevice</a></li>
</ul>
<h3>Additional Inherited Members</h3>
<ul>
<li class="fn">5 public slots inherited from <a href="qabstractbutton.html#public-slots">QAbstractButton</a></li>
<li class="fn">19 public slots inherited from <a href="qwidget.html#public-slots">QWidget</a></li>
<li class="fn">1 public slot inherited from <a href="qobject.html#public-slots">QObject</a></li>
<li class="fn">4 static public members inherited from <a href="qwidget.html#static-public-members">QWidget</a></li>
<li class="fn">7 static public members inherited from <a href="qobject.html#static-public-members">QObject</a></li>
<li class="fn">1 protected slot inherited from <a href="qwidget.html#protected-slots">QWidget</a></li>
</ul>
<a name="details"></a>
<!-- $$$QCheckBox-description -->
<div class="descr">
<h2>Detailed Description</h2>
<p>The QCheckBox widget provides a checkbox with a text label.</p>
<p>A QCheckBox is an option button that can be switched on (checked) or off (unchecked). Checkboxes are typically used to represent features in an application that can be enabled or disabled without affecting others, but different types of behavior can be implemented. For example, a <a href="qbuttongroup.html">QButtonGroup</a> can be used to group check buttons logically, allowing exclusive checkboxes. However, <a href="qbuttongroup.html">QButtonGroup</a> does not provide any visual representation.</p>
<p>The image below further illustrates the differences between exclusive and non-exclusive checkboxes.</p>
<table class="generic">
<tr valign="top" class="odd"><td ><img src="images/checkboxes-exclusive.png" alt="" /></td><td ><img src="images/checkboxes-non-exclusive.png" alt="" /></td></tr>
</table>
<p>Whenever a checkbox is checked or cleared it emits the signal <a href="qcheckbox.html#stateChanged">stateChanged</a>(). Connect to this signal if you want to trigger an action each time the checkbox changes state. You can use <a href="qabstractbutton.html#checked-prop">isChecked</a>() to query whether or not a checkbox is checked.</p>
<p>In addition to the usual checked and unchecked states, QCheckBox optionally provides a third state to indicate "no change". This is useful whenever you need to give the user the option of neither checking nor unchecking a checkbox. If you need this third state, enable it with <a href="qcheckbox.html#tristate-prop">setTristate</a>(), and use <a href="qcheckbox.html#checkState">checkState</a>() to query the current toggle state.</p>
<p>Just like <a href="qpushbutton.html">QPushButton</a>, a checkbox displays text, and optionally a small icon. The icon is set with <a href="qabstractbutton.html#icon-prop">setIcon</a>(). The text can be set in the constructor or with <a href="qabstractbutton.html#text-prop">setText</a>(). A shortcut key can be specified by preceding the preferred character with an ampersand. For example:</p>
<pre class="cpp"> <span class="type">QCheckBox</span> <span class="operator">*</span>checkbox <span class="operator">=</span> <span class="keyword">new</span> <span class="type">QCheckBox</span>(<span class="string">"C&ase sensitive"</span><span class="operator">,</span> <span class="keyword">this</span>);</pre>
<p>In this example the shortcut is <i>Alt+A</i>. See the <a href="qshortcut.html#mnemonic">QShortcut</a> documentation for details (to display an actual ampersand, use '&&').</p>
<p>Important inherited functions: <a href="qabstractbutton.html#text-prop">text</a>(), <a href="qabstractbutton.html#text-prop">setText</a>(), <a href="qabstractbutton.html#text-prop">text</a>(), <a href="qabstractbutton-qt3.html#pixmap" class="compat">pixmap</a>(), <a href="qabstractbutton-qt3.html#setPixmap" class="compat">setPixmap</a>(), <a href="qabstractbutton-qt3.html#accel" class="compat">accel</a>(), <a href="qabstractbutton-qt3.html#setAccel" class="compat">setAccel</a>(), <a href="qabstractbutton-qt3.html#isToggleButton" class="compat">isToggleButton</a>(), <a href="qabstractbutton.html#down-prop">setDown</a>(), <a href="qabstractbutton.html#down-prop">isDown</a>(), <a href="qabstractbutton-qt3.html#isOn" class="compat">isOn</a>(), <a href="qcheckbox.html#checkState">checkState</a>(), <a href="qabstractbutton.html#autoRepeat-prop">autoRepeat</a>(), isExclusiveToggle(), <a href="qabstractbutton.html#group">group</a>(), <a href="qabstractbutton.html#autoRepeat-prop">setAutoRepeat</a>(), <a href="qabstractbutton.html#toggle">toggle</a>(), <a href="qabstractbutton.html#pressed">pressed</a>(), <a href="qabstractbutton.html#released">released</a>(), <a href="qabstractbutton.html#clicked">clicked</a>(), <a href="qabstractbutton.html#toggled">toggled</a>(), <a href="qcheckbox.html#checkState">checkState</a>(), and <a href="qcheckbox.html#stateChanged">stateChanged</a>().</p>
<table class="generic" width="100%">
 <tr valign="top" class="odd"><td ><img src="images/macintosh-checkbox.png" alt="Screenshot of a Macintosh style checkbox" /></td><td >A checkbox shown in the <a href="gallery-macintosh.html">Macintosh widget style</a>.</td></tr>
<tr valign="top" class="even"><td ><img src="images/windows-checkbox.png" alt="Screenshot of a Windows XP style checkbox" /></td><td >A checkbox shown in the <a href="gallery-windowsxp.html">Windows XP widget style</a>.</td></tr>
<tr valign="top" class="odd"><td ><img src="images/plastique-checkbox.png" alt="Screenshot of a Plastique style checkbox" /></td><td >A checkbox shown in the <a href="gallery-plastique.html">Plastique widget style</a>.</td></tr>
</table>
</div>
<p><b>See also </b><a href="qabstractbutton.html">QAbstractButton</a>, <a href="qradiobutton.html">QRadioButton</a>, and <a href="guibooks.html#fowler">GUI Design Handbook: Check Box</a>.</p>
<!-- @@@QCheckBox -->
<div class="prop">
<h2>Property Documentation</h2>
<!-- $$$tristate-prop$$$isTristate$$$setTristatebool -->
<h3 class="fn"><a name="tristate-prop"></a><span class="name">tristate</span> : <span class="type">bool</span></h3>
<p>This property holds whether the checkbox is a tri-state checkbox.</p>
<p>The default is false; i.e. the checkbox has only two states.</p>
<p><b>Access functions:</b></p>
<table class="alignedsummary">
<tr><td class="memItemLeft topAlign rightAlign"> bool </td><td class="memItemRight bottomAlign"><span class="name"><b>isTristate</b></span> () const</td></tr>
<tr><td class="memItemLeft topAlign rightAlign"> void </td><td class="memItemRight bottomAlign"><span class="name"><b>setTristate</b></span> ( bool <i>y</i> = true )</td></tr>
</table>
<!-- @@@tristate -->
</div>
<div class="func">
<h2>Member Function Documentation</h2>
<!-- $$$QCheckBox[overload1]$$$QCheckBoxQWidget* -->
<h3 class="fn"><a name="QCheckBox"></a>QCheckBox::<span class="name">QCheckBox</span> ( <span class="type"><a href="qwidget.html">QWidget</a></span> * <i>parent</i> = 0 )</h3>
<p>Constructs a checkbox with the given <i>parent</i>, but with no text.</p>
<p><i>parent</i> is passed on to the <a href="qabstractbutton.html">QAbstractButton</a> constructor.</p>
<!-- @@@QCheckBox -->
<!-- $$$QCheckBox$$$QCheckBoxconstQString&QWidget* -->
<h3 class="fn"><a name="QCheckBox-2"></a>QCheckBox::<span class="name">QCheckBox</span> ( const <span class="type"><a href="qstring.html">QString</a></span> & <i>text</i>, <span class="type"><a href="qwidget.html">QWidget</a></span> * <i>parent</i> = 0 )</h3>
<p>Constructs a checkbox with the given <i>parent</i> and <i>text</i>.</p>
<p><i>parent</i> is passed on to the <a href="qabstractbutton.html">QAbstractButton</a> constructor.</p>
<!-- @@@QCheckBox -->
<!-- $$$checkState[overload1]$$$checkState -->
<h3 class="fn"><a name="checkState"></a><span class="type"><a href="qt.html#CheckState-enum">Qt::CheckState</a></span> QCheckBox::<span class="name">checkState</span> () const</h3>
<p>Returns the check box's check state. If you do not need tristate support, you can also use <a href="qabstractbutton.html#checked-prop">QAbstractButton::isChecked</a>() which returns a boolean.</p>
<p><b>See also </b><a href="qcheckbox.html#setCheckState">setCheckState</a>() and <a href="qt.html#CheckState-enum">Qt::CheckState</a>.</p>
<!-- @@@checkState -->
<!-- $$$checkStateSet[overload1]$$$checkStateSet -->
<h3 class="fn"><a name="checkStateSet"></a><span class="type">void</span> QCheckBox::<span class="name">checkStateSet</span> ()<tt> [virtual protected]</tt></h3>
<p>Reimplemented from <a href="qabstractbutton.html#checkStateSet">QAbstractButton::checkStateSet</a>().</p>
<!-- @@@checkStateSet -->
<!-- $$$event[overload1]$$$eventQEvent* -->
<h3 class="fn"><a name="event"></a><span class="type">bool</span> QCheckBox::<span class="name">event</span> ( <span class="type"><a href="qevent.html">QEvent</a></span> * <i>e</i> )<tt> [virtual protected]</tt></h3>
<p>Reimplemented from <a href="qobject.html#event">QObject::event</a>().</p>
<!-- @@@event -->
<!-- $$$hitButton[overload1]$$$hitButtonconstQPoint& -->
<h3 class="fn"><a name="hitButton"></a><span class="type">bool</span> QCheckBox::<span class="name">hitButton</span> ( const <span class="type"><a href="qpoint.html">QPoint</a></span> & <i>pos</i> ) const<tt> [virtual protected]</tt></h3>
<p>Reimplemented from <a href="qabstractbutton.html#hitButton">QAbstractButton::hitButton</a>().</p>
<!-- @@@hitButton -->
<!-- $$$initStyleOption[overload1]$$$initStyleOptionQStyleOptionButton* -->
<h3 class="fn"><a name="initStyleOption"></a><span class="type">void</span> QCheckBox::<span class="name">initStyleOption</span> ( <span class="type"><a href="qstyleoptionbutton.html">QStyleOptionButton</a></span> * <i>option</i> ) const<tt> [protected]</tt></h3>
<p>Initializes <i>option</i> with the values from this <a href="qcheckbox.html">QCheckBox</a>. This method is useful for subclasses that require a <a href="qstyleoptionbutton.html">QStyleOptionButton</a>, but do not want to fill in all the information themselves.</p>
<p><b>See also </b><a href="qstyleoption.html#initFrom">QStyleOption::initFrom</a>().</p>
<!-- @@@initStyleOption -->
<!-- $$$minimumSizeHint[overload1]$$$minimumSizeHint -->
<h3 class="fn"><a name="minimumSizeHint"></a><span class="type"><a href="qsize.html">QSize</a></span> QCheckBox::<span class="name">minimumSizeHint</span> () const<tt> [virtual]</tt></h3>
<p>Reimplemented from <a href="qwidget.html#minimumSizeHint-prop">QWidget::minimumSizeHint</a>().</p>
<p>This function was introduced in Qt 4.8.</p>
<!-- @@@minimumSizeHint -->
<!-- $$$mouseMoveEvent[overload1]$$$mouseMoveEventQMouseEvent* -->
<h3 class="fn"><a name="mouseMoveEvent"></a><span class="type">void</span> QCheckBox::<span class="name">mouseMoveEvent</span> ( <span class="type"><a href="qmouseevent.html">QMouseEvent</a></span> * <i>e</i> )<tt> [virtual protected]</tt></h3>
<p>Reimplemented from <a href="qwidget.html#mouseMoveEvent">QWidget::mouseMoveEvent</a>().</p>
<!-- @@@mouseMoveEvent -->
<!-- $$$nextCheckState[overload1]$$$nextCheckState -->
<h3 class="fn"><a name="nextCheckState"></a><span class="type">void</span> QCheckBox::<span class="name">nextCheckState</span> ()<tt> [virtual protected]</tt></h3>
<p>Reimplemented from <a href="qabstractbutton.html#nextCheckState">QAbstractButton::nextCheckState</a>().</p>
<!-- @@@nextCheckState -->
<!-- $$$paintEvent[overload1]$$$paintEventQPaintEvent* -->
<h3 class="fn"><a name="paintEvent"></a><span class="type">void</span> QCheckBox::<span class="name">paintEvent</span> ( <span class="type"><a href="qpaintevent.html">QPaintEvent</a></span> * )<tt> [virtual protected]</tt></h3>
<p>Reimplemented from <a href="qwidget.html#paintEvent">QWidget::paintEvent</a>().</p>
<!-- @@@paintEvent -->
<!-- $$$setCheckState[overload1]$$$setCheckStateQt::CheckState -->
<h3 class="fn"><a name="setCheckState"></a><span class="type">void</span> QCheckBox::<span class="name">setCheckState</span> ( <span class="type"><a href="qt.html#CheckState-enum">Qt::CheckState</a></span> <i>state</i> )</h3>
<p>Sets the check box's check state to <i>state</i>. If you do not need tristate support, you can also use <a href="qabstractbutton.html#checked-prop">QAbstractButton::setChecked</a>() which takes a boolean.</p>
<p><b>See also </b><a href="qcheckbox.html#checkState">checkState</a>() and <a href="qt.html#CheckState-enum">Qt::CheckState</a>.</p>
<!-- @@@setCheckState -->
<!-- $$$sizeHint[overload1]$$$sizeHint -->
<h3 class="fn"><a name="sizeHint"></a><span class="type"><a href="qsize.html">QSize</a></span> QCheckBox::<span class="name">sizeHint</span> () const<tt> [virtual]</tt></h3>
<p>Reimplemented from <a href="qwidget.html#sizeHint-prop">QWidget::sizeHint</a>().</p>
<!-- @@@sizeHint -->
<!-- $$$stateChanged[overload1]$$$stateChangedint -->
<h3 class="fn"><a name="stateChanged"></a><span class="type">void</span> QCheckBox::<span class="name">stateChanged</span> ( <span class="type">int</span> <i>state</i> )<tt> [signal]</tt></h3>
<p>This signal is emitted whenever the check box's state changes, i.e. whenever the user checks or unchecks it.</p>
<p><i>state</i> contains the check box's new <a href="qt.html#CheckState-enum">Qt::CheckState</a>.</p>
<!-- @@@stateChanged -->
</div>
  <div class="ft">
    <span></span>
  </div>
</div> 
<div class="footer">
    <p>
      <acronym title="Copyright">©</acronym> 2012 Nokia Corporation and/or its
      subsidiaries. Documentation contributions included herein are the copyrights of
      their respective owners.</p>
    <br />
    <p>
      The documentation provided herein is licensed under the terms of the
      <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation
      License version 1.3</a> as published by the Free Software Foundation.</p>
    <p>
      Documentation sources may be obtained from <a href="http://www.qt-project.org">
      www.qt-project.org</a>.</p>
    <br />
    <p>
      Nokia, Qt and their respective logos are trademarks of Nokia Corporation 
      in Finland and/or other countries worldwide. All other trademarks are property
      of their respective owners. <a title="Privacy Policy"
      href="http://en.gitorious.org/privacy_policy/">Privacy Policy</a></p>
</div>
</body>
</html>
 
     |