WeUI测试代码

最新推荐文章于 2024-05-09 22:34:22 发布
最新推荐文章于 2024-05-09 22:34:22 发布
阅读量1.1k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Alex_X_Jane/article/details/52644904
版权 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <title>WeUI</title>
        <!-- 引入 WeUI -->
        <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/0.4.2/weui.css"/>
		
		<link rel="stylesheet" href="css/style.css"/>
    </head>
    <body>
		<div class="hd">
			<h2 class="page_title">交汇教育</h2>
			<p class="page_text" style="text-align:center">Hello World</p>
		</div>
	
        <!-- 按钮
        <a href="javascript:;" class="weui_btn weui_btn_primary">绿色按钮</a>
		
		<a href="javascript:;" class="weui_btn weui_btn_primary">绿色按钮</a>
		<a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_primary">绿色按钮置灰态</a>
		<a href="javascript:;" class="weui_btn weui_btn_warn">红色按钮</a>
		<a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_warn">红色按钮置灰态</a>
		<a href="javascript:;" class="weui_btn weui_btn_default">白色按钮</a>
		<a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_default">白色按钮置灰态</a>
		<div class="button_sp_area">
			<a href="javascript:;" class="weui_btn weui_btn_plain_default">白色镂空按钮</a>
			<a href="javascript:;" class="weui_btn weui_btn_plain_primary">绿色镂空按钮</a>

			<a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_primary">小型绿色按钮</a>
			<a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_default">小型白色按钮</a>
		</div>
		-->
		
		
		<!--单元格1
		<div class="weui_cells_title">帐号内容</div>
		<div class="weui_cells">
			<div class="weui_cell">
				<div class="weui_cell_bd weui_cell_primary">
					<p>帐号</p>
				</div>
				<div class="weui_cell_ft">
					240831095
				</div>
			</div>
			
			<div class="weui_cell">
				<div class="weui_cell_bd weui_cell_primary">
					<p>昵称</p>
				</div>
				<div class="weui_cell_ft">
					王尼玛
				</div>
			</div>
			
			<div class="weui_cell">
				<div class="weui_cell_bd weui_cell_primary">
					<p>邮箱</p>
				</div>
				<div class="weui_cell_ft">
					240831095@qq.com
				</div>
			</div>	
		</div>
		-->

		
		<!--单元格2
		<div class="weui_cells_title">带图标、说明、跳转的列表项</div>
		<div class="weui_cells weui_cells_access">

			<a class="weui_cell" href="http://www.baidu.com">
				<div class="weui_cell_hd">
					<img src="images/icon_nav_article.png" alt="icon" style="width:28px;margin-right:28px;display:block">
				</div>
				<div class="weui_cell_bd weui_cell_primary">
					<p>cell standard</p>
				</div>
				<div class="weui_cell_ft">
					说明文字
				</div>
			</a>
			<a class="weui_cell" href="javascript:;">
				<div class="weui_cell_hd">
					<img src="" alt="icon" style="width:20px;margin-right:5px;display:block">
				</div>
				<div class="weui_cell_bd weui_cell_primary">
					<p>cell standard</p>
				</div>
				<div class="weui_cell_ft">
					说明文字
				</div>
			</a>
		</div>		
		-->
		
		
		<!-- alert弹框（弹窗）
		<div class="weui_dialog_alert">
			<div class="weui_mask"></div>
			<div class="weui_dialog">
				<div class="weui_dialog_hd">
				  <strong class="weui_dialog_title">弹窗标题</strong>
				</div>
				<div class="weui_dialog_bd">弹窗内容，告知当前页面信息等</div>
				<div class="weui_dialog_ft">
					<a href="http://www.baidu.com" class="weui_btn_dialog primary">确定</a>
				</div>
			</div>
		</div>
		-->
		
		<!-- confirm弹框（弹窗）
		<div class="weui_dialog_confirm">
			<div class="weui_mask"></div>
			<div class="weui_dialog">
				<div class="weui_dialog_hd">
				  <strong class="weui_dialog_title">弹窗标题</strong>
				</div>
				<div class="weui_dialog_bd">自定义弹窗内容<br>...</div>
				<div class="weui_dialog_ft">
					<a href="javascript:;" class="weui_btn_dialog default">取消</a>
					<a href="javascript:;" class="weui_btn_dialog primary">确定</a>
				</div>
			</div>
		</div>
		-->
		
		
		<!--"已完成"临时窗口
		<div class="toast">
			<div class="bd spacing">
				<a href="#" class="weui_btn weui_btn_primary" id="showToast">注册</a>
			</div>
			<div id="toast" style="display: none;">
				<div class="weui_mask_transparent"></div>
				<div class="weui_toast">
					<i class="weui_icon_toast"></i>
					<p class="weui_toast_content">已完成</p>
				</div>
			</div>		

		</div>
		-->
		
			
		
		<!--"Loading"临时窗口
		<div id="loadingToast" class="weui_loading_toast" style="display:none;">
			<div class="weui_mask_transparent"></div>
			<div class="weui_toast">
				<div class="weui_loading">

					<div class="weui_loading_leaf weui_loading_leaf_0"></div>
					<div class="weui_loading_leaf weui_loading_leaf_1"></div>
					<div class="weui_loading_leaf weui_loading_leaf_2"></div>
					<div class="weui_loading_leaf weui_loading_leaf_3"></div>
					<div class="weui_loading_leaf weui_loading_leaf_4"></div>
					<div class="weui_loading_leaf weui_loading_leaf_5"></div>
					<div class="weui_loading_leaf weui_loading_leaf_6"></div>
					<div class="weui_loading_leaf weui_loading_leaf_7"></div>
					<div class="weui_loading_leaf weui_loading_leaf_8"></div>
					<div class="weui_loading_leaf weui_loading_leaf_9"></div>
					<div class="weui_loading_leaf weui_loading_leaf_10"></div>
					<div class="weui_loading_leaf weui_loading_leaf_11"></div>
				</div>
				<p class="weui_toast_content">数据加载中</p>
			</div>
		</div>	
		-->
		
		
		<!--结果页
		<div class="weui_msg">
			<div class="weui_icon_area"><i class="weui_icon_success weui_icon_msg"></i></div>
			<div class="weui_text_area">
				<h2 class="weui_msg_title">操作成功</h2>
				<p class="weui_msg_desc">内容详情，可根据实际需要安排</p>
			</div>
			<div class="weui_opr_area">
				<div class="weui_btn_area">
					<a href="javascript:;" class="weui_btn weui_btn_primary">确定</a>
					<a href="javascript:;" class="weui_btn weui_btn_default">取消</a>
				</div>
			</div>
			<div class="weui_extra_area">
				<a href="">查看详情</a>
			</div>
		</div>		
		-->
		

		<!--九宫格Grid-->
		<div class="weui_grids">
			<a href="javascript:;" class="weui_grid">
				<div class="weui_grid_icon">
					<img src="./images/icon_nav_button.png" alt="">
				</div>
				<p class="weui_grid_label">
					会员绑定
				</p>
			</a>


			
			<a href="javascript:;" class="weui_grid">
				<div class="weui_grid_icon">
					<img src="./images/icon_nav_panel.png" alt="">
				</div>
				<p class="weui_grid_label">
					会员中心
				</p>
			</a>
			

			
			<a href="javascript:;" class="weui_grid">
				<div class="weui_grid_icon">
					<img src="./images/icon_nav_tab.png" alt="">
				</div>
				<p class="weui_grid_label">
					教学地点
				</p>
			</a>
			

			
			<a href="javascript:;" class="weui_grid">
				<div class="weui_grid_icon">
					<img src="./images/icon_nav_toast.png" alt="">
				</div>
				<p class="weui_grid_label">
					课程介绍
				</p>
			</a>
		</div>

		<!--输入框input表单
		<div class="weui_cells_title">表单</div>
		<div class="weui_cells weui_cells_form">
			<div class="weui_cell">
				<div class="weui_cell_hd">
					<label class="weui_label">qq</label>
				</div>
				<div class="weui_cell_bd weui_cell_primary">
					<input class="weui_input" type="tel" placeholder="请输入qq号">
				</div>
			</div>
		</div>
		-->
		
		<!-- 文本域textarea表单
		<div class="weui_cells_title">意见反馈</div>
		<div class="weui_cells weui_cells_form">
			<div class="weui_cell">
				<div class="weui_cell_bd weui_cell_primary">
					<textarea class="weui_textarea" placeholder="请输入意见反馈" rows="3"></textarea>
					<div class="weui_textarea_counter"><span>0</span>/200</div>
				</div>
			</div>
		</div>
		-->

		<!--单选框Raido表单
		<div class="weui_cells_title">单选列表项</div>
		<div class="weui_cells weui_cells_radio">
			<label class="weui_cell weui_check_label" for="x11">
				<div class="weui_cell_bd weui_cell_primary">
					<p>cell standard</p>
				</div>
				<div class="weui_cell_ft">
					<input type="radio" class="weui_check" name="radio1" id="x11">
					<span class="weui_icon_checked"></span>
				</div>
			</label>
			
			<label class="weui_cell weui_check_label" for="x12">
				<div class="weui_cell_bd weui_cell_primary">
					<p>cell standard</p>
				</div>
				<div class="weui_cell_ft">
					<input type="radio" name="radio1" class="weui_check" id="x12" checked="checked">
					<span class="weui_icon_checked"></span>
				</div>
			</label>
		</div>		
		-->
		
		<!--复选框checkbox表单
		<div class="weui_cells_title">复选列表项</div>
		<div class="weui_cells weui_cells_checkbox">
			<label class="weui_cell weui_check_label" for="s11">
				<div class="weui_cell_hd">
					<input type="checkbox" class="weui_check" name="checkbox1" id="s11">
					<i class="weui_icon_checked"></i>
				</div>
				<div class="weui_cell_bd weui_cell_primary">
					<p>standard is dealt for u.</p>
				</div>
			</label>
			
			<label class="weui_cell weui_check_label" for="s12">
				<div class="weui_cell_hd">
					<input type="checkbox" class="weui_check" name="checkbox1" id="s12">
					<i class="weui_icon_checked"></i>
				</div>
				<div class="weui_cell_bd weui_cell_primary">
					<p>standard is dealicient for u.</p>
				</div>
			</label>
		</div>
		-->
		
		
		<!--选择框select表单
		<div class="weui_cells_title">选择</div>
		<div class="weui_cells">
			<div class="weui_cell weui_cell_select weui_select_before">
				<div class="weui_cell_hd">
					<select class="weui_select" name="select2">
						<option value="1">+86</option>
						<option value="2">+80</option>
						<option value="3">+84</option>
						<option value="4">+87</option>
					</select>
				</div>
				<div class="weui_cell_bd weui_cell_primary">
					<input class="weui_input" type="tel" placeholder="请输入号码">
				</div>
			</div>
		</div>
		<div class="weui_cells_title">选择</div>
		<div class="weui_cells">
			<div class="weui_cell weui_cell_select">
				<div class="weui_cell_bd weui_cell_primary">
					<select class="weui_select" name="select1">
						<option selected="" value="1">微信号</option>
						<option value="2">QQ号</option>
						<option value="3">Email</option>
					</select>
				</div>
			</div>
			<div class="weui_cell weui_cell_select weui_select_after">
				<div class="weui_cell_hd">
					国家/地区
				</div>
				<div class="weui_cell_bd weui_cell_primary">
					<select class="weui_select" name="select2">
						<option value="1">中国</option>
						<option value="2">美国</option>
						<option value="3">英国</option>
					</select>
				</div>
			</div>
		</div>		
		-->
		
		
		<!--开关switch表单
		<div class="weui_cells_title">开关</div>
		<div class="weui_cells weui_cells_form">
			<div class="weui_cell weui_cell_switch">
				<div class="weui_cell_hd weui_cell_primary">声音</div>
				<div class="weui_cell_ft">
					<input class="weui_switch" type="checkbox">
				</div>
			</div>
			<div class="weui_cell weui_cell_switch">
				<div class="weui_cell_hd weui_cell_primary">振动</div>
				<div class="weui_cell_ft">
					<input class="weui_switch" type="checkbox" checked>
				</div>
			</div>
		</div>
		-->
		
		
		<!--上传组件Uploader表单
		<div class="weui_cells weui_cells_form">
			<div class="weui_cell">
				<div class="weui_cell_bd weui_cell_primary">
					<div class="weui_uploader">
						<div class="weui_uploader_hd weui_cell">
							<div class="weui_cell_bd weui_cell_primary">图片上传</div>
							<div class="weui_cell_ft">0/2</div>
						</div>
						<div class="weui_uploader_bd">
							<ul class="weui_uploader_files">
								<li class="weui_uploader_file" style="background-image:url(...)"></li>
								<li class="weui_uploader_file weui_uploader_status" style="background-image:url(...)">
									<div class="weui_uploader_status_content">
										<i class="weui_icon_warn"></i>
									</div>
								</li>
								<li class="weui_uploader_file weui_uploader_status" style="background-image:url(...)">
									<div class="weui_uploader_status_content">50%</div>
								</li>
							</ul>
							<div class="weui_uploader_input_wrp">
								<input class="weui_uploader_input" type="file" accept="image/*" multiple="">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>	
		-->

		<!--图文列表Panel
		<div class="weui_panel weui_panel_access">
			<div class="weui_panel_hd">图文组合列表</div>
			<div class="weui_panel_bd">
				<a href="http://www.baidu.com" class="weui_media_box weui_media_appmsg">
					<div class="weui_media_hd">
						<img class="weui_media_appmsg_thumb" src="" alt="">
					</div>
					<div class="weui_media_bd">
						<h4 class="weui_media_title">标题一</h4>
						<p class="weui_media_desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
					</div>
				</a>
				<a href="javascript:void(0);" class="weui_media_box weui_media_appmsg">
					<div class="weui_media_hd">
						<img class="weui_media_appmsg_thumb" src="" alt="">
					</div>
					<div class="weui_media_bd">
						<h4 class="weui_media_title">标题二</h4>
						<p class="weui_media_desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
					</div>
				</a>
			</div>
			<a class="weui_panel_ft" href="javascript:void(0);">查看更多</a>
		</div>		
		-->
		
	</body>
