当前位置:坤哥网-kungge-jQuery Mobile学习笔记(三):工具栏使用

jQuery Mobile学习笔记(三):工具栏使用

2017/11/17 14:49:59 坤哥网阅读(714) 评论(0)



工具栏元素一般位于头部或尾部,头部栏一般包含页面标题或者logo,或者首页或搜索按钮。

尾部栏比头部栏要灵活,在整个页面中它们更具功能性和可变性,因此可以包含尽可能多的按钮。尾部样式与头部不同,没有内边距,如可以使用样式来让元素居中:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../assets/lib/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
    <script src="../assets/lib/jquery/jquery-1.10.2.min.js"></script>
    <script src="../assets/lib/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <title>工具栏</title>
</head>
<body>

    <div data-role="page">
        <!--头部栏-->
        <div data-role="header">
            <!--工具栏元素一般位于头部或尾部,头部栏一般包含页面标题或者logo,或者首页或搜索按钮。-->
            <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a>
            <h1>kungge的博客中心</h1>
            <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">搜索</a>
        </div>


        <div data-role="main" class="ui-content">
            <p>kunge的博客列表,在头部按钮上class添加了"ui-corner-all"和"ui-shadow",使其看起来更美观。</p>
        </div>
        <!--尾部栏-->
        <!--尾部栏比头部栏要灵活,在整个页面中它们更具功能性和可变性,因此可以包含尽可能多的按钮。尾部样式与头部不同,没有内边距,如可以使用样式来让元素居中-->
        <div data-role="footer" style="text-align:center;">
            <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">关于我们</a>
            <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">联系我们</a>
            <br />
            赣ICP备16000944号-1
        </div>
    </div>
</body>
</html>

d0416736-3412-4b9d-b6f2-af92ab02f59c.png


或者可以将按钮水平或垂直组合:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../assets/lib/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
    <script src="../assets/lib/jquery/jquery-1.10.2.min.js"></script>
    <script src="../assets/lib/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <title>工具栏</title>
</head>
<body>

    <div data-role="page">
        <!--头部栏-->
        <div data-role="header">
            <!--工具栏元素一般位于头部或尾部,头部栏一般包含页面标题或者logo,或者首页或搜索按钮。-->
            <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a>
            <h1>kungge的博客中心</h1>
            <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">搜索</a>
        </div>


        <div data-role="main" class="ui-content">
            <p>kunge的博客列表,在头部按钮上class添加了"ui-corner-all"和"ui-shadow",使其看起来更美观。</p>
        </div>
        <!--尾部栏-->
        <!--或者可以将按钮水平或垂直组合-->
        <div data-role="footer" style="text-align:center;">
            <div data-role="controlgroup" data-type="horizontal">
                <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">关于我们</a>
                <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">联系我们</a>
            </div>

            <br />
            赣ICP备16000944号-1
        </div>
    </div>
</body>
</html>

c1a69ebc-4a63-465d-a838-194066bb8091.png


定位头部栏和尾部栏


头部和尾部可以通过三种方式进行定位:

1.inline定位:为默认定位,头部栏和尾部栏与页面内容内联。

2.fixed定位:头部栏和尾部栏固定在页面的顶部和底部。

3.fullscreen定位:与Fixed定位模式基本相同,头部栏和尾部栏固定在页面的顶部和底部。但是当他工具栏滚动出屏幕之外时,不会自动重新显示,除非点击屏幕,这对于图片或视频类有提升代入感的应用是非常有用的。注意这种模式下工具栏会遮住页面内容,所以最好用在比较特殊的场合。


inline定位

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../assets/lib/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
    <script src="../assets/lib/jquery/jquery-1.10.2.min.js"></script>
    <script src="../assets/lib/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <title>工具栏-inline定位</title>
</head>
<body>
    <div data-role="page">     
        <!--Inline定位:为默认定位,头部栏和尾部栏与页面内容内联。-->
        <div data-role="header" data-position="inline">
            <h1>inline头部栏</h1>
        </div>
        <div data-role="main" class="ui-content">
            <p>如果要看到效果,需要调整窗口大小使滚动条可用。</p>
            <p>可滚动的文本,一个本科男找了一个女博士。
