data-title属性

最新推荐文章于 2024-03-20 10:22:37 发布
最新推荐文章于 2024-03-20 10:22:37 发布
阅读量1.4w 收藏
点赞数
分类专栏： web mobile 文章标签： web mobile

data-title属性

使用jquerymobile的时候有时候我们会在同一个页面中写多个页面，但是在切换的时候，在浏览器显示的title总是同一个。我们需要不同的页面显示不同的title，这时候我们可以在data-role后面添加data-title属性，设置自己需要的title内容。


1.   <!DOCTYPE html>  

2.   <html>  

3.   <head>  

4.   <meta name="viewport" content="width=device-width, initial-scale=1">    

5.   <title>Multi Page Example (2)</title>   

6.   <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />  

7.   <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>  

8.   <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>  

9.   </head>  

10.    

11.  <body>  

12.    

  1. <div data-role="page" id="homePage">  
  2.     <div data-role="header">Welcome</div>  
  3.     <div data-role="content">  
  4.     <p>  
  5.     Welcome to our first mobile web site. It's going to be the best site you've ever seen.   
  6.     Once we get some content. And a business plan. But the hard part is done!  
  7.     </p>  
  8.     <p>  
  9.         You can also <a href="#aboutPage">learn more</a> about Megacorp.  
  10.     </p>  
  11.     </div>  
  12.       
  13.     <div data-role="footer">  
  14.     <i>Copyright Megacorp © 2012</i>  
  15.     </div>      
  16. </div>  
  17.   
  18. <div data-role="page" id="aboutPage" data-title="About Megacorp">  
  19.     <div data-role="header">About Megacorp</div>  
  20.     <div data-role="content">  
  21.     <p>  
  22.     This text talks about Megacorp and how interesting it is. Most likely though you want to  
  23.     <a href="#homePage">return</a> to the home page.  
  24.     </p>  
  25.     </div>  
  26.     <div data-role="footer">  
  27.     <i>Copyright Megacorp © 2012</i>  
  28.     </div>  
  29.       
  30. </div>  
  31. </body>  
  32. </html>  

在我们点击learn more链接后，跳转了一个页面，同时title会改变为About Megacorp。


