jQueryMobile的组件之下拉菜单(selectMenu)

以下是一个最基本的下拉菜单示例，更多细节请参考jQueryMobile的手册

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>popup弹出窗口示例</title>
    <link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.5.min.css">
    <script src="jquery-1.11.1.min.js"></script>
    <script src="jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page"  id="page_one">
    <div data-role="header" data-position="fixed" data-theme="b">
        <h1>Fun Here</h1>

    </div>
    <div data-role="content">
        <a href="#pp" data-rel="popup" class="ui-btn">弹出窗口</a>
        <div data-role="popup" id="pp">
            <p>这是一个弹出窗口</p>
        </div>

        <!--设置点击缩略图放大的效果-->
        <a href="#pop" data-rel="popup" data-position-to="window" data-transition="fade">
            <img src="1.jpg" style="width:25%">
        </a>
        <div data-role="popup" id="pop">
            <a href="#" data-rel="back" class="ui-btn ui-btn-a ui-icon-delete ui-btn-icon-notext ui-corner-all ui-shadow ui-btn-right">关闭</a>
            <img src="1.jpg" style="max-height: 800px">
        </div>

    </div>
    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#" class="ui-btn-active" data-icon="grid">分类</a></li>
                <li><a href="#" data-icon="star">周边</a></li>
                <li><a href="#" data-icon="gear">设置</a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

在iphone6中的效果：

时间： 2024-12-26 19:00:53

jQueryMobile的组件之下拉菜单(selectMenu)的相关文章

Bootstrap组件之下拉菜单

.dropdown--设置父元素为下拉菜单组件,向下弹出子菜单: .dropup--设置父元素为下拉菜单组件,向上弹出子菜单: .dropdown-toggle--设置按钮为下拉菜单切换按钮: .dropdown-menu--设置ul元素为下拉菜单: .dropdown-menu-right--将菜单右对齐: .pull-right--将菜单组件的父元素右对齐: .dropdown-header--为菜单项添加标题: .divider--为菜单项添加分割线: .disabled--禁用相应菜单项

Bootstrap--组件之下拉菜单

用于显示链接列表的可切换.有上下文的菜单. 对齐 B默认情况下,下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度. 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐. 可能需要额外的定位May require additional positioning 在正常的文档流中,通过 CSS 为下拉菜单进行定位.这就意味着下拉菜单可能会由于设置了 overflow 属性的父元素而被部分遮挡或超出视口(viewport)的显示范围.如果出现这

微信小程序开发之下拉菜单

实现功能:点击维保人员,调出下拉菜单.选择子菜单时,显示右边的图标表示选中,并进行赋值并进行搜索筛选 Wxml: <view class="dtclass" bindtap="loadtype"><span>{{SercherType}}</span> <image src="../../images/xiala.png" style="height:10px;width:20rpx;ma

自动化测试——Selenium+Python之下拉菜单的定位

1.通过selenium.webdriver.support.ui的Select进行定位下拉菜单如下图: 定位代码(选择Male): ...from selenium.webdriver.support.ui import Select... # 通过index进行选择 Select(driver.find_element_by_id("gender")).select_by_index(1) # 通过value进行选择 Select(driver.find_

Bootstrap学习js插件篇之下拉菜单

案例通过此插件可以为几乎所有东西添加下拉菜单,包括导航条.标签页.胶囊式按钮. 用于导航条导航条分为四个部分.第一部分导航头,第二部分导航列,第三部分form查询表单,第四部分导航列. [javascript] view plaincopy <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <butt

JS特效之下拉菜单

HTML导航之下拉菜单方法3——JQuery下拉菜单

代码: 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉菜单之JQuery</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 border: 0; 11 } 12 /*基本代码*/ 13 #dropdown

HTML导航之下拉菜单方法1——CSS下拉菜单

代码: 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉菜单之CSS</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 border: 0; 11 } 12 /*基本代码*/ 13 #dropdown {

HTML+CSS导航之下拉菜单方法1——JS

代码: 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉菜单之JS</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 border: 0; 11 } 12 /*基本代码*/ 13 #dropdown { 1