WorkShop--EC-127 Component: Hero Tabs

最新推荐文章于 2023-04-05 12:30:00 发布

Maxwell_wenjie

最新推荐文章于 2023-04-05 12:30:00 发布

阅读量585

点赞数

分类专栏： AEM

本文链接：https://blog.csdn.net/qq_36804140/article/details/87275440

版权

AEM 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

页面效果
在这里插入图片描述

Dialog结构

RTE在multifield中不回显？

granite/ui/components/coral/foundation/form/multifield	使用touch UI 的multifield
properties[‘hero_tab/item’+i+’/hero_tab_title’]	存储方式发生改变，会以节点形式存储

在这里插入图片描述
logic.js----------- HTL JavaScript Use-API
在use-api中可以在JS里直接调用properties和page,Node等对象

use(function () {
    var hero_tabs = "{ \"hero_tabs\": [";   //构建JSON hero_tabs 字符串
    var i=0;         //标记properties 下有几个item节点

    while(!!properties['hero_tab/item'+i+'/hero_tab_title']){	
		var tab;      //创建tab对象
        tab = {
            title : properties['hero_tab/item'+i+'/hero_tab_title'],
            btn : properties['hero_tab/item'+i+'/hero_tab_btn'],
            pic : properties['hero_tab/item'+i+'/hero_tab_pic'],
            text : properties['hero_tab/item'+i+'/text']
        }

        var str='{ ';               //手动构建JSON字符串，以JSON字符串格式
        for (var key in tab) {
            str+="\""+key+"\""+":"; 
		  	str+="\""+tab[key]+"\""+","; 
        }
        str=str.substring(0,str.length-1);  //把最后一个，去掉
        hero_tabs+=str+' },';
        i++;

    } 
	hero_tabs=hero_tabs.substring(0,hero_tabs.length-1);  //把最后一个，去掉
    hero_tabs+="]}"

   // var obj = eval ("(" + hero_tabs + ")");
    return hero_tabs;
});

div data-sly-use.hero_tabs=“logic.js”	获得HTL JavaScript Use-AP的返回值
sly data-sly-call="${clientLib.js @ categories='hero_tab	引入JS和CSS文件

Hero_tabs.html

<div data-sly-use.hero_tabs="logic.js">
    <input type="hidden" id="hero_tabs" value=${hero_tabs} />
</div>

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"/>
<sly data-sly-call="${clientLib.js @ categories='hero_tab'}"></sly>


<section class="hero hero-tabs">
        <div class="container hero-tabs-container">
            <div class="row hero-content-block">
                <div class="col-lg-8 container-wrap">
                    <div class="row">
                        <div class="col-md-12 header-wrap">
                            <div class="text-circle" >
                                <div class="circle-content" id="tab_title">Vision. Execution. Value</div>
                            </div>
                        </div>
                    </div>
                        <div class="row">
                            <div class="col-md-4 tabs-container">
                                <!-- Nav tabs -->
                                <ul class="nav nav-tabs" id="btn" role="tablist">
									<!---Hero_tab Button is add here-->
                                </ul>
                            </div>
                            <div class="col-md-8 content-container">
                                <!-- Tab panes -->
                                <div class="tab-content">
                                        <div class="tab-pane fade active in" id="digitalexperience" role="tabpanel" aria-expanded="true">
                                             <img id="tab_pic" src="/content/dam/PeficientDigit/home-brand-hunter-douglas.jpg" class="hero-bg" alt="Hunter Douglas">                                                
                                             <a href="http://www.baidu.com" class="btn-float">Hunter Douglas Success Story</a>                               
                                             <div class="pane-content">
                                                  <p id="tabs_text"><b>It's never been more essential for you to optimize business processes. </b>As you face ever-changing requirements and financial pressures and deal with fragmented, sub-optimized and non-integrated systems, now is the time. We can help you to reduce drains on productivity and improve your ability to rapidly respond and adapt to changing markets, customers, and partners.&nbsp;We’ll help you to improve processes and&nbsp;</p>
                                             </div>
                                        </div>
                                </div>
                            </div>
                        </div>
                        <!-- row -->
                </div>
            </div>
        </div>
    </section>

hero_tabs.js

	var hero_tabs=""+document.getElementById("hero_tabs").value;
	hero_tabs = hero_tabs.replace(/[\r\n]/g,"");  //正则去掉字符串中的换行，JSON字符串中不能有换行
	var tab_obj = eval ("(" + hero_tabs + ")");   

	function change_pic(this_obj) {      //根据参数切换图片和文字
		var selected = document.getElementsByClassName("nav-link active");
        if(selected!=null){
			document.getElementsByClassName("nav-link active")[0].setAttribute("class","nav-link");;
        } //找到之前被选中的btn,设置成未选中，并且把当前btn选中

		this_obj.setAttribute("class","nav-link active");

		var str = this_obj.id;
        var num = str.substring(str.length-1);//获得当前btn编号
        console.log(num);

        var title =  document.getElementById('tab_title');
		title.innerHTML = tab_obj.hero_tabs[num].title;

        var pic = document.getElementById('tab_pic');
        pic.setAttribute("src", tab_obj.hero_tabs[num].pic);
        console.log(tab_obj.hero_tabs[num].pic);

		var text = document.getElementById('tabs_text');
        text.innerHTML = tab_obj.hero_tabs[num].text;
    }

    $(document).ready(function(){  //一开始先把按钮遍历出来，设置编号，样式，添加到指定位置
            var ul_btn = document.getElementById('btn');
                 
            for(var i=0;i<tab_obj.hero_tabs.length;i++){
               var li_tab = document.createElement('li'),
                    a_tab = document.createElement('a');
                li_tab.setAttribute("data-id",i );
                li_tab.setAttribute("class" ,"nav-item");
                a_tab.append(""+tab_obj.hero_tabs[i].btn);

                if(i==0){
					a_tab.setAttribute("class" ,"nav-link active");
                }else{
					a_tab.setAttribute("class" ,"nav-link");
                }

                a_tab.setAttribute("onclick","change_pic(this)");
                a_tab.setAttribute("id",'tab'+i);
                li_tab.appendChild(a_tab);
                ul_btn.appendChild(li_tab); 
            }
        })

logic.js HTL-use-api	从节点中取得Dialog输入的值
hero_tabs.html	先调用logic.js 取得返回值，隐藏起来
hero_tabs.js	取html中的隐藏元素，得到Dialog的值。1.先将btn在页面遍历出来，添加编号。2.通过编号修改页面的DOM

Tips:
1.json格式中不能有换行，先用正则去掉换行。
2.如果在RTE中加入超链接，json会错，因为超链接中有" "会破坏JSON格式。
3.还是要尝试用java来写后台。