jquery滑塊拖動驗證插件使用

文章參考自： 鏈接

創(chuàng)新互聯(lián)為客戶提供專業(yè)的成都網站設計、成都網站制作、程序、域名、空間一條龍服務，提供基于WEB的系統(tǒng)開發(fā). 服務項目涵蓋了網頁設計、網站程序開發(fā)、WEB系統(tǒng)開發(fā)、微信二次開發(fā)、移動網站建設等網站方面業(yè)務。

需要jq幣，鑒于經常逛jQuery插件庫，花了30大洋買了100jq幣，發(fā)現開發(fā)還是挺費錢的，，，哈哈

搞定

此插件直接使用可能不是很適合具體業(yè)務需求，可以根據自身需要修改slide-unlock.css樣式文件，比如說將#slider中的margin: 100px auto;改成margin: 10px auto;這樣margin值減小為10px，可能更適合

bootstrap中使用jquery表格插件列寬拖動問題

一、引入文件：

復制代碼代碼如下:

script src="/js/jquery-1.8.0.min.js" type="text/javascript"/script

script src="/js/store.js" type="text/javascript"/script

script src="/js/jquery.resizableColumns.js" type="text/javascript"/script

二、TABLE

復制代碼代碼如下:

table id="myTable" border="1"

thead

tr

th data-resizable-column-id="a"input type="checkbox" //th

th data-resizable-column-id="b"欄目類型 /th

th data-resizable-column-id="c"活動名稱 /th

th data-resizable-column-id="d"狀態(tài) /th

th data-resizable-column-id="e"操作選項/t

jquery實現拖動效果

因為想實現相框的拖到，找了半天的原因愣是沒有找到錯誤，所以，只能翻看源碼了

如何實現拖動效果？

首先分析下拖動效果原理：

1.當鼠標在被拖動對象上按下鼠標（觸發(fā)onmousedown事件，且鼠標在對象上方）

2.開始移動鼠標（觸發(fā)onmousemove事件）

3.移動時更顯對象的top和left值

4.鼠標放開停止拖動(觸發(fā)onmouseup事件)

注意：拖動的對象必須是定位對象(即設置了position:absolute或

relative)。

也就是說拖動事件=onmousedown事件+onmousemove事件

整個過程就是處理這三個事件來模擬drag事件

現在看看我實現的源代碼：

html代碼：

div

class="drag"

p

class="title"標題(點擊標題拖動)/p

/div

div

class="drag1"

p

class="title"標題/p

點擊我移動

/div

jquery插件代碼：

(function($){

$.fn.drag=function(options){

//默認配置

var

defaults

=

{

handler:false,

opacity:0.5

};

//

覆蓋默認配置

var

opts

=

$.extend(defaults,

options);

this.each(function(){

//初始標記變量

var

isMove=false,

//handler如果沒有設置任何值，則默認為移動對象本身，否則為所設置的handler值

handler=opts.handler?$(this).find(opts.handler):$(this),

_this=$(this),

//移動的對象

dx,dy;

$(document)

//移動鼠標，改變對象位置

.mousemove(function(event){

//

console.log(isMove);

if(isMove){

//獲得鼠標移動后位置

var

eX=event.pageX,eY=event.pageY;

//更新對象坐標

_this.css({'left':eX-dx,'top':eY-dy});

}

})

//當放開鼠標，停止拖動

.mouseup(function(){

isMove=false;

_this.fadeTo('fast',

1);

//console.log(isMove);

});

handler

//當按下鼠標，設置標記變量isMouseDown為true

.mousedown(function(event){

//判斷最后觸發(fā)事件的對象是否是handler

if($(event.target).is(handler)){

isMove=true;

$(this).css('cursor','move');

//console.log(isMove);

_this.fadeTo('fast',

opts.opacity);

//鼠標相對于移動對象的坐標

dx=event.pageX-parseInt(_this.css("left"));

dy=event.pageY-parseInt(_this.css("top"));

}

});

});

};

})(jQuery);

調用方法：

$(function(){

//拖動標題

$(".drag").drag({

handler:$('.title'),//操作拖動的對象，此對象必須是移動對象的子元素

opacity:0.7

//設置拖動時透明度

});

//拖動主體對象

$(".drag1").drag({

opacity:0.7

});

});

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

jquery有哪些插件？

//200多個插件如下?實際開發(fā)中?請選擇合適的使用

1：文件上傳類jQuery插件

Ajax?File?Upload.

jQUploader.

Multiple?File?Upload?plugin.

jQuery?File?Style.

Styling?an?input?type?file.

Progress?Bar?Plugin.

2：表單驗證類jQuery插件

jQuery?Validation.

Auto?Help.

Simple?jQuery?form?validation.

jQuery?XAV?–?form?validations.

jQuery?AlphaNumeric.

Masked?Input.

TypeWatch?Plugin.

Text?limiter?for?form?fields.

Ajax?Username?Check?with?jQuery.

3:表單選擇框類jQuery插件

jQuery?Combobox.

