程序架构

当前位置/ 首页/ 程序架构/ 正文

phpwind9.0门户开发教程(七):DEMO定制你的焦点推荐模块演示


本节将使用“系统编辑方式”制作如下图所示的焦点推荐模块,你可以学会这种方式的流程,以及标签的使用
一:分析结构
    上图主要分为左右两
个模块,左边部分下面称为大图, 右边共需要展示7张图片,其中6张是一样大小,第7张比前6张长
二:如上一节所示,用网页编辑软件打开themes\portal\local\bbs_forumlist_run\template\first_segment.htm,根据上面的分析,写上如下html:
 

<link href="{@G:design.url.css}/style.css" rel="stylesheet" />
<div class="focus_box">
    <h2>首页四格</h2>
    <div class="demo_box">
        <div class="demo_box_left">
            <div class="demo_box_left_image">
                <a href="" title=""><img src="{@G:design.url.images}/demo.jpg" width="360" height="240" alt=""></a>
            </div>
        </div>
        <div class="demo_box_right">
            <div class="demo_right_image">
                <a href="" title=""><img src="{@G:design.url.images}/demo.jpg"  alt="">
                    <div class="demo_image_title">标题1</div>
                </a>
            </div>
            <div class="demo_right_image">
                <a href="" title=""><img src="{@G:design.url.images}/demo.jpg" alt="">
                    <div class="demo_image_title">标题1</div>
                </a>
            </div>
            <div class="demo_right_image">
                <a href="" title=""><img src="{@G:design.url.images}/demo.jpg" alt="">
                    <div class="demo_image_title">标题1</div>
                </a>
            </div>
            <div class="demo_right_image">
                <a href="" title=""><img src="{@G:design.url.images}/demo.jpg" alt="">
                    <div class="demo_image_title">标题1</div>
                </a>
            </div>
            <div class="demo_right_image">
                <a href="" title=""><img src="{@G:design.url.images}/demo.jpg" alt="">
                    <div class="demo_image_title">标题1</div>
                </a>
            </div>
            <div class="demo_right_image">
                <a href="" title=""><img src="{@G:design.url.images}/demo.jpg" alt="">
                    <div class="demo_image_title">标题1</div>
                </a>
            </div>
            <div class="demo_right_image_long">
                <a href="" title=""><img src="{@G:design.url.images}/demo.jpg" alt="">
                    <div class="demo_image_title">标题1</div>
                </a>
            </div>
        </div>
        
    </div>
</div>
<pw-drag id="first_segment"/>
修改bbs_forumlist_run\css\style.css
.focus_box{
    height:300px;
    padding-left:5px;
}

.focus_box h2{
    line-height:36px;
    text-indent: 20px;
}
.demo_box_left{
    width:364px;
    height:264px;
    float:left;
    border:1px solid #E8E8E8;
}

.demo_box_left_image img{
    width:360px;
    height:260px;
    margin:1px;
}
.demo_box_right {
    margin-left:6px;
    float:left;
    width:576px;
}

.demo_right_image {
    width:144px;
    height:135px;
    float:left;
}
.demo_right_image img {
    height:100px;
    width:135px;
}

.demo_image_title {
    line-height:20px;
    background:#A4ABB2;
    width:135px;
    color:#ffffff;
    text-indent:5px;
    overflow: hidden;
}

.demo_right_image_long {
    width:280px;
    height:135px;
    float:left;
}

.demo_right_image_long img {
    height:100px;
    width:280px;
}

.demo_right_image_long .demo_image_title {
    width:280px;
}
复制一张图片,放在bbs_forumlist_run\images\demo.jpg  命名为demo.jpg

刷新后看效果~~~~~~~

三:上面看到的效果还是静态的htm样式,下面讲解如何把静态htm转为调用phpwind的数据

