html模板區塊標準定義格式 · 明月3.0問題集

##導航規范導航是一種模塊與組件相重疊的結構 >模塊結構 ~~~ <nav id=”h5c_m_隨機數” class=”h5c-name-隨機數” data-type=”navigate” style=”position:relative;”> <div class=”container”> </div> </nav> ~~~ >組件結構 ~~~ <div class="collapse navbar-collapse" id="h5c_navigate" > <ul class="nav navbar-nav navbar-right h5c-navbar-hover h5c-navbar-bgcolor text-center" style="margin: 20px 0;"> <li class="h5c-navbar-active"><a href="#" style=""><span class="h5c-navbar-text">首頁</span></a></li> <li><a href="#">產品</a></li> <li><a href="#">新聞</a></li> <li><a href="#">聯系我們</a></li> <li><div class="dropdown"> <a type="button" class="btn dropdown-toggle" data-toggle="dropdown">關于我們 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li> <a href="#">公司簡介</a> </li> <li> <a href="#">團隊簡介</a> </li> <li> <a href="#">員工簡介</a> </li> <li> <a href="#">公司環境</a> </li> </ul> </div> </li> </ul> </div> ~~~ ##banner部分 >模塊結構 ~~~ <div id="h5c_m_隨機數" class="h5c-name-隨機數" style="position:relative"></div> ~~~ >組件定義 ~~~ <div id="h5c_name_隨機數" data-type="solideBanner" banner-effect="e-default" class="carousel slide e-default" data-interval="500000"> <link rel="stylesheet" type="text/css" href="/diy/asyn.file/jsb/module/css/bannerEffect.css"> <ol class="carousel-indicators"> <li data-target="#h5c_name_隨機數" data-slide-to="0" class="active"></li> <li data-target="#h5c_name_隨機數" data-slide-to="1" class=""></li> <li data-target="#h5c_name_隨機數" data-slide-to="2" class=""></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img class="img-responsive" src="././." onerror="javascript:this.src='././.'" data-holder-rendered="true"> <div class="carousel-caption">其他代碼</div> </div> <div class="item"> <img class="img-responsive" src="././." onerror="javascript:this.src='././.'" data-holder-rendered="true"> <div class="carousel-caption"> 其他代碼</div> </div> <div class="item"> <img class="img-responsive" src="././." onerror="javascript:this.src='././.'" data-holder-rendered="true"> <div class="carousel-caption">其他代碼</div> </div> </div> <a class="left carousel-control" href="#h5c_name_隨機數" role="button" data-slide="prev"></a> <a class="right carousel-control" href="#h5c_name_隨機數" role="button" data-slide="next"></a> </div> ~~~ >組件文字說明（1）data-type="solideBanner"指明，這是一個輪播圖組件；（2）其他代碼處，是可以寫一些自己隨意添加；（3） banner-effect="e-default" 該方式是控制輪播特效的，e-default為默認特效，同時在class中添加e-default；同時還有 disapear（逐漸消失），expand-disapear（變大消失），.hand-organ （手拉風情） ##橫幅橫幅是一種模塊與組件相重疊的結構 >模塊(組件)結構 ~~~ <div id="h5c_m_隨機數" class="h5c_name_隨機數" data-type="banner" style="position:relative;background-image:url('......')"> <div class="container"> 其他代碼 </div> </div> ~~~ >代碼說明（1）其中的img 全部用data-type=“img” 標識，并且添加 onerror 事件。如同產品中的圖片（2）所有的文字都要添加data-effect=“edit” ##圖文 >模塊結構 ~~~ <div id="h5c_m_隨機數" class="h5c-name-隨機數" style="position:relative;"> <div class="container"> .......... </div> <script type="text/javascript" src="/diy/asyn.file/jsb/module/js/imgFontBase.js" onload=imgFontInit(this); onclick=imgFontInit(this);></script> </div> ~~~ 必須引入 js >組件結構（1）data-type="imgFont-group-common" position:relative; // 圖文組件標識（2）data-type="imgFont-row" position:relative; //圖文組件一行的標識（3）data-type="imgFont-row" position:relative; //圖文組件一行的標識（4）data-type="imgFont-el" position:relative; //圖文組件某個圖文的標識（5）圖文組件中圖片的標識 data-type="imgFont-img" 并且添加 onerror 事件 ~~~ <img data-type="imgFont-img" src="././." onerror="javascript:this.src='././.'"> ~~~ ##產品列表 >模塊結構 ~~~ <div id="h5c_m_隨機數" class="h5c-name-隨機數" style="position:relative;"> <div class="container"> .......... </div> <script type="text/javascript" src="/diy/asyn.file/jsb/module/js/productAjax.js" onclick=productAjax(this,32);></script> <script type="text/javascript" src="/diy/asyn.file/jsb/module/js/productBase.js" onclick=productInit(this); onload=productInit(this)></script> </div> ~~~ 必須引入兩段js >組件結構（1）.產品組 data-type="products"（產品組件標識） position：relative； data-num="3"（默認加載幾條） ~~~ 例如：<div style="margin: 0;position:relative;" data-type="products" data-num="3"></div> ~~~ （2）.產品組標題 data-type="products-title" 添加 data-effect=“edit” （3）.產品組描述 data-type="products-desc" 添加 data-effect=“edit” （4）.產品組查看更多添加 products-see-more （5）.產品行 class=“row ” data-type="product-row" （產品行標識） position:relative; data-num="3"（一行有多少個）； ~~~ 例如： <div class="row" data-type="product-row" data-num="3" style="position:relative;"> </div> ~~~ 5.產品 data-type="product" position：relative 6.產品縮略圖 data-type="product-img" 7.產品標題 data-type="product-title" 8.產品描述信息 data-type="product-desc" 9.產品詳情 product-see-more 10.產品所有文字不加data-effect 屬性 ##面板 >代碼定義 ~~~ <div class="col-md-8"> <div class="panel panel-default" id="h5c_jsw_m_about" data-style="default"> <div class="panel-heading"> <span class="fa fa-home"></span> <span class="panel-title-edit">關于我們</span> </div> <div class="panel-body"> ...... </div> </div> </div> ~~~ >DOM結構定義如上面的代碼所示，`.row>col-md-*`這樣的結構定義可使元素通過拖動來實現編輯，因此需保持 `.row>col-md-*>panel`這樣的的結構不能變，`<span class="panel-title-edit">關于我們</span>`這里的結構和class是定義面板的標題部分是否可以編輯的屬性，如果不是如上的結構或是沒有class則面板的標題是不能被編輯的！ data屬性定義 ~~~ data-type="gallery" //按面板的類型進行分類：圖片列表_gallery，圖文混排_word，新聞列表_list data-style="default"//樣式如果panel的class是pnael-default的話，data-style的值就是default ~~~ ##類footer 類footer是一種模塊與組件相重疊的結構 >模塊(組件)結構 ~~~ <div id="h5c_m_隨機數" class="h5c-name-隨機數" data-type="likefooter" style="position:relative;"> <div class="container"> 其他代碼 </div> </div> ~~~ >代碼說明（1）其中的img 全部用data-type=“img” 標識，并且添加 onerror 事件。如同產品中的圖片（2）所有的文字都要添加data-effect=“edit” ##版權模塊 >模塊結構 ~~~ <div id="h5c_m_隨機數" class="h5c-name-隨機數" style="position:relative"></div> ~~~ >版權組件（1）版權組件用data-type="copyright" （2）.版權組件英文部分用data-type="copy-usa" （3）.版權組件中文部分用data-type="copy-china" >代碼示例 ~~~ <p class="text-center" style="font-size:1.8vh;color: #000;padding:24px 10px 44px 10px;margin: 0;" data-type="copyright"><span data-type="copy-usa">Copyright ?2013-2016 h5create.com. All Rights Reserved.</span><span data-type="copy-china" style="">嗨創版權所有</span></p> ~~~ >DOM結構定義暫無強制性要求