</html>

Allennnn_
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery WEUI Select 组件增加搜索栏
weixin_30691871的博客
03-13 3357
1.Demo 2.修改源码 /* global $:true */ + function($) { "use strict"; var defaults; var selects = []; var Select = function(input, config) { var self = this; this.conf...
css样式基础库,WeUI基础样式库
weixin_42493720的博客
08-03 1125
WeUI是一套基础样式库，同微信原生视觉体验一致，由微信官方设计团队为微信内网页和微信小程序量身设计的。我们来看看这个基础库样式到底长什么样。这些密密麻麻的就是压缩后的样式库。密密麻麻地看起来简直要急死密集恐惧症啊。不要急，您请往下看。仔细看我们能看到，这个样式库为很多类写了样式。也就是说，我们只要在html页面中使用这些样式，就能构建一个页面了。【只要写类名，省去了为很多标签定义样式，是不是省事...
微信小程序weui的使用
最新发布
2401_84003690的博客
05-09 421
自定义view，Android开发的基本功。
微信小程序-weUI组件库
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
10-09 6263
微信小程序的开发过程中，常常会出现很多重复性的功能翻来覆去地使用，那么直接用一套封装好的组件库，就能大大提升开发速度。 微信小程序的UI组件库有很多，可以参考下面这个内容： 微信小程序UI组件库合集 | 微信开放社区 (qq.com)https://developers.weixin.qq.com/community/develop/article/doc/000ecc775a86807f7ba9b7dc956c13但是很多组件库不稳定，天知道什么时候会停止维护和更新，所以这款weUI组...
微信 weui框架代码汇总
微微一芯的博客
11-10 4639
weui框架代码汇总： Button 按钮1 按钮2 确认3 确认4 按钮5 按钮6
微信小程序之WeUI组件库的使用
XH_jing的博客
11-23 8249
本文主要介绍微信小程序中的 WeUI组件库的具体使用方法，通过具体的示例代码进行介绍，相信能够对大家的学习和工作都有一定的参考学习意义，欢迎大家一起学习进步。 WeUI组件库 官方文档 一、前言 WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。 二、下载 1. git 全部下载：https.
微信小程序官方weui css小程序weui 真机测试
03-12
在本压缩包中，"微信小程序官方weui css小程序weui 真机测试" 提供了一个基于WeUI框架的小程序示例，确保了在真实设备上的可用性和性能。 WeUI是微信官方设计团队推出的一套符合微信原生视觉体验的Web UI组件库，...
微信小程序weUI组件所有demo示例
10-17
"今天把整个ui组件从github上拷贝下来"意味着这些代码资源来源于开源社区，开发者可以在GitHub这样的平台上找到WeUI的源代码，参与贡献或者获取最新的更新。这对于开源软件的发展非常重要，因为它鼓励了协作和分享。...
weui 小程序组件样式开源代码
10-03
8. `test`：测试目录，包含项目的单元测试或集成测试，以确保代码的质量和功能的正确性。 9. `dist`：发布目录，存放经过构建和打包后的文件，可供部署和运行使用。 综上所述，WeUI小程序组件样式开源代码项目为...
weui 官方包
07-24
5. **测试文件**：为了确保代码的质量，WeUI 可能包含`test`目录，内含单元测试或集成测试。 6. **许可证和README**：每个开源项目都会有`LICENSE`文件，定义了项目的使用许可条款。`README.md`文件则会介绍项目的...
weui-master.zip
10-30
3. **易于使用**：WeUI的代码结构清晰，文档详细，开发者可以快速理解和使用，提高开发效率。 4. **遵循微信设计规范**：WeUI的设计严格遵循微信的视觉设计规范，使得用户在使用时有熟悉的感觉，提升用户体验。 在`...
weui的项目代码及使用示例
02-15
本代码根据http://bbs.html51.com/f-36-1/的源码整理分享给大家。更多资源请自己进论坛下载。
weUI 入门教程
02-24
weUI 入门教程:http://blog.csdn.net/libin_1/article/details/50734266
WeUI目前最新示例代码
03-21
WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库。 WeUI 是一套同微信原生视觉体验一致的基础样式库，为微信 Web 开发量身设计，可以令用户的使用感知更加统一。 含有大量示例Demo，简单容易上手
Weui 文件上传完整版示例
风火纶回
06-03 1084
@{ ViewBag.Title = “费用填报”; Layout = “~/Views/Shared/_MForm.cshtml”; } 费用填报 派车单号 ...
UI自动化测试04
徐天伦的博客
11-23 280
项目代码。
WeUI 在小程序中使用
08-03 212
才接触小程序。想找个ui框架。。也不知道咋弄； 下载地址：点击打开链接 将weui-wxss-master\dist\style\weui.wxss文件导入到小程序项目的根目录下 引入weui.wxss 方式一：在app.wxss内或者需要的页面引入style/weui.wxss。 方式二：在app.wxss内或者需要的页面引入style/wi...
WeUI 入门教程
热门推荐
黄沙百战穿金甲，不破楼兰终不还。
02-24 7万+
WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库。WeUI 是一套同微信原生视觉体验一致的基础样式库，为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。weui 我们只需要他的样式,下面demo下载地址：http://download.csdn.net/detail/comet
微信小程序-自定义组件
大灰狼的小绵羊哥哥的博客
01-10 9072
https://github.com/skyvow/wux 微信小程序-自定义组件 Components [Backdrop - 背景幕] [Dialog - 对话框] [Loading - 指示器] [Toast - 提示框] [Rater - 评分] Backdrop - 背景幕 import src="../.
weui demo示例代码
07-22
weui demo示例代码是一套基于微信界面风格的前端UI库，用于开发微信公众号的页面。该库提供了丰富的组件和界面样式，使开发者能够快速搭建符合微信风格的页面。 weui demo示例代码中包含了一系列的HTML、CSS和JS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值