pw9.0门户开发教程(四):标签的使用讲解的一样,在需要循环的区域,加上<pw-list></pw-list>,标题的部分,加上<pw-title></pw-title>
<link href="{@G:design.url.css}/style.css" rel="stylesheet" />
<div class="focus_box">
    <pw-title><h2>首页四格</h2></pw-title>
    <div class="demo_box">
        <div class="demo_box_left">
        <pw-list>  
            <div class="demo_box_left_image">
             <a href="" title=""><img src="{@G:design.url.images}/demo.jpg"  alt=""></a>
            </div>
      </pw-list> //这一行虽然不循环,但是用户需要对这一张图片进行数据调用
        </div>
        <div class="demo_box_right">
           <pw-list>
            <div class="demo_right_image">
                <a href="" title=""><img src="{@G:design.url.images}/demo.jpg"  alt="">
                    <div class="demo_image_title">标题1</div>
                </a>
            </div>
            <div class="demo_right_image">
                <a href="" title=""><img src="{@G:design.url.images}/demo.jpg" alt="">
                    <div class="demo_image_title">标题1</div>
                </a>
            </div>
            <div class="demo_right_image">
                <a href="" title=""><img src="{@G:design.url.images}/demo.jpg" alt="">
                    <div class="demo_image_title">标题1</div>
                </a>
            </div>
            <div class="demo_right_image">
                <a href="" title=""><img src="{@G:design.url.images}/demo.jpg" alt="">
                    <div class="demo_image_title">标题1</div>
                </a>
            </div>
            <div class="demo_right_image">
                <a href="" title=""><img src="{@G:design.url.images}/demo.jpg" alt="">
                    <div class="demo_image_title">标题1</div>
                </a>
            </div>
            <div class="demo_right_image">
                <a href="" title=""><img src="{@G:design.url.images}/demo.jpg" alt="">
                    <div class="demo_image_title">标题1</div>
                </a>
            </div>
            <div class="demo_right_image_long">
                <a href="" title=""><img src="{@G:design.url.images}/demo.jpg" alt="">
                    <div class="demo_image_title">标题1</div>
                </a>
            </div>
           </pw-list>
        </div>
        
    </div>
</div>
<pw-drag id="first_segment"/>

再一次刷新,是不是可以编辑了?

四:修改数据调用
在“结构编辑”弹窗里,用户可以修改“首页四格”为任何想要的文件,不需要就直接留空,如下图 (如果你的模版用于分享,其它用户是不是非常方便?在实际开发中,建议标题区加上可编辑的<pw-title></pw-title>标签)

图片:5555555555.JPG

在“模块编辑”的弹窗里,点击“模版”,可以看到被<pw-list></pw-list>包裹的区域代码全在里面了,
先看左边大图模块:
1)左边大图虽然只有一张,但在模块里,认为是循环了一次,在代码的首尾分别加上循环标签<for:></for>(每一个可编辑的模块都必须有<for:></for>标签,否则不提交会提示不合法~~~~~)

图片:9999999999.JPG

2)把代码中的href部分和src,title和alt里,跟据你的需要修改为右侧的数据标签

图片:0000.JPG


3)提交后在弹窗的"属性"中可以指定你想要调用的条数,以及查询条件,以满足运营过程中的各种需求
如上的例子,在“帖子”数据模型中,可需要设置查询条件为“图片”选“是”,“显示条数”为"1"
右边小图模块:
1)在代码的首尾分别加上循环标签<for:></for>
2)删除重复的代码,注意,最后一张图片比其它几张长,不相同,请保留
3)添加判断:右侧区域中,7张图片有6张是大小一致的,第7张不一样,需要对<for:></for>的循环次数进行判断。
在“模版”弹窗中,下拉右侧区域的滚动条,可以看到判断标签的解释:

图片:666655.JPG


现在我们需要添加的是指定数字行<if:正整数>...</if>条件判断:否则<else:>两个
在<for:></for>中,第一条的计数是以“0”开始的,所以在实际使用中,要使用条数减一来判断当前条数
如前面的例子,第7条这么判断<if:6><else:></if>

4)加入数据调用标签
把代码中的url部分和img,标题部分,跟据你的需要修改为右侧的数据标签

图片:8888.JPG


注意,上面的代码中,为了判断的方便,把第7张图片的代码放在前面了,小图片的放在了<else:>的后面~~

5)数据模型修改与调用条件设置
    提交后在弹窗的"属性"中(帖子数据模型),可需要设置查询条件为“图片”选“是”,“显示条数”为"7"

6)保存当前页面,退出编辑模式,看看效果,~~~~
7)最后,导出模板,分享你的设计~~~~~~zip文件 版块列表首页.zip











 
[妖巫哥哥于2013-01-11 11:44编辑了帖子]
  • 图片:7777777.JPG

  • 图片:7777777777.JPG

  • 图片:777777777777.JPG

相关热词搜索:phpwind9.0 门户 开发

分享到:

我要评论

微信订阅

打开微信,点击底部的“通讯录”,点击右上角的 “添加” 搜号码 andk_in 或查找公众号 莎龙 即可。