情人节,本科男给女博士发了一个520元的红包,附言:我爱你。
稍后,女博士给本科男发了一个5.20元的红包,并附言:我爱你多一点!
本科男感叹道:有文化,真可怕,少花钱,会说话!</p>
            <p>
                聚餐时朋友带了个小孩子出来。因为都是一群女人在聊些八卦话题,对他而言可能稍显无趣,他就在一旁看书。作为常年带娃的人,我决定给他一些关爱。拿手机,打开“海绵宝宝”动画片问他:小朋友,
                知道这是什么吗?他侧过头来瞄一眼,淡定地点点头:知道,那是派大星。我继续逗他:那你知道它是什么动物吗?他瞄了我一眼,然后很认真地暂定动画,研究一番后对我说:通体粉红,有五角,
                而且每只角比较圆,看外形应该是粒皮瘤海星,阿姨你觉得呢?那一刻,我回想起当年和学霸搭档做英语对话演示的屈辱。
                学霸爆了一段类似于梵文咒语的玩意,而这个时候英语老师不住的点头,完全听不懂的我只能装出一幅沉思的样子,
                应一句“I agree with you.”但是今天的我已经不是以前的我了!对于小孩子打脸的行为,爸爸我早有预备。深呼吸一口,换上露八齿的职业笑容,
                充满自信地回他:“孩子不要总看动画片,多吃菜才能长身体,吃什么说给姐姐听,我给你夹”#——————————你知道吗,
                我今天靠搜索才找回这个海星的名字。我搜了好久“里皮刘海星”“力臂遛海星”“泥皮流海星”……
            </p>
            <p>
                看到这个问题,一下子就想起了我的好朋友凸凸(应他要求,决定起个化名)。
                凸凸是个学霸,除了本专业成绩好,涉猎还广泛,是圈里百科全书型的人物,有点类似于TBBT里的霍华德。
                他本来的计划是投身于学术事业,为人类多点亮几支文明火苗,但到了二十六七岁,家里突生变故,不得已放弃了学术梦,决定出来找工作,尽快赚钱。
                没想到找工作并不容易,凸凸过去钻研的学术领域比较冷门,和大热的金融、互联网都沾不上边。投了几十家公司,才收到几家面试机会,最后只有一家给了回应,还得从实习生做起。
                凸凸思来想去,还是决定接受这个offer。其一,这是一家挺有名气的私募公司,如果顺利转正为行业分析师,钱景还不错;其二,自己没有一丝金融背景,有这个机会积累几个月,对找下一份工作终归还是有利的。
                没想到这一去就踩到了坑里。首先,实习工资比承诺得要少很多,一个月还不到3000,也没有社保——这一点凸凸纠结了一天就想通了,先做着吧,就当卧薪尝胆积累经验了。
                其次,说好的实习分析师的岗位也变了,被换岗去做了交易员,每天按照基金经理的指示做一些交易操作——这点不能忍,但老板安抚凸凸说,交易员缺人手,过段时间就能转岗。
                最最坑的是,实习了三四个月,老板始终不提转正,每次去谈,都说已经在流程中了,很快就会考虑。在这三四个月中,凸凸几次提起离职,老板总是苦言劝他留下,指天发誓一定会转正,只是“总公司的编制没批下来”或者“转正会在年前统一考核”。
                为啥老板执著地画着大饼呢?因为凸凸做了多年学术,养成了优化工作流程、提高效率的习惯,还自学过编程,比如,本来交易员每天要写一小时日报,他编了个自动抓取数据的程序,将这一小时的工作缩短成了一秒钟。
                私募公司各种数据统计工作又多又繁琐,他的各种便利小程序太好用了,老板根本不舍得放他走。不放人,也不签合同,就这么吊着。眼看要过年了,凸凸拿着不到3000的月薪,内心很崩溃。
                一直拖到节前,凸凸再去找老板,老板吞吞吐吐地说,今年招聘收紧啦,你还要多锻炼锻炼啦,而且其实我们基本不招没有金融背景的……要么,你去读个金融的硕士?凸凸感觉心里有几百万匹曹尼玛飞奔而过,你是脑残吗?
                如果是这种理由一开始就可以讲了好伐?为什么不早说?但他没哭没闹,花了一天时间把工作交接掉就走了。一晃眼,年过完了。又一晃眼,春暖花开了。那一天,凸凸的前同事开始打电话给他,不接。
                过了几天,老板亲自打电话给他,继续不接。虽然早知道会发生这一幕,但在我们面前,他还是忍不住笑出声来。原来,凸凸写的那些小程序都是加了料的。一到4月,那些代码就不能用了。之前整个公司早已用惯了他的小程序,有一天发现用不了了自然疯掉。
            </p>
        </div>
        <div data-role="footer" data-position="inline">
            <h1>inline底部栏</h1>
        </div>
    </div>