jQuery?controlled?dependent?(or?Cascadign)?Select?List.

Multiple?Selects.

Select?box?manipulation.

Select?Combo?Plugin.

jQuery?–?LinkedSelect

Auto-populate?multiple?select?boxes.

Choose?Plugin?(Select?Replacement).

4:表單基本、輸入框、選擇框等jQuery插件

jQuery?Form?Plugin.

jQuery-Form.

jLook?Nice?Forms.

jNice.

Ping?Plugin.

Toggle?Form?Text.

ToggleVal.

jQuery?Field?Plugin.

jQuery?Form’n?Field?plugin.

jQuery?Checkbox?manipulation.

jTagging.

jQuery?labelcheck.

Overlabel.

3?state?radio?buttons.

ShiftCheckbox?jQuery?Plugin.

Watermark?Input.

jQuery?Checkbox?(checkboxes?with?imags).

jQuery?SpinButton?Control.

jQuery?Ajax?Form?Builder.

jQuery?Focus?Fields.

jQuery?Time?Entry.

5:時間、日期和顏色選取類jQuery插件

jQuery?UI?Datepicker.

jQuery?date?picker?plugin.

jQuery?Time?Picker.

Time?Picker.

ClickPick.

TimePicker.

Farbtastic?jQuery?Color?Picker?Plugin.

Color?Picker?by?intelliance.fr.

6:投票類jQuery插件

jQuery?Star?Rating?Plugin.

jQuery?Star?Rater.

Content?rater?with?asp.net,?ajax?and?jQuery.

Half-Star?Rating?Plugin.

7:搜索類jQuery插件

jQuery?Suggest.

jQuery?Autocomplete.

jQuery?Autocomplete?Mod.

jQuery?Autocomplete?by?AjaxDaddy.

jQuery?Autocomplete?Plugin?with?HTML?formatting.

jQuery?Autocompleter.

AutoCompleter?(Tutorial?with?PHPMySQL).

quick?Search?jQuery?Plugin.

8:jQuery編輯器插件

jTagEditor.

WYMeditor.

jQuery?jFrame.

Jeditable?–?edit?in?place?plugin?for?jQuery.

jQuery?editable.

jQuery?Disable?Text?Select?Plugin.

Edit?in?Place?with?Ajax?using?jQuery.

jQuery?Plugin?–?Another?In-Place?Editor.

TableEditor.

tEditable?–?in?place?table?editing?for?jQuery.

9:多媒體、視頻、Flash等類jQuery插件

jMedia?–?accessible?multi-media?embedding.

JBEdit?–?Ajax?online?Video?Editor.

jQuery?MP3?Plugin.

jQuery?Media?Plugin.

jQuery?Flash?Plugin.

Embed?QuickTime.

SVG?Integration.

圖片類jQuery插件

ThickBox.

jQuery?lightBox?plugin.

jQuery?Image?Strip.

jQuery?slideViewer.

jQuery?jqGalScroll?2.0.

jQuery?–?jqGalViewII.

jQuery?–?jqGalViewIII.

jQuery?Photo?Slider.

jQuery?Thumbs?–?easily?create?thumbnails.

jQuery?jQIR?Image?Replacement.

jCarousel?Lite.

jQPanView.

jCarousel.

Interface?Imagebox.

Image?Gallery?using?jQuery,?Interface??Reflactions.

simple?jQuery?Gallery.

jQuery?Gallery?Module.

EO?Gallery.

jQuery?ScrollShow.

jQuery?Cycle?Plugin.

jQuery?Flickr.

jQuery?Lazy?Load?Images?Plugin.

Zoomi?–?Zoomable?Thumbnails.

jQuery?Crop?–?crop?any?image?on?the?fly.

Image?Reflection.

10:Google地圖類jQuery插件應用

jQuery?Plugin?googlemaps.

jMaps?jQuery?Maps?Framework.

jQmaps.

jQuery??Google?Maps.

jQuery?Maps?Interface?forr?Google?and?Yahoo?maps.

jQuery?J?Maps?–?by?Tane?Piper.

11:游戲類jQuery插件

Tetris?with?jQuery.

jQuery?Chess.

Mad?Libs?Word?Game.

jQuery?Puzzle.

jQuery?Solar?System?(not?a?game?but?awesome?jQuery?Stuff).

12:表格,網格類jQuery插件

UI/Tablesorter.

jQuery?ingrid.

jQuery?Grid?Plugin.

Table?Filter?–?awesome!.

TableEditor.

jQuery?Tree?Tables.

Expandable?“Detail”?Table?Rows.

Sortable?Table?ColdFusion?Costum?Tag?with?jQuery?UI.

jQuery?Bubble.

TableSorter.

Scrollable?HTML?Table.

jQuery?column?Manager?Plugin.

jQuery?tableHover?Plugin.

jQuery?columnHover?Plugin.

jQuery?Grid.

TableSorter?plugin?for?jQuery.

tEditable?–?in?place?table?editing?for?jQuery.

jQuery?charToTable?Plugin.

jQuery?Grid?Column?Sizing.

