jQuery Mobile 中如果同時使用data-role='slider'與 jquery -ui將會產生問題?

jquery mobile jquery-ui

peter_pan 2018-10-08 16:01:51 ‧ 2048 瀏覽

分享至

想要在jquery mobile的環境中使用data-role='slider'功能，
讓使用者可以做一些"是/否"的選擇。發現如果也同時使用引用jquery-ui.js(我是使用 src="https://code.jquery.com/ui/1.12.1/jquery-ui.js")，則功能圖案會整個跑掉

但是如果不使用jquery-ui.js，則功能圖案會又變正常

請問有人有任何方法可以同時使用jquery-ui.js，但又可以保持功能畫面正常嗎?


<!DOCTYPE html>
<html>
	<head>
		<title>回答是與否</title>
		<meta charset='utf-8'>
		<meta name='viewport' content='width=device-width, initial-scale=1'>
		<link rel="stylesheet"  href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
		<link rel="stylesheet"  href="http://code.jquery.com/mobile/1.4.2/jquery.mobile.icons-1.4.2.css" />
		<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
		 <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
		<link rel="stylesheet"  href="css/jqm-icon-pack-fa.css" />
		<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
		<!--<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>-->
		
	</head>
	<body>
		<div data-role='page'>	
			<div data-role='header'>
				
				<h1>回答是與否</h1>
					
			</div>
			<div data-role='content'>
				<form data-ajax='false' method='post' action=''>
				
				
				<div data-role="fieldcontain">
				<label for="slider">Select slider:</label>
					<select name="slider" id="slider" data-role="slider">
						<option value="off">Off</option>
						<option value="on">On</option>
					</select> 
				</div>
				
			</div>
		</div>
	</body>
</html>

marlin12 iT邦研究生 5 級 ‧ 2018-10-09 21:32:26 檢舉

最好不要把jquery-ui和jquery-mobile用在一起，會產生衝突的。
如果必需要用到jquery-ui的某些功能，就用jquery-ui的download builder去把這些功能抽出來用。

https://jqueryui.com/download/

peter_pan iT邦新手 5 級 ‧ 2018-10-10 07:57:29 檢舉

之前也曾經想過，魚與熊掌是否難以兼得，但是每有問題總是有iT邦的先知解惑，所以就一直得過且過下去。但看來是該想清楚不能再這樣下去了....謝謝您的意見，讓我來試試量身訂做的jquery-ui該如何使用! :)

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

跟著鄉民看熱鬧

iT邦高手 1 級 ‧ 2018-10-08 17:39:10

最佳解答

反過來？

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

回應 3
分享
檢舉

peter_pan iT邦新手 5 級 ‧ 2018-10-08 21:02:58 檢舉

沒想到這樣就解決了困擾已久的問題!實在太強了!
請問能告訴我原因到底為何嗎?

跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-10-09 09:01:30 檢舉

只是剛好你的問題不用打太多字而已… 太懶了…
離強還有一大段距離，請叫我小強…
原因沒什麼特別的，會寫js套件的人大概知道套件會有衝突問題，
基本上會盡可能避免，只是同性質的套件還是有可能衝突，
反過來可以只是剛好你放反了，ui的套件是比mobile更早期的套件，
後期的套件才知道怎麼避免跟前期套件衝突，
前期套件要避免就只有完全用客制的屬性（但css一般是共用的），
或是通靈了？