jqury mobile的缺点

1 jq的a和input按钮的样式不一致。button和submit类型的按钮样式不一致。导致同一行的按钮高低不一致要自己手动修改。
2 a按钮由jq初始化后,外套了div,但是div没有继承a的class或id,而a标签又被隐藏了,这样就无法直接选择到该按钮,必须通过父元素获取子元素的方式设置css或js
3 jqm的页面跳转默认采用当前页面加载目标页面html和js,cas的方式,这样容易出现错误并且难以调试,增加了页面间的耦合。而且这个坑还不容易发现。
4 jquery mobile的panel功能。在<a>标签中定义了href="#right-panel",打开panel但是不会更改url为xxx#right-panel。这样就没法做router事件来定义路由功能。只能手动更改url为xxx#right-panel。然后再用路由来实现路由功能。
这种更改了html本身功能的做法,实在是很操蛋啊。
设置了url的hash后。close panel要清空hash可调用
location.hash = $.mobile.path.makeUrlAbsolute();清空。

5 若form的元素是动态用js生成的,则需要调用create函数生成,但是不支持直接使用.textinput("create"),而必须这样写
$("#pushTime").textinput({"create":function(){}});

很古怪的感觉

若是生成datebox就更奇怪了,因为datebox也是个input元素,所以必须先初始化input再初始化datebox。如下xiefa
function initPushTime() {
		var timeContainer = $("#timeContainer");
		var timespinnerHtml = "<input type=\"date\" name=\"pushTime\" id=\"pushTime\"  data-role=\"datebox\" placeholder=\"推送時間\" " +
			" class=\"required\" 	data-options='{\"mode\": \"timebox\", \"overrideTimeFormat\": 24}' readonly=\"readonly\"/>";
		timeContainer.append(timespinnerHtml);
		$("#pushTime").textinput({"create":function(){}});
		$("#pushTime").datebox();
	}


若是执行了destroy后,还会留下一堆html元素,还得手动处理掉这些剩余的html元素。
用起来真是很恶心。
执行$("#pushDate").datebox("destroy");
还有一堆
<div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-b"><div class="ui-input-datebox ui-corner-all ui-body-b" style="border: medium none;"><input type="date" readonly="readonly" data-options="{&quot;mode&quot;: &quot;calbox&quot;, &quot;overrideCalStartDay&quot;: 1, &quot;overrideDateFormat&quot;:&quot;%d-%m-%Y&quot;, &quot;usePlaceholder&quot;:true}" class="required ui-input-text ui-body-b" placeholder="推送日期" data-role="datebox" id="pushDate" name="pushDate"><a title="Open Date Picker" class="ui-input-clear ui-btn ui-btn-up-b ui-shadow ui-btn-corner-all ui-btn-icon-notext" href="#" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="grid" data-iconpos="notext" data-theme="b" style="vertical-align: middle; display: inline-block;"><span class="ui-btn-inner"><span class="ui-btn-text">Open Date Picker</span><span class="ui-icon ui-icon-grid ui-icon-shadow">&nbsp;</span></span></a></div></div>

你可能感兴趣的:(mobile)