jQuery?Grid?Row?Sizing.

13:統(tǒng)計類jQuery插件

jQuery?Wizard?Plugin?.

jQuery?Chart?Plugin.

Bar?Chart.

14:邊框、圓角、背景類jQuery插件

jQuery?Corner.

jQuery?Curvy?Corner.

Nifty?jQuery?Corner.

Transparent?Corners.

jQuery?Corner?Gallery.

Gradient?Plugin.

14:文字和超鏈接類jQuery插件

jQuery?Spoiler?plugin.

Text?Highlighting.

Disable?Text?Select?Plugin.

jQuery?Newsticker.

Auto?line-height?Plugin.

Textgrad?–?a?text?gradient?plugin.

LinkLook?–?a?link?thumbnail?preview.

pager?jQuery?Plugin.

shortKeys?jQuery?Plugin.

jQuery?Biggerlink.

jQuery?Ajax?Link?Checker.

15:文本提示類jQuery插件

jQuery?Plugin?–?Tooltip.

jTip?–?The?jQuery?Tool?Tip.

clueTip.

BetterTip.

Flash?Tooltips?using?jQuery.

ToolTip.

16:菜單和導航類jQuery插件

jQuery?Tabs?Plugin?–?awesome!?.?[demo?nested?tabs.]

another?jQuery?nested?Tab?Set?example?(based?on?jQuery?Tabs?Plugin).

jQuery?idTabs.

jdMenu?–?Hierarchical?Menu?Plugin?for?jQuery.

jQuery?SuckerFish?Style.

jQuery?Plugin?Treeview.

treeView?Basic.

FastFind?Menu.

Sliding?Menu.

Lava?Lamp?jQuery?Menu.

jQuery?iconDock.

jVariations?Control?Panel.

ContextMenu?plugin.

clickMenu.

CSS?Dock?Menu.

jQuery?Pop-up?Menu?Tutorial.

Sliding?Menu.

17:幻燈片、手風琴特效類jQuery插件

jQuery?Plugin?Accordion.

jQuery?Accordion?Plugin?Horizontal?Way.

haccordion?–?a?simple?horizontal?accordion?plugin?for?jQuery.

Horizontal?Accordion?by?portalzine.de.

HoverAccordion.

Accordion?Example?from?fmarcia.info.

jQuery?Accordion?Example.

jQuery?Demo?–?Expandable?Sidebar?Menu.

Sliding?Panels?for?jQuery.

jQuery?ToggleElements.

Coda?Slider.

jCarousel.

Accesible?News?Slider?Plugin.

Showing?and?Hiding?code?Examples.

jQuery?Easing?Plugin.

jQuery?Portlets.

AutoScroll.

Innerfade.

18:拖放類jQuery插件

UI/Draggables.

EasyDrag?jQuery?Plugin.

jQuery?Portlets.

jqDnR?–?drag,?drop?resize.

Drag?Demos.

19:XML?XSL?JSON?Feeds相關jQuery插件

XSLT?Plugin.

jQuery?Ajax?call?and?result?XML?parsing.

xmlObjectifier?–?Converts?XML?DOM?to?JSON.

jQuery?XSL?Transform.

jQuery?Taconite?–?multiple?Dom?updates.

RSS/ATOM?Feed?Parser?Plugin.

jQuery?Google?Feed?Plugin.

20:瀏覽器

Wresize?–?IE?Resize?event?Fix?Plugin.

jQuery?ifixpng.

jQuery?pngFix.

Link?Scrubber?–?removes?the?dotted?line?onfocus?from?links.

jQuery?Perciformes?–?the?entire?suckerfish?familly?under?one?roof.

Background?Iframe.

QinIE?–?for?proper?display?of?Q?tags?in?IE.

jQuery?Accessibility?Plugin.

jQuery?MouseWheel?Plugin.

21:警告,?提示,?確認等對話框

jQuery?Impromptu.

jQuery?Confirm?Plugin.

jqModal.

SimpleModal.

CSS

jQuery?Style?Switcher.

JSS?–?Javascript?StyleSheets.

jQuery?Rule?–?creation/manipulation?of?CSS?Rules.

jPrintArea.

22:DOM、AJAX和其它JQuery插件

FlyDOM.

jQuery?Dimenion?Plugin.

jQuery?Loggin.

Metadata?–?extract?metadata?from?classes,?attributes,?elements.

Super-tiny?Client-Side?Include?Javascript?jQuery?Plugin.

Undo?Made?Easy?with?Ajax.

JHeartbeat?–?periodically?poll?the?server.

Lazy?Load?Plugin.

Live?Query.

jQuery?Timers.

jQuery?Share?it?–?display?social?bookmarking?icons.

jQuery?serverCookieJar.

jQuery?autoSave.

jQuery?Puffer.

jQuery?iFrame?Plugin.

Cookie?Plugin?for?jQuery.

jQuery?Spy?–?awesome?plugin.

Effect?Delay?Trick.

jQuick?–?a?quick?tag?creator?for?jQuery..