jQuery UI基礎學習(1)

2021-07-14 19:21:21 字數 3458 閱讀 6089

使用時需要引入:

src="js/jquery.min.js">

script>

src="js/jquery-ui.min.js">

script>

script>

type="text/css"

href="css/jquery-ui.min.css"

rel="stylesheet">

jquery-ui demo1:

index.html

lang="en">

charset="utf-8">

title>

src="js/jquery.min.js">

script>

src="js/jquery-ui.min.js">

script>

script>

type="text/css"

href="css/jquery-ui.min.css"

rel="stylesheet">

head>

href=""

id="a_btn">***許願a>

style="width: 100px;height: 100px;border: 2px solid red;"

id="div">

div>

body>

html>

$(document).ready(function

());

效果圖:

jquery-ui demo2:

index2.html

lang="en">

charset="utf-8">

title>

src="js/jquery.min.js">

script>

src="js/jquery-ui.min.js">

script>

script>

type="text/css"

href="css/jquery-ui.min.css"

rel="stylesheet">

head>

style="width: 100px;height: 100px;border: 2px solid red;"

id="div">

div>

style="width: 200px;height: 200px;border: 2px solid green;"

id="div2">

div>

body>

html>

$(document).ready(function

());

});

效果:

jquery ui demo3( 可拖動大小的div)

index3.html

lang="en">

charset="utf-8">

title>

src="js/jquery.min.js">

script>

src="js/jquery-ui.min.js">

script>

script>

type="text/css"

href="css/jquery-ui.min.css"

rel="stylesheet">

head>

style="width: 200px;height: 200px;background-color: #007fff;"

id="div">

div>

body>

html>

$(document).ready(function

());

效果圖:

jquery ui demo4(selectable)

index4.html

lang="en">

charset="utf-8">

title>

src="js/jquery.min.js">

script>

src="js/jquery-ui.min.js">

script>

script>

type="text/css"

href="css/jquery-ui.min.css"

rel="stylesheet">

type="text/css">

.ui-selected

style>

head>

誰長的最好看?strong>

id="select">

id="right">我li>

是我li>

還是我li>

ui>

href="#"

id="btn">提交a>

body>

html>

/**

* created by rayootech on 16/7/12.

*/$(document).ready(function

() });

});

jquery ui demo5(可拖動排序)

index5.html

lang="en">

charset="utf-8">

title>

src="js/jquery.min.js">

script>

src="js/jquery-ui.min.js">

script>

script>

type="text/css"

href="css/jquery-ui.min.css"

rel="stylesheet">

head>

誰長的最好看?strong>

id="sort">

我li>

是我li>

還是我li>

ui>

body>

html>

/**

* created by rayootech on 16/7/12.

*/$(document).ready(function() );

基礎學習1

ctrl 1 標題1 ctrl 2 標題2 快捷鍵 1 ctrl 1 2 3 4 5 6 2 標題 enter ctrl shift i div 語言名字 html enter css enter 列表資料 enter 小黑點 子項資料 enter 空心圓 快捷方式 a b c d enter 姓名...

Xml 學習 1 基礎

xml 學習 1 1.可擴充套件標記語言 xml,名為標記語言,但它本身不是標記語言,而是用於建立標記語言的一套規則,是一種元語言。xml允許開發人員定義自己的標籤 2.xml 的文擋結構 文擋結構 computer bill 5 上面文擋中包含三個部分 xml 宣告,說明使用的版本號 文擋注釋 文...

c 基礎學習1

c 的類中只能第一方法 屬性和成員 所有可執行語句都必須要寫在方法中。引數型別和資料不同都算方法的過載。識別符號 首字元後續字元 允許 a z,a z,a z,a z,0 9 不允許 0 9 關鍵字 不能用於識別符號 c 關鍵字都小寫 net型別名用pascal大小寫約定,上下文關鍵字可在 其他部分...