欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用contextMenu插件實(shí)現(xiàn)Bootstrap table彈出右鍵菜單

 更新時(shí)間:2017年02月20日 09:24:59   投稿:mrr  
如今Bootstrap這個(gè)前端框架已被許多人接受并應(yīng)用在不同的項(xiàng)目中,其中“開發(fā)高效,設(shè)備兼容”的特點(diǎn)表現(xiàn)得非常明顯。這篇文章主要介紹了使用contextMenu插件實(shí)現(xiàn)Bootstrap table彈出右鍵菜單,需要的朋友可以參考下

如今Bootstrap這個(gè)前端框架已被許多人接受并應(yīng)用在不同的項(xiàng)目中,其中“開發(fā)高效,設(shè)備兼容”的特點(diǎn)表現(xiàn)得非常明顯。再加上它默認(rèn)的美觀的UI組件,簡直就是很多前端的大愛啊?。。?今天在這里跟大家分享Bootstrap table彈出右鍵菜單的實(shí)現(xiàn)方法。

最近遇到有一個(gè)需求,需要在Bootstrap table上使用右鍵。網(wǎng)上搜了半天沒有找到,最后發(fā)現(xiàn)Bootstrap table不支持右鍵(官方文檔給出的答案 https://github.com/wenzhixin/bootstrap-table/issues/241 )。

本文介紹使用contextMenu插件實(shí)現(xiàn)Bootstrap table右鍵功能。

代碼(test.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="libs/bootstrap-table-v1.11.0/bootstrap.min.css" rel="external nofollow" >
<link rel="stylesheet" href="libs/bootstrap-table-v1.11.0/bootstrap-table.css" rel="external nofollow" >
<link href="libs/jQuery-contextMenu/dist/jquery.contextMenu.css" rel="external nofollow" rel="stylesheet"/>
<script src="libs/jQuery/jquery-1.8.3.min.js"></script>
<script src="libs/bootstrap-table-v1.11.0/bootstrap.min.js"></script>
<script src="libs/bootstrap-table-v1.11.0/bootstrap-table.js"></script>
<script src="libs/bootstrap-table-v1.11.0/bootstrap-table-zh-CN.js"></script>
<script src="libs/jQuery-contextMenu/dist/jquery.contextMenu.js"></script>
</head>
<body>
<table id="item_table"></table>
<script>
$('#item_table').bootstrapTable({
 columns: [{
 field: 'id',
 title: 'Item ID'
 }, {
 field: 'name',
 title: 'Item Name'
 }, {
 field: 'price',
 title: 'Item Price'
 }],
 data: [{
 id: 1,
 name: 'Item 1',
 price: '$1'
 }, {
 id: 2,
 name: 'Item 2',
 price: '$2'
 }]
});
$.contextMenu({
 // define which elements trigger this menu
 selector: "#item_table td",
 // define the elements of the menu
 items: {
 foo: {name: "Foo", callback: function(key, opt){ alert("Foo!"); }},
 bar: {name: "Bar", callback: function(key, opt){ alert("Bar!") }}
 }
 // there's more, have a look at the demos and docs...
});
</script>
</body>
</html>

效果圖:

這里寫圖片描述

關(guān)于contextMenu的使用,可以參考網(wǎng)頁中右鍵功能的實(shí)現(xiàn)— contextMenu的使用 。

關(guān)于Bootstrap table的使用,可以參考官方文檔Bootstrap table。

以上所述是小編給大家介紹的使用contextMenu插件實(shí)現(xiàn)Bootstrap table彈出右鍵菜單,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

  • bootstrap3使用bootstrap datetimepicker日期插件

    bootstrap3使用bootstrap datetimepicker日期插件

    這篇文章主要為大家詳細(xì)介紹了bootstrap3中使用bootstrap datetimepicker日期插件的用法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • javascript的創(chuàng)建多行字符串的7種方法

    javascript的創(chuàng)建多行字符串的7種方法

    多行字符串的作用是用來提高源代碼的可讀性.尤其是當(dāng)你處理預(yù)定義好的較長字符串時(shí),把這種字符串分成多行書寫更有助于提高代碼的可讀性和可維護(hù)性.在一些語言中,多行字符串還可以用來做代碼注釋. 大部分動態(tài)腳本語言都支持多行字符串,比如Python, Ruby, PHP. 但Javascript呢?
    2014-04-04
  • JS庫particles.js創(chuàng)建超炫背景粒子插件(附源碼下載)

    JS庫particles.js創(chuàng)建超炫背景粒子插件(附源碼下載)

    particles.js用于創(chuàng)建粒子的輕量級 JavaScript 庫。使用方法非常簡單,代碼也很容易實(shí)現(xiàn),下面通過本文給大家分享JS庫particles.js創(chuàng)建超炫背景粒子插件附源碼下載,需要的朋友參考下吧
    2017-09-09
  • Javascript實(shí)現(xiàn)拖拽排序的代碼

    Javascript實(shí)現(xiàn)拖拽排序的代碼

    這篇文章主要介紹了Javascript實(shí)現(xiàn)拖拽排序的代碼,本文在vue運(yùn)行環(huán)境下給大家演示下效果圖,對js拖拽排序?qū)嵗a感興趣的朋友跟隨小編一起看看吧
    2022-09-09
  • JS+Vue實(shí)現(xiàn)三級全選單選

    JS+Vue實(shí)現(xiàn)三級全選單選

    這篇文章主要為大家詳細(xì)介紹了JS+Vue實(shí)現(xiàn)三級全選單選,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • 用JS判斷IE版本的代碼 超管用!

    用JS判斷IE版本的代碼 超管用!

    用JS判斷IE版本的代碼 超管用!,需要的朋友可以參考下。
    2011-08-08
  • javascript與PHP動態(tài)往類中添加方法對比

    javascript與PHP動態(tài)往類中添加方法對比

    這篇文章主要介紹了JAVASCRIPT與PHP動態(tài)往類中添加方法對比的相關(guān)資料,需要的朋友可以參考下
    2018-03-03
  • JS中可以改善代碼的5種重構(gòu)技術(shù)分享

    JS中可以改善代碼的5種重構(gòu)技術(shù)分享

    代碼重構(gòu)涉及在不改變其外部功能的情況下對現(xiàn)有代碼進(jìn)行改進(jìn),這是編程的核心部分之一,所以下面我們將研究一些技巧,這些技巧可以幫助我們以更好的方式重構(gòu)代碼,希望對大家有所幫助
    2023-06-06
  • 微信小程序webSocket的使用方法

    微信小程序webSocket的使用方法

    這篇文章主要介紹了微信小程序webSocket的使用方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02
  • javascript獲取select值的方法完整實(shí)例

    javascript獲取select值的方法完整實(shí)例

    這篇文章主要介紹了javascript獲取select值的方法,結(jié)合完整實(shí)例形式分析了javascript動態(tài)遍歷與操作頁面元素相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2019-06-06

最新評論