1. 功能

    提供锚点向导,用户通过点击 Guide 的具体的某个 Step 可以定位到该 Step 对应的锚点。

    用户可以通过 Java 方式或者 JavaScript 方式初始化 Guide 并设置默认选中的 Step,并通过 JavaScript 新增,查找和删除某个锚点。

  2. 参数

    参数名 参数类型 是否必须 默认值 描述
    name java.lang.String 元素 id 和 name 属性的值
    steps java.lang.Object Step 的数据来源
    default java.lang.String Step 的显示名称,在初始化时对应的 Step 会默认选中。
    switchAction java.lang.String 点击 Guide 进行切换的时候触发的事件
  3. 调用 API

    方法 $.guide.get(id)
    说明 用于获取 Guide 组件的对象
    参数 id 为组件的 id
    方法 $.guide.get(id).getSteps()
    说明 获取 Guide 的所有 Step,返回 JSON 对象数组,其中对象的属性有 anchor、text。
    参数
    方法 $.guide.get(id).getActiveStep()
    说明 获取 Guide 处于激活状态的 Step,返回 JSON 对象,其中对象的属性有 anchor、text。
    参数
    方法 $.guide.get(id).getStepByIndex(index)
    说明 根据 Step 位置,获取对应的 Step
    参数 index Step 的位置,下标从 0 开始,如第一个 Step 的 index 为 0
    方法 $.guide.get(id).initSteps(steps)
    说明 初始化 Guide
    参数 steps Step 的 JSON 对象数组,其中对象的属性有 anchor、text
    方法 $.guide.get(id).addStep(text,anchor,index)
    说明 添加 Step 到指定的位置,若 text 已经存在,则该 Step 视为更新
    参数 text 显示名称
    anchor 锚点 url
    index Step 对应的位置,下标从 0 开始,如添加到第一步则 index 等于 0
    方法 $.guide.get(id).removeStep(text)
    说明 删除指定位置的 Step
    参数 text Step 的显示名称
    方法 $.guide.get(id).setActiveStep(text)
    说明 设置某一 Step 为激活状态,并会触发点击事件
    参数 text Step 的显示名称
    方法 $.guide.get(name).indexOf(text)
    说明 获取某个 Step 的位置
    参数 text Step 对应的显示名称,返回值为整数,如 Step 是第一步则返回 0、第二步返回1,以此类推,没有该步骤则返回 -1。
  4. 示例

    1. HTML 代码

      <span jwcid="@Guide" id="myGuideId" name="myGuideName" steps="ognl:page.getGuideSteps()" default="第1步"/>
      <span jwcid="@Guide" id="yourGuideId" name="yourGuideName"/>
      
    2. JavaScript 代码

      $.guide.get("myGuideName").addStep('第N步', '#00N', 3);
      $.guide.get("myGuideName").removeStep('第N步');
      var steps = eval("([{text:'第1步', anchor:'#001'},{text:'第2步', anchor:'#002'}])");
      $.guide.get("yourGuideName").initSteps(steps);
      $.guide.get("yourGuideName").setActiveStep('第1步');
      
    3. Java 代码

      public IDataset getGuideSteps() {
      	IDataset set = new DatasetList();
      	set.add("{text:'第1步', anchor:'#001'}");
      	set.add("{text:'第2步', anchor:'#002'}");
      	set.add("{text:'第3步', anchor:'#003'}");
      	set.add("{text:'第4步', anchor:'#004'}");
      	set.add("{text:'第5步', anchor:'#005'}");
      	set.add("{text:'第6步', anchor:'#006'}");
      	set.add("{text:'第7步', anchor:'#007'}");
      	return set;
      }