Htmlayout-html_samples学习篇(三)

widget type="select"

---

知识点: 实现树状控件

1. OPTIONS 和 OPTION为 树的节点,

2. expanded 可以试节点进行展开.

 

<widget type="select" name="chemistry-h" style="width:100%%;height:100%%">
          <OPTIONS expanded>Alkaline Metals
              <OPTION value="Li">Lithium (Li)</OPTION>
              <OPTION value="Na">Sodium (Na)</OPTION>
              <OPTION value="K">Potassium (K)</OPTION>
          </OPTIONS>
          <OPTIONS expanded>Halogens
              <OPTION value="F">Fluorine <font style="color:blue">(F)</font></OPTION>
              <OPTION value="Cl">Chlorine <font style="color:red">(Cl)</font></OPTION>
              <OPTION value="Br">Bromine <font style="color:green">(Br)</font></OPTION> 
          </OPTIONS>
        </widget>

知识点: 实现下拉控件

1. OPTGROUP 和 OPTION为 树的节点,

<widget type="select" name="chemistry" size="4">
              <OPTGROUP LABEL="Alkaline Metals">   LABEL为标题不可选
                <OPTION selected>Lithium (Li)</OPTION>
                <OPTION>Sodium (Na)</OPTION>
                <OPTION>Potassium (K)</OPTION>
              </OPTGROUP>
              <OPTGROUP LABEL="Halogens">
                <OPTION>Fluorine (F)</OPTION>
                <OPTION>Chlorine (Cl)</OPTION>
                <OPTION>Bromine (Br)</OPTION>
              </OPTGROUP>
            </widget>

 

<select name="chemistry">
              <OPTGROUP LABEL="Alkaline Metals">
                <OPTION selected>Lithium (Li)</OPTION>
                <OPTION>Sodium (Na)</OPTION>
                <OPTION>Potassium (K)</OPTION>
              </OPTGROUP>
              <OPTGROUP LABEL="Halogens">
                <OPTION>Fluorine (F)</OPTION>
                <OPTION>Chlorine (Cl)</OPTION>
                <OPTION>Bromine (Br)</OPTION>
              </OPTGROUP>
            </select>

 

htmlarea

---

文档区, 可以右键控制菜单 , 可以出发2个事件 htmlarea:selectall, htmlarea:copy

/*css*/
     div.htmlarea
      {
        behavior:htmlarea;
        context-menu:selector(menu#for-htmlarea);
        cursor:text;
        border:1px dotted;
      }
    </style>
    <menu.context #for-htmlarea>
      <li	command="htmlarea:copy"
        style="foreground-image:url(res:edit-copy.png)"
        >Copy<span class="accesskey">Ctrl+C</span></li>
      <li	command="htmlarea:selectall"
        >Select All<span class="accesskey">Ctrl+A</span></li>
    </menu>
/*html*/
  <div .htmlarea tabindex=0>
<h3>This is test<h3>
This is test</div>

转载于:https://my.oschina.net/u/262502/blog/337050