分类： 站长笔记

适用于无序的内容，当调用ID无序的内容时，可以使用。

js部分

<script>
window.onload=function(){
  var title=document.getElementById('tab_title');
  var li_title = title.getElementsByTagName('li');
   for(var i = 0; i<li_title.length; i++){
        if(i == 0) li_title[i].className = 'menu_con on';
        else li_title[i].className = 'menu_con';
    }
  var con=document.getElementById('tab_con');
  var li_con = con.getElementsByTagName('li');
   for(var j = 0; j<li_con.length; j++){
        if(j == 0) li_con[j].style.display = 'block';
        else li_con[j].style.display = 'none';
    }
}
function tab_on(id){
  var title=document.getElementById('tab_title');
  var li_title = title.getElementsByTagName('li');
   for(var i = 0; i<li_title.length; i++){
        if(li_title[i].id == id) li_title[i].className = 'menu_con on';
        else li_title[i].className = 'menu_con';
    }
}
function tab(id,n){
  tab_on(id);
  var con=document.getElementById('tab_con');
  var li_con = con.getElementsByTagName('li');
   for(var i = 0; i<li_con.length; i++){
        if(li_con[i].id == 'con_'+n) li_con[i].style.display = 'block';
        else li_con[i].style.display = 'none';
    }
}
</script>

html部分

<ul id="tab_title">
    <li class="menu_con" id="title_18" onclick="tab('title_18','18')"><a class="menu_a"><span>电商客服</span></a></li>
    <li class="menu_con" id="title_26" onclick="tab('title_26','26')"><a class="menu_a"><span>测试技术员</span></a></li>
    <li class="menu_con" id="title_28" onclick="tab('title_28','28')"><a class="menu_a"><span>结构工程师</span></a></li>
</ul>
<ul id="tab_con">
    <li style="display:none;" id="con_18"><div class="video_list_right_title">电商客服</div></li>
    <li style="display:none;" id="con_26"><div class="video_list_right_title">测试技术员</div></li>
    <li style="display:none;" id="con_28"><div class="video_list_right_title">结构工程师</div></li>
</ul>

找到文件/Public/common/root.jtbc

