ovsexia-jqdriver
/
render.html

<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="#"/>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script src="https://cdn.staticfile.org/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="src/jqdriver.js"></script>
<link rel="stylesheet" type="text/css" href="style/layout.css" />
<link rel="stylesheet" type="text/css" href="style/xui.css" />
<title>Render 案例</title>
<style>
.case1_li {height:100px; background-repeat:no-repeat; background-size:auto 100%;}
.case2_li {font-size:15px;}
</style>
</head>

<body>

<div style="padding:20px;">
  <!-------------demo1------------->
  <div id="case1">
    <h2>jdBind="StyleBackground-image::picimg"</h2>
    <ul>
      <li class="case1_li" style="background-image: url('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')" jdBind="StyleBackground-image::picimg"></li>
    </ul>
    <button class="xbutton" onclick="case1()">修改CSS样式</button>
    <h2>PS:</h2>
    <h2>1. Style 首字母要大写！</h2>
    <h2>2. background / background-image 比较特殊，最终都会解析成 background-image，而且不用自己写 url() 包裹</h2>
  </div>
  <script>
  function case1()
  {
    jd.render(demodata, '#case1 ul', '.case1_li');
  }
  </script>
  <!-------------demo1------------->

  <div jdL="2" jdLtb="30" jdLcolor="#08c"></div>

  <!-------------demo2------------->
  <div id="case2">
    <h2>jdBind="StyleBackground-image::picimg"</h2>
    <ul>
      <li class="case1_li" style="background-image: url('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')" jdBind="RemoveStyleBackground-image"></li>
    </ul>
    <button class="xbutton" onclick="case2()">移除style样式</button>
  </div>
  <script>
  function case2()
  {
    jd.render(demodata, '#case2 ul', '.case1_li');
  }
  </script>
  <!-------------demo2------------->

  <div jdL="2" jdLtb="30" jdLcolor="#08c"></div>

  <!-------------demo3------------->
  <div id="case3">
    <h2>jdBind="text::{标题: }subject"</h2>
    <ul>
      <li class="case2_li" jdBind="text::{标题: }subject">标题: 百度</li>
    </ul>
    <button class="xbutton" onclick="case3()">（加上前缀）修改标题</button>
  </div>
  <script>
  function case3()
  {
    jd.render(demodata, '#case3 ul', '.case2_li');
  }
  </script>
  <!-------------demo3------------->

  <div jdL="2" jdLtb="30" jdLcolor="#08c"></div>

  <!-------------demo4------------->
  <div id="case4">
    <h2>jdBind="data-id::id||text::subject"</h2>
    <ul>
      <li class="case2_li" data-id="1" jdBind="data-id::id||text::subject">百度</li>
    </ul>
    <button class="xbutton" onclick="case4()">绑定多个</button>
  </div>
  <script>
  function case4()
  {
    jd.render(demodata, '#case4 ul', '.case2_li');
  }
  </script>
  <!-------------demo4------------->

  <div jdL="2" jdLtb="30" jdLcolor="#08c"></div>

  <!-------------demo5------------->
  <div id="case5">
    <h2>jdBind="addClass::theclass||addClass::{theclass_}id"</h2>
    <ul>
      <li class="case2_li" jdBind="addClass::theclass||addClass::{theclass_}id">百度</li>
    </ul>
    <button class="xbutton" onclick="case5()">新增 class</button>
  </div>
  <script>
  function case5()
  {
    jd.render(demodata, '#case5 ul', '.case2_li');
  }
  </script>
  <!-------------demo5------------->

  <div jdL="2" jdLtb="30" jdLcolor="#08c"></div>

  <!-------------demo6------------->
  <div id="case6">
    <h2>jdBind="removeClass::theclass"</h2>
    <ul>
      <li class="case2_li theclass" jdBind="removeClass::theclass">百度</li>
    </ul>
    <button class="xbutton" onclick="case6()">移除 class</button>
  </div>
  <script>
  function case6()
  {
    jd.render(demodata, '#case6 ul', '.case2_li');
  }
  </script>
  <!-------------demo6------------->

  <div jdL="2" jdLtb="30" jdLcolor="#08c"></div>

  <!-------------demo7------------->
  <div id="case7">
    <h2>jdBind="setClass::theclass"</h2>
    <ul>
      <li class="case2_li theclass" jdBind="setClass::{theclass_}id">百度</li>
    </ul>
    <button class="xbutton" onclick="case7()">设置 class</button>
  </div>
  <script>
  function case7()
  {
    jd.render(demodata, '#case7 ul', '.case2_li');
  }
  </script>
  <!-------------demo7------------->
</div>

<script type="text/javascript">
const jd = $('body').jqdriver();

//模拟数据
const demodata = [
  {id: 2, subject: '淘宝', check:true, picimg: 'https://gw.alicdn.com/imgextra/i3/O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png'},
  {id: 3, subject: '拼多多', check:false, picimg: 'https://cdn.pinduoduo.com/upload/home/img/common/pdd_logo_v2.png'},
]
</script>

</body>
</html>