lulu19870526
关注
专栏目录
vue 使用html自带title属性 鼠标悬浮展示内容 修改其样式
tendernessxy的博客
08-26 1562
公共样式 css-common-common.css文件下 .listbox, .listboxs { // 最外层容器 用来包裹需要展示 title 属性的 .title[data-title] { // data-title 在我们需要加title属性的标签内 换成 data-title='张三' position: relative; // 样式： &:hover:after { opacity: 1; transition:
html获取data-*值,html5 获取和设置data-*属性值的四种方法讲解
weixin_35064201的博客
06-07 2900
1、获取id的对象2、需要获取的就是data-id 和 dtat-vice-id的值一：getAttribute()方法const getId = document.getElementById('getId');// //getAttribute()取值属性console.log(getId.getAttribute("data-id"));//console.log(getId.getAttr...
css 文字描边 (data-title)
最新发布
Hermia_yuan的博客
03-20 208
css 文字描边
jquery attr()方法
10-18 2249
jquery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()，attr()有4个表达式。 1. attr(属性名)        //获取属性的值（取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined ）
使用css伪元素，模拟html中的title属性
suwyer的博客
11-17 1万+
在html中， title属性的作用是显示额外的信息，当鼠标移动到元素上时，这些提示信息就会显示出来。然后，title属性的缺点也很明显，一是原始样式太丑，一是鼠标移动到元素上之后，需要等待一段时间才会显示；因此，我们可以使用伪类来解决这两个问题。 实现步骤： 一、首先html布局 &lt;div title="使用css伪类模拟title属性"&gt;title属性&lt;/div&gt...
datatable 给某一列添加title属性
weixin_34396902的博客
12-22 1312
简单描述：采用datatable拼接的表格，没有title属性，嗯就是这个情况，直接上代码 代码： //js代码$("#toAdd").click("click",function () { var selectNodes = $('#table2').DataTable().rows(".active").nodes(); if(selectNodes.length==0){...
在Vue中获取自定义属性方法:data-id的实例
10-14
`data-id`就是一个自定义属性，通常用于标识或区分不同的元素。本篇将详细解释如何在Vue中使用`data-id`以及与之相关的其他知识点。 1. **获取自定义属性**： 在Vue中，我们通常使用事件监听器配合`v-on`指令...
vue 获取元素额外生成的data-v-xxx操作
10-14
编译后，Vue会为`.title`选择器添加`data-v-`属性，并且自动为这个选择器添加一个唯一的值（比如`data-v-f3f3eg9`），变为： ```css .title[data-v-f3f3eg9] { color: blue; } ``` 对应的HTML结构也会添加相同的...
关于HTML5的data-*自定义属性的总结
08-27
HTML5中的data-*自定义属性 HTML5中的data-*自定义属性是一种特殊的自定义属性，它们可以用来存储和操作数据。在HTML5规范中，引入了data-*自定义属性，以提供与渲染无关的信息。这类属性的命名需要添加前缀data-，...
html标题效果,css如何实现title效果
weixin_42285866的博客
06-07 1142
css如何实现title效果1、首先在元素上添加自定义数据data-title；2、然后通过伪类选择器:hover和::after设置悬浮显示的样式3、最后通过attr()获取自定义的数据即可。(推荐学习：CSS视频教程)代码如下：Documentdiv {position: relative;}div:hover::after {content: attr(data-title); /*取到da...
html中实现自定义title属性
kakakaluka的博客
07-31 476
可以使用 tooltip
easyui中form的title动态赋值
keleinclude_的博客
12-15 346
在datatgrid中。一个表单可能会在多个功能中被需要，比如新增、修改用的是一个表单，如何动态赋值呢？ $('#xxxxxx').panel({ title:'修改' //'' 里面写想要的值 })
data-属性
weixin_30477293的博客
06-30 100
html5中出现data标签，该标签可以为div,p,span,td等各种标签提供属性 <div id="button"data-mm='{"name":"jake"}'>Some awesome data</div> var s = $('#button').data('mm'); console.log(s.name); data(属性名,属性值)...
浮动提示title更改字体大小
syx_cainiao的博客
04-23 3178
项目前提：已修改了title的默认样式，主要js代码 function showTitle(el, title) { const popover = getPopover(); const popoverStyle = popover.style; if (title === undefined || title==='') { popoverStyle.display = 'none'; } else { const elRect = el.getBoundingClie
Vue中通过自定义指令实现动态改变网页标题
胡海龙
03-12 1740
场景需求 在使用Vue开发的单页面应用中想实现网页的title根据页面的不同或者点开文章的不同动态改变titile为我们自定义内容或者是文章的标题。 最终实现效果 首页 点击文章时 以上为三个页面的展示，其他页面同样可以根据自己的需要自定义不同的内容。 Vue自定义指令 在Vue中除了可以使用Vue自带的指令也可以自定义指令来实现对DOM的底层操作。详细使用文档请参考Vue官方文档。 实现方法 这里演示的是以Vue-cli脚手架搭建的项目等使用过程。在main.js中添加如下代码： //改变标题方法
scala怎么检索某个字符_第五章 正则：通吃一切字符串处理
weixin_39608559的博客
11-23 418
简介正则表达式，又称规则表达式，通常被用来检索、替换那些符合某个模式(规则)的文本。正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。安装内置引擎 无需安装知识正则基础re模块处理字符串与系统内置str类型的函数的区别：re模块可以用规则表达式表示多个参数，同时处理，而且功能更强大...
Vue项目中动态修改页面标题title
热门推荐
JackieDYH的博客
10-30 1万+
Vue项目中有时候需要修改页面标题title ①如果需要动态设置页面的title，可以直接使用document.title； ②可以使用router的beforeEach去统一设置，这种方法使用每个页面都是固定的标题，在进入路由就赋值标题，进入路由后就不修改了 方法一 使用document.title动态修改页面标题 1、在index.js中设置document.title //设置游览器标题 Vue.directive({ inserted: function(el,bindin
H-ui.admin v3.1学习之路（一）：导航栏信息无法在内容区显示
weixin_30924239的博客
09-22 662
注：我使用的是别人的模板文件在我的云盘“素材模板—H-ui.admin’中。 直接上代码： <li class="dropDown dropDown_hover"> <a href="#" class="dropDown_A">${sysUser.loginName} <i class="Hui-iconfont"&g...
jquery改变form属性，提交表单
risingsun001的专栏
06-01 4989
有些情况下，同一个form在不同的情况下提交到不同的处理动作，可以在js中动态改变form的属性，满足不同条件的form提交需求。 如：
title更新了，但是tooltip没有渲染，为什么渲染了data-original-title属性
06-06
如果您更新了元素的 `title` 属性，但是 `tooltip` 没有渲染出来，而是渲染了 `data-original-title` 属性，这通常是因为 `tooltip` 已经被初始化了，而且在初始化时就把 `title` 属性的值复制到了 `data-original-title` 属性中。如果您在后来更新了 `title` 属性的值，`tooltip` 并不会自动更新。 为了解决这个问题，您需要在更新 `title` 属性后，手动调用 `tooltip('show')` 方法来显示 `tooltip`。例如： ``` $('#myElement').attr('title', '新的提示内容').attr('data-original-title', '新的提示内容').tooltip('show'); ``` 这样，`tooltip` 就会使用新的 `title` 属性值进行渲染，并正确地显示出来。 另外，如果您只需要在初始化 `tooltip` 时把 `title` 属性的值复制到 `data-original-title` 属性中，而不需要在之后自动更新 `tooltip`，可以通过设置 `trigger` 选项为 `'manual'` 来禁用自动触发 `tooltip`。例如： ``` $('#myElement').tooltip({ trigger: 'manual' }); ``` 这样，`tooltip` 就不会自动触发，您需要手动调用 `tooltip('show')` 方法来显示 `tooltip`，并手动更新 `data-original-title` 属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值