当前位置: 首页 > 工具软件 > Webix > 使用案例 >

Webix学习之template

夹谷烨赫
2023-12-01

Webix的语法类似于Jquery,下面列举template三种用法。

第一种:简单的模板

webix.ui({

   view:"template",        <!--view 类似于input中的type, 而且webix.ui里面的json格式的数据,即是 name:value 这种格式-->

  

  template:"你可以写上你想写的内容"

    

})

第二种:外部的模板

方式一:

<div id="myDiv">这里可加上你想表达的东西<div>

webix.ui({

view:"template",

content:"myDiv"              <!-- content对应的模板必须是可见的 -->

})

方式二:

<!DOCTYPE html>
<html>
  <head>
    <title>加载HTML模板</title>
    <meta  charset="UTF-8">
    <script src="../../../codebase/webix.js"></script>      
    <script src="../../common/testdata.js"></script>
    <link rel="stylesheet"  href="../../codebase/webix.css">
    <link rel="stylesheet"  href="dataview_styles.css">

  </head>
  
  <body >
   <div id="hangge" style="width:1650px;margin:20px;background-color:red "></div>
   <div id="hangge1" style="margin-left:20px;display:none">      


    <div class='overall' >       <!-- class这里为单引号,#a#取a的值 -->
            <div class='rank'>#votes#</div>
            <div class='title'>#title#</div>
            <div class='year'>#rank#</div>
         
        </div>
    </div>
   
  <script type="text/javascript">
  
  webix.ui({
 
 container:"hangge",
 view:"dataview",
 css:"movies",
 type:{
 width:260,
 height:90
 
 }, 
 select:true,
 yCount:4,
 template:"html->hangge1",         /* 从模板加载内容,template:"html->id" */
 data:big_film_set
  }); 
  

 类似资料: