apicloud中多个按钮的切换

最新推荐文章于 2022-01-04 15:05:22 发布
最新推荐文章于 2022-01-04 15:05:22 发布
阅读量4.4k 收藏 1
点赞数 1
文章标签： apicloud
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rosener/article/details/52267019
版权

如上图：话不多说，贴代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>限时特卖</title>
   <!-- <link rel="stylesheet" type="text/css" href="../css/api.css"/>-->
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
     <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <style>
    #bgcolor{
    background-color: #f3f3f3;
    }
      #temai{
      height: 40px;
      width: 100%-20px;
      background: #FFFFFF;
      }
      .aui-tab {
       margin-bottom: 15px;
                  }
    </style>
</head>
<body id="bgcolor">
   <div id="temai">
 
    <ul>
     <li>
        <img src="../image/image_global_logo_home.png" style="height: 28px; margin: 1px;float: left;margin-top: 10px;" />
       <p style="font-size: 18px;margin-top: 20px; text-align: center;padding-top: 13px;">限时特卖</p>
     </li>
     </ul>
     </div>
 <div class="aui-tab">
        <ul class="aui-tab-nav" id="demo1">
            <li class="active">标签一</li>
            <li>标签二</li>
            <li>标签三</li>
             <li>标签四</li>
            <li>标签五</li>
            <li>标签六</li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
      apiready = function () {
      //实现切换功能
        api.parseTapmode();
        var demo1 = $api.domAll("#demo1 li");
        for(var i in demo1){
            $api.addEvt(demo1[i], 'click', function(){
                $api.removeCls($api.dom("#demo1 li.active"),'active');
                $api.addCls(this,'active');
            });
            }
        }
</script>
</html>

rosener
关注
【APICloud系列|26】UIScrollPicture 模块(图片轮播)的实现
孙叫兽的博客
12-31 1805
导读：UIScrollPicture 模块是一个图片轮播模块，只需传入一组图片地址，即可实现图片轮播效果。同时演示了如何使用UIScrollPicture实现APP引导页功能 使用模块前需在控制台添加UIScrollPicture模块和UIButton模块。 使用UIScrollPicture创建引导页 方法1:点击引导页最后一个页面任意位置，进入主页面 方法2:在引导页最后一个页面添加UIButton,通过点击UIButton按钮进入主页面 页面逻辑写在在index.html中 使用UIScro.
ApiCloud实现页面跳转
weixin_41970780的博客
11-16 1545
ApiCloud实现页面跳转，子页面如何接收传过来的值 父页面代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /> &l
apicloud之导航栏切换
weixin_37595711的博客
12-27 1364
&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,init
apicloud+aui 类似京东左右滑动切换页面，顶部tab栏跟随切换
zhaokei的博客
06-21 4585
一、类似京东，左右滑动切换页面，实现以下功能： 左右滑动页面直接切换，顶部tab栏也切换到对应位置。 点击顶部tab栏按钮，切换按钮并切换页面。 二、实现的效果如下： 三、页面组成： api.openFrameGroup() ，可以将要左右切换的区域拆分为多个页面（下图红色区域），用api.openFrameGroup()来打开，此方法实现左右滑动页面的效果。 // 打开页面...
【APICloud】选项卡切换万用js函数
BobbleHat的博客
06-20 1184
    之前自己做项目的时候遇到过这个问题，现在想起来就传上来了^-^    因为项目需求，标签的个数和具体的选项个数都是后台可改变的，所以需要用万用的函数解决标签切换的问题，得益于apicloud的出色设计，最后抠出来了这个方案，简单的例子是这样的（3x4的例子  PS：这里所有的标签和选项的个数和名称以及简介都需要可更换）HTML代码：&lt;div class="frame_2"&gt; ...