</body>
</html>

d27d3780-4f9a-4a24-9f20-2cef38b51982.gif


fixed定位

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../assets/lib/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
    <script src="../assets/lib/jquery/jquery-1.10.2.min.js"></script>
    <script src="../assets/lib/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <title>工具栏-fixed定位</title>
</head>
<body>

    <div data-role="page">
        <!--fixed定位:头部栏和尾部栏固定在页面的顶部和底部。-->
        <div data-role="header" data-position="fixed">
            <h1>fixed头部栏</h1>
        </div>
        <div data-role="main" class="ui-content">
            <p>如果要看到效果,需要调整窗口大小使滚动条可用。</p>
            <p>
                可滚动的文本,一个本科男找了一个女博士。
                情人节,本科男给女博士发了一个520元的红包,附言:我爱你。
                稍后,女博士给本科男发了一个5.20元的红包,并附言:我爱你多一点!
                本科男感叹道:有文化,真可怕,少花钱,会说话!
            </p>
            <p>
                聚餐时朋友带了个小孩子出来。因为都是一群女人在聊些八卦话题,对他而言可能稍显无趣,他就在一旁看书。作为常年带娃的人,我决定给他一些关爱。拿手机,打开“海绵宝宝”动画片问他:小朋友,
                知道这是什么吗?他侧过头来瞄一眼,淡定地点点头:知道,那是派大星。我继续逗他:那你知道它是什么动物吗?他瞄了我一眼,然后很认真地暂定动画,研究一番后对我说:通体粉红,有五角,
                而且每只角比较圆,看外形应该是粒皮瘤海星,阿姨你觉得呢?那一刻,我回想起当年和学霸搭档做英语对话演示的屈辱。
                学霸爆了一段类似于梵文咒语的玩意,而这个时候英语老师不住的点头,完全听不懂的我只能装出一幅沉思的样子,
                应一句“I agree with you.”但是今天的我已经不是以前的我了!对于小孩子打脸的行为,爸爸我早有预备。深呼吸一口,换上露八齿的职业笑容,
                充满自信地回他:“孩子不要总看动画片,多吃菜才能长身体,吃什么说给姐姐听,我给你夹”#——————————你知道吗,
                我今天靠搜索才找回这个海星的名字。我搜了好久“里皮刘海星”“力臂遛海星”“泥皮流海星”……
            </p>
            <p>
                看到这个问题,一下子就想起了我的好朋友凸凸(应他要求,决定起个化名)。
                凸凸是个学霸,除了本专业成绩好,涉猎还广泛,是圈里百科全书型的人物,有点类似于TBBT里的霍华德。
                他本来的计划是投身于学术事业,为人类多点亮几支文明火苗,但到了二十六七岁,家里突生变故,不得已放弃了学术梦,决定出来找工作,尽快赚钱。
                没想到找工作并不容易,凸凸过去钻研的学术领域比较冷门,和大热的金融、互联网都沾不上边。投了几十家公司,才收到几家面试机会,最后只有一家给了回应,还得从实习生做起。
                凸凸思来想去,还是决定接受这个offer。其一,这是一家挺有名气的私募公司,如果顺利转正为行业分析师,钱景还不错;其二,自己没有一丝金融背景,有这个机会积累几个月,对找下一份工作终归还是有利的。
                没想到这一去就踩到了坑里。首先,实习工资比承诺得要少很多,一个月还不到3000,也没有社保——这一点凸凸纠结了一天就想通了,先做着吧,就当卧薪尝胆积累经验了。
                其次,说好的实习分析师的岗位也变了,被换岗去做了交易员,每天按照基金经理的指示做一些交易操作——这点不能忍,但老板安抚凸凸说,交易员缺人手,过段时间就能转岗。
                最最坑的是,实习了三四个月,老板始终不提转正,每次去谈,都说已经在流程中了,很快就会考虑。在这三四个月中,凸凸几次提起离职,老板总是苦言劝他留下,指天发誓一定会转正,只是“总公司的编制没批下来”或者“转正会在年前统一考核”。
                为啥老板执著地画着大饼呢?因为凸凸做了多年学术,养成了优化工作流程、提高效率的习惯,还自学过编程,比如,本来交易员每天要写一小时日报,他编了个自动抓取数据的程序,将这一小时的工作缩短成了一秒钟。
                私募公司各种数据统计工作又多又繁琐,他的各种便利小程序太好用了,老板根本不舍得放他走。不放人,也不签合同,就这么吊着。眼看要过年了,凸凸拿着不到3000的月薪,内心很崩溃。
                一直拖到节前,凸凸再去找老板,老板吞吞吐吐地说,今年招聘收紧啦,你还要多锻炼锻炼啦,而且其实我们基本不招没有金融背景的……要么,你去读个金融的硕士?凸凸感觉心里有几百万匹曹尼玛飞奔而过,你是脑残吗?
                如果是这种理由一开始就可以讲了好伐?为什么不早说?但他没哭没闹,花了一天时间把工作交接掉就走了。一晃眼,年过完了。又一晃眼,春暖花开了。那一天,凸凸的前同事开始打电话给他,不接。
                过了几天,老板亲自打电话给他,继续不接。虽然早知道会发生这一幕,但在我们面前,他还是忍不住笑出声来。原来,凸凸写的那些小程序都是加了料的。一到4月,那些代码就不能用了。之前整个公司早已用惯了他的小程序,有一天发现用不了了自然疯掉。
            </p>
        </div>
        <div data-role="footer" data-position="fixed">
            <h1>fixed底部栏</h1>
        </div>
    </div>
