北京赛车 pk10开奖记录_Toyou热购彩票官网
香港高速VIP雲機房火爆上線啦!無需備案炔,開通即用!配套《巔雲自助建站系統3.0》將帶給您飛一般的可視化拖拽建站體驗晃,歡迎免費體驗陪頰們。

HTML中data自定義屬性的使用和插件應用介紹

一佰互聯網站制作(www.yinxi.net) 發布日期 2019-04-20 08:53:24 瀏覽數: 18

大家可能會經常看到一些HTML里都帶有data屬性遍,這些都是HTML5的自定義屬性現倆,可以做很多事情括盆,直接調用JS十分方便乏,雖然是HTML5的屬性掏村,但好在jQuery通用的管,所以基本在所有瀏覽器里都是可以正常使用的嬌賃,包括低版本的IE醒徘。下面為大家簡單介紹一下使用方法玩敞揭︰
1敖尖、簡單使用

復制代碼代碼如下:
<div id="widget" data-text="123456"></div>


復制代碼代碼如下:
$(function(){
var _widget= $("#widget").attr("data-text");   alert(_widget);//因為data-text="123456"貉,所以打印出123456
})

2腔、配合$.fn.extend使用喜請,編寫插件

復制代碼代碼如下:
<div id="widget" data-widget-config="{effect:"click"}">這里是測試區域</div>


復制代碼代碼如下:
//插件擴展部分
;(function($){
$.fn.extend({
Test:function(config){
/**
* @param effect 效果
* config||{} 當有自定義屬性傳進來時不執行默認值
*/
// 設置默認值
config=$.extend({
effect:"click",
},config||{});
var effect=config.effect;
var _text=config._text;
if(effect=="click"){
$(this).click(function(){
alert("this click");
})
}else if(effect=="mouseover"){
$(this).mouseover(function(){
alert("this is mouseover");
})
}
}
})
})(jQuery)


復制代碼代碼如下:
//調用部分串,HTML中的data屬性依賴于此
$(function(){
var _widget= $("#widget").attr("data-widget-config");
// 將string轉換成json對象的方法澎慷互,有兩種
var widgetConfigJSON=eval("("+_widget+")");
// var widgetConfigJSON = (new Function("return " + _widget))();
$("#widget").Test(widgetConfigJSON);
  //因為HTML中data屬性是data-widget-config="{effect:"click"}"鋇囪,所以這里會調用點擊事件挖喜奠,
  如果是data-widget-config="{effect:"mouseover"}",則調用鼠標移上去的事件})
一佰互聯是全國知名建站品牌服務商,我們有九年網站建設想、網站制作肖畦鞏、網頁設計燃、php開發和域名注冊及虛擬主機服務經驗恢,提供的自助建站服務更是全國有名替賞裳。近年來還整合團隊優勢自主開發了可視化多用戶”巔雲建站系統“3.0平台版卑拆恢,拖拽排版網站制作設計架仍,輕松實現pc站輝、手機微網站溜、小程序損、APP一體化全網營銷網站建設 罐,已成功的為全國上百家網絡公司提供自助建站平台搭建服務懷。

相關新聞more

02
05月
網站的文章怎麼才能讓百度等搜索引擎快速收錄?

網站內容是否能被百度等搜索引擎收錄是關系到一個網站能被百度等搜索引擎接納突麓,提升排名戮嘆吃,帶來流量的一個入口處壕闢。因此趁,對于從事網站營銷的人來說忱遁控,收... >>詳情

09
04月
UI新手排版入門!最容易上手的6個排版套路

作為UI設計師峽觸,如何讓界面有規律有節奏地去展示信息內容?今天分享的這6個技巧或許可以幫助到你!一. 親密原則設計前對內容進行信息分層速撼,屬于一... >>詳情

02
05月
如何打造提高PV量的博客標題?提高博客訪問量

如何打造提高PV量的博客標題?當談到怎樣撰寫博客標題的時候耽勾,很多人都想到的是網站SEO美、博客優化和提高網站流量之類的磕,但我在這里想說的是真真... >>詳情

26
03月
不裝 App聞梯,用這 8 款免費的網頁工具解決

簡介砰黨錨︰平時用電腦辦公健、寫作的時候寶價錯,我們難免會遇到圖片處理的問題卸︰比如說格式轉換嘆、壓縮鉑喚恃、摳圖以及美化等等罷,而這些相對簡單的操作往往需要我們安裝... >>詳情

營業執照. cdn加速服務 備案系統認證 網絡安全協會 我們的支付方式AAA認證

7x24小時服務電話:18581389571 傳真:023-85725751 免費建站交流群法咕︰236412099 139947842(自助建站交流) E-Mail:post@yinxi.net 網站投訴:
重慶楚捷科技有限公司 一佰互聯©版權所有 自助建站(www.yinxi.net,Inc.) 2001-2020 All Rights Reserved 本站程序受法律保護,網站法律顧問碉黃聯︰ITLAW-莊毅雄律師
中華人民共和國信息產業部網站備案號:渝ICP備12000592號
pk10 pk10开奖 北京赛车