jquerymobile创建9宫格事例
<html>
<head>
<title>9宫格</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head>
<body>
<div data-role="page" id="homepage">
<div data-role="header" data-position="fixed">
<a href="#" data-role="button" data-theme="a" data-icon="back">返回</a>
<h1>9宫格</h1>
<a href="#" data-role="button" data-theme="a" data-icon="forward">前进</a>
</div>
<div data-role="content">
<div class="ui-grid-b">
<div class="ui-block-a">
<a href="#" data-role="button" data-theme="a" data-icon="home" data-iconpos="top">首页</a>
</div>
<div class="ui-block-b">
<a href="#" data-role="button" data-theme="a" data-icon="grid" data-iconpos="top">列表</a>
</div>
<div class="ui-block-c">
<a href="#" data-role="button" data-theme="a" data-icon="star" data-iconpos="top">加星</a>
</div>
<div class="ui-block-a">
<a href="#" data-role="button" data-theme="a" data-icon="info" data-iconpos="top">信息</a>
</div>
<div class="ui-block-b">
<a href="#" data-role="button" data-theme="a" data-icon="search" data-iconpos="top">查找</a>
</div>
<div class="ui-block-c">
<a href="#" data-role="button" data-theme="a" data-icon="gear" data-iconpos="top">设置</a>
</div>
<div class="ui-block-a">
<a href="#" data-role="button" data-theme="a" data-icon="check" data-iconpos="top">已选</a>
</div>
<div class="ui-block-b">
<a href="#" data-role="button" data-theme="a" data-icon="alert" data-iconpos="top">提示</a>
</div>
<div class="ui-block-c">
<a href="#" data-role="button" data-theme="a" data-icon="plus" data-iconpos="top">添加</a>
</div>
</div>
</div>
</div>
</body>
</html>
效果：
jquerymobile创建9宫格事例相关推荐
- 9宫格实现微信朋友圈图片点击放大缩小弹簧效果
//之前写Demo要实现点击scrollView中图片的放大缩小的效果,用了scrollView自带的viewForZoomingInScrollView方法,效果不明显,后来改用点击图片,切换控制器 ...
- 基于canvas+uniapp的9宫格拼图游戏组件
基于 canvas+uniapp 的 9 宫格拼图游戏 涉及到的 canvas 基础知识 创建画布 <canvas id="'c1'"></canvas> ...
- java 9宫格抽奖_js 实现9宫格抽奖（react）
最近工作中有个9宫格抽奖的需求,一开始没啥思绪,网上查阅一番,自己又修改了一下,希望与大家交流分享. 先看一下效果图 整理一下思路 利用flex布局形成9宫格,每个格子的序号为0~8,创建一个记录当前 ...
- 微信小程序 9宫格翻牌动画
9宫格翻牌需求: 1.进来时平铺9个格子显示 2.点击开始抽奖时洗牌动作 3.洗完牌后呈现9个都是未翻牌的状态 4.点击任意一个牌子,有翻转的动作 5.翻转结束后出现中奖的弹窗 555,当时真的一点一 ...
- Android 图案解锁 9宫格密码解锁
序言 第一次写Android技术博客,不知道该如何下手. 背景 现在人们越来越重视自己的隐私,对于一些涉及用户隐私的应用,用户可能会希望在应用启动时必须先输入密码.传统的数字式密码记忆繁琐.容易破 ...
- JavaScript经典进阶：javascript – 9宫格 – 拼图
项目地址:javascript – 9宫格 – 拼图 总体思路 切图 ==>打乱顺序 ==>拖拽实现数据交换 实现过程中,遇到的问题 数据随机排序方法 Array.sort( functi ...
- Shader之旅2：四宫格画面实现
书写本文的初衷是为了自我反省记录.如有表达不当,请批评指正 首先贴出shader代码.这段代码是实现相机拍摄画面四宫格的实现.分别传入不同的channel 0 1 2 3.然后将UV进行切割分为四块填 ...
- android 9宫格布局,android 朋友圈9宫格实现
icon9宫格效果.png 项目优化 2019-10-10 1.有人提出经常new ImageView耗内存, 我现在直接new 9个ImageView,可重复使用这几个ImageView 2.修复图 ...
- vue实现视频播放1，4，6，9，16宫格布局
先上图 创建播放器 HwCellPlayer.vue <template><div class="player">player{{ title }}< ...
最新文章
- 我的WCF之旅 (11): 再谈WCF的双向通讯-基于Http的双向通讯 V.S. 基于TCP的双向通讯...
- P1628 合并序列
- Ring3下Inline Hook API
- ASP.NET+SQL创建存储过程
- c++中计算2得n次方_《一元二次方程》单元试卷，从中总结出5个考点，初三学生应知道...
- Struts2源码阅读(五)_FilterDispatcher核心控制器
- html5 上传 原理,浅谈使用HTML5的FormData上传文件原理！！！
- 存储过程可重用的代码块_如何使您的代码可重用
- 《Effective Python 2nd》 读书笔记——函数
- 从微服务跨越到中台，架构领域年度盘点！
- 7.camera驱动08-全志-media framework
- c语言：从键盘输入两个正整数，求其最大公约数和最小公倍数
- ‘0‘、“0“、0、‘\0‘的区别
- 题目内容： 你的程序要读入一系列正整数数据，输入-1表示输入结束，-1本身不是输入的数据。程序输出读到的数据中的奇数和偶数的个数。 输入格式: 一系列正整数，整数的范围是（0,100000）。如果输入
- STM32C8T6+面板板+3只LED点亮流水灯
- 华清远见22071作业端口指令实现灯点亮
- springboot的jsp应该放在哪_七、SpringBoot项目集成JSP以及项目不同启动方式及访问路径配置...
- 报错 -Uncaught ReferenceError: axios is not defined
- 【整理】写给java web一年左右工作经验的人
- 社会化三方分享集成详细介绍（友盟）