</body>
</html>

0d7cba91-a563-4dd0-8f94-520ddd3f8824.gif


fullscreen定位


要启用全屏定位,需使用data-position="fixed",并添加data-fullscreen="true":

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../assets/lib/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
    <script src="../assets/lib/jquery/jquery-1.10.2.min.js"></script>
    <script src="../assets/lib/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <title>工具栏-fullscreen定位</title>
</head>
<body>

    <div data-role="page">
        <!--fullscreen定位:与Fixed定位模式基本相同,头部栏和尾部栏固定在页面的顶部和底部。但是当他工具栏滚动出屏幕之外时,不会自动重新显示,除非点击屏幕,这对于图片或视频类有提升代入感的应用是非常有用的。
            注意这种模式下工具栏会遮住页面内容,所以最好用在比较特殊的场合。
            要启用全屏定位,需使用data-position="fixed",并添加data-fullscreen="true"
            -->
        <div data-role="header" data-position="fixed" data-fullscreen="true">
            <h1>头部栏</h1>
        </div>
        <div data-role="main" class="ui-content">
            <p>如果要看到效果,需要调整窗口大小使滚动条可用。</p>
            <p>
                可滚动的文本,一个本科男找了一个女博士。
                情人节,本科男给女博士发了一个520元的红包,附言:我爱你。
                稍后,女博士给本科男发了一个5.20元的红包,并附言:我爱你多一点!
                本科男感叹道:有文化,真可怕,少花钱,会说话!
            </p>
            <p>
                聚餐时朋友带了个小孩子出来。因为都是一群女人在聊些八卦话题,对他而言可能稍显无趣,他就在一旁看书。作为常年带娃的人,我决定给他一些关爱。拿手机,打开“海绵宝宝”动画片问他:小朋友,
                知道这是什么吗?他侧过头来瞄一眼,淡定地点点头:知道,那是派大星。我继续逗他:那你知道它是什么动物吗?他瞄了我一眼,然后很认真地暂定动画,研究一番后对我说:通体粉红,有五角,
                而且每只角比较圆,看外形应该是粒皮瘤海星,阿姨你觉得呢?那一刻,我回想起当年和学霸搭档做英语对话演示的屈辱。
                学霸爆了一段类似于梵文咒语的玩意,而这个时候英语老师不住的点头,完全听不懂的我只能装出一幅沉思的样子,
                应一句“I agree with you.”但是今天的我已经不是以前的我了!对于小孩子打脸的行为,爸爸我早有预备。深呼吸一口,换上露八齿的职业笑容,
                充满自信地回他:“孩子不要总看动画片,多吃菜才能长身体,吃什么说给姐姐听,我给你夹”#——————————你知道吗,
                我今天靠搜索才找回这个海星的名字。我搜了好久“里皮刘海星”“力臂遛海星”“泥皮流海星”……
            </p>
            <p>
                看到这个问题,一下子就想起了我的好朋友凸凸(应他要求,决定起个化名)。
                凸凸是个学霸,除了本专业成绩好,涉猎还广泛,是圈里百科全书型的人物,有点类似于TBBT里的霍华德。
                他本来的计划是投身于学术事业,为人类多点亮几支文明火苗,但到了二十六七岁,家里突生变故,不得已放弃了学术梦,决定出来找工作,尽快赚钱。
                没想到找工作并不容易,凸凸过去钻研的学术领域比较冷门,和大热的金融、互联网都沾不上边。投了几十家公司,才收到几家面试机会,最后只有一家给了回应,还得从实习生做起。
                凸凸思来想去,还是决定接受这个offer。其一,这是一家挺有名气的私募公司,如果顺利转正为行业分析师,钱景还不错;其二,自己没有一丝金融背景,有这个机会积累几个月,对找下一份工作终归还是有利的。
                没想到这一去就踩到了坑里。首先,实习工资比承诺得要少很多,一个月还不到3000,也没有社保——这一点凸凸纠结了一天就想通了,先做着吧,就当卧薪尝胆积累经验了。
                其次,说好的实习分析师的岗位也变了,被换岗去做了交易员,每天按照基金经理的指示做一些交易操作——这点不能忍,但老板安抚凸凸说,交易员缺人手,过段时间就能转岗。
                最最坑的是,实习了三四个月,老板始终不提转正,每次去谈,都说已经在流程中了,很快就会考虑。在这三四个月中,凸凸几次提起离职,老板总是苦言劝他留下,指天发誓一定会转正,只是“总公司的编制没批下来”或者“转正会在年前统一考核”。
                为啥老板执著地画着大饼呢?因为凸凸做了多年学术,养成了优化工作流程、提高效率的习惯,还自学过编程,比如,本来交易员每天要写一小时日报,他编了个自动抓取数据的程序,将这一小时的工作缩短成了一秒钟。
                私募公司各种数据统计工作又多又繁琐,他的各种便利小程序太好用了,老板根本不舍得放他走。不放人,也不签合同,就这么吊着。眼看要过年了,凸凸拿着不到3000的月薪,内心很崩溃。
                一直拖到节前,凸凸再去找老板,老板吞吞吐吐地说,今年招聘收紧啦,你还要多锻炼锻炼啦,而且其实我们基本不招没有金融背景的……要么,你去读个金融的硕士?凸凸感觉心里有几百万匹曹尼玛飞奔而过,你是脑残吗?
                如果是这种理由一开始就可以讲了好伐?为什么不早说?但他没哭没闹,花了一天时间把工作交接掉就走了。一晃眼,年过完了。又一晃眼,春暖花开了。那一天,凸凸的前同事开始打电话给他,不接。
                过了几天,老板亲自打电话给他,继续不接。虽然早知道会发生这一幕,但在我们面前,他还是忍不住笑出声来。原来,凸凸写的那些小程序都是加了料的。一到4月,那些代码就不能用了。之前整个公司早已用惯了他的小程序,有一天发现用不了了自然疯掉。
            </p>
        </div>
        <div data-role="footer" data-position="fixed" data-fullscreen="true">
            <h1>底部栏</h1>
        </div>
    </div>
</body>
</html>

c9531288-bd53-4952-aeb4-f50744fb4e7b.gif

分类: 前端框架

有话要说? =>【不用注册,直接登录】,然后刷新本页面来发表您的观点(●'◡'●)