有时候想把公共的html封装起来,怎么处理呢?

好多页面都用到,不可能每个页面都写,这样就会有冗余,并且不好统一处理。

那就用js来重构html吧。

代码案例如下:

<footer class="aui-bar aui-bar-tab" id="footer">
<div class="aui-bar-tab-item" tapmode onclick="openWinPro('menu_mall')">
<i class="aui-iconfont aui-icon-home"></i>
<div class="aui-bar-tab-label">云店</div>
</div>
<div class="aui-bar-tab-item aui-active" tapmode>
<i class="aui-iconfont aui-icon-comment"></i>
<div class="aui-bar-tab-label">消息</div>
</div>
<div class="aui-bar-tab-item " tapmode onclick="openWinPro('menu_find')">
<i class="aui-iconfont aui-icon-like"></i>
<div class="aui-bar-tab-label">发现</div>
</div>
<div class="aui-bar-tab-item" tapmode onclick="openWinPro('menu_enterment')">
<i class="aui-iconfont aui-icon-video"></i>
<div class="aui-bar-tab-label">娱乐</div>
</div>
<div class="aui-bar-tab-item" tapmode onclick="openWinPro('menu_mine')">
<i class="aui-iconfont aui-icon-my"></i>
<div class="aui-bar-tab-label">我的</div>
</div>
</footer>

处理成js

function showMainMenu(active_name) {
// var active_name = arguments[0] ? arguments[0] : 'menu_mall'; // 定义默认值
active_name = active_name || 'menu_mall'; // 定义默认值
var footerHtml = '';
footerHtml += '<footer class="aui-bar aui-bar-tab" id="footer">';
if (active_name == 'menu_mall') {
footerHtml += ' <div class="aui-bar-tab-item aui-active" tapmode>';
footerHtml += ' <i class="aui-iconfont aui-icon-home"></i>';
footerHtml += ' <div class="aui-bar-tab-label">云店</div>';
footerHtml += ' </div>';
} else {
footerHtml += ' <div class="aui-bar-tab-item" tapmode onclick="openWinPro(\'menu_mall\')">';
footerHtml += ' <i class="aui-iconfont aui-icon-home"></i>';
footerHtml += ' <div class="aui-bar-tab-label">云店</div>';
footerHtml += ' </div>';
} if (active_name == 'menu_msg') {
footerHtml += ' <div class="aui-bar-tab-item aui-active" tapmode>';
footerHtml += ' <i class="aui-iconfont aui-icon-comment"></i>';
footerHtml += ' <div class="aui-bar-tab-label">消息</div>';
footerHtml += ' </div>';
} else {
footerHtml += ' <div class="aui-bar-tab-item" tapmode onclick="openWinPro(\'menu_msg\')">';
footerHtml += ' <i class="aui-iconfont aui-icon-comment"></i>';
footerHtml += ' <div class="aui-bar-tab-label">消息</div>';
footerHtml += ' </div>';
} if (active_name == 'menu_find') {
footerHtml += ' <div class="aui-bar-tab-item aui-active" tapmode>';
footerHtml += ' <i class="aui-iconfont aui-icon-like"></i>';
footerHtml += ' <div class="aui-bar-tab-label">发现</div>';
footerHtml += ' </div>';
} else {
footerHtml += ' <div class="aui-bar-tab-item" tapmode onclick="openWinPro(\'menu_find\')">';
footerHtml += ' <i class="aui-iconfont aui-icon-like"></i>';
footerHtml += ' <div class="aui-bar-tab-label">发现</div>';
footerHtml += ' </div>';
} if (active_name == 'menu_enterment') {
footerHtml += ' <div class="aui-bar-tab-item aui-active" tapmode >';
footerHtml += ' <i class="aui-iconfont aui-icon-video"></i>';
footerHtml += ' <div class="aui-bar-tab-label">娱乐</div>';
footerHtml += ' </div>';
} else {
footerHtml += ' <div class="aui-bar-tab-item" tapmode onclick="openWinPro(\'menu_enterment\')">';
footerHtml += ' <i class="aui-iconfont aui-icon-video"></i>';
footerHtml += ' <div class="aui-bar-tab-label">娱乐</div>';
footerHtml += ' </div>';
} if (active_name == 'menu_mine') {
footerHtml += ' <div class="aui-bar-tab-item aui-active" tapmode>';
footerHtml += ' <i class="aui-iconfont aui-icon-my"></i>';
footerHtml += ' <div class="aui-bar-tab-label">我的</div>';
footerHtml += ' </div>';
} else {
footerHtml += ' <div class="aui-bar-tab-item" tapmode onclick="openWinPro(\'menu_mine\')">';
footerHtml += ' <i class="aui-iconfont aui-icon-my"></i>';
footerHtml += ' <div class="aui-bar-tab-label">我的</div>';
footerHtml += ' </div>';
} footerHtml += '</footer>';
// $('body').append(footerHtml);
$api.append($api.dom('body'),footerHtml);
}

注意保持间距和美观性,利于后期维护。

