您的位置: 首页  >  IT文章  >  銆愮炕璇戙€慞art 四 - FlickrView: Implementing SettingsView

銆愮炕璇戙€慞art 四 - FlickrView: Implementing SettingsView

分类: IT文章 • 2024-10-15 08:46:55
銆愮炕璇戙€慞art 4 - FlickrView: Implementing SettingsView
鑻辨枃鍘熼摼鎺ワ細http://dojotoolkit.org/documentation/tutorials/1.9/mobile/flickrview/part4/
涓婁竴绡囷紝FlickerView: Implementing FeedView,鎴戜滑瀹炵幇浜咶eed view锛屽苟涓斾娇鐢↗SON璇锋眰鍥炴潵鐨勬暟鎹洿鏂癝crollableView銆傝繖涓€绡囨垜浠叧娉⊿ettings view濡備綍澶勭悊鍚勭杈撳叆灏忛儴浠讹紙TextBox,Switch,RadioButton锛夌殑get鍜宻et浠ュ強浣跨敤璺宠浆浜嬩欢銆?
SettingsView灞炴€?/strong>
鎴戜滑鍙渶瑕佷繚鐣欎竴浜涘皬閮ㄤ欢寮曠敤锛屼互鍙婂綋鍓嶈瑷€閫夋嫨銆?
return declare([ScrollableView], {
    feedView: '',
    tagInput: '',
    selectSwitch: '',
    selectedLanguage: '',
//...

SettingsView鍚姩
璺熸垜浠湪FeedView鍚姩鏂规硶鍋氱殑涓€鏍凤細璋冪敤鐖舵柟娉曞拰鍒濆鍖栧睘鎬?
startup: function () {
    this.inherited(arguments);
    this.feedView = registry.byId("feed");
    this.tagInput = registry.byId("tags");
    this.selectSwitch = registry.byId("select");
    // ...
}

鍚屾椂澧炲姞涓€浜涙湁鐢ㄧ殑getters鍜宻etters鏂规硶锛?
setTags: function (tags) {
    this.tagInput.set('value', tags);
},
getTags: function () {
    return this.tagInput.get('value');
},
setTagMode: function (tagmode) {
    this.selectSwitch.set('value', (tagmode === "all") ? "on" : "off");
},
getTagMode: function () {
    return (this.selectSwitch.get('value') === "on") ? "all" : "any";
}

dojox/mobile/switch鏈変袱涓姸鎬侊細on鍜宱ff.鎴戜滑鍑嗗灏咥LL璁剧疆瀵瑰簲on鐘舵€侊紝ANY瀵瑰簲off鐘舵€併€?/span>
缁х画鍚姩鏂规硶锛屾垜浠垱寤轰竴涓柟娉曪紝褰撶敤鎴风偣鍑诲崟閫夐」鏃讹紝淇濈暀閫変腑鐨勮瑷€銆俤ojo/on鐨勮繖涓己澶х壒鎬у彲浠ュ疄鐜拌繖涓姛鑳斤細even delegation with selector.
// handler to record the selected feed language
this.on("[name=feedLanguage]:click", lang.hitch(this, function (e) {
    this.selectedLanguage = e.target.value;
}));

鎺ヤ笅鏉ュ仛浠€涔堬紵
娣诲姞Done鎸夐挳鐨勫鐞嗘柟娉曪細
  • 缂栫▼瀹炵幇杞崲鍥濬eed View
  • 濡傛灉鐢ㄦ埛淇敼鑷冲皯涓€涓缃椂锛屽己鍒跺埛鏂拌鍥?

// handler to update search query parameters when done button is selected
registry.byId("doneButton").on("click", lang.hitch(this, function () {
    // we are done with the settings: transition to FeedView
    this.performTransition("feed");
    // check if anything changed in the setting view
    if (this.getTags() !== flickrview.QUERY.tags ||
        this.getTagMode() !== flickrview.QUERY.tagmode ||
        this.selectedLanguage !== flickrview.QUERY.lang) {
        // update QUERY
        flickrview.QUERY.tags = this.getTags();
        flickrview.QUERY.tagmode = this.getTagMode();
        flickrview.QUERY.lang = this.selectedLanguage;
        // force FeedView list refresh
        this.feedView.refresh()
    }
}));

鍥犱负缂栫▼瀹炵幇鐨勮浆鎹紝鎵€浠ヨ鍏虫帀灏忛儴浠惰嚜韬殑鑷姩杞崲鍔熻兘锛屼娇鐢?moveTo:'#'
<!-- Settings view -->
<div id="settings"
    data-dojo-type="flickrview/SettingsView">
    <div data-dojo-type="dojox/mobile/Heading"
    data-dojo-props="fixed: 'top', label: 'Settings'">
        <span data-dojo-type="dojox/mobile/ToolBarButton"
            id="doneButton"
            data-dojo-props="label:'Done', moveTo:'#', transition:'none'" style="float:right;"></span>

鏈€鍚庝竴姝ュ氨瀹屾垚浜嗭紒
鍝嶅簲杞崲浜嬩欢
Dojo Mobile鎻愪緵涓€缁?a target="_blank" href="http://dojotoolkit.org/reference-guide/dojox/mobile/transition-events.html">杞崲鐩稿叧鐨勪簨浠?/a>锛岃繕鍦ㄥ湪鍚姩鏂规硶涓紝鎴戜滑璁剧疆浜嬩欢beforeTransitionIn鐨勫鐞嗘柟娉曪紝鍦ㄨ浆鎹㈠埌璁剧疆瑙嗗浘鏃跺緱鍒伴€氱煡銆?
// handler to get notified before a transition to the current view starts
this.on("beforeTransitionIn", lang.hitch(this, function () {
    this.setTags(flickrview.QUERY.tags);
    this.setTagMode(flickrview.QUERY.tagmode);
    this.selectedLanguage = flickrview.QUERY.lang;
    registry.byId(this.selectedLanguage).set('checked', true);
}));

鍦ㄨ繖涓鐞嗘柟娉曚腑锛屾垜浠洿鏂拌缃鍥句笂鐨勮緭鍏ュ皬閮ㄤ欢锛屼粠QUERY瀵硅薄鍙栧埌鐪熷疄鐨勫€笺€?
娓呯悊浠ｇ爜
杩欎釜鏁欑▼鐨勫墠闈㈤儴鍒嗭紝鎴戜滑棣栧厛鍒涘缓浜嗕竴涓ā鍨嬪簲鐢紝杩欐槸涓€涓渶浣冲疄璺碉紝浠庢ā鍨嬪紑濮嬪彲浠ュ揩閫熷拰绠€渚垮湴寰楀埌鐢ㄦ埛浣撻獙銆?
绉婚櫎HTML涓殑妯″瀷浠ｇ爜
鐜板湪鎴戜滑鐨勫簲鐢ㄥ凡缁忓畬鎴愶紝鎵€浠ュ彲浠ョЩ闄ゆ墍鏈夌殑闈欐€佹ā鍨嬩唬鐮佷簡銆傝繖鏍峰彲浠ュ噺灏戜唬鐮侀噺鍜屽緱鍒版暣娲佺殑浠ｇ爜銆?
  • FeedView锛氱Щ闄ゅ垪琛ㄩ」銆?
  • DetailView锛氱Щ闄ら潤鎬佹弿杩般€?

绉婚櫎闃绘缂撳瓨鐨勫厓鏍囩
绉婚櫎寮€鍙戞椂浣跨敤鐨勯樆姝㈢紦瀛樻爣绛撅紝璁╁簲鐢ㄥ厑璁哥紦瀛樺埌璁惧銆?
<!-- prevent cache -->
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">

浣犳垚鍔熶簡锛?/strong>
绁濊春锛佷綘宸茬粡寮€鍙戝畬鎴愪竴涓畬鏁寸殑Dojo Mobile搴旂敤绋嬪簭锛屼笅涓€绡囷紙鏈暀绋嬫渶鍚庝竴绡囷級灏嗗憡璇変綘鎬庝箞灏嗗簲鐢ㄤ骇鍝佸寲銆?
View Demo
涓嬭浇婧愮爜
涓嬭浇 Part 4 - FlickrView: Implementing SettingsView.


============================================
Part 4 END
next Part 5 - Build FlickrView for production

相关推荐