<?xml version="1.0" encoding="utf-8"?>
<xml mode="jtbc" author="jetiben">
  <configure>
    <node>item</node>
    <field>name,zh-cn</field>
    <base>item_list</base>
  </configure>
  <item_list>
    <item>
      <name><![CDATA[version]]></name>
      <zh-cn><![CDATA[5000]]></zh-cn>
    </item>
    <item>
      <name><![CDATA[status]]></name>
      <zh-cn><![CDATA[ok]]></zh-cn>
    </item>
    <item>
      <name><![CDATA[upgraded_at]]></name>
      <zh-cn><![CDATA[0]]></zh-cn>
    </item>
    <item>
      <name><![CDATA[downgraded_at]]></name>
      <zh-cn><![CDATA[0]]></zh-cn>
    </item>
    <item>
      <name><![CDATA[website]]></name>
      <zh-cn><![CDATA[https://www.jtbc.cn/]]></zh-cn>
    </item>
  </item_list>
</xml>

其中

<item> <name><![CDATA[version]]></name> <zh-cn><![CDATA[5000]]></zh-cn> </item>

中的5000是版本5.0.0.0

可以手动修改版本号来避免后续升级

字段注释是一个JSON字符串并含有以下信息：

上述表格中的mode参数，当值为auto时，表示为自动字段(如自增字段)，任何校验和设置值均无效，当值为manual时，表示为手动字段

来源：https://help.jtbc.cn/php/5.0/#model/automatic.xml

先use Jtbc\Model\TinyModel;

再实例化TinyModel类

$model = new TinyModel();//缺省设置下默认为当前模块对应的数据库表//
// $model = new TinyModel('news');//直接指定一个名叫news的数据库表//
// $model = new TinyModel(new Module('universal/link'));//指定一个模块，再通过模块获取对应的数据库表//
// $model = new TinyModel(new Module('universal/tag'), 'map');//指定一个模块，再通过指定第2个子表名称来获取对应的数据库表//
// $model = new TinyModel(DBLink: 'default', genre: 'news');//通过具名参数的设置来获取对应的数据库表//

参考：https://help.jtbc.cn/php/5.0/#model/concept.xml

后记：

JTBC5.0后台云端市场已出多分类模块，有需要的可以前云安装使用，本文不再提供修改方法。

分类字段注释修改

{"type":"transfer","locked":true}

后台代码修改

/Public/news/common/diplomat/manage.php

$item -> category_title = $category -> getTitleById($item -> category);

修改成

$item -> category_title = $category -> getTitleById(json_decode($item -> category,true)[0]);

另后台分类筛选也要修改

if ($this -> guard -> role -> isSuper !== true)
{
if (!empty($myCurrentCategory))
{
$model -> where -> category -> in($myCurrentCategory);
}
else if (!empty($myCategory))
{
$model -> where -> category -> in($myCategory);
}
}

目前尚未修改，后续需要时再调整

另前台需同步修改代码

来源：https://www.jb51.net/article/202249.htm

本文实例为大家分享了JS实现拖拽功能的具体代码，供大家参考，具体内容如下

拖拽的原理：三个事件 onmousedown、onmousemove、onmousemove

1、鼠标按下，触发onmousedown，获取鼠标坐标x,y，获取元素坐标x,y

通过event.clientX、event.clientY获取鼠标位置的坐标

let x = e.clientX - box.offsetLeft; //鼠标点击坐标距离盒子左边缘的距离
let y = e.clientY - box.offsetTop; //鼠标点击坐标距离盒子上边缘的距离

2、设置元素left、top值，（元素要设置position:absolute）

box.style.left = ev.clientX - x + 'px';
box.style.top = ev.clientY - y + 'px';

3、放开鼠标取消dom事件

下面是详细代码：我只开了横向移动

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 #box {
 width: 100px;
 height: 100px;
 background: red;
 position: absolute
 }
 </style>
</head>
 
<body style="position: relative;overflow: hidden;">
 <div id="box">
 </div>
 <script>
 window.onload = function () {
 let box = document.getElementById('box')
 box.onmousedown = function (ev) {
 let e = ev || event;
 let x = e.clientX - box.offsetLeft; //鼠标点击坐标距离盒子左边缘的距离
 let y = e.clientY - box.offsetTop; //鼠标点击坐标距离盒子上边缘的距离
 document.onmousemove = function (ev) {
  let e = ev || event;
  box.style.left = ev.clientX - x + 'px';
  box.style.top = ev.clientY - y + 'px';
  let bodyScreenX = ev.screenX
  let bodyClientWidth = document.body.clientWidth
  document.onmouseup = function (ev) {
  if (ev.clientX - x < 0) {
  box.style.left = 0
  } else if (bodyScreenX > bodyClientWidth) {
  box.style.right = 0
  box.style.left = bodyClientWidth - 100 + 'px'
  }
  document.onmousemove = null;
  document.onmouseup = null;
  }
 }
 }
 }
 </script>
</body>
</html>

$sql= " order by instr('," . $Ids . ",',concat(','," . $Prefix . "id,','))";

其中$Ids为id字符串,用英文逗号隔开,例如: $Ids='3,2,1,6';

其中" . $Prefix . "id 为ID字段,$Prefix是字段前缀,例如ID字段可以是n_id这样.

根据实际情况替换即可.

JTBC5.0中,上传图片功能,在已经上传过图片后,再次重新传当前文件时,无法继续上传,需要刷新页面后才能重新上传当前文件.

官方回复说是:

那是你选了一样的文件
上传监测的是onchange
是上传1个文件，又选一样的文件就是没有change

记录以作后续参考.

{$=$render('universal:render.categorytitle', $fetch(['genre' => 'universal/category', 'where' => ['genre' => '{$>this.genre}', 'id' => intval($req -> get('category')) ]]))}