JqueryMobile试题
2024-06-25 13:11:39
1.动态添加checkbox
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"><script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script><script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script><title></title></head><body><div data-role="page"><div data-role="header"></div><div data-role="content"><div id="aaa"><button id="btt">添加checkbox</button></div></div></div></body><script>$(function(){var i=0;$("#btt").on("click",function(){var aa = "<input type='checkbox' id='pp" + i + "'/><label for='pp" + i + "'>游戏</label>";$("#aaa").append(aa);$("#pp" + i).checkboxradio();//渲染样式，js动态的i++;})})</script>
</html>2.页面之间的跳转
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"><script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script><script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script><title></title></head><body><div data-role="page"><a href="#pagetwo" class="ui-btn">第二页</a></div><div data-role="page" id="pagetwo"><a href="#" data-rel="back" class="ui-btn">返回第一个界面</a></div></body>
</html>3.popup弹出框，静态与动态
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"><script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script><script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script><style>.ui-btn {display:inline-block;}</style></head><body><div data-role="page" > <div data-role="content"><a class="ui-btn" href="#mypupop" data-rel="popup">简单的弹出框</a><div id="mypupop" data-role="popup"><img src="img/2.jpg" style="max-height:512px;"></div></div></div><script> var imgList = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"];var index =0;for (index=0;index < imgList.length;index++) {var linkx="<a href='#pop"+ index+"' data-rel='popup'"+ "data-role='button' data-position-to='window' style='width:40%;' >"+ "<img src='"+ imgList[index] +"' style='width:75%;max-height:70px;' >"+ "</a>";var popupx="<div data-role='popup' id='pop"+ index +"'>"+ " <a href='#' data-rel='back' data-role='button' data-icon='delete' "+ " data-icon='delete' data-iconpos='notext' class='ui-btn-right'>close</a> "+ " <img src='"+ imgList[index] +"' style='max-height:512px;'>"+"</div>"$("[data-role='page']").append(linkx);$("[data-role='page']").append(popupx);}</script></body>
</html>4.列表listview
<body><div data-role="page"><div data-role = "header"><h1>水果</h1></div><div data-role = "content"><ul data-role="listview"><li><a href="#"><img src="img/u=1771744503,3274790315&fm=27&gp=0.jpg"><P>名称</P><P>简介</P></a></li><li><a href="#"><img src="img/u=1771744503,3274790315&fm=27&gp=0.jpg"><P>名称</P><P>简介</P></a></li><li><a href="#"><img src="img/u=1771744503,3274790315&fm=27&gp=0.jpg"><P>名称</P><P>简介</P></a></li></ul></div></div></body>
JqueryMobile试题相关推荐
- 最新前端中高级面试题
前言 关于前端面试,及面试题目,我之前有很多文章总结过,可以在右侧搜索面试,进行查找.其实面试中可以问的问题很多,最近几年,我也面试过很多工作2-4年的前端,我一般会抓住他们做的项目,进行更详细的追问 ...
- html面试题(一)--html css js
前端面试题汇总 一.HTML和CSS 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Ope ...
- 前端面试题总结(js高级部分)
七.JS 高级 1.JQuery 一个对象可以同时绑定多个事件,这是如何实现的? 2.知道什么是 webkit 么? 知道怎么用浏览器的各种工具来调试和 debug 代码么? 3.如何测试前端代码么? ...
- mysql关于时间的面试题,mysql时间设置默认值MySQL常见面试题
1.limit(选出10 到20 条) select * from students order by id limit 9,10; 2.MySQL 会使用索引的操作符号 =,>,=,betwe ...
- C++ 笔记（33）— C/C++ 程序员常见面试试题深入剖析
1. 找错题 试题1: void test1() {char string[10];char* str1 = "0123456789";strcpy(string, str1); ...
- 前端面试题笔记 2021.8.26
2021.8.26学习笔记 如果需要匹配包含文本的元素,用下面哪种方法来实现? A. text() B. contains() C. input() D. attr(name) 正确答案: B tex ...
- andorid 启动模式面试题
现在有四个activity a,b,c,d ,设置a为标准模式,b为singletop模式 c设置singletask模式,d设置SingleInstance 模式 a启动b ,b 启动 c ,c启动 ...
- java 关键字(面试题)
学而时习之,温故而知新. 今天群里有人问java中true ,false 是关键字吗, 这里记录下,不是关键字,我还特意翻看之前的书看看 下面是 Java 语言保留使用的 50 个关键字: 关键字 g ...
- Kotlin的几个面试题
今天去自己心仪的公司去面试,本来信心满满,结果面试下面自己深感能力不足,哎,错失了一次这么好的机会 不过还是感谢能给自己这次面试的机会 1 说一下Kotlin的伴生对象(关键字companion使用要 ...
最新文章
- 魔改Attention大集合
- 如何给Centos添加静态地址
- 2.14要来了，老司机教单身狗如何用VR过情人节
- OOD沉思录 --- 类和对象的关系 --- 使用关系
- ASP.NET定时调用WebService 运行后台代码
- 一枚角度渐变描边 loading 图标的 SVG 修炼之路
- typora打开pdf文件提示文件过大_Win7/Win10拷贝到U盘容量足够却提示文件过大的解决方法...
- Asp.Net Core 轻松学-玩转配置文件
- (转）淘淘商城系列——KindEditor富文本编辑器的使用
- VMware vCenter Server Appliance Photon OS安全修补程序
- win10中cmd拒绝访问授权
- Ubuntu 16.04 LTS安装Docker并使用加速器
- 无法将数据库从SINGLE_USER模式切换回MULTI_USER模式（Error 5064）
- 传感器 | 密度测量系列：1.密度测量的基础知识
- 用SDK包开发K66FX18学习笔记（1）
- HTML实现图片360度循环旋转
- 每日一学33——Unity点击UGUI按钮后，再按空格键会自动触发按钮
- 大象 ThinkingUML
- UCenter 1.6 数据字典
- [人脸对齐--综述] Facial Landmark Detection: a Literature Survey(2018)