當前位置：首頁 » 網頁前端 » 前端文字控制項
擴展閱讀
提分平台的賬號密碼是什麼 2023-08-31 22:07:10
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端文字控制項

發布時間: 2022-04-29 08:57:04

A. 前端 網頁輸入框插件 有類似這樣的插件嗎

HTML代碼：
<div class="main">
<p>快試試看吧！</p>
<textarea></textarea>
<ul>
<li class="main_expression"><a href="javascript:void(0);">表情</a></li>
<li class="main_animation"><a href="javascript:void(0);">動畫</a></li>
<li class="main_picture"><a href="javascript:void(0);">圖片</a></li>
<li class="main_video"><a href="javascript:void(0);">視頻</a></li>
<li class="main_template"><a href="javascript:void(0);">模板</a></li>
<li class="main_more">
<a href="javascript:void(0);">更多</a>
<ul class="main_more_ul">
<li class="main_topic"><a href="javascript:void(0);">話題</a></li>
<li class="main_vote"><a href="javascript:void(0);">投票</a></li>
<li class="main_annex"><a href="javascript:void(0);">附件</a></li>
<li class="main_user"><a href="javascript:void(0);">用戶</a></li>
<li class="main_url"><a href="javascript:void(0);">網址</a></li>
</ul>
</li>
</ul>
<span><button class="submit_button">發表</button></span>
</div>
css代碼：

