分享一個 @user 前端插件

時間 2019-11-30

標籤分享一個 user 前端插件简体版

原文原文鏈接

開源地址：https://github.com/yuezhongxin/Mention.jsjavascript

插件效果：相似於微博或 github 中 @user 列表效果。css

這是個二次開發的插件，花了幾天時間，對 Mention.js（做者 jakiestfu）進行了一些改進，主要是下面幾個方面：html

增長 search 自定義：能夠根據輸入的 @user-key，進行後臺動態查詢。
增長 textarea 跟蹤焦點：效果是用戶列表跟蹤在 textarea 輸入焦點，而不是在 textarea 底部，主要使用 textarea-caret-position.js 插件（用來獲取 textarea 當前焦點座標）。
增長 under 選項：是否跟蹤焦點，默認爲 false。
完善 matcher：主要是判斷是否要 search，好比 textarea 輸入內容，如何進行判斷查詢並顯示結果列表。
增長 simple：去除 bootstrap 的一些樣式效果，簡單化。
增長 select 值後增長空格。
增長 fixed 選項：是否固定列表，默認爲 false。
若干改進。

下面是四種配置和效果展現。java

1. 默認效果

配置代碼：jquery

<body> <textarea id="full"></textarea> <link rel="stylesheet" type="text/css" href="../css/mention.css"> <script src="../scripts/jquery-1.10.2.js"></script> <script type='text/javascript' src="../scripts/mention-typeahead.js"></script> <script type='text/javascript' src="../scripts/mention.js"></script> <script type='text/javascript' src="../scripts/textarea-caret-position.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#full").mention({ typeaheadOpts: { search: search } }); }); function search(key) { //在這裏能夠寫後臺查詢代碼 var data = [{ name: 'Rob Dyrdek', image: 'http://placekitten.com/25/24' }, { name: 'Rick Bahner', image: 'http://placekitten.com/25/23' }]; console.log("key:" + key); return data; } </script> </body>

2. 列表跟隨焦點

配置代碼：git

<body> <textarea id="full"></textarea> <link rel="stylesheet" type="text/css" href="../css/mention.css"> <script src="../scripts/jquery-1.10.2.js"></script> <script type='text/javascript' src="../scripts/mention-typeahead.js"></script> <script type='text/javascript' src="../scripts/mention.js"></script> <script type='text/javascript' src="../scripts/textarea-caret-position.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#full").mention({ typeaheadOpts: { search: search, under: true } }); }); function search(key) { //在這裏能夠寫後臺查詢代碼 var data = [{ name: 'Rob Dyrdek', image: 'http://placekitten.com/25/24' }, { name: 'Rick Bahner', image: 'http://placekitten.com/25/23' }]; console.log("key:" + key); return data; } </script> </body>

3. 簡化風格

配置代碼：github

<body> <textarea id="full"></textarea> <link rel="stylesheet" type="text/css" href="../css/mention-simple.css"> <script src="../scripts/jquery-1.10.2.js"></script> <script type='text/javascript' src="../scripts/mention-typeahead.js"></script> <script type='text/javascript' src="../scripts/mention.js"></script> <script type='text/javascript' src="../scripts/textarea-caret-position.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#full").mention({ typeaheadOpts: { search: search, under: true } }); }); function search(key) { //在這裏能夠寫後臺查詢代碼 var data = [{ name: 'Rob Dyrdek', image: 'http://placekitten.com/25/24' }, { name: 'Rick Bahner', image: 'http://placekitten.com/25/23' }]; console.log("key:" + key); return data; } </script> </body>

4. 固定列表

配置代碼：bootstrap

<body> <textarea id="full"></textarea> <link rel="stylesheet" type="text/css" href="../css/mention-simple.css"> <script src="../scripts/jquery-1.10.2.js"></script> <script type='text/javascript' src="../scripts/mention-typeahead.js"></script> <script type='text/javascript' src="../scripts/mention.js"></script> <script type='text/javascript' src="../scripts/textarea-caret-position.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#full").mention({ typeaheadOpts: { search: search, under: true, fixed: true } }); }); function search(key) { //在這裏能夠寫後臺查詢代碼 var data = [{ name: 'Rob Dyrdek', image: 'http://placekitten.com/25/24' }, { name: 'Rick Bahner', image: 'http://placekitten.com/25/23' }]; console.log("key:" + key); return data; } </script> </body>

做者：田園裏的蟋蟀
出處： http://www.cnblogs.com/xishuai/ 原文連接：http://www.cnblogs.com/xishuai/p/jquery-mention-user-plugin.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。