master

分支 (1)

管理

管理

master

LayoutAmaze
/
index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="title" content="LayoutAmaze! - Amaze UI可视化布局系统">
<meta name="description" content="LayoutAmaze! 可拖放排序在线编辑的Amaze UI可视化布局系统">
<meta name="keywords" content="可视化,布局,系统">
<title>Amaze UI 可视化布局系统</title>

<!-- Le styles -->
<!-- <link href="css/bootstrap-combined.min.css" rel="stylesheet"> -->
<link href="css/amazeui.min.css" rel="stylesheet">
<link href="css/layoutAmaze.css" rel="stylesheet">

<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
		<script src="js/html5shiv.js"></script>
	<![endif]-->

	<!-- Fav and touch icons -->
<link rel="shortcut icon" href="img/favicon.png">

<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
	<!--[if lt IE 9]>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<![endif]-->
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="js/amazeui.min.js"></script>
<script type="text/javascript" src="js/jquery.htmlClean.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckeditor/config.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</head>

<body class="edit">
  <div class="am-header am-header-default am-header-fixed">
    <div class="am-g am-header-nav">
      <div class="am-u-sm-2 ">
        <a id="logo" href="#"><img src="img/favicon.png"> 可视化布局</a>
      </div>
      <div class="am-u-sm-8 ">
        <div class="am-btn-group ">
          <a class="am-btn am-btn-primary am-round" href="#">
            <span class="am-icon-home"></span> 首页
          </a>
        </div>

        <div class="am-btn-group doc-js-btn-1" data-am-button>
          <label class="am-btn am-btn-primary am-round am-active" id="edit" >
            <input type="radio" name="options" value="编辑" >
            <span class="am-icon-edit"></span>
             编辑
          </label>

          <label class="am-btn am-btn-primary am-round" id="devpreview">
            <input type="radio" name="options" value="布局编辑" >
            <span class="am-icon-eye-slash"></span>
             布局编辑
          </label>

          <label class="am-btn am-btn-primary am-round" id="sourcepreview">
            <input type="radio" name="options" value="预览" >
            <span class="am-icon-eye"></span>
             预览
          </label>
        </div>

        <div class="am-btn-group">
          <button type="button"
                  class="am-btn am-btn-primary am-round"
                  data-am-modal="{target: '#downloadModal'}"
                  id="#downloadModalBtn">
            <span class="am-icon-download"></span> 下载
          </button>
          <button type="button"
                  class="am-btn am-btn-primary am-round"
                  data-am-modal="{target: '#shareModal'}">
            <span class="am-icon-save"></span> 保存
          </button>
          <button type="button" id="clear" href="#clear" class="am-btn am-btn-primary am-round">
            <span class="am-icon-trash"></span> 清空
          </button>
        </div>

        <div class="am-btn-group">
          <button type="button" id="undo" class="am-btn am-btn-primary am-round">
            <span class="am-icon-arrow-left"></span> 撤销
          </button>
          <button type="button" id="redo" class="am-btn am-btn-primary am-round">
            <span class="am-icon-arrow-right"></span> 重做
          </button>
        </div>
      </div>

      <div class="am-u-sm-2">
      </div>

    </div>
  </div>
  <!--container-->
  <div class="container-fluid">
    <!--row-->
    <div class="row-fluid">
      <div class="sidebar-nav">
        <div class="am-panel-group" id="accordion">
          <div class="am-panel am-panel-default">
            <div class="am-panel-hd">
              <h4 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#frameConfig'}">
              <i class="am-icon-plus"></i> 布局设置
              </h4>
            </div>
            <div id="frameConfig" class="am-panel-collapse am-collapse am-in">
              <div class="am-panel-bd">
                <div class="lyrow ui-draggable"> <a href="#close" class="remove label label-important"><i class="am-icon-remove"></i> 删除</a> <span class="drag label"><i class="am-icon-arrows"></i>  拖动</span>
                  <div class="preview">
                    <input value="12" type="text">
                  </div>
                  <div class="view">
                    <div class="row-fluid am-g">
                      <div class="am-u-sm-12 column"></div>
                    </div>
                  </div>
                </div>
                <div class="lyrow ui-draggable"> <a href="#close" class="remove label label-important"><i class="am-icon-remove"></i> 删除</a> <span class="drag label"><i class="am-icon-arrows"></i>  拖动</span>
                  <div class="preview">
                    <input value="6 6" type="text">
                  </div>
                  <div class="view">
                    <div class="row-fluid am-g">
                      <div class="am-u-sm-6 column"></div>
                      <div class="am-u-sm-6 column"></div>
                    </div>
                  </div>
                </div>
                <div class="lyrow ui-draggable"> <a href="#close" class="remove label label-important"><i class="am-icon-remove"></i> 删除</a> <span class="drag label"><i class="am-icon-arrows"></i>  拖动</span>
                  <div class="preview">
                    <input value="8 4" type="text">
                  </div>
                  <div class="view">
                    <div class="row-fluid am-g">
                      <div class="am-u-sm-8 column"></div>
                      <div class="am-u-sm-4 column"></div>
                    </div>
                  </div>
                </div>
                <div class="lyrow ui-draggable"> <a href="#close" class="remove label label-important"><i class="am-icon-remove"></i> 删除</a> <span class="drag label"><i class="am-icon-arrows"></i>  拖动</span>
                  <div class="preview">
                    <input value="4 4 4" type="text">
                  </div>
                  <div class="view">
                    <div class="row-fluid am-g">
                      <div class="am-u-sm-4 column"></div>
                      <div class="am-u-sm-4 column"></div>
                      <div class="am-u-sm-4 column"></div>
                    </div>
                  </div>
                </div>
                <div class="lyrow ui-draggable"> <a href="#close" class="remove label label-important"><i class="am-icon-remove"></i> 删除</a> <span class="drag label"><i class="am-icon-arrows"></i>  拖动</span>
                  <div class="preview">
                    <input value="2 6 4" type="text">
                  </div>
                  <div class="view">
                    <div class="row-fluid am-g">
                      <div class="am-u-sm-2 column"></div>
                      <div class="am-u-sm-6 column"></div>
                      <div class="am-u-sm-4 column"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="am-panel am-panel-default">
            <div class="am-panel-hd">
              <h4 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#basicCSS'}">
                <i class="am-icon-plus"></i> 基本CSS
              </h4>
            </div>
            <div id="basicCSS" class="am-panel-collapse am-collapse">
              <div class="am-panel-bd">
                <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="am-icon-remove"></i> 删除</a> <span class="drag label"><i class="am-icon-arrows"></i>  拖动</span>
                	<span class="configuration">
                    <button type="button" class="am-btn am-btn-xs am-radius" data-am-modal="{target: '#editorModal'}" id="#editbtn">
                    编辑
                    </button>
                    <span class="am-dropdown" data-am-dropdown>
                      <button class="am-btn am-btn-xs am-radius am-dropdown-toggle" data-am-dropdown-toggle>位置 <span class="am-icon-caret-down"></span></button>
                      <ul class="am-dropdown-content">
                        <li class="am-active"><a href="#" rel="">靠左</a></li>
                        <li><a href="#" rel="am-text-center">居中</a></li>
                        <li><a href="#" rel="am-text-right">靠右</a></li>
                      </ul>
                    </span>
                  </span>
                  <div class="preview">标题栏</div>
                  <div class="view">
                    <h3 contenteditable="true">h3. 这是一套可视化布局系统.</h3>
                  </div>
                </div>
                <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="am-icon-remove"></i>删除</a> <span class="drag label"><i class="am-icon-arrows"></i> 拖动</span>
                  <span class="configuration">
                    <button type="button" class="am-btn am-btn-xs am-radius" data-am-modal="{target: '#editorModal'}" id="#editbtn">
                      编辑
                    </button>
                    <span class="am-dropdown" data-am-dropdown>
                      <button class="am-btn am-btn-xs am-radius am-dropdown-toggle" data-am-dropdown-toggle>位置 <span class="am-icon-caret-down"></span></button>
                      <ul class="am-dropdown-content">
                        <li class="am-active"><a href="#" rel="">靠左</a></li>
                        <li><a href="#" rel="am-text-center">居中</a></li>
                        <li><a href="#" rel="am-text-right">靠右</a></li>
                      </ul>
                    </span>
                    <a class="btn btn-mini" href="#" rel="lead">Lead</a>
                    <a class="am-btn am-btn-xs am-radius am-btn-default" href="#" rel="am-article-lead">概要</a>
                  </span>
                  <div class="preview">段落</div>
                  <div class="view" contenteditable="true">
                    <p><em>Git</em>是一个分布式的版本控制系统，最初由<b>Linus Torvalds</b>编写，用作Linux内核代码的管理。在推出后，Git在其它项目中也取得了很大成功，尤其是在Ruby社区中。 </p>
                  </div>
                </div>
                <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="am-icon-remove"></i>删除</a> <span class="drag label"><i class="am-icon-arrows"></i> 拖动</span>
                  <span class="configuration">
                    <button type="button" class="am-btn am-btn-xs am-radius" data-am-modal="{target: '#editorModal'}" id="#editbtn">
                    编辑
                  </button>
                  </span>
                  <div class="preview">地址</div>
                  <div class="view">
                    <address contenteditable="true">
                    <strong>Twitter, Inc.</strong><br>
                    795 Folsom Ave, Suite 600<br>
                    San Francisco, CA 94107<br>
                    <abbr title="Phone">P:</abbr> (123) 456-7890
                    </address>
                  </div>
                </div>
                <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="am-icon-remove"></i>删除</a> <span class="drag label"><i class="am-icon-arrows"></i> 拖动</span>
                  <span class="configuration">
                    <button type="button" class="am-btn am-btn-xs am-radius" data-am-modal="{target: '#editorModal'}" id="#editbtn">
                      编辑
                    </button>
                  </span>
                  <div class="preview">引用块</div>
                  <div class="view">
                    <blockquote contenteditable="true">
                      <p>github是一个全球化的开源社区.</p>
                      <small>关键词 <cite title="Source Title">开源</cite></small> </blockquote>
                  </div>
                </div>
                <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="am-icon-remove"></i>删除</a> <span class="drag label"><i class="am-icon-arrows"></i> 拖动</span>
                  <span class="configuration">
                    <button type="button" class="am-btn am-btn-xs am-radius" data-am-modal="{target: '#editorModal'}" id="#editbtn">
                      编辑
                    </button>
                    <span class="am-dropdown" data-am-dropdown>
                      <button class="am-btn am-btn-xs am-radius am-dropdown-toggle" data-am-dropdown-toggle>样式 <span class="am-icon-caret-down"></span></button>
                      <ul class="am-dropdown-content">
                        <li class="am-active"><a href="#" rel="">默认</a></li>
                        <li><a href="#" rel="am-list-border">边框</a></li>
                        <li><a href="#" rel="am-list-striped">斑马纹</a></li>
                      </ul>
                    </span>
                  </span>
                  <div class="preview">列表</div>
                  <div class="view">
                    <ul class="am-list" contenteditable="true">
                      <li><i class="am-icon-newspaper-o am-icon-fw"></i> 新闻资讯</li>
                      <li><i class="am-icon-soccer-ball-o am-icon-fw"></i> 体育竞技</li>
                      <li><i class="am-icon-camera am-icon-fw"></i> 娱乐八卦</li>
                      <li><i class="am-icon-headphones am-icon-fw"></i> 前沿科技</li>
                      <li><i class="am-icon-dollar am-icon-fw"></i> 环球财经</li>
                      <li><i class="am-icon-sun-o am-icon-fw"></i> 天气预报</li>
                      <li><i class="am-icon-home am-icon-fw"></i> 房产家居</li>
                      <li><i class="am-icon-gamepad am-icon-fw"></i> 网络游戏</li>
                    </ul>
                  </div>
                </div>
                <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="am-icon-remove"></i>删除</a> <span class="drag label"><i class="am-icon-arrows"></i> 拖动</span>
                  <span class="configuration">
                    <button type="button" class="am-btn am-btn-xs am-radius" data-am-modal="{target: '#editorModal'}" id="#editbtn">
                      编辑
                    </button>
                    <span class="am-dropdown" data-am-dropdown>
                      <button class="am-btn am-btn-xs am-radius am-dropdown-toggle" data-am-dropdown-toggle>用途 <span class="am-icon-caret-down"></span></button>
                      <ul class="am-dropdown-content">
                        <li class="am-active"><a href="#" rel="">默认按钮</a></li>
                        <li><a href="#" rel="am-btn-primary">主色按钮</a></li>
                        <li><a href="#" rel="am-btn-secondary">次色按钮</a></li>
                        <li><a href="#" rel="am-btn-success">绿色按钮</a></li>
                        <li><a href="#" rel="am-btn-warning">橙色按钮</a></li>
                        <li><a href="#" rel="am-btn-danger">红色按钮</a></li>
                      </ul>
                    </span>
                    <span class="am-dropdown" data-am-dropdown>
                      <button class="am-btn am-btn-xs am-radius am-dropdown-toggle" data-am-dropdown-toggle>形状 <span class="am-icon-caret-down"></span></button>
                      <ul class="am-dropdown-content">
                        <li class="am-active"><a href="#" rel="">方角</a></li>
                        <li><a href="#" rel="am-radius">圆角</a></li>
                        <li><a href="#" rel="am-round">椭圆</a></li>
                      </ul>
                    </span>
                    <span class="am-dropdown" data-am-dropdown>
                      <button class="am-btn am-btn-xs am-radius am-dropdown-toggle" data-am-dropdown-toggle>尺寸 <span class="am-icon-caret-down"></span></button>
                      <ul class="am-dropdown-content">
                        <li><a href="#" rel="am-btn-xl">巨大</a></li>
                        <li><a href="#" rel="am-btn-lg">大</a></li>
                        <li class="am-active"><a href="#" rel="">中</a></li>
                        <li><a href="#" rel="am-btn-sm">小</a></li>
                        <li><a href="#" rel="am-btn-xs">更小</a></li>
                      </ul>
                    </span>
                    <a class="am-btn am-btn-xs am-radius am-btn-default" href="#" rel="am-active">激活按钮</a>
                    <a class="am-btn am-btn-xs am-radius am-btn-default" href="#" rel="am-disabled">禁用按钮</a>
                    <a class="am-btn am-btn-xs am-radius am-btn-default" href="#" rel="am-btn-block">块状按钮</a>
                  </span>
                  <div class="preview">按钮</div>
                  <div class="view">
                    <button type="button" class="am-btn">按钮</button>
                  </div>
                </div>
                <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="am-icon-remove"></i>删除</a> <span class="drag label"><i class="am-icon-arrows"></i> 拖动</span>
                  <span class="configuration">
                    <button type="button" class="am-btn am-btn-xs am-radius" data-am-modal="{target: '#editorModal'}" id="#editbtn">
                      编辑
                    </button>
                  </span>
                  <div class="preview">代码</div>
                  <div class="view" >
                    <code contenteditable="true">code here</code>
                  </div>
                </div>
                <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="am-icon-remove"></i>删除</a> <span class="drag label"><i class="am-icon-arrows"></i> 拖动</span>
                  <span class="configuration">
                    <button type="button" class="am-btn am-btn-xs am-radius" data-am-modal="{target: '#editorModal'}" id="#editbtn">
                      编辑
                    </button>
                  </span>
                  <div class="preview">表单</div>
                  <div class="view">
                    <form class="am-form">
                      <fieldset>
                        <legend>表单标题</legend>

                        <div class="am-form-group">
                          <label for="doc-ipt-email-1">邮件</label>
                          <input type="email" class="" id="doc-ipt-email-1" placeholder="输入电子邮件">
                        </div>

                        <div class="am-form-group">
                          <label for="doc-ipt-pwd-1">密码</label>
                          <input type="password" class="" id="doc-ipt-pwd-1" placeholder="设置个密码吧">
                        </div>

                        <div class="am-form-group">
                          <label for="doc-ipt-file-1">原生文件上传域</label>
                          <input type="file" id="doc-ipt-file-1">
                          <p class="am-form-help">请选择要上传的文件...</p>
                        </div>

                        <div class="am-form-group am-form-file">
                          <label for="doc-ipt-file-2">Amaze UI 文件上传域</label>
                          <div>
                            <button type="button" class="am-btn am-btn-default am-btn-sm">
                              <i class="am-icon-cloud-upload"></i> 选择要上传的文件</button>
                          </div>
                          <input type="file" id="doc-ipt-file-2">
                        </div>

                        <div class="am-checkbox">
                          <label>
                            <input type="checkbox"> 复选框，选我选我选我
                          </label>
                        </div>

                        <div class="am-radio">
                          <label>
                            <input type="radio" name="doc-radio-1" value="option1" checked>
                            单选框 - 选项1
                          </label>
                        </div>

                        <div class="am-radio">
                          <label>
                            <input type="radio" name="doc-radio-1" value="option2">
                            单选框 - 选项2
                          </label>
                        </div>

                        <div class="am-form-group">
                          <label class="am-checkbox-inline">
                            <input type="checkbox" value="option1"> 选我
                          </label>
                          <label class="am-checkbox-inline">
                            <input type="checkbox" value="option2"> 同时可以选我
                          </label>
                          <label class="am-checkbox-inline">
                            <input type="checkbox" value="option3"> 还可以选我
                          </label>
                        </div>

                        <div class="am-form-group">
                          <label class="am-radio-inline">
                            <input type="radio"  value="" name="docInlineRadio"> 每一分
                          </label>
                          <label class="am-radio-inline">
                            <input type="radio" name="docInlineRadio"> 每一秒
                          </label>
                          <label class="am-radio-inline">
                            <input type="radio" name="docInlineRadio"> 多好
                          </label>
                        </div>

                        <div class="am-form-group">
                          <label for="doc-select-1">下拉多选框</label>
                          <select id="doc-select-1">
                            <option value="option1">选项一...</option>
                            <option value="option2">选项二.....</option>
                            <option value="option3">选项三........</option>
                          </select>
                          <span class="am-form-caret"></span>
                        </div>

                        <div class="am-form-group">
                          <label for="doc-select-2">多选框</label>
                          <select multiple class="" id="doc-select-2">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                          </select>
                        </div>

                        <div class="am-form-group">
                          <label for="doc-ta-1">文本域</label>
                          <textarea class="" rows="5" id="doc-ta-1"></textarea>
                        </div>

                        <p><button type="submit" class="am-btn am-btn-default">提交</button></p>
                      </fieldset>
                    </form>
                  </div>
                </div>
                <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="am-icon-remove"></i>删除</a> <span class="drag label"><i class="am-icon-arrows"></i> 拖动</span>
                  <span class="configuration">
                    <button type="button" class="am-btn am-btn-xs am-radius" data-am-modal="{target: '#editorModal'}" id="#editbtn">
                      编辑
                    </button>
                    <span class="am-dropdown" data-am-dropdown>
                      <button class="am-btn am-btn-xs am-radius am-dropdown-toggle" data-am-dropdown-toggle>形状 <span class="am-icon-caret-down"></span></button>
                      <ul class="am-dropdown-content">
                        <li class="am-active"><a href="#" rel="">默认形状</a></li>
                        <li><a href="#" rel="am-radius">圆角</a></li>
                        <li><a href="#" rel="am-round">椭圆</a></li>
                        <li><a href="#" rel="am-circle">圆形</a></li>
                      </ul>
                    </span>
                    <span class="am-dropdown" data-am-dropdown>
                      <button class="am-btn am-btn-xs am-radius am-dropdown-toggle" data-am-dropdown-toggle>边框 <span class="am-icon-caret-down"></span></button>
                      <ul class="am-dropdown-content">
                        <li class="am-active"><a href="#" rel="">方角</a></li>
                        <li><a href="#" rel="am-radius">圆角</a></li>
                        <li><a href="#" rel="am-circle">圆形</a></li>
                      </ul>
                    </span>
                  </span>
                  <div class="preview">图片</div>
                  <div class="view">
                    <img class="am-img-thumbnail" src="img/a.jpg" width="140" height="140"/>
                  </div>
                </div>
                <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="am-icon-remove"></i>删除</a> <span class="drag label"><i class="am-icon-arrows"></i> 拖动</span>
                  <span class="configuration">
                    <button type="button" class="am-btn am-btn-xs am-radius" data-am-modal="{target: '#editorModal'}" id="#editbtn">
                      编辑
                    </button>
                    <a class="am-btn am-btn-xs am-radius am-btn-default" href="#" rel="am-table-bordered">边框</a>
                    <a class="am-btn am-btn-xs am-radius am-btn-default" href="#" rel="am-table-striped am-table-hover">斑马纹</a>
                    <a class="am-btn am-btn-xs am-radius am-btn-default" href="#" rel="am-table-compact">紧凑</a>
                    <a class="am-btn am-btn-xs am-radius am-btn-default" href="#" rel="am-table-centered">居中</a>
                  </span>
                  <div class="preview">表格</div>
                  <div class="view">
                    <table class="am-table">
                      <thead>
                          <tr>
                              <th>网站名称</th>
                              <th>网址</th>
                              <th>创建时间</th>
                          </tr>
                      </thead>
                      <tbody>
                          <tr>
                              <td>Amaze UI</td>
                              <td>http://amazeui.org</td>
                              <td>2012-10-01</td>
                          </tr>
                          <tr>
                              <td>Amaze UI</td>
                              <td>http://amazeui.org</td>
                              <td>2012-10-01</td>
                          </tr>
                          <tr class="am-active">
                              <td>Amaze UI(Active)</td>
                              <td>http://amazeui.org</td>
                              <td>2012-10-01</td>
                          </tr>
                          <tr>
                              <td>Amaze UI</td>
                              <td>http://amazeui.org</td>
                              <td>2012-10-01</td>
                          </tr>
                          <tr>
                              <td>Amaze UI</td>
                              <td>http://amazeui.org</td>
                              <td>2012-10-01</td>
                          </tr>
                        </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="am-panel am-panel-default">
            <div class="am-panel-hd">
              <h4 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#componentConfig'}">
              <i class="am-icon-plus"></i> 组件
              </h4>
            </div>
            <div id="componentConfig" class="am-panel-collapse am-collapse">
              <div class="am-panel-bd">
                <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="am-icon-remove"></i>删除</a> <span class="drag label"><i class="am-icon-arrows"></i> 拖动</span>
                  <span class="configuration">
                    <span class="am-dropdown" data-am-dropdown>
                      <button class="am-btn am-btn-xs am-radius am-dropdown-toggle" data-am-dropdown-toggle>方向 <span class="am-icon-caret-down"></span></button>
                      <ul class="am-dropdown-content">
                        <li class="am-active"><a href="#" rel="">横向</a></li>
                        <li><a href="#" rel="am-btn-group-stacked">竖向</a></li>
                      </ul>
                    </span>
                  </span>
                  <div class="preview">按钮组</div>
                  <div class="view">
                    <div class="am-btn-group">
                      <button class="am-btn am-btn-default" type="button"><i class="am-icon-align-left"></i></button>
                      <button class="am-btn am-btn-default" type="button"><i class="am-icon-align-center"></i></button>
                      <button class="am-btn am-btn-default" type="button"><i class="am-icon-align-right"></i></button>
                      <button class="am-btn am-btn-default" type="button"><i class="am-icon-align-justify"></i></button>
                    </div>
                  </div>
                </div>
                <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="am-icon-remove"></i>删除</a> <span class="drag label"><i class="am-icon-arrows"></i> 拖动</span>
                  <span class="configuration">
                    <button type="button" class="am-btn am-btn-xs am-radius" data-am-modal="{target: '#editorModal'}" id="#editbtn">
                    编辑
                    </button>
                    <a class="am-btn am-btn-xs am-radius am-btn-default" href="#" rel="am-dropdown-up">上拉</a>
                  </span>

                  <div class="preview">下拉菜单</div>
                  <div class="view">
                    <div class="am-dropdown" data-am-dropdown="">
                      <button class="am-btn am-btn-xs am-radius am-dropdown-toggle" data-am-dropdown-toggle="" contenteditable="true">下拉菜单 <span class="am-icon-caret-down"></span></button>
                      <ul class="am-dropdown-content">
                        <li><a href="#">操作1</a></li>
                        <li><a href="#">操作2</a></li>
                        <li><a href="#">操作3</a></li>
                        <li><a href="#">操作4</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="am-icon-remove"></i>删除</a> <span class="drag label"><i class="am-icon-arrows"></i> 拖动</span>
                  <span class="configuration">
                    <button type="button" class="am-btn am-btn-xs am-radius" data-am-modal="{target: '#editorModal'}" id="#editbtn">
                    编辑
                    </button>
                    <span class="am-dropdown" data-am-dropdown>
                      <button class="am-btn am-btn-xs am-radius am-dropdown-toggle" data-am-dropdown-toggle>样式 <span class="am-icon-caret-down"></span></button>
                      <ul class="am-dropdown-content">
                        <li><a href="#" rel="am-nav-tabs">线框</a></li>
                        <li><a href="#" rel="am-nav-pills">图钉</a></li>
                      </ul>
                    </span>
                    <a class="am-btn am-btn-xs am-radius am-btn-default" href="#" rel="am-nav-justify">宽度自适应</a>
                  </span>
                  <div class="preview">导航</div>
                  <div class="view">
                    <ul class="am-nav" contenteditable="true">
                      <li class="am-active"><a href="#">首页</a></li>
                      <li><a href="#">资料</a></li>
                      <li class="am-disabled"><a href="#">信息</a></li>
                      <li class="am-dropdown" data-am-dropdown>
                      <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;" contenteditable="true">下拉菜单 <span class="am-icon-caret-down"></span></a>
                        <ul class="am-dropdown-content">
                          <li><a href="#">操作1</a></li>
                          <li><a href="#">操作2</a></li>
                          <li class="am-nav-divider"></li>
                          <li><a href="#">分割线</a></li>
                        </ul>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="am-icon-remove"></i>删除</a> <span class="drag label"><i class="am-icon-arrows"></i> 拖动</span>
                  <span class="configuration">
                    <button type="button" class="am-btn am-btn-xs am-radius" data-am-modal="{target: '#editorModal'}" id="#editbtn">
                    编辑
                    </button>
                    <a class="am-btn am-btn-xs am-radius am-btn-default" href="#" rel="am-topbar-inverse">深色样式</a>
                  </span>
                  <div class="preview">导航条</div>
                  <div class="view">
                    <header class="am-topbar">
                      <h1 class="am-topbar-brand">
                        <a href="#">Amaze UI</a>
                      </h1>

                      <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#doc-topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>

                      <div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse">
                        <ul class="am-nav am-nav-pills am-topbar-nav">
                          <li class="am-active"><a href="#">首页</a></li>
                          <li><a href="#">项目</a></li>
                          <li class="am-dropdown" data-am-dropdown>
                            <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
                              下拉 <span class="am-icon-caret-down"></span>
                            </a>
                            <ul class="am-dropdown-content">
                              <li class="am-dropdown-header">标题</li>
                              <li><a href="#">1. 去月球</a></li>
                              <li class="am-active"><a href="#">2. 去火星</a></li>
                              <li><a href="#">3. 还是回地球</a></li>
                              <li class="am-disabled"><a href="#">4. 下地狱</a></li>
                              <li class="am-divider"></li>
                              <li><a href="#">5. 桥头一回首</a></li>
                            </ul>
                          </li>
                        </ul>

                        <form class="am-topbar-form am-topbar-left am-form-inline" role="search">
                          <div class="am-form-group">
                            <input type="text" class="am-form-field am-input-sm" placeholder="搜索">
                          </div>
                        </form>

                        <div class="am-topbar-right">
                          <div class="am-dropdown" data-am-dropdown="{boundary: '.am-topbar'}">
                            <button class="am-btn am-btn-secondary am-topbar-btn am-btn-sm am-dropdown-toggle" data-am-dropdown-toggle>其他 <span class="am-icon-caret-down"></span></button>
                            <ul class="am-dropdown-content">
                              <li><a href="#">注册</a></li>
                              <li><a href="#">随便看看</a></li>
                            </ul>
                          </div>
                        </div>

                        <div class="am-topbar-right">
                          <button class="am-btn am-btn-primary am-topbar-btn am-btn-sm">登录</button>
                        </div>
                      </div>
                    </header>
                  </div>
                </div>
                <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="am-icon-remove"></i>删除</a> <span class="drag label"><i class="am-icon-arrows"></i> 拖动</span>
                  <span class="configuration">
                    <button type="button" class="am-btn am-btn-xs am-radius" data-am-modal="{target: '#editorModal'}" id="#editbtn">
                    编辑
                    </button>
                    <a class="am-btn am-btn-xs am-radius am-btn-default" href="#" rel="am-breadcrumb-slash">分隔符</a>
                  </span>
                  <div class="preview">面包屑导航</div>
                  <div class="view">
                    <ol class="am-breadcrumb">
                      <li><a href="#">首页</a></li>
                      <li><a href="#">分类</a></li>
                      <li class="am-active">内容</li>
                    </ol>
                  </div>
                </div>
                <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="am-icon-remove"></i>删除</a> <span class="drag label"><i class="am-icon-arrows"></i> 拖动</span>
                  <span class="configuration">
                    <button type="button" class="am-btn am-btn-xs am-radius" data-am-modal="{target: '#editorModal'}" id="#editbtn">
                    编辑
                    </button>
                    <span class="am-dropdown" data-am-dropdown>
                      <button class="am-btn am-btn-xs am-radius am-dropdown-toggle" data-am-dropdown-toggle>尺寸 <span class="am-icon-caret-down"></span></button>
                      <ul class="am-dropdown-content">
                        <li><a href="#" rel="am-text-xl">巨大</a></li>
                        <li><a href="#" rel="am-text-lg">大</a></li>
                        <li class="am-active"><a href="#" rel="">中</a></li>
                        <li><a href="#" rel="am-text-sm">小</a></li>
                      </ul>
                    </span>
                    <span class="am-dropdown" data-am-dropdown>
                      <button class="am-btn am-btn-xs am-radius am-dropdown-toggle" data-am-dropdown-toggle>位置 <span class="am-icon-caret-down"></span></button>
                      <ul class="am-dropdown-content">
                        <li class="am-active"><a href="#" rel="">居左</a></li>
                        <li><a href="#" rel="am-pagination-centered">居中</a></li>
                        <li><a href="#" rel="am-pagination-right">居右</a></li>
                      </ul>
                    </span>
                  </span>
                  <div class="preview">翻页</div>
                  <div class="view">
                    <ul class="am-pagination" contenteditable="true">
                      <li class="am-disabled"><a href="#">&laquo;</a></li>
                      <li class="am-active"><a href="#">1</a></li>
                      <li><a href="#">2</a></li>
                      <li><a href="#">3</a></li>
                      <li><a href="#">4</a></li>
                      <li><a href="#">5</a></li>
                      <li><a href="#">&raquo;</a></li>
                    </ul>
                  </div>
                </div>
                <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="am-icon-remove"></i>删除</a> <span class="drag label"><i class="am-icon-arrows"></i> 拖动</span>
                  <span class="configuration">
                    <button type="button" class="am-btn am-btn-xs am-radius" data-am-modal="{target: '#editorModal'}" id="#editbtn">
                    编辑
                    </button>
                    <span class="am-dropdown" data-am-dropdown>
                      <button class="am-btn am-btn-xs am-radius am-dropdown-toggle" data-am-dropdown-toggle>用途 <span class="am-icon-caret-down"></span></button>
                      <ul class="am-dropdown-content">
                        <li class="am-active"><a href="#" rel="am-panel-default">默认</a></li>
                        <li><a href="#" rel="am-panel-primary">主面板</a></li>
                        <li><a href="#" rel="am-panel-secondary">副面板</a></li>
                        <li><a href="#" rel="am-panel-success">成功</a></li>
                        <li><a href="#" rel="am-panel-warning">警告</a></li>
                        <li><a href="#" rel="am-panel-danger">危险</a></li>
                      </ul>
                    </span>
                  </span>
                  <div class="preview">面板</div>
                  <div class="view">
                    <div class="am-panel am-panel-default">
                      <div class="am-panel-hd">面板标题</div>
                      <div class="am-panel-bd">
                        面板内容
                      </div>
                    </div>
                  </div>
                </div>
                <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="am-icon-remove"></i>删除</a> <span class="drag label"><i class="am-icon-arrows"></i> 拖动</span>
                  <span class="configuration">
                    <button type="button" class="am-btn am-btn-xs am-radius" data-am-modal="{target: '#editorModal'}" id="#editbtn">
                    编辑
                    </button>

                    <span class="am-dropdown" data-am-dropdown>
                      <button class="am-btn am-btn-xs am-radius am-dropdown-toggle" data-am-dropdown-toggle>尺寸 <span class="am-icon-caret-down"></span></button>
                      <ul class="am-dropdown-content">
                        <li><a href="#" rel="am-text-xl">巨大</a></li>
                        <li><a href="#" rel="am-text-lg">大</a></li>
                        <li class="am-active"><a href="#" rel="">中</a></li>
                        <li><a href="#" rel="am-text-sm">小</a></li>
                      </ul>
                    </span>
                    <span class="am-dropdown" data-am-dropdown>
                      <button class="am-btn am-btn-xs am-radius am-dropdown-toggle" data-am-dropdown-toggle>形状 <span class="am-icon-caret-down"></span></button>
                      <ul class="am-dropdown-content">
                        <li class="am-active"><a href="#" rel="">方角</a></li>
                        <li><a href="#" rel="am-radius">圆角</a></li>
                        <li><a href="#" rel="am-round">椭圆</a></li>
                      </ul>
                    </span>
                    <span class="am-dropdown" data-am-dropdown>
                      <button class="am-btn am-btn-xs am-radius am-dropdown-toggle" data-am-dropdown-toggle>用途 <span class="am-icon-caret-down"></span></button>
                      <ul class="am-dropdown-content">
                        <li class="am-active"><a href="#" rel="">默认</a></li>
                        <li><a href="#" rel="am-badge-primary">主要</a></li>
                        <li><a href="#" rel="am-badge-secondary">次要</a></li>
                        <li><a href="#" rel="am-badge-success">成功</a></li>
                        <li><a href="#" rel="am-badge-warning">警告</a></li>
                        <li><a href="#" rel="am-badge-danger">危险</a></li>
                      </ul>
                    </span>
                  </span>
                  <div class="preview">小徽章</div>
                  <div class="view"> <span class="am-badge">小徽章</span></div>
                </div>
                <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="am-icon-remove"></i>删除</a> <span class="drag label"><i class="am-icon-arrows"></i> 拖动</span>
                  <span class="configuration">
                    <button type="button" class="am-btn am-btn-xs am-radius" data-am-modal="{target: '#editorModal'}" id="#editbtn">
                    编辑
                    </button>
                    <span class="am-dropdown" data-am-dropdown>
                      <button class="am-btn am-btn-xs am-radius am-dropdown-toggle" data-am-dropdown-toggle>用途 <span class="am-icon-caret-down"></span></button>
                      <ul class="am-dropdown-content">
                        <li class="am-active"><a href="#" rel="">默认</a></li>
                        <li><a href="#" rel="am-comment-primary">高亮评论（边框为主色）</a></li>
                        <li><a href="#" rel="am-comment-secondary">高亮评论（边框为次色）</a></li>
                        <li><a href="#" rel="am-comment-success">高亮评论（边框为绿色）</a></li>
                        <li><a href="#" rel="am-comment-warning">高亮评论（边框为橙色）</a></li>
                        <li><a href="#" rel="am-comment-danger">高亮评论（边框为红色）</a></li>
                      </ul>
                    </span>
                  </span>
                  <div class="preview">评论列表</div>
                  <div class="view">
                    <article class="am-comment">
                      <a href="#link-to-user-home">
                        <img src="" alt="" class="am-comment-avatar" width="48" height="48"/>
                      </a>
                      <div class="am-comment-main">
                        <header class="am-comment-hd">
                          <div class="am-comment-meta">
                            <a href="#link-to-user" class="am-comment-author">某人</a> 评论于 <time datetime="2015-10-3T04:54:29-07:00" title="2015年10月3日 下午7:54 格林尼治标准时间+0800">2015-10-3 15:30</time>
                          </div>
                          <div class="am-comment-actions">
                            <a href=""><i class="am-icon-pencil"></i></a>
                            <a href=""><i class="am-icon-close"></i></a>
                          </div>
                        </header>
                        <div class="am-comment-bd">
                          <p>评论</p>
                          <blockquote>评论主题</blockquote>
                        </div>
                        <footer class="am-comment-footer">
                          <div class="am-comment-actions">
                            <a href=""><i class="am-icon-thumbs-up"></i></a>
                            <a href=""><i class="am-icon-thumbs-down"></i></a>
                            <a href=""><i class="am-icon-reply"></i></a>
                          </div>
                        </footer>
                      </div>
                    </article>
                  </div>
                </div>
                <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="am-icon-remove"></i>删除</a> <span class="drag label"><i class="am-icon-arrows"></i> 拖动</span>
                  <span class="configuration">
                    <button type="button" class="am-btn am-btn-xs am-radius" data-am-modal="{target: '#editorModal'}" id="#editbtn">
                    编辑
                    </button>
                    <span class="am-dropdown" data-am-dropdown>
                      <button class="am-btn am-btn-xs am-radius am-dropdown-toggle" data-am-dropdown-toggle>高度 <span class="am-icon-caret-down"></span></button>
                      <ul class="am-dropdown-content">
                        <li class="am-active"><a href="#" rel="">高</a></li>
                        <li><a href="#" rel="am-progress-sm">中</a></li>
                        <li><a href="#" rel="am-progress-xs">不高</a></li>
                      </ul>
                    </span>
                    <a class="am-btn am-btn-xs am-radius am-btn-default" href="#" rel="am-progress-striped">条纹</a>
                  </span>
                  <div class="preview">进度条</div>
                  <div class="view">
                    <div class="am-progress">
                      <div class="am-progress-bar" style="width: 40%">40%</div>
                    </div>
                  </div>
                </div>
                <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="am-icon-remove"></i>删除</a> <span class="drag label"><i class="am-icon-arrows"></i> 拖动</span>
                  <span class="configuration">
                    <button type="button" class="am-btn am-btn-xs am-radius" data-am-modal="{target: '#editorModal'}" id="#editbtn">
                    编辑
                    </button>
                  </span>
                  <div class="preview">缩略图</div>
                  <div class="view">
                    <div class="am-g am-text-center" contenteditable="true">
                      <div class="am-u-sm-6">
                        <div class="am-thumbnail">
                          <img src="img/1.jpg" alt=""/>
                          <div class="am-thumbnail-caption">
                            <h3>图片标题</h3>
                            <p>图片描述内容</p>
                            <p class="am-text-right">
                              <a>
                                <i class="am-icon-heart-o"></i>
                              </a>
                            </p>
                          </div>
                        </div>
                      </div>

                      <div class="am-u-sm-6">
                        <div class="am-thumbnail">
                          <img src="img/2.jpg" alt=""/>
                          <div class="am-thumbnail-caption ">
                            <h3>图片标题</h3>
                            <p>图片描述内容</p>
                            <p class="am-text-right">
                              <a>
                                <i class="am-icon-heart-o"></i>
                              </a>
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="am-icon-remove"></i>删除</a> <span class="drag label"><i class="am-icon-arrows"></i> 拖动</span>
                  <span class="configuration">
                    <button type="button" class="am-btn am-btn-xs am-radius" data-am-modal="{target: '#editorModal'}" id="#editbtn">
                    编辑
                    </button>
                  </span>
                  <div class="preview">文章页</div>
                  <div class="view">
                    <article class="am-article" contenteditable="true">
                      <div class="am-article-hd">
                        <h1 class="am-article-title">文章标题</h1>
                        <p class="am-article-meta">作者</p>
                      </div>

                      <div class="am-article-bd">
                        <p class="am-article-lead">文章摘要</p>
                        <!-- <p class="am-article-divider"></p> -->
                        <p>文章内容</p>
                      </div>
                    </article>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="am-panel am-panel-default">
            <div class="am-panel-hd">
            <h4 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#jsComponent'}">
              <i class="am-icon-plus"></i> 交互组件
            </h4>
            </div>
            <div id="jsComponent" class="am-panel-collapse am-collapse">
              <div class="am-panel-bd">
                <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="am-icon-remove"></i>删除</a> <span class="drag label"><i class="am-icon-arrows"></i> 拖动</span>
                  <span class="configuration">
                    <button type="button" class="am-btn am-btn-xs am-radius" data-am-modal="{target: '#editorModal'}" id="#editbtn">
                    编辑
                    </button>
                    <span class="am-dropdown" data-am-dropdown>
                      <button class="am-btn am-btn-xs am-radius am-dropdown-toggle" data-am-dropdown-toggle>用途 <span class="am-icon-caret-down"></span></button>
                      <ul class="am-dropdown-content">
                        <li class="am-active"><a href="#" rel="">主色警告框</a></li>
                        <li><a href="#" rel="am-alert-secondary">次色警告框</a></li>
                        <li><a href="#" rel="am-alert-success">绿色警告框</a></li>
                        <li><a href="#" rel="am-alert-warning">橙色警告框</a></li>
                        <li><a href="#" rel="am-alert-danger">红色警告框</a></li>
                      </ul>
                    </span>
                  </span>
                  <div class="preview">警告框</div>
                  <div class="view">
                    <div class="am-alert" data-am-alert>
                      <button type="button" class="am-close">&times;</button>
                      <h3>警告框</h3>
                      <p>注意您的财产安全！</p>
                    </div>
                  </div>
                </div>
                <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="am-icon-remove"></i>删除</a> <span class="drag label"><i class="am-icon-arrows"></i> 拖动</span>
                  <span class="configuration">
                    <button type="button" class="am-btn am-btn-xs am-radius" data-am-modal="{target: '#editorModal'}" id="#editbtn">
                    编辑
                    </button>
                  </span>
                  <div class="preview">按钮交互</div>
                  <div class="view">
                    <div>加载按钮：
                      <button type="button" class="am-btn am-btn-primary btn-loading-example">加载按钮</button>
                      <script>
                        $('.btn-loading-example').click(function () {
                          var $btn = $(this)
                          $btn.button('loading');
                            setTimeout(function(){
                              $btn.button('reset');
                          }, 5000);
                        });
                      </script>
                    </div>
                    <br>
                    <div>复选框：
                      <div class="am-btn-group" data-am-button>
                        <label class="am-btn am-btn-primary">
                          <input type="checkbox" name="doc-js-btn" value="苹果"> 苹果
                        </label>
                        <label class="am-btn am-btn-primary">
                          <input type="checkbox" name="doc-js-btn" value="橘子"> 橘子
                        </label>
                        <label class="am-btn am-btn-primary">
                          <input type="checkbox" name="doc-js-btn" value="香蕉"> 香蕉
                        </label>
                      </div>
                      <script>
                        $(function() {
                          var $cb = $('[name="doc-js-btn"]');
                          $cb.on('change', function() {
                            var checked = [];
                            $cb.filter(':checked').each(function() {
                              checked.push(this.value);
                            });

                            console.log('复选框选中的是：', checked.join(' | '));
                          });
                        });
                      </script>
                    </div>
                    <br>
                    <div>单选框：
                      <div class="am-btn-group doc-js-btn-1" data-am-button>
                        <label class="am-btn am-btn-primary">
                          <input type="radio" name="options" value="选项 1" id="option1"> 选项 1
                        </label>
                        <label class="am-btn am-btn-primary">
                          <input type="radio" name="options" value="选项 2" id="option2"> 选项 2
                        </label>
                        <label class="am-btn am-btn-primary">
                          <input type="radio" name="options" value="选项 3" id="option3"> 选项 3
                        </label>
                        <label class="am-btn am-btn-primary am-disabled">
                          <input type="radio" name="options" value="选项 4" id="option4"> 选项 4
                        </label>
                      </div>
                      <script>
                        // 获取选中的值
                        $(function() {
                          var $radios = $('[name="options"]');
                          $radios.on('change',function() {
                            console.log('单选框当前选中的是：', $radios.filter(':checked').val());
                          });
                        });
                      </script>
                    </div>
                  </div>
                </div>
                <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="am-icon-remove"></i>删除</a> <span class="drag label"><i class="am-icon-arrows"></i> 拖动</span>
                  <span class="configuration">
                    <button type="button" class="am-btn am-btn-xs am-radius" data-am-modal="{target: '#editorModal'}" id="#editbtn">
                    编辑
                    </button>
                  </span>
                  <div class="preview">折叠面板</div>
                  <div class="view">
                    <div>折叠面板：
                      <div class="am-panel-group" id="accordion">
                        <div class="am-panel am-panel-default">
                          <div class="am-panel-hd">
                            <h4 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#panel1'}">
                              面板1
                            </h4>
                          </div>
                          <div id="panel1" class="am-panel-collapse am-collapse am-in">
                            <div class="am-panel-bd">
                              面板内容
                            </div>
                          </div>
                        </div>
                        <div class="am-panel am-panel-default">
                          <div class="am-panel-hd">
                            <h4 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#panel2'}">
                              面板2
                            </h4>
                          </div>
                          <div id="panel2" class="am-panel-collapse am-collapse">
                            <div class="am-panel-bd">
                              面板内容
                            </div>
                          </div>
                        </div>
                        <div class="am-panel am-panel-default">
                          <div class="am-panel-hd">
                            <h4 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#panel3'}">面板3</h4>
                          </div>
                          <div id="panel3" class="am-panel-collapse am-collapse">
                            <div class="am-panel-bd">
                              面板内容
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <br>
                    <div>折叠菜单：
                      <button class="am-btn am-btn-primary" data-am-collapse="{target: '#collapse-nav'}">Menu <i class="am-icon-bars"></i></button>
                      <nav>
                        <ul id="collapse-nav" class="am-nav am-collapse">
                          <li><a href="">开始使用</a></li>
                          <li><a href="">CSS 介绍</a></li>
                          <li class="am-active"><a href="">JS 介绍</a></li>
                          <li><a href="">功能定制</a></li>
                        </ul>
                      </nav>
                    </div>
                  </div>
                </div>
                <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i class="am-icon-remove"></i>删除</a> <span class="drag label"><i class="am-icon-arrows"></i> 拖动</span>
                  <div class="preview">遮罩窗体</div>
                  <div class="view">
                    <!-- Button to trigger modal -->
                    <a id="myModalLink" href="#myModalContainer" class="am-btn am-btn-primary" data-toggle="modal" contenteditable="true">触发遮罩窗体</a>
                    <!-- Modal -->
                    <div class="am-modal" id="myModalContainer">
                      <div class="am-modal-dialog">
                        <div class="am-modal-hd"> <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
                        <h3 id="myModalLabel" contenteditable="true">标题栏</h3>
                        </div>
                        <div class="am-modal-bd">
                          <p contenteditable="true">显示信息</p>
                        </div>
                        <div class="am-modal-footer">
                          <span class="am-modal-btn" contenteditable="true" data-am-modal-close>关闭</span>
                          <span class="am-modal-btn" contenteditable="true" data-am-modal-confirm>保存设置</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--demo-->
      <div class="demo ui-sortable">
        <div class="lyrow">
        </div>
      </div>
      <!-- end demo -->
      <div id="download-layout">
        <div class="container-fluid"></div>
      </div>
    </div>
    <!--end row-->
  </div>
  <!--end container-->
  <div class="am-modal" id="editorModal">
    <div class="am-modal-dialog">
      <div class="am-modal-hd"> <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
        编辑
      </div>
      <div class="am-modal-bd">
        <p>
          <textarea id="contenteditor"></textarea>
        </p>
      </div>
      <div class="am-modal-footer">
        <a id="savecontent" class="am-btn am-btn-primary" data-am-modal-close>保存</a>
        <a class="am-btn am-btn-primary" data-am-modal-close>关闭</a>
      </div>
    </div>
  </div>
  <div class="am-modal" id="downloadModal">
    <div class="am-modal-dialog">
      <div class="am-modal-hd">
        <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
        下载
      </div>
      <div class="am-modal-bd">
        <p>已在下面生成干净的HTML, 可以复制粘贴代码到你的项目.</p>
        <div class="am-btn-group">
          <button type="button" id="fluidPage" class="am-btn-primary am-btn-active active"><i class="am-icon-expand "></i> 自适应宽度</button>
          <button type="button" class="am-btn-primary" id="fixedPage"><i class="am-icon-compress"></i> 固定宽度</button>
        </div>
        <br>
        <br>
        <p>
          <textarea></textarea>
        </p>
      </div>
      <div class="am-modal-footer">
        <a class="am-modal-btn" data-am-modal-close>关闭</a>
      </div>
    </div>
  </div>
  <div class="am-modal" id="shareModal">
    <div class="am-modal-dialog">
    <div class="am-modal-hd">
      <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
      保存
    </div>
    <div class="am-modal-bd">保存成功</div>
    <div class="am-modal-footer"> <a class="am-modal-btn" data-am-modal-close>关闭</a> </div>
  </div>

</body>
</html>