body{behavior:url(js/tool_ie6hover.htc);/*ie6支持其他元素的hover效果*/}
ul{list-style:none;}
a{text-decoration:none;}
.main{margin:50px auto 0;width:500px;}
.main p{color:#915833;}
.main textarea{width:500px;height:50px;resize:none;}
.main ul li{float:left;padding:5px 20px;}
.main li a{color:#A8A8A8}
li{ background:url(../images/basic.png) no-repeat;}
/*初始樣式*/
.main_expression{background-position:0 6px;}
.main_animation{background-position:0 -42px;}
.main_picture{background-position:0 -92px;}
.main_video{background-position:0 -140px;}
.main_template{background-position:0 -189px;}
.main_more{background-position:0 -238px;}
.main_topic{background-position:0 -276px;}
.main_vote{background-position:0 -327px;}
.main_annex{background-position:0 -376px;}
.main_user{background-position:0 -429px;}
.main_url{background-position:0 -482px;}
/*hover樣式*/
.main_expression:hover{background-position:0 -17px;}
.main_animation:hover{background-position:0 -68px;}
.main_picture:hover{background-position:0 -116px;}
.main_video:hover{background-position:0 -164px;}
.main_template:hover{background-position:0 -215px;}
.main_more:hover{background-position:0 -256px;}
.main_topic:hover{background-position:0 -301px;}
.main_vote:hover{background-position:0 -351px;}
.main_annex:hover{background-position:0 -403px;}
.main_user:hover{background-position:0 -455px;}
.main_url:hover{background-position:0 -508px;}
.main_more_ul{position:absolute;display:none;margin-left:-20px; _margin-left:-50px;_margin-top:20px;}
.main_more_ul li{clear:both;}
.main_more:hover ul{display:block;}
.submit_button{float:right;margin:5px;background:none #B78D63;border: 1px solid #9D7E60;color:#fff;width: 66px;height:22px;-moz-border-radius:2px;/*FF低版本 圓角*/-webkit-border-radius:2px;/*Chorme和Safari低版本 圓角*/border-radius:2px;/*其他瀏覽器 圓角*/behavior:url(js/tool_iecss3.htc);/*IE瀏覽器 圓角*/ }

B. Notepad++ 有哪些適用於前端開發的插件

簡單寫幾個人，我個人常用的：

JSMin 壓縮 JS 的，還提供格式化代碼的功能，不怎麼用它的壓縮，經常用它的格式化來看別人的代碼。

SourceCookifier 展示代碼框架，查找定義，跳轉到定義，從當前代碼跳轉到其定義。嘗試過 TagsView 和 TagsJump 感覺沒這個好用。還有個CCompletion功能也類似。這幾個提供代碼框架的插件都是基於 Ctags 的， Ctags 對 JS 支持的不太好。

Xbrackets 自動補全各種括弧{}[]()等,也可以配置補全<>''等。

Zen Coding 我用的是 python 版的，除了驚艷的代碼生成功能，還可以配置成代碼片段工具，所以原來試過的很多的代碼片段插件後來就不用了。

TextFX 這是關於文字處理的工具集合，各種亂七八糟的命令都能從中找到，裡面帶一個HTML Tidy 可以格式化 HTML。

UniversalIndentGUI 代碼格式化工具集合，常見的代碼格式幾乎都支持，包括CSS HTML JS 。

Lorem Ipsum 生成假文

FingerText 很強大的代碼片段工具，支持多重熱點，熱點默認值，片段鏈式嵌套（片段中套片段）等特性，是個讓人眼前一亮的插件。

C. 求大神，告訴web前端開發中在線的文本編輯器，可以用什麼方式實現，用到了什麼插件

有好多 。你可以看看網路編輯器 功能提多也有簡易版 直接網路「網路編輯器」 或者網路富文本編輯器也可以找到很多插件的

D. [C#] textbox中放一個button成組合控制項，問如何不讓button擋住textbox中的文字button可能在前端或後端

好吧，告訴就一個方法，首先你說的方法是不可能的
自定控制項，新建一個userControl,
上面放一個button，button左邊放一個Textbox，設置這個Textbox為無邊框就行，
設置userControl的大小，大小合適
這樣就可以的達到效果了。

E. 前端去哪個網站找控制項

Wijmo網站。
在建立Web應用時，通常都需要用到一些有用的UI組件。無論應用中需要的是日歷，滑塊，圖形或其它用於提升或簡化用戶交互的組件，那麼都面臨兩種選擇：要麼自己來創建這些組件，要麼使用現有的組件功能。
目前正在廣泛使用的框架之一就是jQuery UI。這是一組擴展的使用jQuery構建的部件、效果和主題，分為一組一組的形式。既可以在單個軟體包中下載jQuery UI的所有元素，也可以選擇只下載感興趣的組件和功能。使用這樣的控制項集能夠為組件創建出一致的外觀，並允許以更少的投入快速創建出應用。

F. 有哪些優秀的前端插件

編寫html代碼，一定要使用emmet（前身是zencoding），還有以下插件也是可以考慮的：
bracketHighter 高亮引號、括弧等
code Aligment 代碼對齊
DocBlockr 如果你寫js，這個就很有用了
emmet 書寫html必備
emmet css snippets 書寫css必備
Encoding Helper 當你遇到載入的文件亂碼時，這個插件就很有用了
jsFormat 格式化js代碼
theme soda 軟體主題，挺漂亮的
minifier 壓縮js/css
sidebarenhance 增強型邊欄

livereload 配合瀏覽器（firefox、chrome）上的livereload插件，就不用老是按F5了

G. 前端開發和後端開發有什麼區別

區別在於：

1.前端開發：.2005年以後，互聯網進入Web2.0時代，各種類似桌面軟體的Web應用大量涌現，網站的前端由此發生了翻天覆地的變化。網頁不再只是承載單一的文字和圖片，各種富媒體讓網頁的內容更加生動，網頁上軟體化的交互形式為用戶提供了更好的使用體驗，這些都是基於前端技術實現的。以前會Photoshop和Dreamweaver就可以製作網頁，現在只掌握這些已經遠遠不夠了。無論是開發難度上，還是開發方式上，現在的網頁製作都更接近傳統的網站後台開發，所以現在不再叫網頁製作，而是叫Web前端開發。Web前端開發在產品開發環節中的作用變得越來越重要，而且需要專業的前端工程師才能做好，這方面的專業人才近幾年來備受青睞。Web前端開發是一項很特殊的工作，涵蓋的知識面非常廣，既有具體的技術，又有抽象的理念。簡單地說，它的主要職能就是把網站的界面更好地呈現給用戶。

2.後端開發一般也叫做後台，其負責是網站後台邏輯的設計和實現還有用戶及網站的數據的保存和讀取。比如一般網站都是有用戶注冊和登錄的，用戶的注冊的信息通過前端發送給後端，後端將其保存在資料庫中，用戶登錄網站的時候，後端需要通過用戶輸入的用戶名和密碼是否與資料庫中的一致來判斷用戶是否有許可權登錄，這是後台開發中的一個最簡單的功能。

H. 前端頁面的插件有哪些

工具類

方便操作對象，數組等的工具庫

  • underscore.js

  • lo-dash與underscore.js的api基本一致。與underscore比其優勢是，效率高；可自定義構建

  • Sugar在原生對象上增加一些工具方法

  • functional.js提夠了一些Curry的支持

  • Watch.js監視對象或屬性的變化

  • bacon.js函數式編程，cool

  • streamjs用流的方式來對數組，對象進行系列操作

非同步流程式控制制

  • eventproxy朴靈出品

  • Arbiter.js詳細

  • 發布訂閱

  • qPromise風格的

  • Async.js

mock

  • Mock.js生成隨機數據和mock Ajax 請求

  • jquery-mockjaxmockajax請求

時間庫

  • moment

  • datejs

瀏覽器探測

  • Bowser探測具體瀏覽器和版本

  • ua-parser-js探測具體瀏覽器和版本，操作系統，設備類型等

調試

  • console-polyfill能放心的使用 console.log()之類的console方法

  • log讓控制台輸出的log有樣式

  • Konsole.js在頁面的一個元素里輸出log信息詳細

  • uri.jsuri操作

  • cookie增刪改cookie的工具庫

  • director前端路由庫詳細

  • BigDecimal.js提高精度的數字操作

  • JSDoc根據javascript文件中注釋的信息，生成API文檔詳細

  • hotkeys鍵盤事件的封裝

  • MD5用 MD5 的方式加密文件的庫

瀏覽器增強類

讓一些舊瀏覽器變牛逼的庫

  • Selectivizr讓IE 6-8一些的css3選擇器

  • ieBetter讓ie6-8有高級瀏覽器的特性

  • ExplorerCanvas讓IE8-的瀏覽器支持canvas

  • CSS3 Pie讓IE6-9支持border-radious,box-shadow,linear-gradient。 可以使用.htc文件（注意Mine type）或.js文件。在用Pie.js時，box-radious的元素有背景色時，不顯示背景色。。。

  • formFive讓舊的瀏覽器支持HTML5表單的一些特性，如 placeholder,autofocus

  • https://github.com/anselmh/object-fit讓瀏覽器支持object-fit這css規則

  • HTML5 Cross Browser Polyfills一堆Polyfills

  • flexibility讓舊的 IE 也支持 Flexbox

選擇器增強

  • Lining.js讓瀏覽器實現類似::nth-line(), ::nth-last-line()的效果

未歸類

  • prefixfree用了它，寫css時，就不需要加瀏覽器的前綴了

表單類

  • jquery-file-upload上傳文件組件詳細

  • zTree文件樹形視圖控制項

  • Treed樹編輯器。感覺展示的感覺很像思維導圖

  • FileAPI對文件選擇框內的文件的一些處理

表單驗證

  • .Validate詳細

  • jQuery-Validation-Engine

表單元素美化

  • uniform提供對下拉框，單，復選框，按鈕等表單元素的美化

  • select2多選下拉框

  • selectivity和unfirom比較類似

  • DropKick下拉框，單，多選。外觀比uniform好

  • switcheryios7風格的開關組件

  • nouislider用滾動條來設置/控制（音量等）

  • range.css美化input[type=range]元素的外觀

圖片類

  • holderjs生成占點陣圖片

  • lazyload

  • imagesLoaded選取的圖片都載入好後執行調回

  • CSSgram用CSS3的Filter實現Instagram濾鏡的庫

圖標類

  • Icon Font匯總

  • SVG做的圖標

  • svgicons

  • iconic

  • HYBICON帶交互效果。如 hover, click

  • HTML字元實體圖標

  • http://www.amp-what.com/

  • transformicons圖標點擊時，會有一些變換效果。如，加號變成叉號

  • css3patternscss3 做的可平鋪紋理。瀏覽器兼容性不好。

瀏覽圖片

  • fancybox彈出查看圖片，視屏等等demo

  • yoxview彈出查看圖片，圖片尺寸縮放很自然

圖片牆

  • wookmark

UI 框架

  • WeUI由微信官方設計團隊為微信 Web 開發量身設計。

  • Framework7

UI 組件類

拖拽

  • dragula支持Draggable，Dropable和Sortable。感覺比jqueryUI的輕量級，好用的樣子

  • angular-draguladragular 官方的 angular 版本

數據可視化(圖表)

  • Echarts網路出品

  • highcharts功能強大。是收費的。

  • Plottable.JS基於D3的一個圖表庫

  • flot文檔不給力

  • chartJs中文文檔demo很漂亮，很清晰。比較輕量級。

  • ichartJs中國的一個傢伙搞的，感覺還不錯。

時間選取組件

  • foundation-datepicker

  • DatePicker一個簡單的日歷詳細

  • full calendar支持脫放的方式來改變待辦事宜的時間

  • Simple Events Calendar外觀很喜歡。收費 5$

  • jQuery ui datepicker經典，不是很好看

  • pickadate輕量級，手機友好的，漂亮。但貌似只能在彈出層中顯示，而沒有下拉這種方式顯示。

  • zebra-datepicker可配置性很強。但貌似只能在彈出在右上方。。。

  • bootstrap-datepickerbootstrap風格。

  • dateRangePicker選取時間段。bootstrap風格。該組件依賴Twitter Bootstrap, Moment.js和jQuery.

自定義滾動條

  • perfect scrollbar輕量級的滾動條。外觀與mac上chrome的滾動條一樣。

  • iscroll在移動設備上用不錯

載入(Loding)效果

  • CSS SpinnersCSS做的

  • Loaders.cssCSS做的

表格組件

  • jsGridData Grid。詳細

  • backgrid基於Backbone.js的DataGrid

  • excellentexport把表格的內容生成excel。兼容 Firefox, Chrome, IE6+

  • datatables表格可交互（對內容進行排序，刪除等）

  • handsontable生成Excel外觀的數據

  • JSpreadsheets表格數據的組件庫

選取顏色

  • Spectrum

分享到SNS

  • JiaThis生成分享代碼。

編輯器

  • ace代碼編輯器，可以用來做demo演示

  • ckeditor

  • ueditor網路做的

  • tinymce對html內容進行實時的編輯

  • summernote在移動設備上用不錯

通知組件

  • notie.js

HTML5播放器

  • jwplayer被大量網站使用

  • html5media簡單的h5player，輕量級

  • jplayer功能強太，可換膚

展示

  • Impress.js各種旋轉，和奇特的體驗

  • fullPage全屏顯示。用滾輪來翻頁詳細

  • zepto.fullpage專注於移動端的fullPage.js，依賴Zepto

  • pagePiling和fullPage類似

  • turn.js做一本書，帶漂亮的翻頁的效果

幻燈

  • slidesjs挺好用的，只是那幻燈導航的CSS都要自己寫，呵呵詳細

  • iSlider無任何插件依賴的手機平台javascript滑動組件詳細

  • bgstretcher全屏幻燈，會隨著頁面大小的變化而變化。

  • Swiper開源、免費、強大的移動端觸摸滑動插件Swiper中文網

  • coin-slider兼容IE6。蠻好的~。不過其切換方式是一塊塊的。不能配置切換方式。。。

  • wowslider幻燈切換時各種很炫的效果。收費。

  • cycle2普通的幻燈，竟然不支持垂直滾動。。。

  • jcarousel普通的幻燈，不兼容IE6

  • reveal3d滾動。做ppt相當不錯

  • nodePPT國人做的，做ppt也相當不錯。有些方面比 reveal做的還好。但生成導出的html有些問題

  • roundabout3d切換，看的後面圖片的邊

彈出框

  • Magnific-Popup兼容PC，Mobile。還不錯，有5k+的star

  • layer國人開發的，兼容ie6+。不喜歡其調用方式。

動畫效果

  • mixitup用漂亮的動畫效果來完成排序和篩選

  • jQuery.Marquee跑馬燈效果

  • quickflip卡片翻轉效果

  • 卡片翻轉效果2兼容性可以。寫的比較簡單：1，只支持x方向翻轉 2,類名都是規定好的 3，只能被調用一次。 需要改寫一下。我的改進版見這里

  • TheaterJS模擬兩個人在屏幕上對話

  • midnight.js文字顏色隨著背景變，屌炸了

  • color-animationjquery的顏色漸變動畫插件。jquery的動畫不支持顏色值的變化。改庫提供了這個支持。

  • transit對元素進行css的變換

  • tagcanvas3D標簽雲效果詳細

  • iconate圖片切換動畫

  • Snap.js左/右側導航的出現效果

  • CSS shake抖動動畫

  • ClickSpark.js點擊後的一些酷炫的效果

視覺差插件

  • scrollorama比較簡單

  • superscrollorama能做的效果更多，但要用第三方Tween的庫，使用起來比較復雜。

  • scrolldeck

flash

  • swfobj能夠自動檢測PC、Mac機器上各種主流瀏覽器對Flash插件的支持情況。它使得插入Flash媒體資源盡量簡捷、安全。而且它是非常符合搜索引擎優化的原則的。此外，它能夠避免您的HTML、XHTML中出現object、embed等非標准標簽，從而符合更加標准。詳細

抽獎

  • wScratchPad刮刮卡刮獎效果

  • jqueryrotate旋轉插件。可以用來做轉盤抽獎效果

    • 用戶體驗增強類

  • Intro.js用來介紹網站的功能很不錯。也可以做新手引導。

  • blockUILolding組件。

  • simple-hint提示信息。用css做的。兼容性IE 9+。

  • dotdotdot文字溢出時，添加在文字末尾加省略號

  • jQuery-menu-aim二級菜單的切換如Amazon主頁上一樣迅速

  • AnythingZoomer放大鏡功能

  • 美化/高亮語法代碼

  • google-code-prettify

  • DlHighlight僅支持JavaScript、CSS、XML、HTML 這4語法高亮

  • please按要求隨機舒服的顏色

  • Awesomplete輸入的智能提示，自動補全

  • proTip提示。感覺比 Bootstrap 的 tip 好

  • Hammerjs手勢庫。封裝了 Swipe, Tap, Pinch, Pan等手勢

動畫

  • velocity提高Jquery動畫的性能。以及顏色動畫之類的新特性。

    • SVG

  • Snap.svg操作 SVG 的 JS 庫。號稱 SVG 的 jQuery。demo

  • walkway以動畫的方式，漸漸地畫出 SVG 的路徑。

測試

  • Mocha

  • Chai

  • Should

  • Snoion

  • DeviceMock.jsmock 設備。

其他類

  • ZeroClipboard將內容復制到剪切板兼容主流瀏覽器的解決方案詳細

  • html2canvashtml轉化成canvas，可以用來做截圖。詳細

  • Ink響應式html郵件框架

  • 性能測試

  • 抓取，解析RSS內容（不能跨域，所以後台要做代理，所謂的解析Rss其實就是解析xml）

  • jFeed

  • jRss簡單版的jFeed

  • scriptcam與攝像頭交互

  • cylon.js機器人框架，支持35個平台

  • Masonry一個瀑布流框架

  • devices.css移動設備邊框的外觀。做原型的時候用不錯。

    • Bootstrap相關類

  • Bootbox.js對bootstrap的彈出框做的一些封裝

  • 免費皮膚

  • AdminLTE

JS Plugins倉庫

  • jQuery Cards高質量的 jQuery 插件網站

  • jster

  • node moles

  • npmrankSort npm packages by page rank

  • YOU MIGHT NOT NEED JQUERY PLUGINS不依賴 jQuery 的 js 插件。

  • awesome-nodejs

  • Libraries.io各種語言的庫

  • OniUI去哪兒網做的一套基於Avalon的框架

    常用的移動端框架

    zepto.js

    語法與jquery幾乎一樣，會jquery基本會zepto~

    最新版本已經更新到1.16

    iscroll.js

    解決頁面不支持彈性滾動，不支持fixed引起的問題~

    實現下拉刷新，滑屏，縮放等功能~

    最新版本已經更新到5.0

    underscore.js

    筆者沒用過，不過聽說好用，推薦給大家~

    該庫提供了一整套函數式編程的實用功能，但是沒有擴展任何JavaScript內置對象。

    最新版本已經更新到1.8.2

    滑屏框架

    適合上下滑屏、左右滑屏等滑屏切換頁面的效果

    slip.js

    iSlider.js

    fullpage.js

    swiper.js

    flex布局

    flex布局目前可使用在移動中，並非所有的語法都全兼容，效果良好~

I. 前端中一個控制項用了兩遍，想要改變期中之一的樣式怎麼改

大小可以在樣式裡面修改：

<html>
<body>
<input type="checkbox" value="你好" style="width:20px;height:20px;"/>
</body>
</html>
但是input如果要像div那樣樣式話還是有點難度的，但是可以通過自己「製作」一個這樣的控制項來解決，隱藏checkbox，使用一個div進行模擬，注冊div的click事件以及checkbox的change事件，保證兩者之間狀態的同步。

J. 在VFP中，要讓文本框、標簽顯示在容器控制項的前端，該怎麼做

你沒有將控制項加到容器里，而是將控制項放到了容器的上面，所以容器才把文本框和標簽遮住了。
你右擊容器，選擇編輯，容器四周變藍後，向容器里加控制項，這樣，控制項就裝在了容器里，你拖動容器，控制項也跟著動。

閱讀全文

與前端文字控制項相關的內容

本站內容整理源於互聯網，如有問題請聯系解決。
Copyright design: www.gotrillian.com since 2022