调用很简单,用到的页面,直接调用函数showMainMenu()即可。

效果等同于每个页面都写一遍html。

原html中的单引号,加一个下划线处理一下就可以了。

封装html代码块到js函数中的更多相关文章

  1. JAVA之旅(十三)——线程的安全性,synchronized关键字,多线程同步代码块,同步函数,同步函数的锁是this

    JAVA之旅(十三)--线程的安全性,synchronized关键字,多线程同步代码块,同步函数,同步函数的锁是this 我们继续上个篇幅接着讲线程的知识点 一.线程的安全性 当我们开启四个窗口(线程 ...

  2. 在JS函数中执行C#中的函数、字段

    1.调用字段 cs文件的代码: ; protected void Page_Load(object sender, EventArgs e) { id = ; } js页面的代码: function ...

  3. eclipse实现代码块折叠-类似于VS中的#region……#endregion

    背 景 刚才在写代码的时候,写了十几行可以说是重复的代码: 如果整个方法或类中代码多了,感觉它们太TM占地方了,给读者在阅读代码上造成很大的困难,于是想到能不能把他们“浓缩”成一行,脑子里第一个闪现出 ...

  4. js函数中获得当前被点击元素

    问题描述:在html页面中点击<a>或者’按钮‘,进入js中的函数,在js函数中获得被点击那个<a>或‘按钮’元素 解决方法:方法一: html中: <a>标签:& ...

  5. 【玩转Eclipse】——eclipse实现代码块折叠-类似于VS中的#region……#endregion

    [玩转Eclipse]——eclipse实现代码块折叠-类似于VS中的#region……#endregion http://www.cnblogs.com/Micheal-G/articles/507 ...

  6. js函数中this的不同含义

    1.js函数调用过程中,js线程会进入新的执行环境并创建该环境的变量对象,并添加两个变量:this和arguments,因此可以在函数中使用这两个变量.需要注意的是,this变量不能重新赋值,而arg ...

  7. js函数中参数的传递

    数据类型 在 javascript 中数据类型可以分为两类: 基本类型值 primitive type,比如Undefined,Null,Boolean,Number,String. 引用类型值,也就 ...

  8. js函数中的BOM和DOM

    BOM 浏览器对象模型  screen对象 console.log(screen.width);// 屏幕宽度 console.log(screen.height);// 屏幕高度 console.l ...

  9. 构造代码块、this关键字、静态变量、静态代码块、主函数

    一.构造代码块: 作用:给对象进行初始化. 特点:对象一经运行就执行(与变量声明时赋初值同级别,此处注意 非法前向引用) 优先于构造函数的执行. 与构造函数的区别: 构造代码块是给所有对象统一初始化. ...

随机推荐

  1. &lt;转&gt;Openstack ceilometer 宿主机监控模块扩展

    <Openstack ceilometer监控项扩展>( http://eccp.csdb.cn/blog/?p=352 )主要介绍了对虚拟机监控项扩展, 比較简单.怎样在ceilomet ...

  2. linux下创建带password的用户

    一直在做实验室linuxserver的账号管理系统,现阶段是用户申请后我这边收到邮件,然后手动创建,这个略显麻烦,打算全然做成自己主动化的.用户申请后,我直接在管理界面点击批准就可以创建用户,同一时候 ...

  3. BZOJ 2683 简单题 cdq分治+树状数组

    题意:链接 **方法:**cdq分治+树状数组 解析: 首先对于这道题,看了范围之后.二维的数据结构是显然不能过的.于是我们可能会考虑把一维排序之后还有一位上数据结构什么的,然而cdq分治却可以非常好 ...

  4. [数位dp] bzoj 3209 花神的数论题

    题意:中文题. 思路:和普通数位dp一样,这里转换成二进制,然后记录有几个一. 统计的时候乘起来就好了. 代码: #include"cstdlib" #include"c ...

  5. 拥抱PBO(基于项目的组织)聚焦核心价值创造

    近年来.PBO(Project-Based Organizations)作为一种新兴的整合各类专业智力资源和专业知识的组织结构,受到越来越多的关注,第五版PMBOK出现的新词汇.三种组织(职能型.矩阵 ...

  6. thinkphp5的Illegal string offset 'id'错误

    thinkphp5的Illegal string offset 'id'错误 问题 解答 数组同名了,一个html页面传进来两个cateres的数组,所以在找id的时候不知道找这两个里面的哪一个 第一 ...

  7. thinkphp5项目--个人博客(四)

    thinkphp5项目--个人博客(四) 项目地址 fry404006308/personalBlog: personalBloghttps://github.com/fry404006308/per ...

  8. android之软件键盘

    不弹出软件键盘 <activity android:name="PresCompleteActivity"              android:windowSoftIn ...

  9. 一些 <link> 标记分享

    <link rel="alternate" media="handheld" href="#" /> <link rel= ...

  10. Spring mvc 启动 和 请求分发

    Spring mvc 启动 和 请求分发 启动加载: abstract class HttpServletBean extends HttpServlet void init() initServle ...