实现tab切换的功能
lengyuefengqing的博客
07-03 677
实现如下图Tab切换的功能 html代码： html> head> meta charset="utf-8"> title>DEMOtitle> head> body> div class="wrapper"> ul class="tabs"> li class="selected">Tab1li>
apicloud三个页面搞定app搜索
01-15
本文将深入探讨如何利用APICloud实现“三个页面搞定App搜索”的功能，包括上传、不同分类的切换筛选等核心知识点。 首先，我们需要理解APICloud的基本架构。APICloud将前端界面和后端服务进行了分离，开发者可以...
ApiCloud 顶部导航栏+底部导航 完美代码
03-16
这两个组件是应用中常见且重要的交互元素，它们帮助用户在不同页面间进行切换和操作。本文将深入探讨如何使用APICloud来创建顶部导航栏和底部导航栏，并实现完美的代码结构。 首先，`NVNavigationBar`和`NVTabBar`...
使用APICloud从1开始写玩转晋城一概览
12-06
在代码中，header部分由多个类为“header”的div组成，每个div代表一个页面的header，其中的JavaScript onclick事件用于切换内容。例如，点击footer的“新闻”按钮，会调用相应的JavaScript函数（如`filterNews('hot...
使用APICloud从0开始写脉脉(二) 底部导航栏
11-07
- 底部导航栏是移动应用中的常见组件，通常包含多个可点击的按钮，用于快速切换不同的功能模块。 - 脉脉的底部导航栏具有灰色背景图片，提供视觉上的统一感。 - 每个按钮由图标和文字两部分组成，选中状态与非...
4-apicloud-的跳转
weixin_44012573的博客
04-28 669
<!-- apicloud跳转 api.openWin({ name:"page1", url:"page1.html", pageParam:{ //传参 name:"test" } }) apicloud传参 pageParam:{ } //跳转的四个方式， // api...
apiCloud小结
CrazBarry的博客
06-16 2770
apiCloud小结
apicloud动态添加tab标签
qq_41577234的博客
08-20 866
1、win页面动态获取标签内容，如果tab标签的个数超过5个，按照每个标签60px的宽度分配宽度，如果没有超过5个，则根据个数进行平均分配，超过6个标签，可以进行左右滑动，点击可切换。代码如下： <!-- 商品列表--> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
APICloud怎么实现页面的跳转和传参
信徒博客
03-09 9798
第一种方法 一个页面跳转到另一个页面 window.location.href = 'adm_login.html?name='+user+'&amp;pass='+pass; 在另一个页面取值 &lt;body&gt; &lt;div class="empty"&gt;欢迎来到后天&lt;/div&gt; &lt;h1 id="lon"&gt;&lt;/h1&amp
APICloud学习笔记：removecls与addcls
古道白云的博客
12-10 1634
.addCls() 描述：为DOM元素增加className 用法：.addCls(el, cls) 参数： el (类型：Element)：DOM元素 cls (类型：String)：className 返回值：返回当前DOM元素 示例： $api.addCls(el, 'newclass'); .removeCls() 描述：移除指定的classN...
APICloud 入门教程窗口篇
ff_888888的博客
01-04 1699
什么是窗口，窗口可以理解为一屏幕内容的一个基本载体，里面可以放导航，图片，视频，文字等组成一屏幕内容。 不同的窗口组成一个APP, 例如购物APP有【首页】，【购物车】，【我的】等不同的窗口。不同的窗口之间可以进行跳转。 api.openWin 打开一个window窗口。window窗口是全屏的，不可设置大小。 api.openFrame 打开一个frame窗口。frame 窗口可以设置大小。 openWin示例代码： api.openWin({ name...
APICLOUD底部导航切换，结合AUI
热门推荐
tianshi51的博客
11-23 1万+
导航代码如下： 首页 未接 已结 呼出
APICloud（五）：发送按钮的状态监测-可点击和不可点击
总有一天，你的日积月累，会成为别人的望尘莫及
04-21 989
前面几篇讲了图片的选择和上传，这一篇来讲讲发朋友的发送按钮的状态   还是以微信的发送按钮为例子。 它的基本业务是这样子的：默认情况下发送按钮是绿色的但是表面有一层灰色，这种状态发送的内容不符合规格或者为空，不能发送。当按钮为绿色也就是没有表面的灰色时内容就能发送了。 当文本框有内容且内容符合规则时发送按钮是绿色的，或者当有图片时按钮是灰色的，若以上两种情况都不符合要求，此时按钮是带灰色...
apicloud 连接返回按键
weixin_33790053的博客
05-26 258
2019独角兽企业重金招聘Python工程师标准>>> ...
APICloud实现蓝色风格按钮组的布局技巧
2. 按钮外部样式：使用`<ul>`和`<li>`标签来组织多个按钮，并通过CSS设置它们的样式。每个按钮需要占据屏幕的25%，因此可以设置`width`为25%，并使用`float:left`使其并排显示。 ```css #life ul li { text-align:...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值